4. 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
5. Display property
Switch elements between block and
inline display or hide elements
Possible properties
Text
• block
• inline
• none
#search-results{
display:none;
}
12. 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
13. 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
}
14. 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
15. Clear
The clear property sets the sides of an element
where other elements are not allowed.
Possible values:
• left
• right
• both
• none
15
18. 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
20. 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
21. 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
22. 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
25. 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; }
26. 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
27. 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
28. Lab: Fonts
• Add fonts to your page using the Google
web fonts API
• Check display across browsers
30. Text Overflow
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;
}
31. 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;
32. 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
35. 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
37. 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>
39. 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%
41. 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;
}
42. Reflection
-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)));
}
43. Reflection
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)));
}
56. 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)'">
Tip: Start basic.\nLayout and Design Inspiration: \nhttp://www.smashingmagazine.com/2010/08/19/100-free-high-quality-wordpress-themes-for-2010/\nhttp://www.smashingmagazine.com/2010/11/11/designing-memorable-websites-showcase-of-creative-designs/\nhttp://designm.ag/inspiration/non-profit-websites/\nhttp://designm.ag/inspiration/30-beautifully-simple-websites/\nSee the CSS cheat sheet\n\nHTML example:\n <html><head><title>The Site</title>\n <link href="layout1.css" rel="stylesheet" type="text/css"/>\n </head>\n <body>\n <div id="header"><h1>The Site.</h1></div>\n <div id="navigation>\n <ul>\n <li>Home</li>\n <li>Services</li>\n <li>Blog</li>\n <li>About</li>\n </ul>\n </div>\n <div id="sidebar">\n <h3>Sites I like</h3>\n <ul>\n <li>alistapart.com</li>\n <li>lifehacker.com</li>\n </ul>\n </div> \n <div id="main-content">\n <h2>Welcome to my site</h2>\n <p>But, soft! What light through yonder window breaks?\n It is the east, and Juliet is the sun!\n Arise fair sun and kill the envious moon,\n Who is already sick and pale with grief\n That thou her maid are more fair than she. </p>\n \n </div>\n</body>\n