CSS3 properties

 

A.  CSS3 properties 

1.      Borders

i.                     border- radius：createrounded corners

      （top-left，top-right，bottom-right，bottom-left）

 Example：

 Result：

     

 

ii.                  border-image：use an image to create aborder

               （source（require），slice，width（require），outset，repeat（horizontal，               vertical））

  Example：

 

 Result：

     

 

 

iii.                 box-shadow：use to add shadow to boxes（h-shadow，v-shadow，blur，spread，color，inset）

 Example：

 

 

 

 

 

 

 

 Result：

     

   

iv.                Brower Support

 

Property	Browser Support
border-radius	IE9	FF4	Chrome5	Safari 5	Opera
border-image		FF	（-webkit-）Chrome	（-webkit-）Safari	Opera
box-shadow	IE 9	FF4	Chrome14	Safari	Opera

 

 

2.      Backgrounds

I．              Background-size：（width，height）

 Example：

 

 

 Result：

     

 

II．            Background-origin：

     Values：content-box/padding-box/border-box

 

 

Example：

    

Result：

  

III．          Background-clip：

     Values：content-box/padding-box/border-box

Example：

 

    Result：

                                     

 

IV．         Brower Support

 

Property	Browser Support
Background-size	IE9	FF4	Chrome4	Safari5	Opera
Background-origin	IE9	FF4	Chrome4	Safari5	Opera
Background-clip	IE9	FF4	Chrome10	(-webkit-)    Safari5	Opera

 

3.      Texts

i.                    Text-shadow:

( h-shadow, v-shadow, blur, color )

Example:

Result:

ii.                  Word-warp: value: normal/break-word

Example:

 

Result:

iii.                 Word-break: value: normal/break-all/hyphenate

Example:

Result:

      

iv.                Text-overflow: value: clip/ellipsis/string

Example:

Result:

  

v.                  Brower Support

 

 

Property	Browser  Support
Text-shadow	IE 10	FF3	Chrome4	Safari4	Opera
Word-wrap	IE5	FF3.6	Chrome	Safari	Opera
Word-break	IE5	FF	Chrome8	Safari3	Opera
Text-overflow	IE5	FF7	Chrome4	Safari4	Opera
Text-justify	IE5

 

 

4.      Fonts

i.                    @font-face:

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
      url('Sansation_Bold.eot');/* IE9+ */
font-weight:bold;
 }

ii.                  Brower Support

 

 

Property	Browser Support
@font-face	IE9	FF3.6	Chrome4	Safari3	Opera

 

 

5.      Transform

i.                    Transform:

 Value:none/matrix(n,n,n,n,n,n)/translate(x,y)/scale(x,y)/rotate(angle)/skew(x-angle,y-                angle)/perspective

                      Example:

 

                    

                      Result:

             

ii.                  Transform-origin：value: x-axisy-axis z-axis;

  Internet Explorer supports an alternative,the –ms-transform-origin property, but only for 2D-transforms.

Firefoxsupports an alternative, the –moz-transform-origin property, but only for2D-transforms.

Operasupports an alternative, the –o-transform-origin property, but only for2D-transforms.

Safariand Chrome supports an alternative, the –webkit-transform-origin property, onboth 2D- and 3D-transfoms.

Example:

Result:

iii.                 Transform-style: value: flat/preserve-3d

              Note: This property must be used together with the transformproperty.

Example:

          

 

 

 

Result:

iv.                Perspective:  value：number|none;

              Note: Theperspective property only affects 3D transformed elements!

              Tip: Use this property together with the perspective-origin property, which allows you to change the bottom position of3D elements.

Example:

Result:

v.                  Perspective-origin:  value: x-axis y-axis;

     Note: This property must be usedtogether with the perspectiveproperty, and only affects 3D transformed elements!

Example:

Result:

 

vi.                Backface-visibility: value: hidden/visible

Note: This property is useful when an element is rotated, and youdo not want to see its backside.

Example:

Result:

       

 

 

vii.               Brower Support

 

Property	Browser Support
transform	(-ms-) IE9	(-moz-) FF3.6	(-webkit-) Chrome	(-webkit-) Safari	(-o-) Opera
Transform-origin	(-ms-) IE9	(-moz-) FF3.6	(-webkit-) Chrome	(-webkit-) Safari	(-o-) Opera
Transform-style			(-webkit-) Chrome	(-webkit-) Safari5
perspective			(-webkit-) Chrome	(-webkit-) Safari5
Perspective-origin			(-webkit-) Chrome	(-webkit-) Safari
backface-visibility		(-moz-) FF	(-webkit-) Chrome	(-webkit-) Safari

 

