Intro to css3
This presentation is the property of its rightful owner.
Sponsored Links
1 / 26

Intro to CSS3 PowerPoint PPT Presentation


  • 48 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

Intro to CSS3

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>;


Let s look at some items that css3 makes trivial

Let’s look at some items that CSS3 makes TRIVIAL


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


Intro to css3

http://www.findmebyip.com/litmus


Intro to css3

</end>


  • Login