Intro to CSS3

Vishal Kurup
 Cascading Style Sheets
• Developed to enable the separation of document
content from document presentation
• Initial release in 1996 (CSS1)
• CSS2 published as a recommendation in May
1998
• CSS2.1 goes to candidate recommendation status
– July 19 2007
• CSS Level 3 under development since Dec 15,
2005 (W3C CSS3 Progress Report)
 CSS3 FYI
• CSS3 is still under development
• Modules: A new approach to standardization
• Each browser still implementing slightly
different syntax for certain properties:
– moz – <property> ; //Firefox
– webkit – <property>; //Chrome, Safari (webkit)
Opera (in most cases) uses the default with no prefix
but in some cases you will see
– o – <property>;
Let’s look at some items that
CSS3 makes TRIVIAL
 CSS3 Rounded Corners
• Past approaches?
• Example
 CSS3 Rounded Corners - Recap
• Makes creating rounded divs a breeze
• No Internet Explorer support but it degrades
gracefully
• Markup:
.div2
{
width:300px;
height:300px;
border: 3px solid #000;
background:#cc0000;
border-radius:30px;
-moz-border-radius:30px; //Prefix to make this work in Firefox
-webkit-border-radius:30px; //Prefix to make this work in webkit browsers

}
 CSS3 Border Images
• You can now specify an image to be used as
part of the border property.
• Example
 CSS3 Border Images - Recap
• Format: border-image: source slice width
outset repeat;
• Markup:
border-image: url(borderbg.jpg) 30 30 repeat;
-webkit-border-image: url(borderbg.jpg) 30 30 repeat;
-moz-border-image: url(borderbg.jpg) 30 30 repeat;
 CSS3 - Shadows
• What do you do when you want to generate a
shadow behind a layout element?
• Example
 CSS3 Shadows - Recap
• Once again no IE support
• Format: box-shadow: h-shadow v-shadow blur
spread color inset;
• h-shadow == Position of horizontal shadow
• V-shadow == Position of vertical shadow
• Blur == Blur distance
• Spread == Size of shadow
• Color == Shadow Color
• Inset == Make the shadow an inner (shadow)
 CSS3 Backgrounds
• Page backgrounds in CSS2
• Example
 CSS3 Backgrounds
• Format: background-size: length | percentage
| cover | contain;
• Sample Markup:
background-size: 400px 500px; //width, height
background-size:30% 40%; //width, height
background-size:100%; //Omitting first value sets
//the second to auto
background-size:cover;
background-size:contain;
 CSS3 Text Properties
• Text Overflow
• Word Break
• Text Shadow
 Text Overflow
• Supported in Internet Explorer (+ other
browsers)
• Example
 Text Overflow - Recap
• Format: text-overflow: clip | ellipsis | string;
• Also requires the whitespace:nowrap; &
overflow:hidden properties to be set.
• Sample Markup:
#div1
{ width:200px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
 Word Wrap
• Force a line break even with a long word
• Example
• Format: word-wrap:break-word|normal;
 Text Shadow
• Can be added outside the graphic
• No IE support
• Example
• Format: text-shadow: h-shadow v-shadow
blur color;
 Transformations
• CSS3 supports 2D & 3D transformations
• 2D transforms:
Translate
Rotate
Scale
Skew
• 3D transforms: Not covered, limited support
 Transitions
• Effects that let an element change from one style to another.
• Limited Support – Currently only supported by Webkit based
browsers (Chrome, Safari)
• Example
• Caveats:
– You must specify the property you want to add an effect to.
– You must specify a duration for the effect
– Effect is typically applied on property change.
• Format:
transition: <property> <duration>
-webkit-transition: <property> <duration>
*You can specify multiple properties separated by commas
 Animations
• Effects that let an element change from one
style to another.
• Limited Support – Currently only supported by
Webkit based browsers (Chrome, Safari)
• Example
 Nicely Formatted Columns
• Putting content into columns is super easy
• Again, No IE support
• Example
 CSS3 Font Faces
• Allows you to use non-standard fonts
• Mixed support for otf, ttf, svg and eot
• Example
 CSS3 Font Faces
• Things to remember:
• Internet Explorer only supports EOT
• Mozilla browsers support OTF and TTF
• Safari and Opera support OTF, TTF and SVG
• Chrome supports TTF and SVG.
• Format:
@font-face
{
font-family:<makeupaname>;
src:url(‘localfontname.ttf’) || url(‘http://fontlocation’);
}
• Recommended Read: http://paulirish.com/2009/bulletproof-font-
face-implementation-syntax
• Great resource: http://www.fontsquirrel.com/fontface
 Examples
• CSS3 Accordion (No Jquery)
• CSS Coke Can
• CSS Animation
http://www.findmebyip.com/litmus
</end>