В данной статье приведены примеры использования свойств 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;"> </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;"> </div> |
|
При нулевых параметрах сдвига тени, можно произвести эффект внешнего "свечения" | <div style="width: 100px; height: 50px; border-radius: 10px; box-shadow: 0px 0px 20px #8ABCEE"> </div> |
|
При добавлении параметра inset тень для блока можно сделать "внутренней" | <div style="width: 100px; height: 50px; border-radius: 10px; border: 1px solid #3d73a9; box-shadow: 0px 0px 30px #8ABCEE inset;"> </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;"> </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-код напрямую, открыв его по кнопке или в окне свойств для элементов, для которых оно доступно, например, рисунков: