Most used CSS tricks | StylizedWeb.com
Popularity Report
![]() |
|||
![]() |
|||
![]() |
|||
![]() |
|||
![]() |
|||
![]() |
URL Tag Cloud
Groups (2)
-
CSS Evangelist
221 members,392 bookmarks
a collection of resources of all things CSS- Include how-tos, articles, resources, tools, etc...
-
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.
Bookmark History
Saved by 66 people (16 private), first by anonymouse user on 2008-03-13
- Mkalhousani on 2008-09-04 - Tags css
- Naohiro_k on 2008-03-15 - Tags webdesign , tips , css , [hatena]
- Davidworrell on 2008-08-12 - Tags css , webdesign , web , html
- Onchan on 2008-08-11 - Tags no_tag
- Andymatic on 2008-07-31 - Tags imported , stumbleupon , computers , css , webdesign , tips , tricks , design , web , webdev
Public Sticky notes
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
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
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
Highlighted by onchan
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


Public Comment