slogin.info

ihc 468x60 1 1
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна5 / 5
 
Автор: Администратор
Просмотров: 7425
Теги: css, css3, text-shadow, тень

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

Свойство text-shadow (Тень текста)

Это довольно распространенное свойство в CSS, однако, не все о ней знают, или же по каким-то причинам не используют.

В качестве значения свойство text-shadow принимает составное свойство:

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

  • <сдвиг по x> - сдвигает тень по оси X, задается чаще всего в px. При задании положительного расстояния сдвиг идет вправо, отрицательное - влево
  • <сдвиг по y> - сдвигает тень по оси Y, задается чаще всего в px. При задании положительного расстояния сдвиг идет вниз, отрицательное - вверх
  • <радиус размытия> - отвечает за степень размытия тени, задается чаще всего в px
  • <цвет> - соответственно выбирает цвет тени, задается в любом из возможного формата цвета в CSS.

Стоит так же учесть, что можно задавать разные тени для одного и того же текста, разделяя их запятой.

Различные примеры использования text-shadow

Обычная черная тень

p {text-shadow:2px 2px 4px rgba(0,0,0,1);
<p>Обычная черная тень</p>

 Комбинированный набор теней

p {text-shadow:2px 2px 4px rgba(0,0,0,1), -5px 0 3px rgba(0,255,0,1), 0 -5px 3px rgba(0,0,255,1);
<p>Комбинированный набор теней</p>

 Эффект свечения текста CSS

p {text-shadow:0 0 10px rgba(255,255,0,0.3), 0 0 6px rgba(255,255,0,0.4), 0 0 10px rgba(255,255,0,0.3);
<p>Эффект свечения текста CSS</p>

Для создания равномерного эффекта свечения используйте следующие правила: не задавайте сдвигов, задавайте значения размытия в диапазоне от 8-30px, используйте не полностью непрозрачные цвета.

Свойство box-shadow (тень блока через CSS)

Аналогично свойству text-shadow, за исключением того, что задается для тень для всего блока, а не просто текста. Еще одно отличие - возможность задавать внутреннюю тень блокам.

В качестве значения свойство box-shadow принимает составное свойство:

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

  • <тип тени> - позволяет задавать внутреннюю тень, не обязательное значение. При задании inset, делает тень внутри блока
  • <сдвиг по x> - сдвигает тень по оси X, задается чаще всего в px. При задании положительного расстояния сдвиг идет вправо, отрицательное - влево
  • <сдвиг по y> - сдвигает тень по оси Y, задается чаще всего в px. При задании положительного расстояния сдвиг идет вниз, отрицательное - вверх
  • <радиус размытия> - отвечает за степень размытия тени, задается чаще всего в px
  • <растяжение>- отвечает за степень растяжения тени, задается чаще всего в px, при положительном значение растягивает тень, при отрицательном сжимает её
  • <цвет> - соответственно выбирает цвет тени, задается в любом из возможного формата цвета в CSS

Как и для тени текста, для этого свойства предусмотрена возможность задавать тени с разными значениями, разделяя их запятой.

Различные примеры использования box-shadow

Блок с обычной тенью
div {
	height:100px;
	background:#33FF66;
	width:250px;
	box-shadow: 0 0 8px 0 rgba(0,0,0,1);
}
<div>Блок с обычной тенью</div>
Блок с внутренней тенью CSS
div {
	height:100px;
	background:#33FF66;
	width:250px;
	box-shadow: 0 0 4px 0 rgba(0,0,0,1);
}
<div>Блок с внутренней тенью CSS</div>
Светящийся блок или блок с эффектом свечения другими словами
div {
	height:100px;
	background:#33FF66;
	width:250px;
	box-shadow: 0 0 10px 0 rgba(255,255,0,0.6), 0 0 6px 0 rgba(255,255,0,0.8), 0 0 10px 0 rgba(255,255,0,0.6);
}
<div>Светящийся блок или блок с эффектом свечения другими словамиt;/div>

Вот и всё, что я хотел вам рассказать в этой статьей. Используйте различные значения для свойств тени текста и блоков, экспериментируйте и вы получите красивый эффект.

Добавить комментарий

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • ZOMRO
    6.40
  • intuit89
    6.00
  • Varvarka
    4.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Языки программирования сайтов

Приветствую всех посетителей моего сайта. В этой статья я расскажу вам о языках программирования, которые нужны для управления, созданий и разработки своего сайта.

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Удобное собрание CSS хаков для самых популярных браузеров

Для каждого хорошего верстальщика в какой-то момент времени встает вопрос кроссбраузерности. Что такое кроссбраузерность? Это свойство сайта или дизайна сайта отображаться одинакого в разных барузерах. Дело в том, что при создании браузеров разработчики не сильно задумываются о стандартизации, это порождает разное представление одного и того же сайта в их продукции. Создание кроссбраузерной верстки/сайта и позволяет преодолеть эту разницу.

Теги:

css, хаки, hacks, читы

Комментариев: 0 Подробнее
!important в CSS Просмотров 2302
!important в CSS

Часто бывает, что люди, давно изучающие CSS, не имеют представления или не понимают до конца как работает директива !important в CSS. В этой статье я постараюсь описать её действие и показать пару примеров, такая статья так же пригодится тем, кто только начал изучать CSS.

Теги:

css, css3, style, !important

Комментариев: 0 Подробнее
Как подключать свои шрифты на сайт, или все о @font-face в CSS

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

Теги:

css, css3, @font-face, font, шрифт

Комментариев: 0 Подробнее

Последнее с форума

ZOMRO аватар
Домен — это неотъемлемая часть бизнеса, которая также влияет на поисковую систему. Признаки доменно...
Перейти в тему
ZOMRO аватар
На что ориентироваться при выборе хостинга? Функционал и количество ресурсов. Выбираем те параметр...
Перейти в тему
ZOMRO аватар
Красивое имя для сайта или регистрация доменных имен. Заказав у нас услугу хостинга или VDS/VPS, Вы ...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.