Scribd
Upload
132 views

CSS3

This document provides an overview of CSS3. It discusses how CSS3 is backwards compatible with CSS2 and split into modules. It describes important CSS3 modules like selectors, borders & backgrounds, text effects, transformations, animations, multiple columns, and user interface. Examples are given for properties in these modules. The document also introduces the Blueprint CSS framework and provides references for further CSS3 information.

Uploaded by

splokbov
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
132 views

CSS3

This document provides an overview of CSS3. It discusses how CSS3 is backwards compatible with CSS2 and split into modules. It describes important CSS3 modules like selectors, borders & backgrounds, text effects, transformations, animations, multiple columns, and user interface. Examples are given for properties in these modules. The document also introduces the Blueprint CSS framework and provides references for further CSS3 information.

Uploaded by

splokbov
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

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/

You might also like