intro to css3
Download
Skip this Video
Download Presentation
Intro to CSS3

Loading in 2 Seconds...

play fullscreen
1 / 26

Intro to CSS3 - PowerPoint PPT Presentation


  • 65 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Intro to CSS3' - brenna


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
intro to css3

Intro to CSS3

Vishal Kurup

cascading style sheets
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 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>;

css3 rounded corners
CSS3 Rounded Corners
  • Past approaches?
  • Example
css3 rounded corners recap
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 webkitbrowsers

}

css3 border images
CSS3 Border Images
  • You can now specify an image to be used as part of the border property.
  • Example
css3 border images recap
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
CSS3 - Shadows
  • What do you do when you want to generate a shadow behind a layout element?
  • Example
css3 shadows recap
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
CSS3 Backgrounds
  • Page backgrounds in CSS2
  • Example
css3 backgrounds1
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
CSS3 Text Properties
  • Text Overflow
  • Word Break
  • Text Shadow
text overflow
Text Overflow
  • Supported in Internet Explorer (+ other browsers)
  • Example
text overflow recap
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
Word Wrap
  • Force a line break even with a long word
  • Example
  • Format: word-wrap:break-word|normal;
text shadow
Text Shadow
  • Can be added outside the graphic
  • No IE support
  • Example
  • Format: text-shadow: h-shadowv-shadow blur color;
transformations
Transformations
  • CSS3 supports 2D & 3D transformations
  • 2D transforms:

Translate

Rotate

Scale

Skew

  • 3D transforms: Not covered, limited support
transitions
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
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
Nicely Formatted Columns
  • Putting content into columns is super easy
  • Again, No IE support
  • Example
css3 font faces
CSS3 Font Faces
  • Allows you to use non-standard fonts
  • Mixed support for otf, ttf, svg and eot
  • Example
css3 font faces1
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
Examples
  • CSS3 Accordion (No Jquery)
  • CSS Coke Can
  • CSS Animation
ad