6.      Transitions

i.                    Transition: (Transition-property, Transition-duration,transition-timing-function, transition-delay)

Example:

 

   

Result:

     

ii.                  Transition-property:  value: none/all/property-name(as width,height)

iii.                 Transition-duration: value: time(as 2s)

         Note: The transition-durationproperty specifies how many seconds (s) or milliseconds (ms) a transitioneffect takes to complete.

 

iv.                Transition-timing-function:  value: linear/ease/ease-in/ease-out/ease-in-out

                /cubic-bezier(n,n,n,n)

v.                  Transition-delay: value: time(as 2s)

vi.                Brower Support

 

Property	Browser Support
transition	IE  10	(-moz-) FF4	(-webkit-) Chrome	(-webkit-) Safari	Opera

 

7.      Animations

i.                    Animation: (animation-name,animation-duration, animation-timing-function,      animation-delay,animation-iteration-count, and animation-direction)

     animation-name: Specify a name for the @keyframesanimation

     animation-duration:  time (as 2s) ---complete time

    animation-timing-function:  linear/ease/ease-in/ease-out/ease-in-out

                     /cubic-bezier(n,n,n,n)

    animation-delay: time (as 2s)

    animation-iteration-count: number/infinite

    animation-direction: normal/alternate

                    Example:

                              

                    Result:

ii.                  Animation-play-state: value: running/paused

                       Example:

                               

                    Result:

iii.                 @keyframes

     @keyframesanimationname { keyframes-selector {CSS-styles;}}

 

     Keyframes-selector:

                               Legalvalues: 0-100%
                                                    from (same as 0%)
                                                    to (same as 100%)

 

iv.                Brower Support

 

Property	Browser Support
animation	IE  10	(-moz-)       FF5	(-webkit-) Chrome	(-webkit-) Safari	Opera
animation-play-state	IE  10	(-moz-)        FF5	(-webkit-) Chrome	(-webkit-) Safari	Opera
@keyframes	IE  10	(-moz-)        FF4	(-webkit-) Chrome	(-webkit-) Safari	Opera

 

8.      Columns

i.                    Columns: column-count, column-width

Example:

 

Result:

ii.                  Column-fill: value: auto/balance

iii.                 Column-gap:

iv.                Column-rule:column-rule-widthcolumn-rule-style column-rule-color;

            Column-rule-style:

                value: none/hidden/dotted/dashed/solid/double/groove/ridge/inset/outset

v.                  Column-span: value: 1/all

vi.                Brower Support

 

Property	Browser Support
Columns	IE  10	(-moz-)        FF5	(-webkit-) Chrome	(-webkit-) Safari	Opera
Column-fill
Column-gap	IE  10	(-moz-)        FF5	(-webkit-) Chrome	(-webkit-) Safari	Opera
Column-rule	IE 10	(-moz-)       FF5	(-webkit-) Chrome	(-webkit-) Safari	Opera
Column-span	IE  10		(-webkit-) Chrome	(-webkit-) Safari	Opera

 

 

 

9.      User Interface

 

i.                    Resize: value: none/both/horizontal/vertical

Example:    

 

           

Result:

  

ii.                  Appearance: value: normal/icon/window/button/menu/field

Example:

         

Result:

iii.                 Box-sizing: value:content-box/border-box/inherit

Example:

 

Result:

   

iv.                Icon: value: auto/URL/inherit

v.                  Nav-down

vi.                Nav-index

vii.               Nav-left

viii.             Nav-up

ix.                Outline-offset: value: length/inherit

                   Theoutline-offset property offsets an outline, and draws it beyond the borderedge.

                                Outlines differfrom borders in two ways:

·          Outlinesdo not take up space

·          Outlinesmay be non-rectangular

 

Example:

 

     

Result:

x.                  Brower Support

 

Property	Browser Support
resize		FF4	Chrome	Safari
appearance		(-moz-)       FF3	(-webkit-) Chrome	(-webkit-) Safari
box-sizing	IE8	(-moz-) FF	Chrome9	(-webkit-) Safari
icon
nav-index					Opera
nav-down					Opera
nav-left					Opera
nav-up					Opera
outline-offset	IE9	FF2	Chrome4	Safari4	Opera

 

10.  Media Queries

     @mediascreen and (max-width: 600px){

   .class {

          Background: #ccc;

  }

}

 

 

 

B.  CSS selectors

 

 

