unit i applying advanced styling css. css3 can style many aspects that in the past required...
TRANSCRIPT
Unit I
Applying Advanced
Styling
CSS
CSS3 can style many aspects that in the past required integration of images
New features are not supported by all browsers.
Should try to make Web site usable for users with the least-featured browser.
Two sides to a coin
Progressive enhancement
Graceful degradation
It is a matter of direction.
Graceful degradation: ensuring that when site is viewed in browsers that don’t support advanced features, Web page elements should still be displayed in a usable way.
Graceful degradation: ”The practice of building your web functionality so that it provides a certain level of user experience in more modern browsers, but it will also degrade gracefully to a lower level of user experience in older browsers. This lower level is not as nice to use for your site visitors, but it does still provide them with the basic functionality that they came to your site to use; things do not break for them.”
ww3.org
Graceful degradationoAppearance and usability of Web site
don’t depend on advanced featureso Example: specifying alternative text for
an image, in case the image cannot be displayed
Progressive enhancement: additional features are used as enhancements only for browsers that can render them
oMain content and capabilities available for least-featured browser
oAdvanced 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 starts from the status quo of complexity and tries to fix for the lesser experience whereas progressive enhancement starts from a very basic, working example and allows for constant extension for future environments.
• Degrading gracefully means looking back whereas enhancing progressively means looking forward whilst keeping your feet on firm ground.
Shims or patches:
Scripts written specifically to bridge the gap between browsers with reduced feature sets and more fully featured browsers
oAvailable for use by anyone free of charge
o Some address a single issueo Some tools package shims in a library of
scripts• Examples: Modernizr, PIE
Pseudo-element: selectors that enable you to isolate a portion of a larger element for styling
oPreceded 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: First 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 applied to paragraph
:before and :after pseudo-elements: allow you to insert content into Web page using style rules
o Typically used for repeated text or pictureso Must specify value for the content property
• Can be text or path to an image
http://krasimirtsonev.com/blog/article/CSS-before-and-after-pseudo-elements-in-practice
:before pseudo-element code and result
What is the difference between opacity and transparency?
Opacity is just the opposite of transparency. If something is 100% opaque, then it's 0% transparent. If it's 75% transparent, then it's 25% opaque.
OpacityColor can be specified in hexadecimal, rgb, and hsl – hue saturation light.
Alpha channel: fourth color value representing the opacity
oWorks for rgb and hsl, known as rgba and hsla
oReceives decimal between 0 (fully opaque) and 1 (fully transparent).
http://deepubalan.com/blog/2010/03/29/rgba-vs-opacity-
the-difference-explained/
Opacity – Graceful degradation
oMany browsers do not support the rgba property.
oUsing the concept of graceful degradation - use this along with rgb
rgba code and resulting partially transparent element
RGBRGBA
Creating rounded corners is possible using the CSS3 border-radius property
In past, required overlay of image files simulating the rounded edge
border-radius property• 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
border-radius: 1em;
border-radius-topright: 2em;border-radius-topleft: 2em;
border-radius: 2em 0;
border-radius: 3em 1em;
border-radius: 1em;
border-radius-topright: 2em;border-radius-topleft: 2em;
border-radius: 2em 0;
border-radius: 3em 1em;
Text shadow: creates the appearance of a shadow on a surface behind the text
o In past, required using image manipulation software and linking to resulting graphic
In CSS3, use text-shadow property o Takes four values: horizontal offset,
vertical offset, blur, and shadow color
Values for the text shadow property and resulting graphic
text-shadow: 2px 3px 2px #000;
http://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/
Box shadow: creates the appearance of a shadow on an entire unit of page content.
o Takes four values: horizontal offset, vertical offset, blur, and shadow color
oHas –webkit and –moz variants
http://www.w3schools.com/css/css3_shadows.asp Examples of both text and box shadow
Examples
Code for box-shadow
Modernizr: free script library for enabling alternative code in order to support graceful degradation
o Linked to a Web page and tests each user’s browser to detect supported properties
oBased 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
So HTML5 and CSS3 are not that confusing when you have good teachers.
But wait there’s 2 more.