Some more CSS

CSS pseudo-classes

Pseudo-classes let a stylesheet rule narrow its range Format of usage: selector:pseudo-class {property:value;} selector.class:pseudo-class {property:value;} List of CSS pseudo-classes :link Example selector a:link Selects all unvisited links :visited Example selector a:visited Selects all visited links :active Example selector a:active Selects the active link :hover Example selector a:hover Selects links on mouse over :focus Example selector input:focus Selects the input element which has focus :first-letter Example selector p:first-letter Selects the first letter of every element :first-line Example selector p:first-line Selects the first line of every element :first-child Example selector p:first-child Selects every elements that is the first child of its parent :before Example selector p:before Insert content before every element :after Example selector p:after Insert content after every element :lang(language) Example selector p:lang(de) Selects every element with a lang attribute value starting with "de"

Pseudo-class examples The stylesheet below would display hotlinks which the user has already visited in red, unvisited in blue, and so on a:link {color:blue;} a:visited {color:red;} a:hover {color:purple;} a:active {color:pink;}

Pseudo-class examples (contd.) Effect of :active in the stylesheet below –if the user clicks and holds the mouse on the hotlink, its background turns green –if the user clicks and hold the mouse on the div, its background turns green Animation example a:active { background-color:green} div:active { background-color:yellow} This is a link Hello

Pseudo-class examples (contd.) The stylesheet below would display the first paragraph in white on a green background p:first-child { background-color:green;color:white; } This is a paragraph. This is another paragraph.

Pseudo-class examples (contd.) The stylesheet below would display the words "Some text in German" in green span:lang(de) {color: green; } Here is Some text in French, so it is. Here is Some text in German, so it is.

Pseudo-class examples (contd.) The stylesheet below would display the text "Read this: " on an orange background before each paragraph p:before { content : "Read this: "; background-color:orange } This is a paragraph. This is another paragraph.

CSS at-rules

CSS at-rules are so-called because an at-rule starts with character An at-rule does not specify a styling property Instead, an at-rule is an instruction to the CSS engine An at-rule can be used to –import one stylesheet into another –specify the character encoding of an external stylesheet –target style specifications at certain media –specify margins for paged media –specify custom fonts –declare an XML namespace, so that elements from different namespaces can have different style specifications –animate CSS properties

rule This was introduced in CSS1 It is used to import one stylesheet into another Basic { URI | string }; "local.css";

CSS names for media types CSS allows us to specify different styles for display on different media The following names can be used to specify different media all - all devices braille - braille tactile feedback devices embossed - paged braille printers handheld - handheld devices (typically small screen, limited bandwidth) print - paged material and for documents viewed on screen in print preview mode projection - presentations on projectors screen - colour computer screens speech - speech synthesizers tty - media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities) tv - television-type devices (low resolution, colour, limited-scrollability screens, sound available)

CSS names for media groups On the previous slide, the explanation of the print media type referred to the concept of "paged" media CSS explanations often distinguish between media types on the basis of whether the media types are continuous or paged visual, audio, speech, or tactile. grid (character grid devices) or bitmap interactive (devices that allow user interaction) or static (those that do not)

rule rules can be targeted at specific media { URI | string } mediaType1, mediaType2,… ; url("/css/screen.css") screen, url("/css/mobile.css") handheld;

