Anjan Banda, profile picture
Uploaded byAnjan Banda
PPTX, PDF888 views

Css3

The document provides an overview of new features in CSS3, including new selectors, pseudo-elements, properties, and property groups. Some key points include: - New selectors allow selecting elements based on attributes, relationships, and positions. - New pseudo-elements and classes allow selecting elements based on their position or status. - New properties control features like animation, transitions, transforms, backgrounds, borders, boxes, color, font, text and multi-column layouts. - Property groups organize related properties for areas like animation, transitions, transforms and user interface. - The document lists examples and resources for learning about each new CSS3 module.

Embed presentation

Download to read offline
implementing the new features AIMS BBSYDPTRAINING
Briefhistory…1997-2001  Content: HTML 4.01  Presentation: CSS1
Briefhistory…2001-2014  Content: XHTML 1  Presentation: CSS2
Briefhistory…2014-present  Content: HTML5  Presentation: CSS3
VendorPrefixes  Some CSS rules won’t work without the vendor prefix.  Mozilla Browsers (Firefox) -moz  Webkit Browsers (Safari, Chrome) -webkit  Opera -o  Internet Explorer -ms <!--[if IE]> <![endif]-->  Not all CSS rules work with all browsers:  http://www.caniuse.com/  http://www.css3.info/selectors-test/  http://quirksmode.org/css/contents.html
So, what’s the big deal about CSS3?
Newselectors!  element1~element2 Selects an element that is a general next sibling of another element. Example: http://www.quirksmode.org/css/selector_sibling.html  [attribute^=value] Represents an element with the attribute whose value begins with the prefix value.  [attribute$=value] Represents an element with the attribute whose value ends with the prefix value.  [attribute*=value] Represents an element with the attribute whose value contains the prefix value. Example: http://www.quirksmode.org/css/selector_attributeAdvanced.html
Newpseudoelements/classes!  :first-of-type  :last-of-type  :only-of-type  Select elements that are first, last, or only child of its type of its parent  Example: http://www.quirksmode.org/css/type.html  :first-child  :only-child  :last-child  Selects an element that is the first, only, or last child of its parent.  Examples: http://www.quirksmode.org/css/firstchild.html http://www.quirksmode.org/css/onlychild.html
Morenewpseudoelements/classes!  nth-child(n)  :nth-of-type(n)  Allows you to select elements with a formula.  Example: http://www.quirksmode.org/css/nthchild.html  :nth-last-child(n)  :nth-last-of-type(n)  Work same as nth-child, except that they start counting at the last element instead of the first.  Example: http://www.quirksmode.org/css/nthlastchild.html  :root  Selects the root initial containing block (in HTML, this is the <html> tag)  Example: http://www.quirksmode.org/css/root.html  :empty  Selects elements with no content (“empty”).  Example: http://www.quirksmode.org/css/empty.html  :target  Selects a targeted element – one with an ID with the same value as the URL's hash.  Example: http://www.quirksmode.org/css/target.html http://www.quirksmode.org/css/target.html#testHash
Stillmorenewpseudoelements/classes!  :enabled  :disabled  :checked  Allows a designer to apply style to enabled, disabled, or checked form field elements.  Example: http://www.quirksmode.org/css/enabled.html  :not(selector)  Negates a selector.  Example: http://www.quirksmode.org/css/not.html  ::selection  Defines style for text that a user selects.  Example: http://www.quirksmode.org/css/selection.html
Newproperties!(andsomenew propertygroups!) • Animation • Background • Border and outline • Box • Color • Content Paged Media • Dimension • Flexible Box • Font • Generated content • Grid • Hyperlink • Linebox • List • Margin • Marquee • Multi-column • Padding • Paged Media • Positioning • Print • Ruby • Speech • Table • Text • 2D/3DTransform • Transition • User-interface CSS Property Groups:
Animation  @keyframes Specifies the animation  animation A shorthand property for all the animation properties below, except the animation-play-state property  animation-name Specifies a name for the @keyframes animation  animation-duration Specifies how many seconds or milliseconds an animation takes to complete one cycle  animation-timing-function Specifies the speed curve of the animation  animation-delay Specifies when the animation will start  animation-iteration-count Specifies the number of times an animation should be played  animation-direction Specifies whether or not the animation should play in reverse on alternate cycles  animation-play-state Specifies whether the animation is running or paused  Examples: http://www.leemunroe.com/css3-animations/ http://css3.bradshawenterprises.com/animations/ http://www.w3schools.com/css3/tryit.asp?filename=trycss3_animation1 http://www.standardista.com/sxsw/#slide24
Transition  transition A shorthand property for setting the four transition properties  transition-property Specifies the name of the CSS property the transition effect is for  transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete  transition-timing-function Specifies the speed curve of the transition effect  transition-delay Specifies when the transition effect will start  Example: http://css3.bradshawenterprises.com/transitions/
Transform  transform Applies a 2D or 3D transformation to an element  transform-origin Allows you to change the position on transformed elements  transform-style Specifies how nested elements are rendered in 3D space  perspective Specifies the perspective on how 3D elements are viewed  perspective-origin Specifies the bottom position of 3D elements  backface-visibility Defines whether or not an element should be visible when not facing the screen  Examples: http://westciv.com/tools/3Dtransforms/index.html http://css3.bradshawenterprises.com/transforms/
Background  background-clip Specifies the painting area of the background  background-origin Specifies the positioning area of the background images  background-size Specifies the size of the background images  Example: http://www.css3.info/preview/background-origin-and-background-clip/  background-gradient Specifies a gradient (shifting from one color to another) in the background  Examples: http://www.stanford.edu/group/ttsclasses/cgi-bin/techietips/?p=485 http://css-tricks.com/5700-css3-gradients/ http://www.standardista.com/sxsw/#slide3
Border  border-bottom-left-radius Defines the shape of the border of the bottom-left corner  border-bottom-right-radius Defines the shape of the border of the bottom-right corner  border-image A shorthand property for setting all the border-image-* properties  border-image-outset Specifies the amount by which the border image area extends beyond the border box  border-image-repeat Specifies whether the image-border should be repeated, rounded or stretched  border-image-slice Specifies the inward offsets of the image-border  border-image-source Specifies an image to be used as a border  border-image-width Specifies the widths of the image-border  border-radius A shorthand property for setting all the four border-*-radius properties  border-top-left-radius Defines the shape of the border of the top-left corner  border-top-right-radius Defines the shape of the border of the top-right corner  Examples: http://www.css3.info/preview/rounded-border/ http://border-radius.com/
Box  box-decoration-break Defines a break in the box’s decoration  Example: http://www.w3.org/TR/css3-background/#the-box-decoration-break  box-shadow Attaches one or more drop-shadows to the box  Examples: http://www.css3.info/preview/box-shadow/ http://www.standardista.com/sxsw/#slide9  overflow-x Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content area  overflow-y Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area  overflow-style Specifies the preferred scrolling method for elements that overflow  Example: http://www.css3.info/overflow-xoverflow-y
FlexibleBox  Specification is still under development…StayTuned!!!  Example: http://www.html5rocks.com/en/tutorials/flexbox/quick/
Color  RGBA(Red,Green,Blue,Alpha opacity) rgba(100%,0%,0%,0.8) produces 80% red.  Examples: http://www.css3.info/preview/rgba/ http://hex2rgba.devoth.com/  HSLA (Hue, Saturation, Lightness, Alpha opacity) hsla(0,100%, 50%,1.0) produces 100% red.  Examples: http://hslpicker.com/ http://www.css3.info/preview/hsl/  opacity Sets the opacity level for an element from 0 to 1.0.  Example: http://www.css3.info/preview/opacity/ http://www.standardista.com/sxsw/#slide6
Font  Free web fonts: http://www.google.com/webfonts http://www.fontsquirrel.com  @font-face A rule that allows websites to download and use fonts other than the "web-safe" fonts  Examples: http://css-tricks.com/snippets/css/using-font-face/ http://www.css3.info/preview/web-fonts-with-font-face/  font-size-adjust Preserves the readability of text when font fallback occurs  Example: http://www.w3.org/TR/css3-fonts/#font-size-adjust-prop  font-stretch Selects a normal, condensed, or expanded face from a font family  Example: Currently no browser supports font-stretch
Text  hanging-punctuation Specifies whether a punctuation character may be placed outside the line box  Example: Currently no browser supports hanging-punctuation  punctuation-trim Specifies whether a punctuation character should be trimmed  Example: Currently no browser supports punctuation-trim  text-outline Specifies a text outline  Example: Currently no browser supports text-outline  text-wrap Specifies line breaking rules for text  Example: Currently no browser supports text-wrap  text-align-last Describes how the last line of a block or a line right before a forced line break is aligned when text- align is "justify"  Example: http://msdn.microsoft.com/en-us/library/ms531163(VS.85).aspx
Text(continued)  text-justify Specifies the justification method used when text-align is "justify"  Example: http://msdn.microsoft.com/en-us/library/ms531172(v=VS.85).aspx  text-shadow Adds shadow to text  Examples: http://www.css3.info/preview/text-shadow/ http://www.quirksmode.org/css/textshadow.html http://www.standardista.com/sxsw/#slide9  word-break Specifies line breaking rules for non-CJK (Chinese/Japanese/Korean) text  Example: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-break  word-wrap Allows long, unbreakable words to be broken and wrap to the next line  Example: http://www.css3.info/preview/word-wrap/
Grid  grid-columns Specifies the width of each column in a grid  grid-rows Specifies the height of each column in a grid  Examples: http://dev.w3.org/csswg/css3-grid-align http://www.xanthir.com/blog/b4580
Multi-column  column-count Specifies the number of columns an element should be divided into  column-fill Specifies how to fill columns  column-gap Specifies the gap between the columns  column-rule A shorthand property for setting all the column-rule-* properties  column-rule-color Specifies the color of the rule between columns  column-rule-style Specifies the style of the rule between columns  column-rule-width Specifies the width of the rule between columns  column-span Specifies how many columns an element should span across  column-width Specifies the width of the columns  columns A shorthand property for setting column-width and column-count  Examples: http://www.quirksmode.org/css/multicolumn.html http://www.css3.info/preview/multi-column-layout/
Marquee  marquee-direction Sets the direction of the moving content  marquee-play-count Sets how many times the content move  marquee-speed Sets how fast the content scrolls  marquee-style Sets the style of the moving content  Examples: http://www.css3.info/modules/css3-marquee- module/ http://www.cssplay.co.uk/menu/css3-marquee.html
Ruby  ruby-align Controls the text alignment of the ruby text and ruby base contents relative to each other  ruby-overhang Determines whether, and on which side, ruby text is allowed to partially overhang any adjacent text in addition to its own base, when the ruby text is wider than the ruby base  ruby-position Controls the position of the ruby text with respect to its base  ruby-span Controls the spanning behavior of annotation elements  Examples: http://www.w3.org/TR/css3-ruby http://www.storiesinflight.com/html5/ruby.html
User-Interface  appearance Makes any element appear like a form element (e.g., paragraphs can look like buttons).  Examples: https://developer.mozilla.org/en/CSS/-moz-appearance http://davidwalsh.name/dw-content/webkit-styles.php  box-sizing Forces an element fit inside an area.  Example: http://css-tricks.com/examples/BoxSizing/  outline-offset Offsets an outline, and draws it beyond the border edge  Example: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_outline-offset  resize Specifies whether or not an element is resizable by the user  Example: http://www.css3.info/preview/resize/
User-Interface(continued)  nav-index Specifies the tabbing order for an element  nav-down Specifies the position of the element when using the arrow-down navigation key  nav-left Specifies the position of the element when using the arrow-left navigation key  nav-right Specifies the position of the element when using the arrow-right navigation key  nav-up Specifies the position of the element when using the arrow-up navigation key  Example: Currently no browser supports the nav* properties
ContentforPagedMedia(print)  bookmark-label Specifies the label of the bookmark  bookmark-level Specifies the level of the bookmark  bookmark-target Specifies the target of the bookmark link  Example: http://www.w3.org/TR/css3-gcpm/#bookmarks  float-offset Pushes floated elements in the opposite direction of the where they have been floated with float  Example: http://www.w3.org/TR/css3-gcpm/#the-float-offset-property  image-resolution Specifies the resolution of an image  Example: http://dev.w3.org/csswg/css3-images/#image-resolution  marks Adds crop and/or cross marks to the document  Example: http://www.quackit.com/css/properties/css_marks.cfm  string-set Named strings are created with the ‘string-set’ property which copies a string of text into the named string. Only text is copied; not style, structure, or replaced content  Example: http://www.w3.org/TR/css3-gcpm/#string-set
ContentforPagedMedia(print)- continued  hyphenate-after Specifies the minimum number of characters in a hyphenated word after the hyphenation character  hyphenate-before Specifies the minimum number of characters in a hyphenated word before the hyphenation character  hyphenate-character Specifies a string that is shown when a hyphenate-break occurs  hyphenate-lines Indicates the maximum number of successive hyphenated lines in an element  hyphenate-resource Specifies a comma-separated list of external resources that can help the browser determine hyphenation points  hyphens Sets how to split words to improve the layout of paragraphs  Example: http://meyerweb.com/eric/css/tests/css3/show.php?p=hyphens
MorePagedMediaProperties  object-fit Gives a hint for how to scale a replaced element if neither its width nor its height property is auto  object-position Determines the alignment of the object inside the box  Examples: http://www.w3.org/TR/css3-images/#object-fit http://www.w3.org/TR/css3-images/#object-position  image-orientation Specifies a rotation in the right or clockwise direction that a user agent applies to an image  Example: http://dev.w3.org/csswg/css3-images/#image-orientation  size Specifies the size and orientation of the containing box for page content  Example: http://dev.w3.org/csswg/css3-page/#page-size-prop
Speech  mark A shorthand property for setting the mark-before and mark-after properties  mark-after Allows named markers to be attached to the audio stream  mark-before Allows named markers to be attached to the audio stream  phonemes Specifies a phonetic pronunciation for the text contained by the corresponding element  rest A shorthand property for setting the rest-before and rest-after properties  rest-after Specifies a rest or prosodic boundary to be observed after speaking an element's content  rest-before Specifies a rest or prosodic boundary to be observed before speaking an element's content
Speech(continued)  voice-balance Specifies the balance between left and right channels  voice-duration Specifies how long it should take to render the selected element's content  voice-pitch Specifies the average pitch (a frequency) of the speaking voice  voice-pitch-range Specifies variation in average pitch  voice-rate Controls the speaking rate  voice-stress Indicates the strength of emphasis to be applied  voice-volume Refers to the amplitude of the waveform output by the speech synthesizes  Examples: http://www.css3.info/preview/speech/ http://dev.w3.org/csswg/css3-speech/
Linebox  alignment-adjust Allows more precise alignment of elements  alignment-baseline Specifies how an inline-level element is aligned with respect to its parent  baseline-shift Allows repositioning of the dominant-baseline relative to the dominant-baseline  dominant-baseline Specifies a scaled-baseline-table  drop-initial-after-adjust Sets the alignment point of the drop initial for the primary connection point  drop-initial-after-align Sets which alignment line within the initial line box is used at the primary connection point with the initial letter box  drop-initial-before-adjust Sets the alignment point of the drop initial for the secondary connection point  drop-initial-before-align Sets which alignment line within the initial line box is used at the secondary connection point with the initial letter box  drop-initial-size Controls the partial sinking of the initial letter  drop-initial-value Activates a drop-initial effect
Linebox(continued)  inline-box-align Sets which line of a multi-line inline block align with the previous and next inline elements within a line  line-stacking A shorthand property for setting the line-stacking-strategy, line-stacking-ruby, and line-stacking-shift properties  line-stacking-ruby Sets the line stacking method for block elements containing ruby annotation elements  line-stacking-shift Sets the line stacking method for block elements containing elements with base-shift  line-stacking-strategy Sets the line stacking strategy for stacked line boxes within a containing block element  text-height Sets the block-progression dimension of the text content area of an inline box  Example: http://dev.w3.org/csswg/css3-linebox/#properties
Hyperlink  target A shorthand property for setting the target-name, target-new, and target-position properties  target-name Specifies where to open links (target destination)  target-new Specifies whether new destination links should open in a new window or in a new tab of an existing window  target-position Specifies where new destination links should be placed  Examples: http://thinkvitamin.com/design/stay-on-target/ http://virtuelvis.com/gallery/css3/target/interface.html http://www.uselesscode.org/blog/82/pure-css3-tab-widget
SomeCSS3Resources…  http://www.stanford.edu/group/ttsclasses/css/  http://border-radius.com/  http://caniuse.com/  http://css-tricks.com/  http://css3.bradshawenterprises.com  http://css3.info/  http://cssplay.co.uk/menu/css3-marquee.html  http://davidwalsh.name/dw-content/webkit- styles.php  http://dev.w3.org/csswg/  http://fontsquirrel.com/  http://google.com/webfonts  http://hex2rgba.devoth.com/  http://hslpicker.com/  http://html5rocks.com/  http://leemunroe.com  http://meyerweb.com/eric/css/  http://msdn.microsoft.com/  http://quackit.com/css  http://quirksmode.org/css/contents.html  http://standardista.com  http://standardista.com/sxsw  http://storiesinflight.com/html5/ruby.html  http://stubbornella.org/content/category/general/gee k/css/  http://thinkvitamin.com/design/stay-on-target/  http://uselesscode.org/blog/82/pure-css3-tab-widget  http://virtuelvis.com/gallery/css3/target/interface.htm l  http://w3.org/  http://w3schools.com  http://westciv.com/tools/3Dtransforms  http://xanthir.com/blog  http://xanthir.com/blog/b4580  http://selectivizr.com

