CSS PresentationCSS PresentationHow to make things shiny?How to make things shiny?
Table of ContentsTable of Contents
�� TextText--related Propertiesrelated Properties
�� BordersBorders
�� BackgroundsBackgrounds
�� Background colorBackground color
�� Background imageBackground image
�� Gradient Background Gradient Background
�� OpacityOpacity
TextText--related Propertiesrelated Properties
3
TextText--related CSS Propertiesrelated CSS Properties
�� colorcolor –– specifies the color of the textspecifies the color of the text
�� fontfont--sizesize –– size of font: size of font: xxxx--smallsmall, , xx--smallsmall, ,
smallsmall, , mediummedium, , largelarge, , xx--largelarge, , xxxx--largelarge, ,
smallersmaller, , largerlarger or numeric valueor numeric value
�� fontfont--familyfamily –– comma separated font namescomma separated font names
�� Example: Example: verdanaverdana, , sanssans--serifserif, etc. , etc.
�� The browser loads the first one that is availableThe browser loads the first one that is available
�� There should always be at least one generic fontThere should always be at least one generic font
�� fontfont--weightweight can be can be normalnormal, , boldbold, , bolderbolder, ,
lighterlighter or a number in range [or a number in range [100100 …… 900900]]4
CSS Rules for Fonts (2)CSS Rules for Fonts (2)
�� fontfont--stylestyle –– styles the fontstyles the font
�� Values: Values: normalnormal, , italicitalic, , obliqueoblique
�� texttext--decorationdecoration –– decorates the textdecorates the text
�� Values: Values: nonenone, , underlineunderline, , lineline--troughtrough, ,
overlineoverline, , blinkblink
�� texttext--alignalign –– defines the alignment of text or defines the alignment of text or
other contentother content
�� Values: Values: leftleft, , rightright, , centercenter, , justifyjustify
5
Shorthand Font PropertyShorthand Font Property
�� fontfont
�� Shorthand rule for setting multiple font Shorthand rule for setting multiple font
properties at the same timeproperties at the same time
is equal to writing this:is equal to writing this:
6
font:italic normal bold 12px/16px verdanafont:italic normal bold 12px/16px verdana
fontfont--style: italic;style: italic;fontfont--variant: normal;variant: normal;fontfont--weight: bold;weight: bold;fontfont--size: 12px;size: 12px;lineline--height: 16px;height: 16px;fontfont--family: verdana;family: verdana;
TextText--related Propertiesrelated PropertiesLive DemoLive Demo
More FontsMore Fonts
Font EmbedsFont Embeds
�� Use Use @font@font--faceface to declare fontto declare font
�� Point to font file on serverPoint to font file on server
�� Call font with fontCall font with font--familyfamily
�� Currently not supported in IECurrently not supported in IE
�� Use font embedding instead of imagesUse font embedding instead of images
@font@font--face {face {fontfont--family: family: SketchRockwellSketchRockwell;;srcsrc: : url('SketchRockwellurl('SketchRockwell--Bold.ttfBold.ttf');');
}}.my_CSS3_class {.my_CSS3_class {
fontfont--family: family: SketchRockwellSketchRockwell;;fontfont--size: 3.2em;size: 3.2em;
}}
9
Text ShadowText Shadow�� Applies shadow to textApplies shadow to text
�� Syntax: Syntax: texttext--shadow: <horizontalshadow: <horizontal--
distance> <verticaldistance> <vertical--distance>distance><blur<blur--radius> <shadowradius> <shadow--color>;color>;
�� Do not alter the size of a boxDo not alter the size of a box
texttext--shadow: 2px shadow: 2px 2px2px 7px #000000;7px #000000;
10
Text OverflowText Overflow
�� Specifies what should happen when text Specifies what should happen when text
overflows the containing elementoverflows the containing element
�� Syntax:Syntax: texttext--overflow: <value>;overflow: <value>;
�� Possible values:Possible values:
�� ellipsisellipsis -- Display ellipses to represent clipped Display ellipses to represent clipped
texttext
�� clipclip -- Default value, clips textDefault value, clips text
�� Currently not supported in Firefox and IECurrently not supported in Firefox and IE
11
Word WrappingWord Wrapping
�� Allows long words to be able to be broken and Allows long words to be able to be broken and
wrap onto the next linewrap onto the next line
�� Syntax:Syntax: wordword--wrap: <value>;wrap: <value>;
�� Possible values:Possible values:
�� normalnormal
�� breakbreak--wordword
�� Supported in all major browsersSupported in all major browsers
12
More FontsMore FontsLive DemoLive Demo
BordersBorders
14
BordersBorders
�� borderborder--widthwidth: : thinthin, , mediummedium, , thickthick or or
numerical value (e.g. numerical value (e.g. 10px10px))
�� borderborder--colorcolor: color alias or RGB value: color alias or RGB value
�� borderborder--stylestyle: : nonenone, , hiddenhidden, , dotteddotted, ,
dasheddashed, , solidsolid, , doubledouble, , groovegroove, , ridgeridge, ,
insetinset, , outsetoutset
�� Each property can be defined separately for Each property can be defined separately for
left, top, bottom and rightleft, top, bottom and right
�� borderborder--toptop--stylestyle, , borderborder--leftleft--colorcolor, , ……
15
Border Shorthand PropertyBorder Shorthand Property�� borderborder: shorthand rule for setting border : shorthand rule for setting border
properties at once:properties at once:
is equal to writing:is equal to writing:
�� Specify different borders for the sides via Specify different borders for the sides via
shorthand rules: shorthand rules: borderborder--toptop, , borderborder--leftleft, ,
borderborder--rightright, , borderborder--bottombottom
�� border:noneborder:none or or border:0border:0??16
border: 1px solid redborder: 1px solid red
borderborder--width:1px;width:1px;borderborder--color:red;color:red;borderborder--style:solid;style:solid;
BordersBordersLive DemoLive Demo
Border colorBorder color
�� Allows you to create cool colored bordersAllows you to create cool colored borders
�� Only Firefox supports this type of coloringOnly Firefox supports this type of coloring
18
border: 8px solid #000;border: 8px solid #000;--mozmoz--borderborder--bottombottom--colors: #555 #666 #777 #888 colors: #555 #666 #777 #888 #999 ##999 #aaaaaa ##bbbbbb ##cccccc;;--mozmoz--borderborder--toptop--colors: #555 #666 #777 #888 #999 colors: #555 #666 #777 #888 #999 ##aaaaaa ##bbbbbb ##cccccc;;--mozmoz--borderborder--leftleft--colors: #555 #666 #777 #888 #999 colors: #555 #666 #777 #888 #999 ##aaaaaa ##bbbbbb ##cccccc;;--mozmoz--borderborder--rightright--colors: #555 #666 #777 #888 colors: #555 #666 #777 #888 #999 ##999 #aaaaaa ##bbbbbb ##cccccc;;
Box shadowBox shadow
�� Allows to easily implement multiple drop Allows to easily implement multiple drop
shadows (outer or inner) on box elementsshadows (outer or inner) on box elements
�� Specifying values for color, size, blur and Specifying values for color, size, blur and
offsetoffset
19
--mozmoz--boxbox--shadow: 10px shadow: 10px 10px10px 5px #888;5px #888;--webkitwebkit--boxbox--shadow: 10px shadow: 10px 10px10px 5px #888;5px #888;boxbox--shadow: 10px shadow: 10px 10px10px 5px #888;5px #888;
Rounded CornersRounded Corners
�� Rounded corners are a part of CSS 3Rounded corners are a part of CSS 3
�� Supported in all major browsersSupported in all major browsers
�� Firefox, IE 9, Chrome, Opera and SafariFirefox, IE 9, Chrome, Opera and Safari
�� Done by the Done by the borderborder--radiusradius propertyproperty
�� Three ways to define corner radius:Three ways to define corner radius:
borderborder--radius: [radius: [<length><length>||<%><%>][][<length><length>||<%><%>]? ]?
borderborder--radius: 15px;radius: 15px;
borderborder--radius: 15px 20px;radius: 15px 20px;
borderborder--radius: 15px radius: 15px 15px15px 15px15px 10px;10px;
Other Border StylesOther Border StylesLive DemoLive Demo
Background Background PropertiesProperties
BackgroundsBackgrounds
�� backgroundbackground--imageimage
�� URL of image to be used as background, e.g.:URL of image to be used as background, e.g.:
�� backgroundbackground--colorcolor
�� Using color and image and the same timeUsing color and image and the same time
�� backgroundbackground--repeatrepeat
�� repeatrepeat--xx, , repeatrepeat--yy, , repeatrepeat, , nono--repeatrepeat
�� backgroundbackground--attachmentattachment
�� fixedfixed / / scrollscroll23
backgroundbackground--image:url("back.gif");image:url("back.gif");
Backgrounds (2)Backgrounds (2)
�� backgroundbackground--positionposition: specifies vertical and : specifies vertical and
horizontal position of the background imagehorizontal position of the background image
�� Vertical position: Vertical position: toptop, , centercenter, , bottombottom
�� Horizontal position: Horizontal position: leftleft, , centercenter, , rightright
�� Both can be specified in percentage or other Both can be specified in percentage or other
numerical valuesnumerical values
�� Examples:Examples:
24
backgroundbackground--position: top left;position: top left;
backgroundbackground--position: position: --5px 50%;5px 50%;
Background Shorthand PropertyBackground Shorthand Property
�� backgroundbackground: shorthand rule for setting : shorthand rule for setting background properties at the same time:background properties at the same time:
is equal to writing:is equal to writing:
�� Some browsers will not apply BOTH color and Some browsers will not apply BOTH color and image for background if using shorthand ruleimage for background if using shorthand rule
25
background: #FFF0C0 url("back.gif") nobackground: #FFF0C0 url("back.gif") no--repeat repeat fixed top;fixed top;
backgroundbackground--color: #FFF0C0;color: #FFF0C0;backgroundbackground--image: url("back.gif");image: url("back.gif");backgroundbackground--repeat: norepeat: no--repeat;repeat;backgroundbackground--attachment: fixed;attachment: fixed;backgroundbackground--position: top;position: top;
BackgroundBackground--image or image or <<imgimg>>??
�� Background images allow you to save many Background images allow you to save many
image tags from the HTML image tags from the HTML
�� Leads to less codeLeads to less code
�� More contentMore content--oriented approachoriented approach
�� All images that are not part of the page All images that are not part of the page
content (and are used only for "beautification") content (and are used only for "beautification")
should be moved to the CSSshould be moved to the CSS
26
Background StylesBackground StylesLive DemoLive Demo
Gradient BackgroundsGradient Backgrounds
�� Gradients are smooth transitions between two or Gradients are smooth transitions between two or
more specified colorsmore specified colors
�� Use of CSS gradients can replace images and Use of CSS gradients can replace images and
reduce download timereduce download time
�� Lots of gradient generators on the WEBLots of gradient generators on the WEB
�� Create a more flexible layout, and look better Create a more flexible layout, and look better
while zoomingwhile zooming
�� Supported in all major browsers via different Supported in all major browsers via different
keywordskeywords
�� This is still an experimental featureThis is still an experimental feature28
Gradient Backgrounds ExampleGradient Backgrounds Example
29
/* Firefox 3.6+ *//* Firefox 3.6+ */background: background: --mozmoz--linearlinear--gradient(100% 100% 90deg, gradient(100% 100% 90deg,
#FFFF00, #0000FF);#FFFF00, #0000FF);/* Safari 4/* Safari 4--5, Chrome 15, Chrome 1--9 */9 */background: background: --webkitwebkit--gradient(lineargradient(linear, 0% 0%, 0% , 0% 0%, 0%
100%, from(#0000FF), to(#FFFF00));100%, from(#0000FF), to(#FFFF00));/* Safari 5.1+, Chrome 10+ *//* Safari 5.1+, Chrome 10+ */background: background: --webkitwebkit--linearlinear--gradient(#FFFF00, gradient(#FFFF00,
#0000FF);#0000FF);/* Opera 11.10+ *//* Opera 11.10+ */background: background: --oo--linearlinear--gradient(#2F2727, #0000FF);gradient(#2F2727, #0000FF);
Gradient Background Gradient Background Live DemoLive Demo
Multiple BackgroundsMultiple Backgrounds
�� CSS3 allows multiple background imagesCSS3 allows multiple background images
�� Simple commaSimple comma--separated list of imagesseparated list of images
�� Supported in Firefox (3.6+), Chrome (1.0/1.3+), Supported in Firefox (3.6+), Chrome (1.0/1.3+),
Opera (10.5+) and Internet Explorer (9.0+)Opera (10.5+) and Internet Explorer (9.0+)
�� Comma separated list for the other propertiesComma separated list for the other properties
31
backgroundbackground--image: image: url(sheep.pngurl(sheep.png), ), url(grass.pngurl(grass.png););
Multiple BackgroundsMultiple BackgroundsLive DemoLive Demo
OpacityOpacity
OpacityOpacity
�� opacityopacity: specifies the opacity of the element: specifies the opacity of the element
�� Floating point number from 0 to 1Floating point number from 0 to 1
�� For old Mozilla browsers use For old Mozilla browsers use ––mozmoz--opacityopacity
�� For IE use For IE use filter:alpha(opacityfilter:alpha(opacity=value)=value)where value is from 0 to 100; also, "binary and where value is from 0 to 100; also, "binary and
script behaviors" must be enabled and script behaviors" must be enabled and
hasLayouthasLayout must be triggered, e.g. with must be triggered, e.g. with zoom:1zoom:1
34
OpacityOpacityLive DemoLive Demo