Selector	Example	Example description	CSS
.class	.intro	Selects all elements with  class="intro"	1
#id	#firstname	Selects the element with id="firstname"	1
*	*	Selects all elements	2
element	p	Selects all <p> elements	1
element,element	div,p	Selects all <div> elements and all  <p> elements	1
element  element	div p	Selects all <p> elements inside  <div> elements	1
element>element	div>p	Selects all <p> elements where the  parent is a <div> element	2
element+element	div+p	Selects all <p> elements that are  placed immediately after <div> elements	2
[attribute]	[target]	Selects all elements with a target  attribute	2
[attribute=value]	[target=_blank]	Selects all elements with  target="_blank"	2
[attribute~=value]	[title~=flower]	Selects all elements with a title  attribute containing the word "flower"	2
[attribute|=value]	[lang|=en]	Selects all elements with a lang  attribute value starting with "en"	2
:link	a:link	Selects all unvisited links	1
:visited	a:visited	Selects all visited links	1
:active	a:active	Selects the active link	1
:hover	a:hover	Selects links on mouse over	1
:focus	input:focus	Selects the input element which has focus	2
:first-letter	p:first-letter	Selects the first letter of every  <p> element	1
:first-line	p:first-line	Selects the first line of every <p>  element	1
:first-child	p:first-child	Selects every <p> element that is  the first child of its parent	2
:before	p:before	Insert content before  the content  of every <p> element	2
:after	p:after	Insert content after every <p>  element	2
:lang(language)	p:lang(it)	Selects every <p> element with a  lang attribute value starting with "it"	2
element1~element2	p~ul	Selects every <ul> element that are  preceded by a <p> element	3
[attribute^=value]	a[src^="https"]	Selects every <a> element whose src  attribute value begins with "https"	3
[attribute$=value]	a[src$=".pdf"]	Selects every <a> element whose src  attribute value ends with ".pdf"	3
[attribute*=value]	a[src*="w3schools"]	Selects every <a> element whose src  attribute value contains the substring "w3schools"	3
:first-of-type	p:first-of-type	Selects every <p> element that is  the first <p> element of its parent	3
:last-of-type	p:last-of-type	Selects every <p> element that is  the last <p> element of its parent	3
:only-of-type	p:only-of-type	Selects every <p> element that is  the only <p> element of its parent	3
:only-child	p:only-child	Selects every <p> element that is  the only child of its parent	3
:nth-child(n)	p:nth-child(2)	Selects every <p> element that is  the second child of its parent	3
:nth-last-child(n)	p:nth-last-child(2)	Selects every <p> element that is  the second child of its parent, counting from the last child	3
:nth-of-type(n)	p:nth-of-type(2)	Selects every <p> element that is  the second <p> element of its parent	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every <p> element that is  the second <p> element of its parent, counting from the last child	3
:last-child	p:last-child	Selects every <p> element that is  the last child of its parent	3
:root	:root	Selects the document’s root element	3
:empty	p:empty	Selects every <p> element that has  no children (including text nodes)	3
:target	#news:target	Selects the current active #news element  (clicked on a URL containing that anchor name)	3
:enabled	input:enabled	Selects every enabled <input>  element	3
:disabled	input:disabled	Selects every disabled <input>  element	3
:checked	input:checked	Selects every checked <input>  element	3
:not(selector)	:not(p)	Selects every element that is not a  <p> element	3
::selection	::selection	Selects the portion of an element that is  selected by a user	3

 

 

1.      #menu a:hover, #menu a.selezionato    /*normal select the first one of a tag */

           {

                      text-shadow:1px 1px#FFFFFF;

            }

2.    WebKit?Or Gecko?

There are twoleading open-source layout engines for web browsers: WebKit, and Gecko. Safari(among others) uses WebKit, and Firefox (among others) uses Gecko. Which do youprefer? What are the advantages and disadvantages of each?  And they are the marks of differentbrowses. 

 

引擎类型	Gecko	Webkit
Border-radius	-moz-border-radius	-webkit-border-radius
border-bottom-left-radius	-moz-  border-bottom-left-radius	-webkit-border-bottom-left-radius
border-bottom-right-radius	-moz-  border-bottom-right-radius	-webkit-border-bottom-right-radius
border-top-left-radius	-moz-  border-top-left-radius	-webkit-border-top-left-radius
border-top-right-radius	-moz- border-top-right-radius	-webkit-border-top-right-radius

 

 

3.         

  div#div2

{

   transform:rotate(30deg);

  -ms-transform:rotate(30deg); /* IE 9 */

  -moz-transform:rotate(30deg); /* Firefox */

  -webkit-transform:rotate(30deg); /* Safariand Chrome */

  -o-transform:rotate(30deg); /* Opera */

}

                                                                                                                     

 

 

4.