Stupid CSS Tricks
Running around the web I've been collecting some nice little CSS tricks that can be applied to various applications. Let me know if you think they are cool. Try each out, they can be applied to anything you can think of.
Some of the information was gathered from these site which offer amazing insights into the world of CSS. If you can think of it, you can do it in CSS.
Zen Garden: CSS Resources
A List Apart: CSS
A List Apart: Typography
Transparent Images and Objects:
Drop Shadows on text and images:
You see here, we're making a shadow image under it,
and a then an alpha and making it priority with !important.
Finally we move it -6 pixels to offset it and reveal the under shadow. Here's some code for simple shadow text. No under images used.
This is kind of neat, can be used to replace form buttons. As you can see below you are just adjusting the size of the borders to mimic a button. On hover it looks as if you've pushed it in. It's a neat trick. I pulled this from Craigslist.org.
Acknowledgments: Andreas and Domedia. They provided some of the code used here. Click on each for more info on each subject.
Some of the information was gathered from these site which offer amazing insights into the world of CSS. If you can think of it, you can do it in CSS.
Zen Garden: CSS Resources
A List Apart: CSS
A List Apart: Typography
Transparent Images and Objects:
#item {
filter:alpha(opacity=50);
// This is for IE to handle it
-moz-opacity:0.5;
// This is for older mozillas/netscapes
opacity: 0.5;
// This is for Safari and Firefox types
}
Drop Shadows on text and images:
.img-shadow {
float:left;
background: url(shadowAlpha.png)
no-repeat bottom right !important;
background: url(shadow.gif)
no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
You see here, we're making a shadow image under it,
and a then an alpha and making it priority with !important.
.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}Finally we move it -6 pixels to offset it and reveal the under shadow. Here's some code for simple shadow text. No under images used.
#example {
font-family: Verdana;
font-size: 1.6em;
font-weight: bold;
color: #c60;
}
div[id=example] {
// Without the ID, you'll set all div's
color: #000 !important;
}
#example:after {
content: 'Web-Graphics';
color: #c60;
display: block;
text-indent: -0.1ex;
margin-top: -1.3em;
}
This is kind of neat, can be used to replace form buttons. As you can see below you are just adjusting the size of the borders to mimic a button. On hover it looks as if you've pushed it in. It's a neat trick. I pulled this from Craigslist.org.
a.flag:link, a.flag:visited, a.flag:hover {
font: small-caption;
padding: 1px;
background-color: #f5f5f5;
color: #000;
text-decoration: none;
}
a.flag:link, a.flag:visited {
border-top: 1px solid #cecece;
border-bottom: 2px solid #8a8a8a;
border-left: 1px solid #cecece;
border-right: 2px solid #8a8a8a;
}
a.flag:hover {
border-bottom: 1px solid #cecece;
border-top: 2px solid #8a8a8a;
border-right: 1px solid #cecece;
border-left: 2px solid #8a8a8a;
}
Acknowledgments: Andreas and Domedia. They provided some of the code used here. Click on each for more info on each subject.