Most Important CSS3 Properties Explained

MOST IMPORTANT CSS3 PROPERTIES OPACITY BORDER-IMAGE • BACKGROUND • LINEAR-GRADIENT BORDER-RADIUS BOX-SHADOW RGBA • TRANSITION TEXT-SHADOW BORDER-RADIUS: 8PX allows you to round corners of every HTML element that has a border or background ...... OPACITY: 0.5 0.5 50% the opacity ranges from 0 (fully transparent) to 1 (opaque, solid) - in this case it is set to be 50% opaque BORDER-IMAGE: URL(IMAGE.PNG) 1 ROUND STRETCH an image file that represents the four corners and four sides of the border as well as background of the element 4 .... ··· BACKGROUND: URL(IMAGE1.PNG) RIGHT TOP NO-REPEAT, URL(IMAGE2.PNG) LEFT BOTTOM REPEAT-Y one background image aligned to the top right corner and a second image that starts at the bottom left corner and is repeated at the y-axis LINEAR-GRADIENT: (BLACK, WHITE 30%, GREY) the starting color of the gradient is black, at 30% on the gradient axis it is white (representing a color stop) and the ending color is grey TRANSITION: COLOR 1S EASE-IN the color of the element is transitioned over a period of 1 second and the ease-in stands for a smooth acceleration at the beginning •... COLOR: RGBA(253, 193, 119, O.5) the first three values represent the red, green and blue values of the color ranging from 0 to 255 - the last value sets the opacity where 0 is fully transparent and 1 fully opaque BOX-SHADOW: 12PX 10PX 7PX #00000O the first value represents the horizontal offset of the shadow - the second value sets the vertical offset - the last value is responsible for the blur radius - the color is set to #000000 TEXT-SHADOW -7PX -5PX 7PX #00 the first value represents the horizontal offset of the shadow - the second value sets the vertical offset - the last value is responsible for the blur radius - the color is set to #000000 Infographic made by sposato graphicals | www.sposato.at |@TeresaSposato Sources: Onextrapixel | http://www.onextrapixel.com/2011/04/06/the-most-important-css3-properties-explained/ Fonts: NOVECENTO WIDE, Goldenbrook, FFF TUSJ Oonextrapixel MOST IMPORTANT CSS3 PROPERTIES OPACITY BORDER-IMAGE • BACKGROUND • LINEAR-GRADIENT BORDER-RADIUS BOX-SHADOW RGBA • TRANSITION TEXT-SHADOW BORDER-RADIUS: 8PX allows you to round corners of every HTML element that has a border or background ...... OPACITY: 0.5 0.5 50% the opacity ranges from 0 (fully transparent) to 1 (opaque, solid) - in this case it is set to be 50% opaque BORDER-IMAGE: URL(IMAGE.PNG) 1 ROUND STRETCH an image file that represents the four corners and four sides of the border as well as background of the element 4 .... ··· BACKGROUND: URL(IMAGE1.PNG) RIGHT TOP NO-REPEAT, URL(IMAGE2.PNG) LEFT BOTTOM REPEAT-Y one background image aligned to the top right corner and a second image that starts at the bottom left corner and is repeated at the y-axis LINEAR-GRADIENT: (BLACK, WHITE 30%, GREY) the starting color of the gradient is black, at 30% on the gradient axis it is white (representing a color stop) and the ending color is grey TRANSITION: COLOR 1S EASE-IN the color of the element is transitioned over a period of 1 second and the ease-in stands for a smooth acceleration at the beginning •... COLOR: RGBA(253, 193, 119, O.5) the first three values represent the red, green and blue values of the color ranging from 0 to 255 - the last value sets the opacity where 0 is fully transparent and 1 fully opaque BOX-SHADOW: 12PX 10PX 7PX #00000O the first value represents the horizontal offset of the shadow - the second value sets the vertical offset - the last value is responsible for the blur radius - the color is set to #000000 TEXT-SHADOW -7PX -5PX 7PX #00 the first value represents the horizontal offset of the shadow - the second value sets the vertical offset - the last value is responsible for the blur radius - the color is set to #000000 Infographic made by sposato graphicals | www.sposato.at |@TeresaSposato Sources: Onextrapixel | http://www.onextrapixel.com/2011/04/06/the-most-important-css3-properties-explained/ Fonts: NOVECENTO WIDE, Goldenbrook, FFF TUSJ Oonextrapixel MOST IMPORTANT CSS3 PROPERTIES OPACITY BORDER-IMAGE • BACKGROUND • LINEAR-GRADIENT BORDER-RADIUS BOX-SHADOW RGBA • TRANSITION TEXT-SHADOW BORDER-RADIUS: 8PX allows you to round corners of every HTML element that has a border or background ...... OPACITY: 0.5 0.5 50% the opacity ranges from 0 (fully transparent) to 1 (opaque, solid) - in this case it is set to be 50% opaque BORDER-IMAGE: URL(IMAGE.PNG) 1 ROUND STRETCH an image file that represents the four corners and four sides of the border as well as background of the element 4 .... ··· BACKGROUND: URL(IMAGE1.PNG) RIGHT TOP NO-REPEAT, URL(IMAGE2.PNG) LEFT BOTTOM REPEAT-Y one background image aligned to the top right corner and a second image that starts at the bottom left corner and is repeated at the y-axis LINEAR-GRADIENT: (BLACK, WHITE 30%, GREY) the starting color of the gradient is black, at 30% on the gradient axis it is white (representing a color stop) and the ending color is grey TRANSITION: COLOR 1S EASE-IN the color of the element is transitioned over a period of 1 second and the ease-in stands for a smooth acceleration at the beginning •... COLOR: RGBA(253, 193, 119, O.5) the first three values represent the red, green and blue values of the color ranging from 0 to 255 - the last value sets the opacity where 0 is fully transparent and 1 fully opaque BOX-SHADOW: 12PX 10PX 7PX #00000O the first value represents the horizontal offset of the shadow - the second value sets the vertical offset - the last value is responsible for the blur radius - the color is set to #000000 TEXT-SHADOW -7PX -5PX 7PX #00 the first value represents the horizontal offset of the shadow - the second value sets the vertical offset - the last value is responsible for the blur radius - the color is set to #000000 Infographic made by sposato graphicals | www.sposato.at |@TeresaSposato Sources: Onextrapixel | http://www.onextrapixel.com/2011/04/06/the-most-important-css3-properties-explained/ Fonts: NOVECENTO WIDE, Goldenbrook, FFF TUSJ Oonextrapixel MOST IMPORTANT CSS3 PROPERTIES OPACITY BORDER-IMAGE • BACKGROUND • LINEAR-GRADIENT BORDER-RADIUS BOX-SHADOW RGBA • TRANSITION TEXT-SHADOW BORDER-RADIUS: 8PX allows you to round corners of every HTML element that has a border or background ...... OPACITY: 0.5 0.5 50% the opacity ranges from 0 (fully transparent) to 1 (opaque, solid) - in this case it is set to be 50% opaque BORDER-IMAGE: URL(IMAGE.PNG) 1 ROUND STRETCH an image file that represents the four corners and four sides of the border as well as background of the element 4 .... ··· BACKGROUND: URL(IMAGE1.PNG) RIGHT TOP NO-REPEAT, URL(IMAGE2.PNG) LEFT BOTTOM REPEAT-Y one background image aligned to the top right corner and a second image that starts at the bottom left corner and is repeated at the y-axis LINEAR-GRADIENT: (BLACK, WHITE 30%, GREY) the starting color of the gradient is black, at 30% on the gradient axis it is white (representing a color stop) and the ending color is grey TRANSITION: COLOR 1S EASE-IN the color of the element is transitioned over a period of 1 second and the ease-in stands for a smooth acceleration at the beginning •... COLOR: RGBA(253, 193, 119, O.5) the first three values represent the red, green and blue values of the color ranging from 0 to 255 - the last value sets the opacity where 0 is fully transparent and 1 fully opaque BOX-SHADOW: 12PX 10PX 7PX #00000O the first value represents the horizontal offset of the shadow - the second value sets the vertical offset - the last value is responsible for the blur radius - the color is set to #000000 TEXT-SHADOW -7PX -5PX 7PX #00 the first value represents the horizontal offset of the shadow - the second value sets the vertical offset - the last value is responsible for the blur radius - the color is set to #000000 Infographic made by sposato graphicals | www.sposato.at |@TeresaSposato Sources: Onextrapixel | http://www.onextrapixel.com/2011/04/06/the-most-important-css3-properties-explained/ Fonts: NOVECENTO WIDE, Goldenbrook, FFF TUSJ Oonextrapixel MOST IMPORTANT CSS3 PROPERTIES OPACITY BORDER-IMAGE • BACKGROUND • LINEAR-GRADIENT BORDER-RADIUS BOX-SHADOW RGBA • TRANSITION TEXT-SHADOW BORDER-RADIUS: 8PX allows you to round corners of every HTML element that has a border or background ...... OPACITY: 0.5 0.5 50% the opacity ranges from 0 (fully transparent) to 1 (opaque, solid) - in this case it is set to be 50% opaque BORDER-IMAGE: URL(IMAGE.PNG) 1 ROUND STRETCH an image file that represents the four corners and four sides of the border as well as background of the element 4 .... ··· BACKGROUND: URL(IMAGE1.PNG) RIGHT TOP NO-REPEAT, URL(IMAGE2.PNG) LEFT BOTTOM REPEAT-Y one background image aligned to the top right corner and a second image that starts at the bottom left corner and is repeated at the y-axis LINEAR-GRADIENT: (BLACK, WHITE 30%, GREY) the starting color of the gradient is black, at 30% on the gradient axis it is white (representing a color stop) and the ending color is grey TRANSITION: COLOR 1S EASE-IN the color of the element is transitioned over a period of 1 second and the ease-in stands for a smooth acceleration at the beginning •... COLOR: RGBA(253, 193, 119, O.5) the first three values represent the red, green and blue values of the color ranging from 0 to 255 - the last value sets the opacity where 0 is fully transparent and 1 fully opaque BOX-SHADOW: 12PX 10PX 7PX #00000O the first value represents the horizontal offset of the shadow - the second value sets the vertical offset - the last value is responsible for the blur radius - the color is set to #000000 TEXT-SHADOW -7PX -5PX 7PX #00 the first value represents the horizontal offset of the shadow - the second value sets the vertical offset - the last value is responsible for the blur radius - the color is set to #000000 Infographic made by sposato graphicals | www.sposato.at |@TeresaSposato Sources: Onextrapixel | http://www.onextrapixel.com/2011/04/06/the-most-important-css3-properties-explained/ Fonts: NOVECENTO WIDE, Goldenbrook, FFF TUSJ Oonextrapixel MOST IMPORTANT CSS3 PROPERTIES OPACITY BORDER-IMAGE • BACKGROUND • LINEAR-GRADIENT BORDER-RADIUS BOX-SHADOW RGBA • TRANSITION TEXT-SHADOW BORDER-RADIUS: 8PX allows you to round corners of every HTML element that has a border or background ...... OPACITY: 0.5 0.5 50% the opacity ranges from 0 (fully transparent) to 1 (opaque, solid) - in this case it is set to be 50% opaque BORDER-IMAGE: URL(IMAGE.PNG) 1 ROUND STRETCH an image file that represents the four corners and four sides of the border as well as background of the element 4 .... ··· BACKGROUND: URL(IMAGE1.PNG) RIGHT TOP NO-REPEAT, URL(IMAGE2.PNG) LEFT BOTTOM REPEAT-Y one background image aligned to the top right corner and a second image that starts at the bottom left corner and is repeated at the y-axis LINEAR-GRADIENT: (BLACK, WHITE 30%, GREY) the starting color of the gradient is black, at 30% on the gradient axis it is white (representing a color stop) and the ending color is grey TRANSITION: COLOR 1S EASE-IN the color of the element is transitioned over a period of 1 second and the ease-in stands for a smooth acceleration at the beginning •... COLOR: RGBA(253, 193, 119, O.5) the first three values represent the red, green and blue values of the color ranging from 0 to 255 - the last value sets the opacity where 0 is fully transparent and 1 fully opaque BOX-SHADOW: 12PX 10PX 7PX #00000O the first value represents the horizontal offset of the shadow - the second value sets the vertical offset - the last value is responsible for the blur radius - the color is set to #000000 TEXT-SHADOW -7PX -5PX 7PX #00 the first value represents the horizontal offset of the shadow - the second value sets the vertical offset - the last value is responsible for the blur radius - the color is set to #000000 Infographic made by sposato graphicals | www.sposato.at |@TeresaSposato Sources: Onextrapixel | http://www.onextrapixel.com/2011/04/06/the-most-important-css3-properties-explained/ Fonts: NOVECENTO WIDE, Goldenbrook, FFF TUSJ Oonextrapixel