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/