И так, очередный подборки. Уже делаю подборки шрифтов, а теперь вот и CSS трюков, хаков и всяких различных ухищрений. Начнем.

1. Закругляем углы блока без изображений.

[sourcedcode="html"]
[/sourcedcode]

[sourcedcode="css]

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

[/sourcedcode]



 

2. Стилизуем ваш нумерованный список.

[soucecode="html"]

1. Первая линия


2. Вторая линия


3. Последняя линия

[/soucecode]

[soucecode="css]

ol {

font: italic 1em Georgia, Times, serif;

color: #999999;

}

ol p {

font: normal .8em Arial, Helvetica, sans-serif;

color: #000000;

}

[/soucecode]

3.Безтабличные формы.

<form> <label for="name">Name</label>

<input id="name" name="name" /> 



<label for="address">Address</label>

<input id="address" name="address" />



<label for="city">City</label>

<input id="city" name="city" />



</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. Двойная ковычка.

[sourcecode="html]

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;

}

[/sourcecode]



 

5. Градиент текста

<h1><span></span>CSS Gradient Text</h1>



<!--[if lt IE 7]>

<style>

h1 span {

background: none;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');

}

</style>

[sourcecode="css]

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;

}

[/sourcecode]

< ![endif]–>