CSS3

CSE1041 Web 1
Week 5
CSS3 Overview
1
CSS3
• CSS is used to control the style and layout
of Web pages.
• CSS3 is the latest standard for CSS.
• Example:
div {
transform:rotate(30deg);
-moz-transform:rotate(30deg); /* Firefox */
}
CSS3
• CSS3 is completely backwards compatible, so you will
not have to change existing designs. Browsers will
always support CSS2.
• CSS3 is split up into "modules". The old specification

has been split into smaller pieces, and new ones are
also added.
• The CSS3 specification is still under development by

W3C. However, many of the new CSS3 properties have
been implemented in modern browsers.
CSS3
• Some of the most important CSS3 modules are:
– Selectors
– Borders and Backgrounds
– Text Effects
– 2D/3D Transformations
– Animations
– Multiple Column Layout
– User Interface
Selectors
• Pattern Matching
Syntax Example Description
[attribute^=value] Selects every a element
a[src^="https"] whose src attribute
value begins with
"https"
[attribute$=value] a[src$=".pdf"] Selects every a element
whose src attribute
value ends with ".pdf"
[attribute*=value] a[src*="w3schools"] Selects every a element
whose src attribute
value contains the
substring "w3schools"
Selectors Example
• CSS 2.0 Styling links
a:hover { color: red;} /* mouse over link */
• CSS 3.0 Styling links (selectors can be used to

change the colour based on an attribute value)
a:hover[href^="https"] { color: blue; }
a:hover[href$="mu”] { color: magenta; }
a:hover[href*="@gmail"] { color: limegreen; }

Exercise 1
• Consider a website where all HTML pages
contains:
1. One header: <div name=“header”>… </div>
2. One footer: <div name=“footer”>… </div>
• Headers and footers need to be formatted

according to the following specifications:
HTML element Specifications
Header <div> Blue color, Center, Underline, Uppercase, Bold
Footer <div> Blue Color, Center, Lowercase
Exercise 1
• A sample HTML
page is illustrated.
• Write down the

styles in an
external style sheet.
Note that the styles
should be specified
using css3 selectors.
• The following css properties might be useful:

– color, text-align, text-decoration, text-transform, font-weight
Selectors
• Alternate table row colors
tr:nth-child(odd) {
background:red;
}
tr:nth-child(even) {
background:yellow;
}
Additional CSS3 modules
• CSS3 modules:
– Borders and Backgrounds
– Text Effects
– 2D/3D Transformations
– Animations
– Multiple Column Layout
– User Interface
• Blueprint CSS framework

CSS3 Borders
• With CSS3, you can create rounded
borders, add shadow to boxes, and use an
image as a border - without using a design
program, like Photoshop.
div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
CSS3 Borders
• Box Shadow
div
{
box-shadow: 10px 10px 5px #888888;
}
• Border Image
div
{
border-image:url(border.png) 30 30 round;
}
CSS3 Backgrounds
• CSS3 contains several new background
properties, which allow greater control of
the background element.
• Background Origin property
div
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;
}
CSS3 Backgrounds
• CSS3 allows you to use several
background images for an element.
• Example: Set two background images for
the body element.
body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}
CSS3 Text Effects
• CSS3 contains several new text features.
• Example: Text Shadow
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
• Example: Word Wrapping

p{
word-wrap:break-word;
}
CSS3 Fonts
• Before CSS3, web designers had to use fonts that were
already installed on the user's computer.
• With CSS3, web designers can use whatever font he/she

likes.
• When you have found/bought the font you wish to use,

simply include the font file in the web site, and it will be
downloaded automatically to the user when needed.
• You will have to describe your selected font with the new
CSS3 @font-face rule.
CSS3 Fonts
• In the @font-face rule you define a name
for the font, and the URL to the font file:
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot') format("opentype"); /* IE */
}
• Using the new font:

div{
font-family:myFirstFont;
}
2D/3D Transformations
• A transform is an effect that lets an
element change shape, size and position.
• Example: Translate
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 */
}
CSS3 Animations
• With CSS3, we can create animations, which
can replace animated images, Flash animations,
and JavaScripts in many web pages.
• To create animations in CSS3, you will have to

learn about the @keyframes rule.
• The @keyframes rule is where the animation is

created.
– Specify a CSS style inside the @keyframes rule and
the animation will gradually change from the current
style to the new style.
CSS3 Animations
• Example:
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
• When the animation is created in the

@keyframe, bind it to a selector, otherwise
the animation will have no effect.
div{
animation: myfirst 5s;
}
CSS3 Multiple Columns
• With CSS3, you can create multiple
columns for laying out text - like in
newspapers!
• Example: Column-count property
div
{
column-count:3;
-moz-column count:3; /* Firefox */
}
CSS3 Multiple Columns
• Example: Column-rule property
div
{
column-rule:3px outset #ff00ff;
}
CSS3 User Interface
• In CSS3, some of the new user interface
features are resizing elements, box sizing,
and outlining.
• Examples of user interface properties:

– resize
– box-sizing
– outline-offset
Blueprint CSS framework
• Cut down on your development time.
• Solid foundation to build your project: on

– easy-to-use grid
– sensible typography
– useful plugins
– stylesheet for printing
• Links:
– Live demos: http://blueprintcss.org/tests/
– Blueprint Wiki: https://github.com/joshuaclayton/blueprint-css/wiki
References
• http://www.w3schools.com/css3/default.asp
• http://www.blueprintcss.org/

CSS3

Uploaded by

Copyright:

Available Formats

CSS3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS3

Uploaded by

Copyright:

Available Formats

CSE1041 Web 1

• CSS3 is split up into "modules". The old specification

• The CSS3 specification is still under development by

a:hover { color: red;} /* mouse over link */

• CSS 3.0 Styling links (selectors can be used to

a:hover[href$="mu”] { color: magenta; }

a:hover[href*="@gmail"] { color: limegreen; }

• Headers and footers need to be formatted

• Write down the

• The following css properties might be useful:

• Blueprint CSS framework

• Example: Word Wrapping

• With CSS3, web designers can use whatever font he/she

• When you have found/bought the font you wish to use,

• Using the new font:

• To create animations in CSS3, you will have to

• The @keyframes rule is where the animation is

• When the animation is created in the

• Examples of user interface properties:

• Solid foundation to build your project: on

You might also like