Skip to main content

Most used CSS tricks | StylizedWeb.com

Popularity Report

Total Popularity Score: 0
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Rank

Groups (2)

  • css

    CSS Evangelist

    221 members,392 bookmarks

    a collection of resources of all things CSS- Include how-tos, articles, resources, tools, etc...

  • web-design-sum08

    Web Design CSS Bookmarking List Summer 2008

    14 members,94 bookmarks

    Students in Bill Wolff's course, Web Design, share CSS and Photoshop tips, tricks, and hacks. Four commented bookmarkes required per week per student.

Related Lists

Bookmark History

Saved by 66 people (16 private), first by anonymouse user on 2008-03-13


Public Sticky notes

Most used CSS tricks

Highlighted by bera_saroj

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;
}

br {
clear: left;
}

Highlighted by pabranch

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;
}

br {
clear: left;
}

Highlighted by developerlin

4. Double blockquote

Highlighted by onchan

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]–>

Highlighted by pabranch

6. Vertical centering with line-height

Highlighted by onchan

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>

.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;
}

Highlighted by developerlin

9. Center horizontally

Highlighted by onchan

10. CSS Drop Caps

Highlighted by onchan

Prevent line breaks in links, oversized content to brake

a{
white-space:nowrap;
}

#main{
overflow:hidden;
}

Highlighted by pabranch

Show firefox scrollbar, remove textarea scrollbar in IE

html{
overflow:-moz-scrollbars-vertical;
}

textarea{
overflow:auto;
}

Highlighted by pabranch