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