More Related Content

PPTX
CSS Walktrough Internship Course
byZoltan Iszlai
 
KEY
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
byNicole Sullivan
 
PPTX
Cascading Style Sheets - CSS
bySun Technlogies
 
DOCX
Css web side
byBahria University Islamabad, Pakistan
 
PDF
Front End Good Practices
byHernan Mammana
 
PDF
Semantic markup - Creating Outline
byHernan Mammana
 
PPTX
Css 3
bypoollar
 
PPTX
Css 3
bypoollar
 
CSS Walktrough Internship Course
byZoltan Iszlai
 
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
byNicole Sullivan
 
Cascading Style Sheets - CSS
bySun Technlogies
 
Css web side
byBahria University Islamabad, Pakistan
 
Front End Good Practices
byHernan Mammana
 
Semantic markup - Creating Outline
byHernan Mammana
 
Css 3
bypoollar
 
Css 3
bypoollar
 

What's hot

PDF
CSS Grid Layout
byRachel Andrew
 
PDF
CSS: a rapidly changing world
byRuss Weakley
 
PDF
Introduction to CSS3
byDoris Chen
 
PDF
Intro to CSS3
byDenise Jacobs
 
PDF
Css3
byRahma Boufalgha
 
PDF
CSS3 - is everything we used to do wrong?
byRuss Weakley
 
