×
Clear all filters including search bar
Valeri Tandilashvili's CSS Notes
Results: 126
CSS Sprites 
.home a:link, .home a:visited {
    width: 120px;
    height: 120px;
    background: url(../images/sprites.jpg) top left no-repeat;
}
.home a:hover {
    background-position: 0 -120px;
}
.home a:active {
    background-position: 0 -240px;
}
CSS Sprites are used mostly for performance purposes
what z-index can't do
Example, where 
z-index
is not useful
z-index 
z-index
only applies to elements which are positioned (
relative
, 
absolute
, 
fixed
) Don't use values like 1, 2, 3,... instead use 100, 200, 300
border-radius
All corners are rounded:
.rounded {
    border-radius: 10px;
}
Only bottom corners are rounded:
.bottom_rounded {
    border-radius: 0 0 10px 10px;
}
Perfectly circled box:
.circle {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    line-height: 200px;
}
Direction rule: top-left, top-right, bottom-right, bottom-left
text-align: justify
Stretches the lines so that each line has equal width
position:relative
An element with 
position: relative;
is positioned relative to its normal position. The element will not push any of the content around it.
text-shadow CODE 
h1 {
  text-shadow: 3px 0px 3px #ccc;
}
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
clearfix with html element
two margins
When two margins are touching, the larger of the two margins is used
h1 content replaced with logo image 
#header h1 {
    background: url(../images/bg.jpg) top left no-repeat;
    width: 702px;
    height: 100px;
    text-indent: -9999px;
}
Results: 126