CSS drop shadow — создание тени при помощи CSS

<Mr.ElectroNick>

/* personal website */

  • VST
  • ОБО МНЕ

ГЛАВНАЯНОВОСТИСТАТЬИОБЗОРЫVSTОБО МНЕ

Техника создания «гибких» теней при помощи CSS применимая к блочным элементам.

Техника создания «гибких» теней при помощи CSS применимая к блочным элементам.
Technique to build flexible CSS drop shadows applied to arbitrary block elements.
Большинство существующих техник для создания теней используют изображения — эта нет.
Most of the existing techniques for creating element shadows use images, this one doesn’t.
Эта техника использует простой CSS — смотрите ниже.

Исходный код для index.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
	<title>My project</title> 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
	<link media="screen" type="text/css" rel="stylesheet" href="webtoolkit.
 
 shadow.css" /> 
 
	<style> 
		body 
		{
			margin: 0px;
			padding: 20px;
			font-family: verdana;
			font-size: 12px;
		}
	</style> 
 
</head> 
 
<body> 
 
	<div> 
	<div> 
	<div> 
	<div> 
	<div> 
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
		Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
		when an unknown printer took a galley of type and scrambled it to make a type 
		specimen book. It has survived not only five centuries, but also the leap into 
		electronic typesetting, remaining essentially unchanged. It was popularised 
		in the 1960s with the release of Letraset sheets containing Lorem Ipsum 
		passages, and more recently with desktop publishing software like Aldus PageMaker 
		including versions of Lorem Ipsum.
	</div> 
	</div> 
	</div> 
	</div> 
	</div> 
 
</body> 
</html>

Исходный код для webtoolkit.

shadow.css
#shadow-container { 
	position: relative; 
	left: 3px; 
	top: 3px; 
	margin-right: 3px; 
	margin-bottom: 3px; 
} 
 
#shadow-container .shadow2, 
#shadow-container .shadow3, 
#shadow-container .container { 
	position: relative; 
	left: -1px; 
	top: -1px; 
} 
 
	#shadow-container .shadow1 { 
		background: #F1F0F1; 
	} 
 
	#shadow-container .shadow2 { 
		background: #DBDADB; 
	} 
 
	#shadow-container .shadow3 { 
		background: #B8B6B8; 
	} 
 
	#shadow-container .container { 
		background: #ffffff; 
		border: 1px solid #848284; 
		padding: 10px; 
	}

Оригинал статьи: http://www.webtoolkit.info/css-drop-shadow.html

01/03/2009

Опубликовано в категории: CSS

‹ Clearfix

CSS vertical align — вертикальное выравнивание при помощи CSS ›

CSS: drop shadows

CSS: drop shadows

Languages

See also the index of all tips.

Drop shadows

Since this page was written, many CSS implementations have added the ‘box-shadow’ property from CSS level 3, which makes the method below unnecessary. See “Rounded corners and shadowed boxes” for an example. That page also shows a more powerful, but more complex, way to make shadows with CSS level 2 only.

CSS2 doesn’t have a property to add a shadow to a box. You can try to add a border to the right and bottom, but it won’t look right. However, if you have two nested elements, you can use the outer one as a shadow for the inner one. For example, if you have a text like this (HTML):

<div class=back>
  <div class=section>
    <h3>Die Rose duftet - doch ob sie empfindet</h3>
    <address>Heinrich Heine (1797-1856)</address>
    <p>Die Rose duftet - doch ob sie empfindet<br>
    ...
  </div>
</div>

you can use the outer DIV as a shadow for the inner one.

The result might look like this separate page. First, give the BODY a background (light green in this example), the outer DIV a somewhat darker background (green-gray) and the inner DIV another background (e.g., yellow-white):

