CSS & HTML, Tip & Tricks - Written by admin on Wednesday, March 19, 2008 10:04 - 0 Comments
Most used CSS tricks
 (No Ratings Yet) Loading ... |
Earlier before I have written an article about current best CSS hacks which you can see here. And now here’s the list of today’s most used CSS tricks – tips. I have added image examples for most of them because of critics on CSS hacks article. If you think I have missed any please let me know
1. Rounded corners without images
<div id=”container”>
<b class=”rtop”>
<b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
</b>
<!–content goes here –>
<b class=”rbottom”>
<b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b>
</b>
</div>.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
<b class=”rtop”>
<b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
</b>
<!–content goes here –>
<b class=”rbottom”>
<b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b>
</b>
</div>.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
2. Style your order list
<ol>
<li>
<p>This is line one</p>
</li>
<li>
<p>Here is line two</p>
</li>
<li>
<p>And last line</p>
</li>
</ol>ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}
<li>
<p>This is line one</p>
</li>
<li>
<p>Here is line two</p>
</li>
<li>
<p>And last line</p>
</li>
</ol>ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}
3. Tableless forms
<form>
<label for=”name”>Name</label>
<input id=”name” name=”name”><br>
<label for=”address”>Address</label>
<input id=”address” name=”address”><br>
<label for=”city”>City</label>
<input id=”city” name=”city”><br>
</form>label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}label {
text-align: right;
width: 75px;
padding-right: 20px;
}
<label for=”name”>Name</label>
<input id=”name” name=”name”><br>
<label for=”address”>Address</label>
<input id=”address” name=”address”><br>
<label for=”city”>City</label>
<input id=”city” name=”city”><br>
</form>label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}label {
text-align: right;
width: 75px;
padding-right: 20px;
}
br {
clear: left;
}
4. Double blockquote
blockquote:first-letter {
background: url(images/open-quote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, “Times New Roman”, Times, serif;
}
background: url(images/open-quote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, “Times New Roman”, Times, serif;
}
5. Gradient text effect
<h1><span></span>CSS Gradient Text</h1>h1 {
font: bold 330%/100% “Lucida Grande”;
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}<!–[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’);
}
</style>
<![endif]–>
font: bold 330%/100% “Lucida Grande”;
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}<!–[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’);
}
</style>
<![endif]–>
6. Vertical centering with line-height
div{
height:100px;
}
div *{
margin:0;
}
div p{
line-height:100px;
}<p>Content here</p>
height:100px;
}
div *{
margin:0;
}
div p{
line-height:100px;
}<p>Content here</p>
7. Rounded corners with images
<div class=”roundcont”>
<div class=”roundtop”>
<img src=”tl.gif” alt=””
width=”15″ height=”15″ class=”corner”
style=”display: none” />
</div>CONTENT<div class=”roundbottom”>
<img src=”bl.gif” alt=””
width=”15″ height=”15″ class=”corner”
style=”display: none” />
</div>
</div>
<div class=”roundtop”>
<img src=”tl.gif” alt=””
width=”15″ height=”15″ class=”corner”
style=”display: none” />
</div>CONTENT<div class=”roundbottom”>
<img src=”bl.gif” alt=””
width=”15″ height=”15″ class=”corner”
style=”display: none” />
</div>
</div>
.roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}
.roundcont p {
margin: 0 10px;
}
.roundtop {
background: url(tr.gif) no-repeat top right;
}
.roundbottom {
background: url(br.gif) no-repeat top right;
}
img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}
8. Multiple class name
<img src=”image.gif” class=”class1 class2″ alt=”” />.class1 { border:2px solid #666; }
.class2 {
padding:2px;
background:#ff0;
}
.class2 {
padding:2px;
background:#ff0;
}
9. Center horizontally
<div id=”container”></div>#container {
margin:0px auto;
}
margin:0px auto;
}
10. CSS Drop Caps
<p class=”introduction”> This paragraph has the class “introduction”. If your browser supports the pseudo-class “first-letter”, the first letter will be a drop-cap. </p>p.introduction:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
}
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
}
11. Prevent line breaks in links, oversized content to brake
a{
white-space:nowrap;
}#main{
overflow:hidden;
}
white-space:nowrap;
}#main{
overflow:hidden;
}
12. Show firefox scrollbar, remove textarea scrollbar in IE
html{
overflow:-moz-scrollbars-vertical;
}textarea{
overflow:auto;
}
overflow:-moz-scrollbars-vertical;
}textarea{
overflow:auto;
}
|
Read more:
»» 10 best CSS hacks »» Vertical align div »» PNG transparency issues »» Orbitals B - Source Code »» Three Steps To a Free Domain Name for Your Home Network |
Most Popular Content
- Fetching a Web Page From Your PHP Code
- Make Windows Genuine by a simple trick
- Hostgator - Sales Off 20%
- Review Hostmonster
- Review Bluehost
- Vista Wallpaper Collection
- new PC in 2010
- The Best Security Pack For PC - Anti Virus Spyware Task And More
- Create the World in Sixty Seconds
- SpotLight
- Matrix - Effect
- This a good list of sites. I visit most of these. Thanks. I'm glad I stumbled...
- I think the math challenge one is best......
- I agree with most of these with one exception:
"Yes, I seem blunt and rude. I...
- I agree about some of them. Others I haven't ever seen or heard of but I am chec...
- great list...
- wow...this is a very impressive setup. Thanks for sharing this with us!!...
- Sigmund, you seem a little slow....
- i am interst to buy the script please contact me
trucchimania @ email.it...
PHP, Tip & Tricks - May 6, 2008 23:28 - 0 Comments
Fetching a Web Page From Your PHP Code
More In Code
- Processing
- 100+ Resources for Web Developers
- Damn Small Rich Text Editor
- Most used CSS tricks
- Orbitals B - Source Code
Leave a Reply