CSS Mojo: Adding Visual Polish To Your Pages

CSS Mojo: Adding Visual Polish To Your Pages Presented by: Leslie Sommer Email: [email protected] :: YM: supahank Often times, as web developers...
Author: Sharon Crawford
0 downloads 2 Views 213KB Size
CSS Mojo: Adding Visual Polish To Your Pages Presented by: Leslie Sommer Email: [email protected] :: YM: supahank Often times, as web developers, we're asked to add some seemingly simple visual elements to a page, like rounded corners and drop-shadows. There are as many methods of doing these as there are engineers who've banged their collective heads against the issue. In this presentation I'll provide you with markup-lite, non-javascript, mostly semantic methods for adding some fit & finish to your pages. This is by no means the end-all, be-all of rounded corners, and I'd encourage you to do some experimentation to find quicker and more elegant ways of doing some of the following.

The Basics: 2 simple tricks Sprites: This is a cute name for basic background-image manipulation. A sprite is one image file that contains more than one background-image. Through the manipulation of background-position , you can use one image to set several background images. Example: A different icon on each list-item in a UL can use one image file. Please see the "A List Apart" article on Sprites for a great explanation: www.alistapart.com/articles/sprites/ IE6 & IE7 Hacks: There are two basic hacks (or 'filters') that provide an elegant solution to some of your IE pain. The underscore ( _rule:xxx; ) hides the css property from everything but IE6, and the star ( *rule:xxx; ) hides the css property from everything but IE6 & IE7. This is especially useful when you're dealing with something like min-width for IE7 and Firefox, and width for IE6.

The Markup < sp an cla ss=" x1a" > < sp an cla ss=" x2a" > Mo du le h ead < p> Mo du le b od y < p cl as s= "f t-w rap per" >Mod ule foo t

Things to note: Structure: Use a standard "head, body, foot" structure for your content divs. Typically, the "head" and/or the "foot" are optional. Untouchable layer ( mod-content ): This layer wraps your div's content, where it can't be touched by opacity or dropshadows. The 'X' Hooks: The two sets of spans (x1 & x2) can act independently of each other, so you could use one for a gradient and one for a dropshadow without worrying about how one would affect the other. The nested spans (x1a & x2a) add another level of control for positioning. All four can act in concert for rounded corners All of the styling tricks in the following examples use this same markup.

Rounded corners with a border The Example

The Sprite

Notes: The image: The outside edge of the corner image must be filled, not transparent, otherwise the corners of the box show. IE6 bug: The images don't sit in the box corners when the IE6 box is over 100% wide, like if you have an extra long URL or string that breaks the box width. More info: This uses a modified 'sliding doors' method, explained in A List Apart's "Sliding Doors of CSS" article. This method is best under the following circumstances: Bordered modules Pages where the design isn't likely to change, or pages that have a set, solidcolored background