ODP
HTML5, CSS, JavaScript Style guide and coding conventions
byKnoldus Inc.
 
PDF
CSS: selectors and the box model
byIdan Gazit
 
PDF
CSS3 and Selectors
byRachel Andrew
 
PDF
Javascript coding-and-design-patterns
byHernan Mammana
 
PPTX
CSS3
byChathuranga Jayanath
 
PDF
CSS3: Simply Responsive
byDenise Jacobs
 
PDF
CSS 開發加速指南－Sass & Compass
byLucien Lee
 
PDF
Getting Started with DOM
byHernan Mammana
 
PDF
Preprocessor presentation
byMario Noble
 
PPTX
Colors In CSS3
byLea Verou
 
PDF
Basic-CSS-tutorial
bytutorialsruby
 
PPTX
CSS
byAkila Iroshan
 
CSS Grid Layout
byRachel Andrew
 
CSS: a rapidly changing world
byRuss Weakley
 
Introduction to CSS3
byDoris Chen
 
Intro to CSS3
byDenise Jacobs
 
Css3
byRahma Boufalgha
 
CSS3 - is everything we used to do wrong?
byRuss Weakley
 
HTML5, CSS, JavaScript Style guide and coding conventions
byKnoldus Inc.
 
CSS: selectors and the box model
byIdan Gazit
 
