Unit i applying advanced css styling
Download
1 / 31

Unit I Applying Advanced CSS Styling - PowerPoint PPT Presentation


  • 142 Views
  • Uploaded on

Unit I Applying Advanced CSS Styling. CSS3 can style many aspects that in the past required integration of images New features are not supported by all browsers Age of browser relative to time of feature development Modifications to features not supported in older browsers

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 ' Unit I Applying Advanced CSS Styling' - keiki


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
Unit i applying advanced css styling

Unit I Applying Advanced CSS Styling


CSS3 can style many aspects that in the past required integration of images

  • New features are not supported by all browsers

    • Age of browser relative to time of feature development

    • Modifications to features not supported in older browsers

      Should try to make Web site usable for users with the least-featured browser.


Example 1
Example 1 integration of images


Example 2
Example 2 integration of images


Two sides to a coin
Two sides to a coin integration of images


Progressive enhancement: integration of imagesadditional features are used as enhancements only for browsers that can render them

  • Main content and capabilities available for least-featured browser

  • Advanced features not crucial to the layout of the Web site


Progressive enhancement enables us to establish a solid baseline of cross-browser support and then enhance the design with advanced CSS features for supportive browsers.


Graceful degradation: baseline of cross-browser support and then enhance the design with advanced CSS features for supportive browsersensuring that when site is viewed in browsers that don’t support advanced features, Web page elements should still be displayed in a usable way

  • Appearance and usability of Web site don’t depend on advanced features

  • Example: specifying alternative text for an image, in case the image cannot be displayed


Shims or patches: baseline of cross-browser support and then enhance the design with advanced CSS features for supportive browsers

Scripts written specifically to bridge the gap between browsers with reduced feature sets and more fully featured browsers

  • Available for use by anyone free of charge

  • Some address a single issue

  • Some tools package shims in a library of scripts

    • Examples: Modernizr, PIE


Pseudo-element: baseline of cross-browser support and then enhance the design with advanced CSS features for supportive browsers selectors that enable you to isolate a portion of a larger element for styling

  • Preceded by colon (:) in older browsers or by double colon (::) in newer ones

    • Double colon distinguishes pseudo-element from pseudo-class

      A pseudo-class filters existing elements.a:link means all <a>s that are :link.

      A pseudo-element is a new fake element.div::after means non-existing elements after <div>s.


Drop cap: baseline of cross-browser support and then enhance the design with advanced CSS features for supportive browsersFirst letter is enlarged and drops below the first line of text

  • Can be created using :first-letter

  • Must format surrounding text to flow around – use the float property


:first-line pseudo-element baseline of cross-browser support and then enhance the design with advanced CSS features for supportive browsersapplied to paragraph


:before and :after pseudo-elements: baseline of cross-browser support and then enhance the design with advanced CSS features for supportive browsersallow you to insert content into Web page using style rules

  • Typically used for repeated text or pictures

  • Must specify value for the content property

    • Can be text or path to an image


:before pseudo-element baseline of cross-browser support and then enhance the design with advanced CSS features for supportive browserscode and result


Opacity
Opacity baseline of cross-browser support and then enhance the design with advanced CSS features for supportive browsers

Color can be specified in hexadecimal, rgb, and hsl – hue saturation light.

Alpha channel: fourth color value representing the opacity

  • Works for rgb and hsl, known as rgba and hsla

  • Receives decimal between 0 (complete transparency) and 1 representing percent opacity


Opacity graceful degradation
Opacity – Graceful degradation baseline of cross-browser support and then enhance the design with advanced CSS features for supportive browsers

  • Many browsers do not support the rgba property.

  • Using the concept of graceful degradation - use this along with rgb


rgba code and resulting partially transparent element baseline of cross-browser support and then enhance the design with advanced CSS features for supportive browsers

RGBA

RGB


Creating baseline of cross-browser support and then enhance the design with advanced CSS features for supportive browsersrounded corners is possible using the CSS3 border-radius property


In baseline of cross-browser support and then enhance the design with advanced CSS features for supportive browserspast, required overlay of image files simulating the rounded edge


border-radius property baseline of cross-browser support and then enhance the design with advanced CSS features for supportive browsers

  • Receives value in pixels

  • Larger value results in deeper curves

  • Can use individual property for each corner

  • Requires –moz and –webkit prefixes to work with some browsers


Code for rounded footer corners and resulting element baseline of cross-browser support and then enhance the design with advanced CSS features for supportive browsers


Text shadow: baseline of cross-browser support and then enhance the design with advanced CSS features for supportive browserscreates the appearance of a shadow on a surface behind the text

  • In past, required using image manipulation software and linking to resulting graphic

    In CSS3, use text-shadow property

  • Takes four values: horizontal offset, vertical offset, blur, and shadow color


Values for the text shadow property and resulting graphic baseline of cross-browser support and then enhance the design with advanced CSS features for supportive browsers


Box shadow: baseline of cross-browser support and then enhance the design with advanced CSS features for supportive browserscreates the appearance of a shadow on an entire unit of page content

In CSS3, use box-shadow property to apply a shadow to Web page elements

  • Takes four values: horizontal offset, vertical offset, blur, and shadow color

  • Has –webkit and –moz variants


Code for baseline of cross-browser support and then enhance the design with advanced CSS features for supportive browsersbox-shadow


Modernizr: baseline of cross-browser support and then enhance the design with advanced CSS features for supportive browsers free script library for enabling alternative code in order to support graceful degradation

  • Linked to a Web page and tests each user’s browser to detect supported properties

  • Based on results, generates set of CSS classes, which can be used by designer to write alternative code and make sure that only the suitable code is rendered


Code incorporating Modernizr script baseline of cross-browser support and then enhance the design with advanced CSS features for supportive browsers


So html5 and css3 are not that confusing when you have good teachers
So HTML5 and CSS3 are not that confusing when you have good baseline of cross-browser support and then enhance the design with advanced CSS features for supportive browsersteachers.


ad