И так, очередный подборки. Уже делаю подборки шрифтов, а теперь вот и CSS трюков, хаков и всяких различных ухищрений. Начнем.
1. Закругляем углы блока без изображений.
<div id="container"><strong> </strong><strong></strong> <strong></strong> <strong></strong> <strong></strong> <!--ваш контент --> <strong> </strong><strong></strong> <strong></strong> <strong></strong> <strong></strong></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. Стилизуем ваш нумерованный список.
<ol> <li>Первая линия</li> <li>Вторая линия</li> <li>Последняя линия</li> </ol>
ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}
ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}
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. Двойная ковычка.
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;
}
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>
< ![endif]-->
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;
}
Случайные посты:
Есть пара дополнений, с вашего позволения:
По 1-му пункту - решение хорошо, если цвет бордера и бэкграунда - не кардинально контрастны - если будут черный бордер на белом фоне - вы увидите зубчатость, которая как минимум тянет на статус “хотелось бы лучше”.
Видел как-то вариант с использование скриптов (была реализация с помощью библиотеки MochKit), где делалось сглаживание за счет использования комбинирования цветов. Вобщем пример тут:
http://mochikit.com/examples/rounded_corners/index.html
Лично же я сейчас просто тащусь от тега canvas, фикс для которого теперь написан для любимого mootools. Поэтому теперь стараюсь рисовать уголки, градиенты и тени с его использованием. Пример из текущего проекта тут:
http://fantactuka.net/folio/latino/pages/
На этой неделе возможно сделаю что-то вроде класса для рисования такого счастья как плагин к mootools и выложу с мануалом на хабре (думаю в ходе обсуждений код только улучшится), ссылку кину сюда, может кому будет интересно.
По 3-му пункту для label 100% понадобятся паддинг (верхний) либо line-height, ведь иначе текст в разных браузерах будет прыгать относительно инпута (в целом я говорю про вертикальное выравнивание, хотя часто на это можно забить, но все же выглядет лучше
)
По 4-му пункту, чего уж не написали как ставить закрывающую для полноты примера
За 2-й пункт отдельное спасибо, потому что пожизни забываю про замечательный шрифт Грузия )
[Ответить]
Да, кстати, забыл написать.
Как минус моего варианта закругленных углов - бОльший вес. Но ведь скрипты кэшируются, так что, наверное, это не смертельно, учитывая, что изменять цвета и радиус углов можно изменяя переменные скрипта, а не перерисовывая, перерезая картинки
[Ответить]
На счет закругления мне оочень понравился вариант описанный на хабре вот тут. Здесь я просто описал довольно быстрый и легкий способ серугления. Ведь нет пределов к совершенству,пока есть такие такие браузеры как IE
По 3 пункту. В теории да,но на практике у меня вроде ничего не прыгало.
По 2-ому. Не за что;) Я как раз работаю над проектом и дизайнер тоже использует Georgia.Очень красиво.
[Ответить]
Хм. Фигня какая-то с хабром - никак не могу зайти. С самого утра
[Ответить]