CSS3 and Selectors
byRachel Andrew
 
Javascript coding-and-design-patterns
byHernan Mammana
 
CSS3
byChathuranga Jayanath
 
CSS3: Simply Responsive
byDenise Jacobs
 
CSS 開發加速指南－Sass & Compass
byLucien Lee
 
Getting Started with DOM
byHernan Mammana
 
Preprocessor presentation
byMario Noble
 
Colors In CSS3
byLea Verou
 
Basic-CSS-tutorial
bytutorialsruby
 
CSS
byAkila Iroshan
 

Viewers also liked

PPTX
Plataforma Académica Weboo Live
byLester Sanchez
 
PPTX
Bab ii, 3,5,6,31
byBagus Prihatnanto
 
PDF
Garantia Locatícia
byCasa Grande Netimóveis
 
PPTX
Mir Pasternaka B.L.
byviktoriay
 
PDF
Annual report 2012 2013
byciplc
 
PPTX
FPF - Simulação Final - Navegação em SAP
byBruno Pereira
 
PDF
Development Team Engagement + Development Process
byOtavio Ferreira
 
DOCX
Act. 1
byRamon Espinoza
 
PDF
Darknet - Is it good for you?
byJonathan Jedrasiak
 
PPT
WebSite Evaluating
byCarr Tamara
 
DOC
Smc Zee 18july09
byHarsh Arun
 
PDF
Big data-mining par Jobijoba
byJobijoba SA
 
PPTX
Luonto ja Raamattu
byPanu Pihkala
 
PPSX
Чудеса современной робототехники. Засед В.В.
byzased
 
PDF
Smiles Canape
byVishwa Gujarat
 
ODP
Algunos recursos para desarrollo Web
byJuan Rodríguez
 
PDF
Friends design studio on Startup Village
byNina Itova
 
PDF
Gazette numéro 1 - Jeudi 15 Otobre 2014
byolivier
 
PDF
Sw 3 graded_assignment_10
by_magister_magi_
 
PPT
Графический пакет
byMKoryakina
 
Plataforma Académica Weboo Live
byLester Sanchez
 
Bab ii, 3,5,6,31
byBagus Prihatnanto
 
Garantia Locatícia
byCasa Grande Netimóveis
 
Mir Pasternaka B.L.
byviktoriay
 
Annual report 2012 2013
byciplc
 
FPF - Simulação Final - Navegação em SAP
byBruno Pereira
 
Development Team Engagement + Development Process
byOtavio Ferreira
 
Act. 1
byRamon Espinoza
 
Darknet - Is it good for you?
byJonathan Jedrasiak
 
WebSite Evaluating
byCarr Tamara
 
Smc Zee 18july09
byHarsh Arun
 
Big data-mining par Jobijoba
byJobijoba SA
 
Luonto ja Raamattu
byPanu Pihkala
 
Чудеса современной робототехники. Засед В.В.
byzased
 
Smiles Canape
byVishwa Gujarat
 
Algunos recursos para desarrollo Web
byJuan Rodríguez
 
Friends design studio on Startup Village
byNina Itova
 
Gazette numéro 1 - Jeudi 15 Otobre 2014
byolivier
 
Sw 3 graded_assignment_10
by_magister_magi_
 
Графический пакет
byMKoryakina
 

Similar to Css3

PPTX
web Technolotogies notes lke CSS443.pptx
byssuser46d915
 
PDF
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
byErin M. Kidwell
 
PPTX
Hardcore CSS
byPDX Web & Design
 
PDF
Professional Css
bySubramanyan Murali
 
KEY
The web standards gentleman: a matter of (evolving) standards)
byChris Mills
 
PPTX
CSS 3 Overview
byDanilo Sousa
 
PPTX
Introduction-to-CSS.pptx alll about css types
by25eg105f05
 
PDF
3. CSS
byPavle Đorđević
 
PDF
Css3
byRenzil D'cruz
 
PPTX
css3.pptx
byThiyaguPappu
 
PPTX
Css3 shubelal
byShub
 
PPT
Basic Knowldege about CSS Prepared for VV softech solution (2).ppt
bytestvarun21
 
PPTX
Introduction to CSS and all properties.pptx
byNeelotpal Dey
 
PDF
Evolution of CSS
byEcaterina Moraru (Valica)
 
PPT
3-CSS_essentials.ppt
bydatapro2
 
PPT
3-CSS_essentials.ppt
byscet315
 
PPT
CSS Essentials for Website Development.ppt
byunknownman23570
 
PPT
3-CSS_essentials_developers_begineers.ppt
bymohamed abd elrazek
 
