CSS and CSS3

CSS
& CSS3
Robyn Overstreet

CSS Layout
• Positioning
• Display
• Floats

Inline vs. Block
Block
Start and end with new lines. Can have a
width.
<p>, <table>, <div>, ...

Inline
Does not force new lines. Cannot have
width.
<b>, <span>, <img>, ...

4

Display property
Switch elements between block and
inline display or hide elements
Possible properties
Text
• block
• inline
• none
#search-results{
display:none;
}

The Box Model
Four parts:
Content
Padding
Border
Margin

6

Box Model Measurements‫‏‬
In most browsers, a box with a 70px width take up
100px with margin and padding …

7

Box Model Measurements‫‏‬
In IE browsers, the padding is subtracted instead of
added, so the box will take up only 90px.

8

Relative Position
Positioned in relation to the other elements
around it

Absolute Position
Positioned in relation to its parent
without regard to the normal flow of
elements

Fixed Position
Absolutely positioned, but relative to
the viewport, instead of its parent
element. The element's position is
specified with the "left", "top",
"right", and "bottom" properties

Positioning Properties
 Positioning properties specify the left, right,
top, and bottom positions of an absolutely
positioned element
 They set the shape of an element, place
one element behind another, and indicate
directions for fitting an element's content
in a specified area
img.logo {
position: absolute;
top: 0;
left:0;
width: 150px;
height: 150px;
13
}

Floating for Layout
Floating allows elements to align to the left or the right of the page.
Inline elements will wrap around floated elements.

Left Float

Clear
The clear property sets the sides of an element
where other elements are not allowed.

Possible values:
• left
• right
• both
• none

15

2-column Layout
• Experiment with floating both divs
right, both divs left, or one left and
one right

Lab: Layout
• Sketch a design layout on paper
• Build the wireframe in CSS and HTML
• Try positioning a sidebar on the left or
the right by just changing the CSS
(not the HTML)
• Extra: Position a logo over the columns
using absolute positioning

Modular
CSS3 is a collection of modules
• Allows updates on a module-by-
module basis (instead of waiting
for an update of the full spec)
• Browsers can add support for
features one module at a time
• Browsers are able to implement
some modules and not others

New Features in CSS 3
New Selectors


Rounded Corners


Text-Overflow


Border Image


Multi-Column Layout


Color and Opacity: RGBA


Web Fonts


Gradients


Transitions


Box and Text Shadows


Transformations


Multiple Backgrounds


Animation


Masks


Reflection


Browser Compatibility
• Many of the CSS3 features only work on specific browsers.
• Need to use browser-specific property names in those cases.
• Prefix with -webkit or -moz

Webkit-specific properties
http://qooxdoo.org/documentation/general/webkit_css_styles

Mozilla-specific properties
https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions

Browser
compatibility charts
References for finding browser
support of CSS3 properties
• CanIUse.com
• FindMeByIP.com charts

Web Fonts
@font-face allows use of fonts from URLs

The Basics: Call a font from a URL and give it a name

