Двойная рамка на CSS 3, объёмная рамка

Добавлен: 

Двойная рамка на CSS 3, объёмная рамка

css

Данный принцип, позволит создать объёмную рамку объекта.

Рассмотрим пример создания красивой, объёмной рамки. Принцип заключается в том, что, объекту задаётся обычная рамка. Далее задаётся свойство тени без смещения по осям, и без размытия, а точнее две таких “тени” разной толщины.

Пример кода:

<style type="text/css">
.ramka {
border:1px #e0e0e0 solid;
border-radius:1px;
box-shadow: 0px 0px 0px 6px #f6f6f6, 0px 0px 0px 7px #cccccc;
width:176px;
padding:10px;
}
</style>

<div class="ramka">
Вот тут, какой то текст<br>
И ещё текст...<br>
И снова текст...
</div>

Результат:

Вот тут, какой то текст
И ещё текст...
И снова текст...

Не забываем оставлять комментарии и отзывы, нам важно ваше мнение!

А еcли статья Вам очень понравилась и Вы считаете, что она достойна внимания. Тогда просто поделитесь ею, в социальной сети:


Интересная рекламма:


Возможно вам будет интересно
Текст поверх изображения на CSS Смайлики на CSS 3 Кнопки для сайта на CSS 3

Комментарий добавил: Гость - Саша
Добавлен: 03 09 2013 07:28:59
Гость - Саша
Спасибо! Хорошо получилось!

Комментарий добавил: Гость - СПАСИБО!!!
Добавлен: 21 11 2013 16:12:47
Гость - СПАСИБО!!!
СПАСИБО!!!

Добавление комментария

Имя -

E-mail -





Читать в Яндекс.Ленте

Яндекс.Метрика


Power by xDroid. Copyright © 2009 - 2016 VEB.name
Копирование информации только с обратной ссылкой
Время генерации страницы : 0.0092 сек.