PPT
3-CSS_essentials introduction slides.ppt
byAasma13
 
PPTX
Cordova training - Day 2 Introduction to CSS 3
byBinu Paul
 
web Technolotogies notes lke CSS443.pptx
byssuser46d915
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
byErin M. Kidwell
 
Hardcore CSS
byPDX Web & Design
 
Professional Css
bySubramanyan Murali
 
The web standards gentleman: a matter of (evolving) standards)
byChris Mills
 
CSS 3 Overview
byDanilo Sousa
 
Introduction-to-CSS.pptx alll about css types
by25eg105f05
 
3. CSS
byPavle Đorđević
 
Css3
byRenzil D'cruz
 
css3.pptx
byThiyaguPappu
 
Css3 shubelal
byShub
 
Basic Knowldege about CSS Prepared for VV softech solution (2).ppt
bytestvarun21
 
Introduction to CSS and all properties.pptx
byNeelotpal Dey
 
Evolution of CSS
byEcaterina Moraru (Valica)
 
3-CSS_essentials.ppt
bydatapro2
 
3-CSS_essentials.ppt
byscet315
 
CSS Essentials for Website Development.ppt
byunknownman23570
 
3-CSS_essentials_developers_begineers.ppt
bymohamed abd elrazek
 
3-CSS_essentials introduction slides.ppt
byAasma13
 
Cordova training - Day 2 Introduction to CSS 3
byBinu Paul
 

More from Anjan Banda

PDF
Seo tutorial
byAnjan Banda
 
PPTX
Intro to Javascript
byAnjan Banda
 
PDF
Introduction to php
byAnjan Banda
 
PPTX
Website Networking
byAnjan Banda
 
DOC
crisis-in-textile-industry
byAnjan Banda
 
PPTX
Genetic engineering
byAnjan Banda
 
PPTX
Android os
byAnjan Banda
 
PPT
Body area-networks
byAnjan Banda
 
PPTX
Woods Of Pakistan
byAnjan Banda
 
Seo tutorial
byAnjan Banda
 
Intro to Javascript
byAnjan Banda
 
Introduction to php
byAnjan Banda
 
Website Networking
byAnjan Banda
 
crisis-in-textile-industry
byAnjan Banda
 
Genetic engineering
byAnjan Banda
 
Android os
byAnjan Banda
 
Body area-networks
byAnjan Banda
 
Woods Of Pakistan
byAnjan Banda
 

Recently uploaded

PPTX
Filtration-slow sand filtration and rapid sand filtration.pptx
byChemical Engineering Dept. NIT Rourkela-769008, Odisha, India
 
PDF
FPGA Fabric and Synthesis All Parts Combined
byAmr Adel
 
PDF
EDIH TRAINING AI FOR COMPANIES: MODULE 4
byHristian Daskalov
 
PDF
Chip Designer's Code - Linux Terminal Part 6 - Text Viewers
byAmr Adel
 
PDF
5.5 Inch 4K TFT LCD Display 3840×2160 UHD Panel – LS055D1SX05(G)
bySyluxdisplay
 
PPTX
UNIT 2 _8051.pptx ,INSTRUCTION SET OF 8051,EXAMPLES OF ARITHMETIC,LOGICAL.BRA...
byrekhabalaji2607
 
PDF
ME25C05 RE-ENGINEERING FOR INNOVATION LAB.pdf
byVinothkumarM60
 
PDF
Steel - - Welded Connections.pdf By ER. Gurmeet Singh GCET JAMMU gurmeet.b.t...
byEr. Gurmeet Singh
 
PPTX
MicroAccelerometers & microfluidics.pptx
byThamizhvani TR
 
PDF
Mahabir - Structural Steel Brochure - 2025
byMahabirIndustries1
 
PPTX
Why Air Droppable Containers Are Critical for Modern Aerial Logistics
byNeometrix_Engineering_Pvt_Ltd
 
PDF
(en/zhTW)All_Roads_Lead_to_IPC_DannyJiang
byDanny Jiang
 
PDF
2.2 Inch TFT LCD Display 320×240 Resolution – LH220Q32-FD01 Industrial Panel
bySyluxdisplay
 
PDF
JVM in the Age of AI: 2026 Edition - Deep Dive
byArtur Skowroński
 
PPTX
farmmachinery and it’s functions and it’s mainstream 160910080709.pptx
byhitokalijimo
 
PPTX
Using Bangladesh studies in cse why matter ppp.pptx
bymsprinceahmedontor40
 
PDF
10 Tips for Successfully Purchasing Twitter Accounts.pdf
bymarketing
 
PPTX
24ME402-ENGINEERING MATERIALS AND METALLURGY --- UNIT-II
byDJAGADEESH1
 
PPTX
FROM MEASUREMENT TO MEANING : Metrology-Driven Battery Testing for Reliable ...
byRunjhunDutta
 
PDF
Earths-Structure-and-Composition_20260127_110958_0000.pdf
byabdurasabarfaki
 
Filtration-slow sand filtration and rapid sand filtration.pptx
byChemical Engineering Dept. NIT Rourkela-769008, Odisha, India
 
FPGA Fabric and Synthesis All Parts Combined
byAmr Adel
 
EDIH TRAINING AI FOR COMPANIES: MODULE 4
byHristian Daskalov
 
Chip Designer's Code - Linux Terminal Part 6 - Text Viewers
byAmr Adel
 
5.5 Inch 4K TFT LCD Display 3840×2160 UHD Panel – LS055D1SX05(G)
bySyluxdisplay
 
UNIT 2 _8051.pptx ,INSTRUCTION SET OF 8051,EXAMPLES OF ARITHMETIC,LOGICAL.BRA...
byrekhabalaji2607
 
ME25C05 RE-ENGINEERING FOR INNOVATION LAB.pdf
byVinothkumarM60
 
Steel - - Welded Connections.pdf By ER. Gurmeet Singh GCET JAMMU gurmeet.b.t...
byEr. Gurmeet Singh
 
MicroAccelerometers & microfluidics.pptx
byThamizhvani TR
 
Mahabir - Structural Steel Brochure - 2025
byMahabirIndustries1
 
Why Air Droppable Containers Are Critical for Modern Aerial Logistics
byNeometrix_Engineering_Pvt_Ltd
 
