Some more CSS. CSS pseudo-classes Pseudo-classes let a stylesheet rule narrow its range Format of...
41
Some more CSS
Transcript of Some more CSS. CSS pseudo-classes Pseudo-classes let a stylesheet rule narrow its range Format of...
Some more CSS
CSS pseudo-classes
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 <p> element
:first-line Example selector p:first-line Selects the first line of every <p> element
:first-child Example selector p:first-child Selects every <p> elements that is the first child of its parent
:before Example selector p:before Insert content before every <p> element
:after Example selector p:after Insert content after every <p> element
:lang(language) Example selector p:lang(de) Selects every <p> 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
<style>
a:link {color:blue;}
a:visited {color:red;} a:hover {color:purple;}
a:active {color:pink;}
</style>
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
<!DOCTYPE HTML>
<html><head><meta charset="utf-8">
<title>Animation example</title>
<style>
a:active { background-color:green}
div:active { background-color:yellow}
</style></head>
<body>
<a href="a.html">This is a link</a>
<div> Hello </div>
</body>
</html>
Pseudo-class examples (contd.)
• The stylesheet below would display the first paragraph in white on a green background
<html><head>
<style>p:first-child { background-color:green;color:white; } </style></head>
<body><p>This is a paragraph.</p><p>This is another paragraph.</p></body></html>
Pseudo-class examples (contd.)• The stylesheet below would display the words "Some text in
German" in green
<html>
<head>
<style type="text/css">
span:lang(de) {color: green; }
</style>
</head>
<body>
<p>Here is <span lang="fr">Some text in French</span>, so it is.</p>
<p>Here is <span lang="de">Some text in German</span>, so it is.</p>
</body>
</html>
Pseudo-class examples (contd.)
• The stylesheet below would display the text "Read this: " on an orange background before each paragraph
<html>
<head>
<style>
p:before { content : "Read this: "; background-color:orange }
</style>
</head>
<body>
<p> This is a paragraph. </p>
<p> This is another paragraph. </p>
</body>
</html>
CSS at-rules
CSS at-rules
• CSS at-rules are so-called because an at-rule starts with the @ 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
The @import rule• This was introduced in CSS1• It is used to import one stylesheet into another• Basic format
@import { URI | string };
• Examples:
@import url("http://www.abc.com/css/livery.css");
@import url("/livery.css");
@import "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)
The @import rule (continued)
• @import rules can be targeted at specific media• Format:
@import { URI | string } mediaType1, mediaType2,… ;
• Example:
<style>
@import url("/css/screen.css") screen, projection; @import url("/css/mobile.css") handheld;
</style>
The @media rule
• This was introduced in CSS2• It is used to target style specifications at certain media• Format:
@media mediaType1,mediaType2, … {styleSpecifications}
• Example:
<style>
@media screen {
body {width: 1200;}
}
@media handheld {
body {width: 400;}
}
</style>
The @charset 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
• Format:
@charset "encoding";• Example:
@charset "ISO-8859-15";
The @page rule
• Used to specify margin widths for the page box in stylesheets for paged media such as the print media type
• Introduced in CSS2• Format:
@page [ { :left | :right | :first } ] { marginSpecifications }
• Examples:
@page { margin: 2.5cm; }
@page :left { margin-left: 5cm; }
@page :right { margin-right: 5cm; }
@page :first { margin-top: 8cm; }
The @font-face rule
• Used to define custom fonts • Introduced in CSS2• Format:
@font-face { fontDescriptors }• Reference:
http://www.w3.org/TR/css3-webfonts/
The @namespace 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• Format:
@namespace [ prefix ] URI;• Examples:
@namespace "http://www.w3.org/1999/xhtml";
@namespace shop "http://abc.com/shopLanguage";
shop|item { color:red } • The stylesheet above would cause the item element below to appear
in red because the namespaces match<contents xmlns:xyz="http://abc.com/shopLanguage">
<xyz:item>…</xyz:item>
</contents>
• Note use of the pipe symbol above - the colon character was already used in stylesheets, for pseudo-classes
The @namespace rule (contd.)
• @namespace rules must – follow all @charset and @import rules, and– precede all other at-rules and style specifications in a
stylesheet• The scope of an @namespace rule is the stylesheet in
which it appears– the scope does not include imported style sheets
• If a @namespace rule does not include a prefix, the rule defines the default namespace
The @keyframes rule
• The @keyframes 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
http://www.webkit.org/• Gecko is an open-source layout engine which is used in Firefox
https://wiki.mozilla.org/Gecko:Home_Page• Presto is a proprietary layout engine which is used in Opera
http://www.opera.com/docs/specs/• Trident (also known as MSHTML) is a proprietary layout engine
which is used in Opera
http://www.opera.com/docs/specs/
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: http://peter.sh/experiments/vendor-prefixed-css-property-overview/
CSS transforms
CSS 2D transforms• 2D transformations in CSS rely on two new properties:
transform
transform-origin
• Example use of the transform property - rotation<html>
<head>
<style>
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 */ }
</style>
</head>
<body>
<br><br><br> <div>Hello</div>
</body>
</html>
CSS 2D transformation functions
• rotate(<angle>) - specifies rotation by the angle given• translateX(<translation-value>)
– specifies a translation by the given amount in the X direction
• translateY(<translation-value>)
– specifies a translation by the given amount in the Y direction
• translate(<tX>[, <trY>]) - specifies translation by the vector [trX,trY]; if tY is not given, zero is used
• scale(<sX>[, <sY>]) - specifies scaling by the [sx,sy] scaling vector; if second parameter not given, a value equal to the first is used
• scaleX(<sX>) - specifies by the [sx,1] scaling vector• scaleY(<sY>) - specifies by the [1,sY] scaling vector• skewX(<angle>) - specifies skewing along X axis by given angle• skewY(<angle>) - specifies skewing along Y axis by given angle• matrix(<n1>, <n2>, <n3>, <n4>, <n5>, <n6>) - specifies application of
the transformation matrix [n1,n2,n3,n4,n5,n6]• Reference: http://www.w3.org/TR/2011/WD-css3-2d-transforms-20111215/
Using a list of CSS 2D transformations
• A list of transformation can be specified, for example<html>
<head>
<style>
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); }
</style>
</head>
<body>
<br><br><br>
<div>Hello</div>
</body>
</html>
The transform-origin property - example usage<html><head><style>
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); }
</style></head><body><p>This is a paragraph</p><div>Hello</div>
</body></html>
<html><head><style>
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); }
</style></head><body><p>This is a paragraph</p><div>Hello</div>
</body></html>
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 ] |
[ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? |[ center | [ left | right ] [ <percentage> | <length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
• 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 <percentage> or <length> 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 <percentage> or<length> 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 propertiesReference: http://www.w3.org/TR/css3-transitions/
• We will consider CSS transitions now• Later, we will consider more sophisticated CSS
animations using the @keyframes 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
<html>
<head>
<style>
div { width:200px; background-color:pink; font-size:10 }
div:hover { width:400px; background-color:yellow; font-size:100 }
</style>
</head>
<body>
<p>This is a paragraph.</p>
<div>Hello</div>
</body>
</html>
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<html><head><style>
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 }
</style></head><body><p>This is a paragraph.</p><div>Hello</div></body></html>
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)http://www.cs.ucc.ie/j.bowen/cs4506/slides/css-bezier-builder.html
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 http://www.cs.ucc.ie/j.bowen/cs4506/slides/cubic-bezier-transition.html
<html><head><style>
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;}
</style></head><body><p>This is a paragraph.</p><div>Hello</div>
</body>
</html>
Transitions can control transforms as well as styles• This example is at http://www.cs.ucc.ie/j.bowen/cs4506/slides/transform-transition.html
• The transform and three style properties transition gradually, over 15 secs, when the mouse is held over the initial position of the div element
<html><head><style>
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);}
</style></head><body><p>This is a paragraph.</p><div>Hello</div></body></html>
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 http://www.cs.ucc.ie/j.bowen/cs4506/slides/transition-delay.html <html><head><style>
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;}</style>
</head><body><h1>Transition delay</h1>
<p>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
<div>Hello</div></body></html>
• A transition-delay can have a negative valueExample: 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
