Блоги | Статьи | Форум | Дамский Клуб LADY

Блог о блогахСоздан: 15.02.2008Статей: 14Автор: ВебмастерПодписатьсяw

Стили CSS для теней и скругления уголков

Обновлено: 14.02.16 00:13 Убрать стили оформления

В данной статье приведены примеры использования свойств CSS (каскадных таблиц стилей) для задания скругления уголкам, теней для текста и блочных элементов.

border-radius - устанавливает радиус скругления уголков рамки.

Синтаксис: border-radius: <радиус>{1,4}

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (1 значение - единый радиус для всех четырех уголков; 2 значения - первое задает радиус верхнего левого и нижнего правого уголка, второе - верхнего правого и нижнего левого уголка; 3 значения - первое значение задает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка; 4 - по очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка).

text-shadow - добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия.

Синтаксис: text-shadow: <сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>

box-shadow - добавляет тень к элементу.

box-shadow: <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство border-radius, то тень также получится с закругленными уголками.
Параметры: 
inset - тень выводится внутри элемента;
сдвиг по x - смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево.
сдвиг по y - смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное — вверх.
размытие - задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой.
растяжение - положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент.
цвет - цвет тени в любом доступном CSS формате, по умолчанию тень черная.

В таблице ниже приведены несколько примеров использования данных свойств:

Пример Описание HTML-код
LADY Текст с тенью <span style="color: #3d73a9; font-size:x-large; text-shadow: 2px 2px 2px #7d7dac;">LADY</span>
Дамский клуб
Прямоугольник со скругленными углами <div style="border:2px solid #3d73a9; border-radius:20px; padding:10px">Дамский клуб</div>
Дамский клуб
Скруглять можно как все углы, так и только выбранные <div style="border:2px solid #3d73a9; border-radius: 0 20px 0 20px; padding:10px">Дамский клуб</div>
 
При больших значениях угла скругления из прямоугольника получится шар <div style="border:2px solid #3d73a9; width:40px; height:40px; border-radius:40px;">&nbsp;</div>


Скругление можно применять не только к блокам, но и рисункам <img src="https://lady.webnice.ru/forum/images/avatars/0/4.img" style="border-radius:15px"><br>
<img src="https://lady.webnice.ru/forum/images/avatars/0/4.img" style="border-radius:80px 0 0 0"><br>
<img src="https://lady.webnice.ru/forum/images/avatars/0/4.img" style="border-radius:100px">
 
Тень для блока <div style="width: 100px; height: 50px; border-radius: 10px; border: 1px solid #3d73a9; box-shadow: 5px 5px 5px #7d7dac;">&nbsp;</div>
 
При нулевых параметрах сдвига тени, можно произвести эффект внешнего "свечения" <div style="width: 100px; height: 50px; border-radius: 10px; box-shadow: 0px 0px 20px #8ABCEE">&nbsp;</div>
 
При добавлении параметра inset тень для блока можно сделать "внутренней" <div style="width: 100px; height: 50px; border-radius: 10px; border: 1px solid #3d73a9; box-shadow: 0px 0px 30px #8ABCEE inset;">&nbsp;</div>
 
Вы можете задать несколько теней, перечислив параметры каждой через запятую <div style="width: 100px; height: 50px; box-shadow: 3px 3px 0px red, 6px 6px 0px yellow, 9px 9px 0px green; border: 1px solid red; border-radius: 5px 5px 50px;">&nbsp;</div>
lady
И всё вместе :) <div style="width: 120px; height: 120px; border-radius: 120px; text-align: center; border: 1px solid #8abcee; box-shadow: 0 0 50px red inset, 0 0 20px green;">
<span style="font-size: 50px; line-height: 120px; font-weight: bold; color: #2E6E9E; text-shadow: 5px 5px 1px pink;">lady</span>
</div>

Задать стили можно, редактируя HTML-код напрямую, открыв его по кнопке HTML или в окне свойств для элементов, для которых оно доступно, например, рисунков:

Стиль



Комментарии:
Поделитесь с друзьями ссылкой на эту статью:

Оцените и выскажите своё мнение о данной статье
Для отправки мнения необходимо зарегистрироваться или выполнить вход.  Ваша оценка:  


Всего отзывов: 1 в т.ч. с оценками: 1 Сред.балл: 5

Другие мнения о данной статье:


Allegra [27.04.2018 08:21] Allegra 5 5
Спасибо за разъяснения! Научилась по вашей статье делать скругления - красота!

Посетители, комментировавшие эту статью, комментируют также следующие:
Анна Би: Оформление конкурсов Библиотекарша: Конкурсные работы Allegra: Из колокольцев вереска в давние времена… Esmerald: Конкурсные работы. Часть 2

Список статей:



Если Вы обнаружили на этой странице нарушение авторских прав, ошибку или хотите дополнить информацию, отправьте нам сообщение.
Если перед нажатием на ссылку выделить на странице мышкой какой-либо текст, он автоматически подставится в сообщение