@font-face {
font-family: Gentium;
src: url(http://site/fonts/Gentium.ttf);
}
p { font-family: Gentium, serif; }

Web Fonts
The Thorough: Best bet for cross-browser support

@font-face {
font-family: "Your typeface";
src: url("type/filename.eot");
src: local("Your Typeface"),
url("type/filename.woff") format("woff"),
url("type/filename.otf") format("opentype"),
url("type/filename.svg#filename") format("svg");
}

• Start with the IE compatible font (.eot)‫‏‬
• Check for a local version of the font
(this also prevents IE from trying to load formats it can't understand)
• Offer other formats

Font Services
! Copyright. Fonts are copyrighted material.

Downloadable Fonts
• Font Squirrel fontsquirrel.com
Freeware fonts to download and host yourself, with helpers to
write CSS code

Font Hosting
Fonts delivered from server, with Javascript helpers
• Google Font API code.google.com/webfonts
Open-source font library with limited number of fonts

• TypeKit typekit.com
Subscription-based font service with a large library

Lab: Fonts
• Add fonts to your page using the Google
web fonts API
• Check display across browsers

Text Overﬂow
A new option for content that overflows its containing box

Two roads diverged in
a yellow wood, and
sorry I could not ...

#poem_box{
text-overflow: ellipsis;
}

Multi-Column Layout
Add -moz- and/
or -webkit- to
each of these

column-count:2;

column-width:250px;

column-gap:20px;

column-rule:1px
dotted;

Multi-Column Layout
column-count
column-gap
column-rule
column-break-after
column-break-before
column-span
column-fill

These require -webkit- or -moz- prefixes

New Visual Effects
in CSS3

RGBA

background: rgba(255,70,280,.6);
red green blue alpha

60% opacity

Rounded Corners
W3C Official Spec:

border-radius:
55pt / 25pt;
Text

Browser Implementation:
New in FF 3.5 !

-webkit-border-radius: 55pt 25pt; Previous versions
did not support
-moz-border-radius: 55pt / 25pt;
elliptical borders

Quick-ﬁre Lab
Round the corners of a div

Shadows
Applies to text and boxes with text-shadow and box-shadow.

box-shadow: 10px 10px 20px #000;
-webkit-box-shadow: 10px 10px 20px #000;

<horizontal distance> <vertical distance> <blur> <color>

Quick-ﬁre Lab
Apply a shadow to a box or to text

Gradients
background: -webkit-gradient(linear,0 0, 0 100%,
from(#333),to(#fff));

0, 0
type: linear or radial.

points: space separated

from() and to(): value

color stop (optional)‫‏‬
color-stop(80%, #e4c700)‫‏‬

0, 100%

Quick-ﬁre Lab
Create a gradient background for a
div

Multiple Backgrounds
Add multiple background images by separating urls with a comma

#box{
background: url(top.gif) top left no-repeat,
url(bottom.gif) bottom left no-repeat,
url(middle.gif) left repeat-y;
}

Reﬂection
-webkit-box-reflect: <direction> <offset> <mask-box-image>

<direction> can be one of above, below, left or right.
<offset> is a length or percentage that specifies the distance of the reflection
from the edge of the original border box (using the direction specified). It can
be omitted, in which case it defaults to 0.
<mask-box-image> is a mask-box-image that can be used to overlay the
reflection. If omitted, the reflection has no mask.

img.simple_reflect{
-webkit-box-reflect:below 5px;
}

img.deluxe_reflect{
-webkit-box-reflect:below 5px -webkit-
gradient(linear, left top, left bottom,
from(transparent), color-stop(.7,
transparent), to(rgba(255, 255, 255, 0.5)));
}

Reﬂection
img.deluxe_reflect{
-webkit-box-reflect:below 5px -webkit-
gradient(linear, left top, left bottom,
from(transparent), color-stop(.7,
transparent), to(rgba(255, 255, 255, 0.5)));
}

Quick-ﬁre Lab
Try multiple background images
and/or reflection

Masks
img.photo {
-webkit-mask-box-image: url(mask.png);
}

+ =

Border Image
#box{
border-width: 8px;
-webkit-border-image: url("border2.png") 8 round;
}

<div id=”box”>

border2.png

2D Transformations
The transformation functions:
scale, scaleX, scaleY
translate, translateX, translateY
skew, skewX, skewY
rotate
matrix

-webkit-transform: skew(0deg, 30deg);
-webkit-transform: rotate(30deg);

Transformations: scale

-moz-transform: scale(3); 1 = 100%
or transform: scale(1,4); .2 = 20%
-webkit-transform: scaleY(1.5); 1.5 = 150%
transform: scaleX(.2); 3 = 300%

Transformations: skew
transform: skew(0deg, 30deg);

skewX skewY

-webkit-transform: skew(-25deg); -moz-transform: skew(0deg,-25deg);

Faking 3D: a 2D Cube
.cube {
position: relative;
top: 200px;
}
.rightFace,.leftFace,.topFace{
position: absolute;
padding: 10px;
width: 180px;
height: 180px;
}
.leftFace {
-webkit-transform: skew(0deg, 30deg);
}
.rightFace {
-webkit-transform: skew(0deg, -30deg);
left: 200px;
}
.topFace {
-webkit-transform: rotate(60deg) skew(0deg, -30deg) scale(1,
1.16);
top: -158px;
left: 100px;
}

Transitions

#box {
transition-property: width,height;
transition-duration: 2s;
height: 150px;
width: 150px;
}

#box:hover{
height: 500px;
width: 500px;
}

Lab
Create a transition on hover.
Use scale, skew, translate, or change
width or height

Triggering Animation
:hover as used in previous versions of CSS
:target trigger animation with a anchor link, e.g. page.html#start

<div id="b" class="brick">foo</div>
<div id="c" class="brick">foo</div>
<p><a href="#c">drop c</a></p>

div.brick:target{
-webkit-transform: rotate(30deg);
}

onclick using javascript

<div onclick=
"this.style.webkitTransform='rotate(360deg)'">

Animation: keyframes

Illustration: Yurike Cynthia Go
Creative Commons License

Animation: keyframes
@-webkit-keyframes moveitaround{ {
@-webkit-keyframes moveitaround
from { {
from
-webkit-transform: translate(50px,50px) rotate(30deg);
} }
50% { {
50%
} }
to {
to -webkit-transform: translate(500px,200px) rotate(360deg) ;
{
-webkit-transform: translate(500px,200px) rotate(360deg) ;
}
}
}
}

div.mydiv {
-webkit-animation-name: moveitaround;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 3;

}

Lab
Make an object move across the
screen using keyframes

CSS and CSS3

Recommended

More Related Content

What's hot (20)

Similar to CSS and CSS3 (20)

Recently uploaded (20)

CSS and CSS3

Editor's Notes