rule This was introduced in CSS2 It is used to target style specifications at certain media mediaType1,mediaType2, … {styleSpecifications} screen { body {width: 1200;} handheld { body {width: 400;} }

rule You should rarely, if ever, need to use this rule, which was introduced in CSS2 It is used in external stylesheets to declare the character encoding of the file –For this reason, it must be the very first thing in the file "encoding"; "ISO ";

rule Used to specify margin widths for the page box in stylesheets for paged media such as the print media type Introduced in CSS2 [ { :left | :right | :first } ] { marginSpecifications } { margin: 2.5cm; :left { margin-left: 5cm; :right { margin-right: 5cm; :first { margin-top: 8cm; }

rule Used to define custom fonts Introduced in CSS2 { fontDescriptors } Reference:

rule Used to declares an XML namespace and, optionally, a prefix, so that tag names in different namespaces can have different style specifications Introduced in CSS3 [ prefix ] URI; shop " shop|item { color:red } The stylesheet above would cause the item element below to appear in red because the namespaces match … Note use of the pipe symbol above - the colon character was already used in stylesheets, for pseudo-classes

rule rules must –follow rules, and –precede all other at-rules and style specifications in a stylesheet The scope of rule is the stylesheet in which it appears –the scope does not include imported style sheets If rule does not include a prefix, the rule defines the default namespace

rule rule is used to animate CSS properties We will examine it later

Browser rendering engines and their vendor-specific prefixes

Browser rendering engines WebKit is an open-source layout engine which is used in Google Chrome and Apple Safari Gecko is an open-source layout engine which is used in Firefox Presto is a proprietary layout engine which is used in Opera Trident (also known as MSHTML) is a proprietary layout engine which is used in Opera

Vendor-specific CSS property prefixes When layout engines develop their own implementation of almost- standardized CSS property specifications, they often prefix the property name with an identifying label WebKit uses the -webkit- prefix Gecko uses the -moz- prefix Presto uses the -o- prefix Trident (MSHTML) uses the -ms- prefix Thus, for example, at the moment, the safest way to use a new property called transform is as shown in the following example: div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ -o-transform: translate(50px,100px); /* Opera */ -moz-transform: translate(50px,100px); /* Firefox */ } A list of prefixed properties:

CSS transforms

CSS 2D transforms 2D transformations in CSS rely on two new properties: transform transform-origin Example use of the transform property - rotation div { width:200px; height:100px; background-color:red; transform:rotate(-15deg); -moz-transform:rotate(-15deg); /* Firefox */ -webkit-transform:rotate(-15deg); /* Chrome, Safari */ -ms-transform:rotate(-15deg); /* IE9 */ -o-transform:rotate(-15deg); /* Opera */ } Hello

CSS 2D transformation functions rotate( ) - spec ifies rotation by the angle given translateX( ) –specifies a translation by the given amount in the X direction translateY( ) –specifies a translation by the given amount in the Y direction translate( [, ]) - specifies translation by the vector [trX,trY]; if tY is not given, zero is used scale( [, ]) - specifies scaling by the [sx,sy] scaling vector; if second parameter not given, a value equal to the first is used scaleX( ) - specifies by the [sx,1] scaling vector scaleY( ) - specifies by the [1,sY] scaling vector skewX( ) - specifies skewing along X axis by given angle skewY( ) - specifies skewing along Y axis by given angle matrix(,,,,, ) - specifies application of the transformation matrix [n1,n2,n3,n4,n5,n6] Reference:

Using a list of CSS 2D transformations A list of transformation can be specified, for example div {width:200px; height:100px; background-color:red; transform:rotate(-15deg) translateX(300px); -moz-transform:rotate(-15deg) translateX(300px); -webkit-transform:rotate(-15deg) translateX(300px); -ms-transform:rotate(-15deg) translateX(300px); -o-transform:rotate(-15deg) translateX(300px); } Hello

The transform-origin property - example usage div { width:200px; height:100px; background-color:red; transform:rotate(-15deg); -moz-transform:rotate(-15deg);-webkit-transform:rotate(-15deg); -ms-transform:rotate(-15deg);-o-transform:rotate(-15deg); } This is a paragraph Hello div { width:200px; height:100px; background-color:red; transform-origin:top left; -moz-transform-origin:top left;-webkit-transform-origin:top left; -ms-transform-origin:top left; -o-transform-origin:top left; transform:rotate(-15deg); -moz-transform:rotate(-15deg);-webkit-transform:rotate(-15deg); -ms-transform:rotate(-15deg);-o-transform:rotate(-15deg); } This is a paragraph Hello

The transform-origin property The initial transform-origin for an element is at its centre We can change this by specifying the following values for the CSS property: [ top | bottom ] | [ | | left | center | right ] [ | | top | center | bottom ]? | [ center | [ left | right ] [ | ]? ] && [ center | [ top | bottom ] [ | ]? ] If only one value is specified, second is assumed to be ‘center’ If two values are given and at least one is not a keyword, then first value represents horizontal position (or offset) and second represents vertical position (or offset) a or value represents an offset of the transform origin from the top left corner of the element's border box. If three or four values are given, then each or represents an offset and must be preceded by a keyword, which specifies from which edge the offset is given. Example: transform-origin: bottom 10px right 20px represents a 10px vertical offset up from the bottom edge and a ‘20px’ horizontal offset leftward from the right edge If three values are given, the missing offset is assumed to be zero. Positive values represent an offset inward from the edge of the border box. Negative values represent an offset outward from the edge of the border box.

CSS Transitions

CSS transitions CSS transitions provide a way to achieve simple animations of CSS properties Reference: We will consider CSS transitions now Later, we will consider more sophisticated CSS animations using rule

CSS response to user actions The stylesheet below will cause a sharp change of style for the div element when the user holds his mouse over it div { width:200px; background-color:pink; font-size:10 } div:hover { width:400px; background-color:yellow; font-size:100 } This is a paragraph. Hello

Gradual change in response to user actions These two CSS properties allow use to specify gradual responses to user actions: transition-property transition-duration However, since the browser implementations still appear to be experimental/tentative, we must use vendor- specific prefixes

Gradual change in response to user actions (contd.) The stylesheet below will cause a gradual transition in style for the div element when the user holds his mouse over it div { width:200px; height:180px; background-color:pink; font-size:10; transition-property: width, background-color, font-size; transition-duration: 15s, 15s, 15s; -moz-transition-property: width, font-size;-moz-transition-duration: 15s, 15s, 15s; -ms-transition-property: width, font-size;-ms-transition-duration: 15s, 15s, 15s; -webkit-transition-property: width, font-size;-webkit-transition-duration: 15s, 15s, 15s; -o-transition-property: width, font-size;-o-transition-duration: 15s, 15s, 15s; } div:hover { width:400px; background-color:yellow; font-size:100 } This is a paragraph. Hello

Varying transition speed Normally, the speed of a transition is uniform between the start and finish of the transition Using the transition-timing-function property, we can vary the speed Browser implementations of this property still have vendor-specific prefixes transition-timing-function: …; -moz-transition-timing-function: …; /* Firefox 4 */ -webkit-transition-timing-function: …; /* Safari and Chrome */ -o-transition-timing-function: …; /* Opera */ -ms-transition-timing-function: …; /* 9 */

Values of the transition-timing-function property linear – specifies that a transition has the same speed from start to end, ease – specifies that a transition starts slowly, then speeds up but finishes slowly ease-in – specifies that a transition starts slowly ease-out – specifies that a transition ends slowly ease-in-out – specifies that a transition starts and ends slowly cubic-bezier(x1,y1,x2,y2) - see next slide

Values of transition-timing-function property (contd.) cubic-bezier(x1,y1,x2,y2) specifies that the speed of a transition varies along a cubic bezier curve, where the x axis is time and the y axis is the delta in the property being changed the start and end points of the bezier curve are fixed (0,0), start, change = 0 (1,1) - end, change = 100% of delta the four arguments are the x and y coordinates of the two control points for the cubic bezier curve linear is equivalent to cubic-bezier(0,0,1,1) ease is equivalent to cubic-bezier(0.25,0.1,0.25,1) ease-in is equivalent to cubic-bezier(0.42,0,1,1) ease-out – is equivalent to cubic-bezier(0,0,0.58,1) ease-out –is equivalent to cubic-bezier(0.42,0,0.58,1) An interactive utility for checking bezier values: (needs a modern browser)

transition-timing-function - example The transition in the stylesheet below will start very slowly and then accelerate towards the end See it in action at div { height: 180px; width:200px; background-color:pink; font-size:10; transition-property: width, background-color, font-size; transition-duration: 15s, 15s; transition-timing-function: cubic-bezier(.97,.01,.98,.05); -moz-transition-property: width, background-color, font-size;-moz-transition-duration: 15s, 15s; -moz-transition-timing-function: cubic-bezier(.97,.01,.98,.05); -o-transition-property: width, background-color, font-size;-o-transition-duration: 15s, 15s; -o-transition-timing-function: cubic-bezier(.97,.01,.98,.05); -ms-transition-property: width, background-color, font-size;-ms-transition-duration: 15s, 15s; -ms-transition-timing-function: cubic-bezier(.97,.01,.98,.05); -webkit-transition-property: width, background-color, font-size;-webkit-transition-duration: 15s, 15s; -webkit-transition-timing-function: cubic-bezier(.97,.01,.98,.05); } div:hover { width:400px; background-color:yellow; font-size:100;} This is a paragraph. Hello

Transitions can control transforms as well as styles This example is at The transform and three style properties transition gradually, over 15 secs, when the mouse is held over the initial position of the div element div { height: 180px; width:200px; background-color:pink; font-size:10; transition-property: transform, font-size, background-color, width; transition-duration: 15s, 15s, 15s,15s; -moz-transition-property: -moz-transform, font-size; background-color, width;-moz-transition-duration: 15s, 15s, 15s, 15s;-o-transition-property: -o-transform, font-size; background-color, width;-o-transition-duration: 15s, 15s, 15s, 15s;-ms-transition-property: -ms-transform, font-size; background-color, width;-ms-transition-duration: 15s, 15s, 15s, 15s;-webkit-transition- property: -webkit-transform, font-size; background-color, width; -webkit-transition-duration: 15s, 15s, 15s, 15s; } div:hover { width:400px; background-color:yellow; font-size:100 ; transform-origin:top left ; transform:rotate(-15deg ); -moz-transform-origin:top left;-webkit-transform-origin:top left;-ms-transform-origin:top left;-o-transform-origin:top left;-moz-transform:rotate(-15deg);-webkit-transform:rotate(-15deg);-ms- transform:rotate(-15deg); -o-transform:rotate(-15deg);} This is a paragraph. Hello

The transition-delay property The stylesheet below will cause a delayed style transition for the div element when the user holds his mouse over it Check it out at p {width:200px;color:red} div { height: 180px; width:200px; background-color:pink; font-size:40; transition-property: width; transition-duration: 15s; transition-delay: 10s; -moz-transition-property: width;-moz-transition-duration: 15s;-moz-transition-delay: 10s;-ms-transition-property: width;-ms-transition-duration: 15s;-ms-transition-delay: 10s;-o-transition-property: width;-o-transition-duration: 15s;-o-transition-delay: 10s;-webkit-transition-property: width;-webkit-transition-duration: 15s;-webkit-transition- delay: 10s; } div:hover { width:400px;} Transition delay Note that, if you hover your mouse over the pink box below, the transition will not start for 10 seconds and will then last for 15 seconds Hello A transition-delay can have a negative value Example: if the delay above were -10s, the transition would start immediately, the box having a width as if the transition has started 10s before, and would then spend 5s more to finish the width change