(en/zhTW)All_Roads_Lead_to_IPC_DannyJiang
byDanny Jiang
 
2.2 Inch TFT LCD Display 320×240 Resolution – LH220Q32-FD01 Industrial Panel
bySyluxdisplay
 
JVM in the Age of AI: 2026 Edition - Deep Dive
byArtur Skowroński
 
farmmachinery and it’s functions and it’s mainstream 160910080709.pptx
byhitokalijimo
 
Using Bangladesh studies in cse why matter ppp.pptx
bymsprinceahmedontor40
 
10 Tips for Successfully Purchasing Twitter Accounts.pdf
bymarketing
 
24ME402-ENGINEERING MATERIALS AND METALLURGY --- UNIT-II
byDJAGADEESH1
 
FROM MEASUREMENT TO MEANING : Metrology-Driven Battery Testing for Reliable ...
byRunjhunDutta
 
Earths-Structure-and-Composition_20260127_110958_0000.pdf
byabdurasabarfaki
 

Css3

  • 1.
    implementing the newfeatures AIMS BBSYDPTRAINING
  • 2.
    Briefhistory…1997-2001  Content: HTML4.01  Presentation: CSS1
  • 3.
  • 4.
  • 5.
    VendorPrefixes  Some CSSrules won’t work without the vendor prefix.  Mozilla Browsers (Firefox) -moz  Webkit Browsers (Safari, Chrome) -webkit  Opera -o  Internet Explorer -ms <!--[if IE]> <![endif]-->  Not all CSS rules work with all browsers:  http://www.caniuse.com/  http://www.css3.info/selectors-test/  http://quirksmode.org/css/contents.html
  • 6.
    So, what’s thebig deal about CSS3?
  • 7.
    Newselectors!  element1~element2 Selects anelement that is a general next sibling of another element. Example: http://www.quirksmode.org/css/selector_sibling.html  [attribute^=value] Represents an element with the attribute whose value begins with the prefix value.  [attribute$=value] Represents an element with the attribute whose value ends with the prefix value.  [attribute*=value] Represents an element with the attribute whose value contains the prefix value. Example: http://www.quirksmode.org/css/selector_attributeAdvanced.html
  • 8.
    Newpseudoelements/classes!  :first-of-type  :last-of-type :only-of-type  Select elements that are first, last, or only child of its type of its parent  Example: http://www.quirksmode.org/css/type.html  :first-child  :only-child  :last-child  Selects an element that is the first, only, or last child of its parent.  Examples: http://www.quirksmode.org/css/firstchild.html http://www.quirksmode.org/css/onlychild.html
  • 9.
    Morenewpseudoelements/classes!  nth-child(n)  :nth-of-type(n) Allows you to select elements with a formula.  Example: http://www.quirksmode.org/css/nthchild.html  :nth-last-child(n)  :nth-last-of-type(n)  Work same as nth-child, except that they start counting at the last element instead of the first.  Example: http://www.quirksmode.org/css/nthlastchild.html  :root  Selects the root initial containing block (in HTML, this is the <html> tag)  Example: http://www.quirksmode.org/css/root.html  :empty  Selects elements with no content (“empty”).  Example: http://www.quirksmode.org/css/empty.html  :target  Selects a targeted element – one with an ID with the same value as the URL's hash.  Example: http://www.quirksmode.org/css/target.html http://www.quirksmode.org/css/target.html#testHash
  • 10.
    Stillmorenewpseudoelements/classes!  :enabled  :disabled :checked  Allows a designer to apply style to enabled, disabled, or checked form field elements.  Example: http://www.quirksmode.org/css/enabled.html  :not(selector)  Negates a selector.  Example: http://www.quirksmode.org/css/not.html  ::selection  Defines style for text that a user selects.  Example: http://www.quirksmode.org/css/selection.html
  • 11.
    Newproperties!(andsomenew propertygroups!) • Animation • Background •Border and outline • Box • Color • Content Paged Media • Dimension • Flexible Box • Font • Generated content • Grid • Hyperlink • Linebox • List • Margin • Marquee • Multi-column • Padding • Paged Media • Positioning • Print • Ruby • Speech • Table • Text • 2D/3DTransform • Transition • User-interface CSS Property Groups:
  • 12.
    Animation  @keyframes Specifies theanimation  animation A shorthand property for all the animation properties below, except the animation-play-state property  animation-name Specifies a name for the @keyframes animation  animation-duration Specifies how many seconds or milliseconds an animation takes to complete one cycle  animation-timing-function Specifies the speed curve of the animation  animation-delay Specifies when the animation will start  animation-iteration-count Specifies the number of times an animation should be played  animation-direction Specifies whether or not the animation should play in reverse on alternate cycles  animation-play-state Specifies whether the animation is running or paused  Examples: http://www.leemunroe.com/css3-animations/ http://css3.bradshawenterprises.com/animations/ http://www.w3schools.com/css3/tryit.asp?filename=trycss3_animation1 http://www.standardista.com/sxsw/#slide24
  • 13.
    Transition  transition A shorthandproperty for setting the four transition properties  transition-property Specifies the name of the CSS property the transition effect is for  transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete  transition-timing-function Specifies the speed curve of the transition effect  transition-delay Specifies when the transition effect will start  Example: http://css3.bradshawenterprises.com/transitions/
  • 14.
    Transform  transform Applies a2D or 3D transformation to an element  transform-origin Allows you to change the position on transformed elements  transform-style Specifies how nested elements are rendered in 3D space  perspective Specifies the perspective on how 3D elements are viewed  perspective-origin Specifies the bottom position of 3D elements  backface-visibility Defines whether or not an element should be visible when not facing the screen  Examples: http://westciv.com/tools/3Dtransforms/index.html http://css3.bradshawenterprises.com/transforms/
  • 15.
    Background  background-clip Specifies thepainting area of the background  background-origin Specifies the positioning area of the background images  background-size Specifies the size of the background images  Example: http://www.css3.info/preview/background-origin-and-background-clip/  background-gradient Specifies a gradient (shifting from one color to another) in the background  Examples: http://www.stanford.edu/group/ttsclasses/cgi-bin/techietips/?p=485 http://css-tricks.com/5700-css3-gradients/ http://www.standardista.com/sxsw/#slide3
  • 16.
    Border  border-bottom-left-radius Defines theshape of the border of the bottom-left corner  border-bottom-right-radius Defines the shape of the border of the bottom-right corner  border-image A shorthand property for setting all the border-image-* properties  border-image-outset Specifies the amount by which the border image area extends beyond the border box  border-image-repeat Specifies whether the image-border should be repeated, rounded or stretched  border-image-slice Specifies the inward offsets of the image-border  border-image-source Specifies an image to be used as a border  border-image-width Specifies the widths of the image-border  border-radius A shorthand property for setting all the four border-*-radius properties  border-top-left-radius Defines the shape of the border of the top-left corner  border-top-right-radius Defines the shape of the border of the top-right corner  Examples: http://www.css3.info/preview/rounded-border/ http://border-radius.com/
  • 17.
    Box  box-decoration-break Defines abreak in the box’s decoration  Example: http://www.w3.org/TR/css3-background/#the-box-decoration-break  box-shadow Attaches one or more drop-shadows to the box  Examples: http://www.css3.info/preview/box-shadow/ http://www.standardista.com/sxsw/#slide9  overflow-x Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content area  overflow-y Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area  overflow-style Specifies the preferred scrolling method for elements that overflow  Example: http://www.css3.info/overflow-xoverflow-y
  • 18.
    FlexibleBox  Specification isstill under development…StayTuned!!!  Example: http://www.html5rocks.com/en/tutorials/flexbox/quick/
  • 19.
    Color  RGBA(Red,Green,Blue,Alpha opacity) rgba(100%,0%,0%,0.8)produces 80% red.  Examples: http://www.css3.info/preview/rgba/ http://hex2rgba.devoth.com/  HSLA (Hue, Saturation, Lightness, Alpha opacity) hsla(0,100%, 50%,1.0) produces 100% red.  Examples: http://hslpicker.com/ http://www.css3.info/preview/hsl/  opacity Sets the opacity level for an element from 0 to 1.0.  Example: http://www.css3.info/preview/opacity/ http://www.standardista.com/sxsw/#slide6
  • 20.
    Font  Free webfonts: http://www.google.com/webfonts http://www.fontsquirrel.com  @font-face A rule that allows websites to download and use fonts other than the "web-safe" fonts  Examples: http://css-tricks.com/snippets/css/using-font-face/ http://www.css3.info/preview/web-fonts-with-font-face/  font-size-adjust Preserves the readability of text when font fallback occurs  Example: http://www.w3.org/TR/css3-fonts/#font-size-adjust-prop  font-stretch Selects a normal, condensed, or expanded face from a font family  Example: Currently no browser supports font-stretch
  • 21.
    Text  hanging-punctuation Specifies whethera punctuation character may be placed outside the line box  Example: Currently no browser supports hanging-punctuation  punctuation-trim Specifies whether a punctuation character should be trimmed  Example: Currently no browser supports punctuation-trim  text-outline Specifies a text outline  Example: Currently no browser supports text-outline  text-wrap Specifies line breaking rules for text  Example: Currently no browser supports text-wrap  text-align-last Describes how the last line of a block or a line right before a forced line break is aligned when text- align is "justify"  Example: http://msdn.microsoft.com/en-us/library/ms531163(VS.85).aspx
  • 22.
    Text(continued)  text-justify Specifies thejustification method used when text-align is "justify"  Example: http://msdn.microsoft.com/en-us/library/ms531172(v=VS.85).aspx  text-shadow Adds shadow to text  Examples: http://www.css3.info/preview/text-shadow/ http://www.quirksmode.org/css/textshadow.html http://www.standardista.com/sxsw/#slide9  word-break Specifies line breaking rules for non-CJK (Chinese/Japanese/Korean) text  Example: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-break  word-wrap Allows long, unbreakable words to be broken and wrap to the next line  Example: http://www.css3.info/preview/word-wrap/
  • 23.
    Grid  grid-columns Specifies thewidth of each column in a grid  grid-rows Specifies the height of each column in a grid  Examples: http://dev.w3.org/csswg/css3-grid-align http://www.xanthir.com/blog/b4580
  • 24.
    Multi-column  column-count Specifies thenumber of columns an element should be divided into  column-fill Specifies how to fill columns  column-gap Specifies the gap between the columns  column-rule A shorthand property for setting all the column-rule-* properties  column-rule-color Specifies the color of the rule between columns  column-rule-style Specifies the style of the rule between columns  column-rule-width Specifies the width of the rule between columns  column-span Specifies how many columns an element should span across  column-width Specifies the width of the columns  columns A shorthand property for setting column-width and column-count  Examples: http://www.quirksmode.org/css/multicolumn.html http://www.css3.info/preview/multi-column-layout/
  • 25.
    Marquee  marquee-direction Sets thedirection of the moving content  marquee-play-count Sets how many times the content move  marquee-speed Sets how fast the content scrolls  marquee-style Sets the style of the moving content  Examples: http://www.css3.info/modules/css3-marquee- module/ http://www.cssplay.co.uk/menu/css3-marquee.html
  • 26.
    Ruby  ruby-align Controls thetext alignment of the ruby text and ruby base contents relative to each other  ruby-overhang Determines whether, and on which side, ruby text is allowed to partially overhang any adjacent text in addition to its own base, when the ruby text is wider than the ruby base  ruby-position Controls the position of the ruby text with respect to its base  ruby-span Controls the spanning behavior of annotation elements  Examples: http://www.w3.org/TR/css3-ruby http://www.storiesinflight.com/html5/ruby.html
  • 27.
    User-Interface  appearance Makes anyelement appear like a form element (e.g., paragraphs can look like buttons).  Examples: https://developer.mozilla.org/en/CSS/-moz-appearance http://davidwalsh.name/dw-content/webkit-styles.php  box-sizing Forces an element fit inside an area.  Example: http://css-tricks.com/examples/BoxSizing/  outline-offset Offsets an outline, and draws it beyond the border edge  Example: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_outline-offset  resize Specifies whether or not an element is resizable by the user  Example: http://www.css3.info/preview/resize/
  • 28.
    User-Interface(continued)  nav-index Specifies thetabbing order for an element  nav-down Specifies the position of the element when using the arrow-down navigation key  nav-left Specifies the position of the element when using the arrow-left navigation key  nav-right Specifies the position of the element when using the arrow-right navigation key  nav-up Specifies the position of the element when using the arrow-up navigation key  Example: Currently no browser supports the nav* properties
  • 29.
    ContentforPagedMedia(print)  bookmark-label Specifies thelabel of the bookmark  bookmark-level Specifies the level of the bookmark  bookmark-target Specifies the target of the bookmark link  Example: http://www.w3.org/TR/css3-gcpm/#bookmarks  float-offset Pushes floated elements in the opposite direction of the where they have been floated with float  Example: http://www.w3.org/TR/css3-gcpm/#the-float-offset-property  image-resolution Specifies the resolution of an image  Example: http://dev.w3.org/csswg/css3-images/#image-resolution  marks Adds crop and/or cross marks to the document  Example: http://www.quackit.com/css/properties/css_marks.cfm  string-set Named strings are created with the ‘string-set’ property which copies a string of text into the named string. Only text is copied; not style, structure, or replaced content  Example: http://www.w3.org/TR/css3-gcpm/#string-set
  • 30.
    ContentforPagedMedia(print)- continued  hyphenate-after Specifies theminimum number of characters in a hyphenated word after the hyphenation character  hyphenate-before Specifies the minimum number of characters in a hyphenated word before the hyphenation character  hyphenate-character Specifies a string that is shown when a hyphenate-break occurs  hyphenate-lines Indicates the maximum number of successive hyphenated lines in an element  hyphenate-resource Specifies a comma-separated list of external resources that can help the browser determine hyphenation points  hyphens Sets how to split words to improve the layout of paragraphs  Example: http://meyerweb.com/eric/css/tests/css3/show.php?p=hyphens
  • 31.
    MorePagedMediaProperties  object-fit Gives ahint for how to scale a replaced element if neither its width nor its height property is auto  object-position Determines the alignment of the object inside the box  Examples: http://www.w3.org/TR/css3-images/#object-fit http://www.w3.org/TR/css3-images/#object-position  image-orientation Specifies a rotation in the right or clockwise direction that a user agent applies to an image  Example: http://dev.w3.org/csswg/css3-images/#image-orientation  size Specifies the size and orientation of the containing box for page content  Example: http://dev.w3.org/csswg/css3-page/#page-size-prop
  • 32.
    Speech  mark A shorthandproperty for setting the mark-before and mark-after properties  mark-after Allows named markers to be attached to the audio stream  mark-before Allows named markers to be attached to the audio stream  phonemes Specifies a phonetic pronunciation for the text contained by the corresponding element  rest A shorthand property for setting the rest-before and rest-after properties  rest-after Specifies a rest or prosodic boundary to be observed after speaking an element's content  rest-before Specifies a rest or prosodic boundary to be observed before speaking an element's content
  • 33.
    Speech(continued)  voice-balance Specifies thebalance between left and right channels  voice-duration Specifies how long it should take to render the selected element's content  voice-pitch Specifies the average pitch (a frequency) of the speaking voice  voice-pitch-range Specifies variation in average pitch  voice-rate Controls the speaking rate  voice-stress Indicates the strength of emphasis to be applied  voice-volume Refers to the amplitude of the waveform output by the speech synthesizes  Examples: http://www.css3.info/preview/speech/ http://dev.w3.org/csswg/css3-speech/
  • 34.
    Linebox  alignment-adjust Allows moreprecise alignment of elements  alignment-baseline Specifies how an inline-level element is aligned with respect to its parent  baseline-shift Allows repositioning of the dominant-baseline relative to the dominant-baseline  dominant-baseline Specifies a scaled-baseline-table  drop-initial-after-adjust Sets the alignment point of the drop initial for the primary connection point  drop-initial-after-align Sets which alignment line within the initial line box is used at the primary connection point with the initial letter box  drop-initial-before-adjust Sets the alignment point of the drop initial for the secondary connection point  drop-initial-before-align Sets which alignment line within the initial line box is used at the secondary connection point with the initial letter box  drop-initial-size Controls the partial sinking of the initial letter  drop-initial-value Activates a drop-initial effect
  • 35.
    Linebox(continued)  inline-box-align Sets whichline of a multi-line inline block align with the previous and next inline elements within a line  line-stacking A shorthand property for setting the line-stacking-strategy, line-stacking-ruby, and line-stacking-shift properties  line-stacking-ruby Sets the line stacking method for block elements containing ruby annotation elements  line-stacking-shift Sets the line stacking method for block elements containing elements with base-shift  line-stacking-strategy Sets the line stacking strategy for stacked line boxes within a containing block element  text-height Sets the block-progression dimension of the text content area of an inline box  Example: http://dev.w3.org/csswg/css3-linebox/#properties
  • 36.
    Hyperlink  target A shorthandproperty for setting the target-name, target-new, and target-position properties  target-name Specifies where to open links (target destination)  target-new Specifies whether new destination links should open in a new window or in a new tab of an existing window  target-position Specifies where new destination links should be placed  Examples: http://thinkvitamin.com/design/stay-on-target/ http://virtuelvis.com/gallery/css3/target/interface.html http://www.uselesscode.org/blog/82/pure-css3-tab-widget
  • 37.
    SomeCSS3Resources…  http://www.stanford.edu/group/ttsclasses/css/  http://border-radius.com/ http://caniuse.com/  http://css-tricks.com/  http://css3.bradshawenterprises.com  http://css3.info/  http://cssplay.co.uk/menu/css3-marquee.html  http://davidwalsh.name/dw-content/webkit- styles.php  http://dev.w3.org/csswg/  http://fontsquirrel.com/  http://google.com/webfonts  http://hex2rgba.devoth.com/  http://hslpicker.com/  http://html5rocks.com/  http://leemunroe.com  http://meyerweb.com/eric/css/  http://msdn.microsoft.com/  http://quackit.com/css  http://quirksmode.org/css/contents.html  http://standardista.com  http://standardista.com/sxsw  http://storiesinflight.com/html5/ruby.html  http://stubbornella.org/content/category/general/gee k/css/  http://thinkvitamin.com/design/stay-on-target/  http://uselesscode.org/blog/82/pure-css3-tab-widget  http://virtuelvis.com/gallery/css3/target/interface.htm l  http://w3.org/  http://w3schools.com  http://westciv.com/tools/3Dtransforms  http://xanthir.com/blog  http://xanthir.com/blog/b4580  http://selectivizr.com