十个有用的CSS _HTML/CSS

10个有用的CSS

The top 10 most useful css snippets of today.

I have noticed myself to use a few different code snippets on a daily basis so I thought some of you might find them useful. So here we go.

? ?
? ? ?
Centering a website (or other elements)? ?
The HTML
view plaincopy to clipboardprint?
1. <DIV?class=wrap>??
2. </DIV>??
3. ??
4. ??
```

```
The CSS

?
view plaincopy to clipboardprint?
1. .wrap?{?width:960px;?margin:0?auto;}??
```
  .wrap { width:960px; margin:0 auto;}
```
?

This is an oldie, but apperantly it is not as obvious as you would think.

?

?
? ?

? ?
Sticky Footer (make footer always be on bottom without absolute positioning)

?
The HTML

?
view plaincopy to clipboardprint?
1. <DIV?id=wrap>??
2. <DIV?class=clearfix?id=main>??
3. </DIV>??
4. </DIV>??
5. <DIV?id=footer>??
6. </DIV>??
The CSS

?
view plaincopy to clipboardprint?
1. ??*?{?margin:0;?padding:0;?} ??
2. html,?body,?#wrap?{?height:?100%;?} ??
3. body?>?#wrap?{height:?auto;?min-height:?100%;} ??
4. #main?{?padding-bottom:?150px;?}??/*?must?be?same?height?as?the?footer?*/??
5. #footer?{ ??
6. position:?relative; ??
7. margin-top:?-150px;?/*?negative?value?of?footer?height?*/??
8. height:?150px; ??
9. clear:both;} ??
10. /*?CLEAR?FIX*/??
11. .clearfix:after?{content:?"."; ??
12. display:?block; ??
13. height:?0; ??
14. clear:?both; ??
15. visibility:?hidden;} ??
16. .clearfix?{display:?inline-block;} ??
17. /*?Hides?from?IE-mac?*/??
18. *?html?.clearfix?{?height:?1%;} ??
19. .clearfix?{display:?block;} ??
20. /*?End?hide?from?IE-mac?*/??
```
  * { margin:0; padding:0; }
html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}
#main { padding-bottom: 150px; }  /* must be same height as the footer */
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac */
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
```
?

As of recently i have had to use this over 50 times… i think this is one of the most important tricks you will learn today.

?

?
? ?

? ?
Cross-Browser Min Height

?
The CSS

?
view plaincopy to clipboardprint?
1. .element?{?min-height:600px;?height:auto?!important;?height:600px;?}??
```
  .element { min-height:600px; height:auto !important; height:600px; }
```
?

You can replace the min-height and heigth with 12em or another value that works for you.

?

?
? ?

? ?
Box Shadow (CSS3)

?
The CSS