body {background: #9db}
div.back {background: #576}
div.section {background: #ffd}

Next, by using margins and padding, you offset the inner DIV a little to the left and up from the outer DIV:

div.back {padding: 1.5em}
div.section {margin: -3em 0 0 -3em}

You also have to move the outer DIV a little to the right. And if you have multiple sections, you probably want some space between them, too:

div.back {margin: 3em 0 3em 5em}

That’s basically it. You can add a border around the inner DIV if you want. You’ll probably also want some padding inside it, e.g.:

div.section {border: thin solid #999; padding: 1.5em}

Of course, you can vary the size of the shadow to your taste.

Text shadows

CSS does have a property to add a shadow to text. It has four arguments: the color of the shadow, the horizontal offset (positive means to the right), the vertical offset (positive means down) and the blur (0 means a sharp shadow). For example:

h4 { text-shadow: red 0.2em 0.3em 0.2em }

Does this text have a shadow?

Bert Bos, style activity lead
Copyright © 1994–2021 W3C® Privacy policy

Created 4 April 2002;
Last updated Wed 06 Jan 2021 05:40:49 AM UTC

Languages

  • Azərbaycan
  • Български
  • Deutsch
  • Ελληνικά
  • English
  • Español
  • Français
  • Bahasa Indonesia
  • Norsk
  • Nederlands
  • Polski
  • Português brasileiro
  • Português
  • Русский
  • ไทย
  • Tagalog
  • Українська
  • Tiếng Việt
  • 简体中文
  • 繁體中文

About the translations

drop-shadow() — CSS: Каскадные таблицы стилей

CSS-функция drop-shadow() применяет эффект тени к входному изображению. Результатом является .

Тень фактически является размытой, смещенной версией альфа-маски входного изображения, нарисованной определенным цветом и наложенной под изображением.

Примечание: Эта функция чем-то похожа на свойство box-shadow . 9Свойство 0004 box-shadow создает прямоугольную тень за всем полем

элемента , а функция фильтра drop-shadow() создает тень, которая соответствует форме (альфа-каналу) самого изображения .

 тень (смещение-x смещение-y цвет радиуса размытия)

Функция drop-shadow() принимает параметр типа (определенный в свойстве box-shadow ), за исключением того, что 0004 вставка ключевое слово и распространение параметры не допускаются.

Параметры

смещение-x смещение-y (обязательно)

Два <длина> значения, определяющие смещение тени.

offset-x задает расстояние по горизонтали, где отрицательные значения помещают тень слева от элемента. offset-y указывает расстояние по вертикали, где отрицательные значения помещают тень над элементом. Если оба значения равны 0 , тень размещается непосредственно за элементом.

радиус размытия (опционально)

Радиус размытия тени, заданный как . Чем больше значение, тем крупнее и размытее становится тень. Если не указано, по умолчанию используется значение 0 , что приводит к резкому неразмытому краю. Отрицательные значения не допускаются.

цвет (дополнительно)

Цвет тени, указанный как <цвет> . Если не указано, используется значение свойства color .

Настройка тени с использованием смещения пикселей и радиуса размытия 

 /* Черная тень с размытием 10 пикселей */
тень (16px 16px 10px черный)

Установка тени с использованием смещения rem и радиуса размытия 

 /* Красноватая тень с размытием 1rem */
падающая тень (. 5rem .5rem 1rem #e23)
Спецификация
Модуль эффектов фильтра, уровень 2
# funcdef-filter-drop-shadow

Таблицы BCD загружаются только в браузере

с включенным JavaScript. Включите JavaScript для просмотра данных.
  • <функция фильтра>
  • размытие()
  • яркость()
  • контраст()
  • оттенки серого()
  • оттенок-поворот()
  • инвертировать()
  • непрозрачность()
  • насыщение()
  • сепия()
  • box-shadow свойство
  • text-shadow свойство

Последнее изменение: , участниками MDN

CSS Shadow Effects

❮ Предыдущая Далее ❯

Тени

С помощью CSS вы можете создавать эффекты теней!

Наведите на меня!

CSS Shadow Effects

С помощью CSS можно добавить тень к тексту и элементам.

В этих главах вы узнаете о следующих свойствах:

  • text-shadow
  • коробка-тень

Тень текста CSS

Свойство CSS text-shadow применяет тень к тексту.

В простейшем случае вы указываете только горизонтальную тень (2 пикселя) и вертикальную тень (2 пикселя):

Текстовый эффект тени!

Пример

h2 {
  text-shadow: 2px 2px;
}

Попробуйте сами »

Затем добавьте цвет тени:

Текстовый эффект тени!

Пример

h2 {
  text-shadow: 2px 2px красный;
}

Попробуйте сами »

Затем добавьте к тени эффект размытия:

Текстовый эффект тени!

Пример

h2 {
  text-shadow: 2px 2px 5px красный;
}

Попробуйте сами »

В следующем примере показан белый текст с черной тенью:

Текстовый эффект тени!

Пример

h2 {
  цвет: белый;
  text-shadow: 2px 2px 4px #000000;
}

Попробуйте сами »

В следующем примере показана красная неоновая светящаяся тень:

Текстовый эффект тени!

Пример

h2 {
  text-shadow: 0 0 3px #FF0000;
}

Попробуйте сами »

Множественные тени

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

В следующем примере показана красная и синяя неоновая светящаяся тень:

Текстовый эффект тени!

Пример

h2 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

Попробуйте сами »

В следующем примере показан белый текст с черной, синей и темно-синей тенью:

Текстовый эффект тени!

Пример

h2 {
  цвет: белый;
  text-shadow: 1px 1px 2px черный, 0 0 25px синий, 0 0 5px темно-синий;
}

Попробуйте сами »

Вы также можете использовать свойство text-shadow для создания простой границы вокруг какой-то текст (без теней):

Рамка вокруг текста!

Пример

h2 {
  цвет: коралловый;
  text-shadow: -1px 0 черный, 0 1px черный, 1px 0 черный, 0-1px черный;
}

Попробуйте сами »

❮ Предыдущий Далее ❯


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Top0 Examples Примеры HTML

Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

No related posts.