Как легко и просто сделать симпатичные объявления на сайте? Использовать CSS3 и настоящую инструкцию. Недавно на Хабре проскочила статья про создание теней с помощью CSS3. Решено немедленно внедрить примеры на свой сайт. Заодно немного переработать статью, чтобы ей стало удобнее пользоваться.
Скачайте css-файл (скачиваний: 1302), подцепите к своему сайту и используйте нижеследующий синтаксис для вызова:
(:html:)
<div class='lifted'>
<p>Приподнятые
уголки</p>
</div>
(:htmlend:)
|
Приподнятые уголки |
(:html:)
<div class='curled'>
<p>Завитки на
уголках</p>
</div>
(:htmlend:)
|
Завитки на уголках |
(:html:)
<div class='perspective'>
<p>Перспектива</p>
</div>
(:htmlend:)
|
Перспектива |
(:html:)
<div class='raised'>
<p>Приподнятый
бокс</p>
</div>
(:htmlend:)
|
Приподнятый бокс |
(:html:)
<div class="curved-vt-1">
<p>Один
вертикальный
изгиб</p>
</div>
(:htmlend:)
|
Один вертикальный изгиб |
(:html:)
<div class="curved-vt-2">
<p>Два
вертикальных
изгиба</p>
</div>
(:htmlend:)
|
Два вертикальных изгиба |
(:html:)
<div class="curved-hz-1">
<p>Один
горизонтальный
изгиб</p>
</div>
(:htmlend:)
|
Один горизонтальный изгиб |
(:html:)
<div class="curved-hz-2">
<p>Два
горизонтальных
изгиба</p>
</div>
(:htmlend:)
|
Два горизонтальных изгиба |
(:html:)
<div class="rotated">
<p>Повернутый
бокс</p>
</div>
(:htmlend:)
|
Повернутый бокс |
>>class=lifted center<< Приподнятые уголки >><< | Приподнятые уголки
|
>>class=curled center<< Завитки на уголках >><< | Завитки на уголках
|
>>class=perspective center<< Перспектива >><< | Перспектива
|
>>class=raised center<< Приподнятый бокс >><< | Приподнятый бокс
|
>>class=curved-vt-1 center<< Один вертикальный изгиб >><< | Один вертикальный изгиб
|
>>class=curved-vt-2 center<< Два вертикальных изгиба >><< | Два вертикальных изгиба
|
>>class=curved-hz-1 center<< Один горизонтальный изгиб >><< | Один горизонтальный изгиб
|
>>class=curved-hz-2 center<< Два горизонтальных изгиба >><< | Два горизонтальных изгиба
|
>>class=rotated<< Повернутый бокс (глючит в Chrome) >><< | Повернутый бокс (глючит в Chrome) |
У рецепта есть небольшие проблемы. Во-первых, все это не работает в IE8, в котором только у второго примера появляется какой-то хилый бордюрчик :)
Во-вторых, есть такая проблема: если плашка находится внутри ячейки таблицы td, для которой в родительском классе прописано, к примеру:
{
background: #f8f8f8;
border: solid black 1px;
}
то ничего не работает, пока не закомментируешь background: #f8f8f8. То есть у родительского блочного элемента не должно быть бэкграунда. Для обхода глюка у себя я обернул всю генерируемую таблицу div-ом с background: none;