The CSS . mo d { b or de r :1 p x s ol id #2 9 5c 7 d; b ac kg r ou n d- c ol or : #6 f f; p os it i on : re l at iv e ; z -i nd e x: 0 ; } . mo d . mo d -c o nt e nt { p os it i on : re l at iv e ; z -i nd e x: 2 ; } / * x 1 = t op - ri g ht , x 1a = t op -l e ft , x 2 = b ot t om - ri gh t , x 2a = bo t to m -l e ft * / . mo d . x1 , . mo d . x1 a , . mo d . x2 , . mo d . x2 a { d is pl a y: b lo c k; c le ar : bo t h; f on t- s iz e :0 ; / * f or IE 6 * / / * se t h e ig h t to th e s i ze o f t h e c or ne r */ h ei gh t :1 8 px ; p os it i on : re l at iv e ; b ac kg r ou n d: u rl (i m ag e s/ c r_ bi g .g i f) no -r epea t; } . mo d . x1 , . mo d . x2 { w id th : 10 0 %; /* s c al e s w it h t he mo d ul e */ r ig ht : -1 p x; /* o v er l ap bo rd e rs */ } . mo d . x1 a , . mo d . x2 a { /* le ft co r ne r s */ w id th : 18 p x; l ef t: - 2p x ; } . mo d . x1 { b ac kg r ou n d- p os it i on : 10 0 % 0; t op :- 1 px ; } . mo d . x1 a { b ac kg r ou n d- p os it i on : 0 - 36 px ; } . mo d . x2 { / * b ot to m c o rn e rs g e t m ov e d */ p os it i on : ab s ol ut e ; b ac kg r ou n d- p os it i on : 10 0 % -1 8 px ; / * ov e rl a p b ot to m b o rd e r */ b ot to m :- 1 px ; } . mo d . x2 a { b ac kg r ou n d- p os it i on : 0 - 54 px ; }

Rounded corners with solid background The Example

The Sprite

Notes The image: Make sure it'll accommodate the full size of your module (most likely way bigger than the one above). The outside edge of the corners can be transparent. The method does not use the x-hooks; instead it uses the actual content elements. A side benefit is that the x-hooks are free to be used for other effects This method is best under the following circumstances: Can go over any kind of background, so works with patterned backgrounds and should work with drag & drop behavior. Best for smaller modules like dialogue boxes or speech bubbles, where a maxheight/width can be set. As a design principle, solid-background modules work better as highlighted content (like product alerts or ads), rather than as a default module type. The pointy tail: Uses no images. Find out about slanted borders at www.infimum.dk/HTML/slantinfo.html. Use 'transparent' border color on the invisible sides of the box. IE6 work-around: set the border color to a random color (like 'cyan'); then use IE's 'filter:chroma' property to hide it.

The CSS . mo d , . mo d . mo d -c o nt e nt , . mo d . ft , . mo d . ft - co n te n t { b ac kg r ou n d: u rl (i m ag e s/ r c_ nb . gi f ) n o- re peat ; p os it i on : re l at iv e ; } . mo d { b ac kg r ou n d- p os it i on : 10 0 % 0; z -i nd e x: 0 ; } . mo d . mo d -c o nt e nt { b ac kg r ou n d- p os it i on : 0 0 ; / * of f se t b y s iz e o f t h e ro u nd e d c or ne r */ l ef t: - 7p x ; w id th : 10 0 %; p os it i on : re l at iv e ; z -i nd e x: 2 ; } . mo d . ft { b ac kg r ou n d- p os it i on : 10 0 % 10 0 %; / * mo v e o ut s id e o f m od - co nt e nt */ b ot to m :- 7 px ; r ig ht : -7 p x; w id th : 10 0 %; } . mo d . ft .f t -c o nt en t { b ac kg r ou n d- p os it i on : 0 1 00 %; p ad di n g: 0 0 7p x 0 ; l ef t: - 7p x ; } . mo d . x1 { / * s pe ec h t a il */ d is pl a y: b lo c k; f on t- s iz e :0 ; h ei gh t :1 p x; w id th : 1p x ; p os it i on : ab s ol ut e ; r ig ht : -1 5 px ; t op :1 5 px ; b or de r -r i gh t :0 ; / * pi x el si z e = t ai l s i ze * / b or de r -l e ft : 15 px so l id #4 C9 A DA ; / * se t a n gl e o f a rr o w * / b or de r -t o p: 1 0p x s ol i d t ra ns p ar e nt ; b or de r -b o tt o m: 10 p x s ol i d tr a ns p ar e nt ; / * No 't r an s pa re n t' bo r de rs in IE 6 * / _ bo rd e r- t op - co lo r :c y an ; _ bo rd e r- b ot t om -c o lo r :c y an ; / * fi l te r o u t th e c y an co lo r * / _ fi lt e r: c hr o ma (c o lo r =" c ya n" ) ; }

Translucent dropshadow (2-sided) The Example

Notes This method requires a solid module background color, otherwise the translucent box will show through. IE6 issue: IE6 won't do height:100% of a parent who's height isn't defined in css, so use the huge px height and an overflowhidden on the parent for IE6. This is why the shadow isn't offset from the top of the box. Do box styling (border & background) on

mod-content

The CSS . mo d { p os it i on : re l at iv e ; z -i nd e x: 0 ; / * IE 6 f i x - b ou n ds x2 a 's h e ig h t * / _ pa dd i ng - bo t to m: 6 px ; _ ov er f lo w -y : hi dd e n; } . mo d . mo d -c o nt e nt { p os it i on : re l at iv e ; z -i nd e x: 2 ; b or de r :1 p x s ol id #7 4 65 5 5; b ac kg r ou n d: # bd af a 1; } . mo d . x1 { d is pl a y: b lo c k; b ac kg r ou n d: # 00 0; h ei gh t :1 0 0% ; / * IE 6 c a n' t d o 1 00 % o f a n u nk n ow n h ei ght */ _ he ig h t: 3 00 0 px ; w id th : 10 0 %; p os it i on : ab s ol ut e ; t op :6 p x; /* of fs e t t he sh ad o w * / l ef t: 6 px ; z -i nd e x: - 1; o pa ci t y: . 30 ; / * us e ' f il t er ' f or IE 6 & 7 */ * fi lt e r: a lp h a( op a ci t y= " 30 ") ; }

Translucent dropshadow (2-sided) with translucent content area The Example

Notes This is a more css-heavy method than the previous example, but allows for translucent backgrounds. Safari issue: Dropshadow doesn't work on Safari at all IE6 issue: The shadow won't offset at the top for the same reason noted before.

The CSS . mo d { / * IE 6 : b ou n d x1 a a n d x 2a 's he i gh t * / _ pa dd i ng - bo t to m: 6 px ; _ ov er f lo w -y : hi dd e n; p os it i on : re l at iv e ; z -i nd e x: 0 ; } . mo d . mo d -c o nt e nt { b or de r :1 p x s ol id #f f f; p os it i on : re l at iv e ; z -i nd e x: 2 ; } . mo d . x1 { / *o p ac it y l a ye r */ d is pl a y: b lo c k; b ac kg r ou n d: # ff f; w id th : 10 0 %; h ei gh t :1 0 0% ; _ he ig h t: 2 00 0 px ; p os it i on : ab s ol ut e ; / * IE 6 : o ff s et t h e l ay e r fr o m ' mo d ' */ _ bo tt o m: 6 px ; o pa ci t y: . 30 ; * fi lt e r: a lp h a( op a ci t y= " 30 ") ; } / * t he s h ad o w' s p ar e nt ; c o nt ro l s o ff s et * / . mo d . x2 { d is pl a y: b lo c k; w id th : 10 0 %; h ei gh t :1 0 0% ; o ve rf l ow : hi d de n; p os it i on : ab s ol ut e ; t op :6 p x; /* of fs e t t he sh ad o w * / l ef t: 6 px ; _ to p: a ut o ; _ bo tt o m: - 6p x ; } . mo d . x2 a { d is pl a y: b lo c k; b or de r :6 p x s ol id #0 0 0; b or de r -t o p: 0 ; b or de r -l e ft : 0; w id th : 10 0 %; h ei gh t :1 0 0% ; / * IE 6 c a n' t d o 1 00 % o f a n u nk n ow n h ei ght */ _ he ig h t: 3 00 0 px ; p os it i on : re l at iv e ; b ot to m :6 p x; r ig ht : 6p x ; o pa ci t y: . 30 ; * fi lt e r: a lp h a( op a ci t y= " 30 ") ; }

Translucent dropshadow (2-sided) with translucent content area and gradient The Example

Notes The image: This uses a white-to-transparent PNG. You can also use a black-totransparent PNG (see 2nd example above), or any-color-to-transparent image... Add the gradient background image to your translucent layer (x1, in this example). IE6 issue: Forget about IE6 and it's bad PNG support. Either use a GIF or nothing at all. Avoid using AlphaImageLoader or base64 encoding if you can; these methods will noticeably slow down your site. More info: A List Apart: Super-Easy Blendy Backgrounds (www.alistapart.com/articles/supereasyblendys/ )

The CSS . mo d { p os it i on : re l at iv e ; z -i nd e x: 0 ; _ pa dd i ng - bo t to m: 6 px ; _ ov er f lo w -y : hi dd e n; } . mo d . mo d -c o nt e nt { b or de r :1 p x s ol id #c 0 6; p os it i on : re l at iv e ; z -i nd e x: 2 ; } . mo d . x1 { / *o p ac it y l a ye r */ d is pl a y: b lo c k; b ac kg r ou n d- c ol or : #c 0 6; b ac kg r ou n d- i ma ge : ur l (i m ag es / gr d _w h it e. png) ; b ac kg r ou n d- r ep ea t :r e pe a t- x; b ac kg r ou n d- p os it i on : 0 1 00 %; _ ba ck g ro u nd : #f 39 ; / * n o P NG fo r I E 6 */ w id th : 10 0 %; h ei gh t :1 0 0% ; _ he ig h t: 2 00 0 px ; p os it i on : ab s ol ut e ; _ bo tt o m: 6 px ; o pa ci t y: . 40 ; * fi lt e r: a lp h a( op a ci t y= " 40 ") ; } . mo d . x2 { / * o ff se t s s ha d ow b y 6 p x * / d is pl a y: b lo c k; w id th : 10 0 %; h ei gh t :1 0 0% ; o ve rf l ow : hi d de n; p os it i on : ab s ol ut e ; t op :6 p x; l ef t: 6 px ; _ to p: a ut o ; _ bo tt o m: - 6p x ; } . mo d . x2 a { d is pl a y: b lo c k; b or de r :6 p x s ol id #0 0 0; b or de r -t o p: 0 ; b or de r -l e ft : 0; w id th : 10 0 %; h ei gh t :1 0 0% ; _ he ig h t: 2 00 0 px ; p os it i on : re l at iv e ; b ot to m :6 p x; r ig ht : 6p x ; o pa ci t y: . 30 ; * fi lt e r: a lp h a( op a ci t y= " 30 ") ; }

Glowy shadow (4-sided) The Example

The Sprite

Notes IE6 issue: Because of the lack of alpha transparency support for PNGs, either use a GIF or, using conditional comments, give IE6 a 2-sided dropshadow instead. Set the module styling on ' mod-content '

The CSS . mo d { p os it i on : re l at iv e ; z -i nd e x: 0 ; } . mo d . mo d -c o nt e nt { b ac kg r ou n d: # e9 da c 9; b or de r :1 p x s ol id #e a ea e a; p os it i on : re l at iv e ; z -i nd e x: 2 ; } / * x 1 = t op an d l ef t e d ge s ; x 1a = to p r i gh t c or n er ; x 2 = r ig h t a nd b o tt o m e dg es ; x 2a = bo t to m l ef t c o rn e r */ . mo d . x1 , . mo d . x1 a , . mo d . x2 , . mo d . x2 a { d is pl a y: b lo c k; b ac kg r ou n d: u rl (i m ag e s/ g lo w. p ng ) n o -r ep eat; / * tu r n o ff fo r I E6 or us e a G I F * / _ ba ck g ro u nd : tr an s pa r en t ; w id th : 10 0 %; h ei gh t :1 0 0% ; p os it i on : ab s ol ut e ; } . mo d . x1 { b ac kg r ou n d- p os it i on : 0 0 ; z -i nd e x: - 2; t op :- 1 0p x ; / * se t t o t h e si z e o f t he g low */ l ef t: - 10 p x; b ot to m :0 ; / * se t g l ow to t h e e dg e s of 'm o d' */ p ad di n g: 0 1 0 px 1 0 px 0; } . mo d . x1 .x 1 a { h ei gh t :1 0 px ; w id th : 10 p x; b ac kg r ou n d- p os it i on : 10 0 % 0; r ig ht : -1 0 px ; t op :0 ; } . mo d . x2 { b ac kg r ou n d- p os it i on : 10 0 % 10 0 %; z -i nd e x: - 1; b ot to m :- 1 0p x ; r ig ht : -1 0 px ; p ad di n g: 1 0p x 0 0 10 p x; } . mo d . x2 .x 2 a { h ei gh t :1 0 px ; w id th : 10 p x; b ac kg r ou n d- p os it i on : 0 1 00 %; l ef t: - 10 p x; b ot to m :0 ; }