?
view plaincopy to clipboardprint?
1. .box?{?box-shadow:?5px?5px?5px?#666;??-moz-box-shadow:?5px?5px?5px?#666;??-webkit-box-shadow:?5px?5px?5px?#666;?}??
```
  .box { box-shadow: 5px 5px 5px #666;  -moz-box-shadow: 5px 5px 5px #666;  -webkit-box-shadow: 5px 5px 5px #666; }
```
?

As you can see since this is a CSS3 property you will need all the three commands to make it cross browser(except for ie of course). The first 2 measurements are for horizontal offset and the vertical offset. The third number is for the blur radius. And the last is the color of the shadow.

?

?
? ?

? ?
Text Shadow (CSS3) with IE hack

?
The CSS

?
view plaincopy to clipboardprint?
1. .text?{?text-shadow:?1px?1px?1px?#666;?filter:?Shadow(Color=#666666,?Direction=135,?Strength=5);?}??
```
  .text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }
```
?

This technique is great for all modern browsers, the IE fix works but it is not amazing quality.

?

?
? ?

? ?
Cross Browser CSS Opacity

?
The CSS

?
view plaincopy to clipboardprint?
1. ??.transparent?{ ??
2. /*?Modern?Browsers?*/?opacity:?0.7; ??
3. /*?IE?8?*/?-ms-filter:?"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; ??
4. /*?IE?5-7?*/?filter:?alpha(opacity=70); ??
5. /*?Netscape?*/?-moz-opacity:?0.7; ??
6. /*?Safari?1?*/?-khtml-opacity:?0.7; ??
7. }??
```
  .transparent {
/* Modern Browsers */ opacity: 0.7;
/* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
/* IE 5-7 */ filter: alpha(opacity=70);
/* Netscape */ -moz-opacity: 0.7;
/* Safari 1 */ -khtml-opacity: 0.7;
}
```
?

Opacity can be used for plenty of elements, it adds a certain new age style we all strive for. Notice that in some browsers transperancy is inherited by all child elements!

?

?
? ?

? ?
The Famous Meyer Reset

?
The CSS

?
view plaincopy to clipboardprint?
1. ??html,?body,?div,?span,?applet,?object,?iframe, ??
2. h1,?h2,?h3,?h4,?h5,?h6,?p,?blockquote,?pre, ??
3. a,?abbr,?acronym,?address,?big,?cite,?code, ??
4. del,?dfn,?em,?font,?img,?ins,?kbd,?q,?s,?samp, ??
5. small,?strike,?strong,?sub,?sup,?tt,?var, ??
6. dl,?dt,?dd,?ol,?ul,?li, ??
7. fieldset,?form,?label,?legend, ??
8. table,?caption,?tbody,?tfoot,?thead,?tr,?th,?td?{ ??
9. margin:?0; ??
10. padding:?0; ??
11. border:?0; ??
12. outline:?0; ??
13. font-weight:?inherit; ??
14. font-style:?inherit; ??
15. font-size:?100%; ??
16. font-family:?inherit; ??
17. vertical-align:?baselinebaseline; ??
18. } ??
19. /*?remember?to?define?focus?styles!?*/??
20. :focus?{ ??
21. outline:?0; ??
22. } ??
23. body?{ ??
24. line-height:?1; ??
25. color:?black; ??
26. background:?white; ??
27. } ??
28. ol,?ul?{ ??
29. list-style:?none; ??
30. } ??
31. /*?tables?still?need?'cellspacing="0"'?in?the?markup?*/??
32. table?{ ??
33. border-collapse:?separate; ??
34. border-spacing:?0; ??
35. } ??
36. caption,?th,?td?{ ??
37. text-align:?left; ??
38. font-weight:?normal; ??
39. } ??
40. blockquote:before,?blockquote:after, ??
41. q:before,?q:after?{ ??
42. content:?""; ??
43. } ??
44. blockquote,?q?{ ??
45. quotes:?""?""; ??
46. }??
```
  html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
```
?

This is the most useful css reset out there, i use it for almost everything I work on (even the 52framework, coming soon).

?

?
? ?

? ?
Removing the dotted outlines

?
The CSS

?
view plaincopy to clipboardprint?
1. a,?a:active?{?outline:?none;?}??
```
  a, a:active { outline: none; }
```
?

I find myself getting very annoyed with the dotted outline (especially for text-indented elements that are off the page).

?

?
? ?

? ?
Rounded Corners (non ie)

?
The CSS

?
view plaincopy to clipboardprint?
1. ??.element?{ ??
2. -moz-border-radius:?5px; ??
3. -webkit-border-radius:?5px; ??
4. border-radius:?5px;?/*?future?proofing?*/??
5. } ??
6. .element-top-left-corner?{ ??
7. -moz-border-radius-topleft:?5px; ??
8. -webkit-border-top-left-radius:?5px; ??
9. }??
```
  .element {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; /* future proofing */
}
.element-top-left-corner {
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
}
```
?

Love rounded corners? Don’t want to slave over images and elements to get the effect? This is your solution, and elements still look fine in ie.

?

?
? ?

? ?
Override Inline Styles

?
The CSS

?
view plaincopy to clipboardprint?
1. ??.override?{ ??
2. font-size:?14px?!important; ??
3. }??
```
  .override {
font-size: 14px !important;
}
```
?