Finar.ru
web.finar.ru
video.finar.ru
Темы для BootstrapNew!

Тени для блоков в CSS3

Автор: Филипп Казаков, дата: 2011-11-23, просмотров 1432
Тэги

Как легко и просто сделать симпатичные объявления на сайте? Использовать CSS3 и настоящую инструкцию. Недавно на Хабре проскочила  статья про создание теней с помощью CSS3. Решено немедленно внедрить примеры на свой сайт. Заодно немного переработать статью, чтобы ей стало удобнее пользоваться.

Скачайте css-файл (скачиваний: 263), подцепите к своему сайту и используйте нижеследующий синтаксис для вызова:

(: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, для которой в родительском классе прописано, к примеру:

.content td
{
background: #f8f8f8;
border: solid black 1px;
}

то ничего не работает, пока не закомментируешь background: #f8f8f8. То есть у родительского блочного элемента не должно быть бэкграунда. Для обхода глюка у себя я обернул всю генерируемую таблицу div-ом с background: none;




Оставить комментарий 


Ваше имя:
->