10 Time-saving CSS
Snippets
1.
Remove
TextArea Scrollbar In IE – To avoid having IE show a scrollbar in the text area
field, use this code:
|
textarea{
overflow:auto;
}
|
2.
CSS Image
Preloader – Preload images using this CSS. Just add the images’ paths to
the DIV class, and call the DIV in your HTML.
|
div.loader{
background:url(images/hover.gif)
no-repeat;
background:url(images/hover2.gif)
no-repeat;
background:url(images/hover3.gif)
no-repeat;
margin-left:-10000px;
}
|
3.
CSS
Tooltips – Create your own tooltips using this CSS snippet. Insert the code
below in your CSS style sheet:
|
a:hover {background:#ffffff;
text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {display:none;
padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover
span{display:inline; position:absolute; background:#ffffff; border:1px solid
#cccccc; color:#6c6c6c;}
|
So when you start working on your HTML, you can use it like
this:
|
Sample text <a
class="tooltip">hover mouse here to show tooltip<span>This
is your tooltip Text.</span></a>
|
4.
CSS
Debugger – This will help you easily distinguish your assets by adding a
color-coded border around it depending on their level of importance.
|
* { outline: 2px dotted red }
* * { outline: 2px dotted
green }
* * * { outline: 2px dotted
orange }
* * * * { outline: 2px dotted
blue }
* * * * * { outline: 1px
solid red }
* * * * * * { outline: 1px
solid green }
* * * * * * * { outline: 1px
solid orange }
* * * * * * * * { outline:
1px solid blue }
|
5.
Eric
Meyer’s Reset Code – Different browsers have their own set of format and
style when it comes to handling HTML tags. In order to reset everything before
coding, insert this CSS script at the beginning of your CSS file.
|
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,
b, u, i, center,
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-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
/* remember to define focus
styles! */
:focus {
outline: 0;
}
/* remember to highlight
inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need
‘cellspacing="0"’ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
|
6.
Centering
A DIV Of Unknown Width – Use this CSS code whenever you want to center
align a DIV with an undetermined width.
|
.content {
margin: 0 auto 8px;
display: table;
}
.content div {
display: table-cell;
}
<!–[if IE]>
.content {
display: block;
text-align: center;
}
.content div {
display: inline;
zoom: 1;
}
<![endif]–>
|
7.
Adding
AJAX Style Loading Icon To Large Images – You can use this CSS code instead
of Javascript whenever you want to use a loading icon before loading any large
image. Just make sure to use the following class in the same DIV where you are
calling the large image AND that the path to the small loading.gif is correct.
|
.loading { background:
url(loading.gif) no-repeat center center; }
|
8.
CSS
Opacity Hack – Make any asset transparent by setting its opacity.
|
selector {
filter: alpha(opacity=60); /*
MSIE/PC */
-moz-opacity: 0.6; /* Mozilla
1.6 and older */
opacity: 0.6;
}
|
9.
Setting
Min-Height – This CSS also applies on IE which ignores the min-height
attribute.
|
/* for browsers that don’t
suck */
.container {
min-height:8em;
height:auto !important;
}
/* for Internet Explorer –
which of course sucks */
/*\*/
* html .container {
height: 8em;
}
/**/
|
10.
Styling
Links By File Type – style specific URLs using icons. This will have a
different effect between CSS3 compatible browsers and non-CSS3 compatible.
|
/* external links */
a[href^="http://"]
{
padding-right: 13px;
background: url(external.gif)
no-repeat center right;
}
/* emails */
a[href^="mailto:"]
{
padding-right: 20px;
background: url(email.png)
no-repeat center right;
}
/* pdfs */
a[href$=".pdf"]
{
padding-right: 18px;
background: url(acrobat.png)
no-repeat center right;
}
|
Hope you find these codes useful! and learn web design
No comments:
Post a Comment