Красивые тени css: Как сделать красивую тень для блока с помощью CSS. (8 примеров)

Коллекция css теней Box-shadows.css / Хабр

Привет всем!

Наверняка, некоторые из вас замечали, что на разных сайтах используются практически однотипные тени в блоках, панелях навигации и прочих контейнерах, плюс — минус пара пикселей в сторону прозрачности. Я проанализировал ряд популярных сайтов, как наших, так и зарубежных, и попытался собрать максимально приближенные параметры используемых теней в одну большую коллекцию, или библиотеку. Кому как удобнее. Надеюсь, кому-нибудь пригодится.

Основная цель проекта — облегчить работу начинающим веб-дизайнерам и разработчикам в создании приятного и современного дизайна. Возможно и опытные дизайнеры почерпнут для себя что-нибудь интересное из этой разработки.

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

Box-shadows.css


Box-shadows.css — это коллекция простых и приятных css теней (box-shadow) для ваших проектов. В роли основного используется простой класс .bShadow. Сейчас коллекция насчитывает более 50 актуальных вариантов теней с номером, а так же три самостоятельных класса
.bShadow
, .bShadow-light и .bShadow-inset. Они отлично подходят для использования в таблицах, для содержимого домашних страниц, контейнеров, навигации и других блоков вашего сайта.

Пресекая ряд вопросов, сразу поясню, почему используются числа, а не имена или классы типа bShadow-01040-00.
Коллекция не использует самостоятельные имена, как это сделано в animate.css, так как для данного проекта это немного не приемлемо. Тень блоков увеличивается по нарастающей, с различными отклонениями, а за счет последовательности чисел можно подобрать оптимальный для себя вариант, не заучивая отдельные имена. Это значительно упрощает работу с коллекцией.

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

Дополнительные функции


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

Подбор теней

На сайте предусмотрена функция предварительного просмотра, в которой можно указать цвет фона и контейнера вашего сайта, для дальнейшего подбора теней. Подбор теней и классов осуществляется посредством выбора опций или наведением на блоки. Результат отображается в виде тени основного контейнера сайта.

Генератор файлов min.css

На сайте также есть генератор файла box-shadows.min.css с инструкцией, который позволяет пользователю создавать собственный файл, состоящий только из выбранных им классов. Это поможет уменьшить нагрузку на сайт, если в вашем проекте используется менее двух или трех теней.

Генератор css box-shadow

Вы можете использовать классический генератор css box-shadow, чтобы дополнить коллекцию своими собственными стилями. Нажав кнопку «Сохранить и добавить следующий», вы можете создавать бесконечное количество классов. Первому сгенерированному и последующим классам присваивается порядковый номер, не входящий в коллекцию. Вы можете скопировать полученные стили и вставить в корневой css или созданный на сайте файл box-shadows.min.css.

Попробуйте поэкспериментировать. Это действительно интересная работа.

Сейчас разработка находится на стадии развития и набора 200 звезд на GitHub, для получения ссылки на cdnjs. Желаю вам приятного пользования и творческих успехов. Если у вас есть пожелания, замечания или предложения по улучшению проекта, пишите в комментариях.

GitHub · Сайт

Дрессируем box-shadow / Хабр

Разработчики W3C сделали box-shadow очень гибким свойством. Благодаря этому можно получать весьма интересные результаты, если использовать это свойство нетривиальным образом. В этой статье я напишу о некоторых эффектах, которые мне удалось получить при помощи «теневых технологий».

Пока я составлял примеры, я неожиданно обнаружил, что браузеры отображают их совсем неодинаково. В итоге, помимо простой демонстрации возможностей box-shadow, получился еще и маленький браузерный тест на поддержку CSS 3. Все примеры снабжены CSS-кодом и картинкой (общий объем всех PNG: 161 КБ). В статье я не стал прописывать свойства с вендорными префиксами -moz- и -webkit-, чтобы не ухудшать читабельность. В суммарной странице со всеми примерами эти префиксы есть (предупреждаю, что у Оперы есть баг с прорисовкой внешних box-shadow при прокрутке).


Клонирование (шлейф)


Свойство box-shadow позволяет создать множество теней, что можно использовать весьма своеобразно. Ниже показан div-элемент с неким подобием шлейфа (в некоторых играх снаряды примерно такие «хвосты» описывают).

Как получилось у меня? Потребовалось просто создать несколько «теней» с разным позиционированием и цветом. Напоминаю порядок линейных размеров свойства box-shadow: отступ по оси X (положительное значение — вправо, отрицательное — влево), отступ по оси Y, радиус размытия и последний — масштаб.

Как выходит у браузеров? У Opera и Firefox никаких проблем не возникло. Что касается webkit-браузеров, то они, похоже, любят играть в разоблачителей. «Тени» они нарисовали квадратными, обнажая истинную сущность круга: квадрат с максимальным закруглением уголков. Это, конечно, интересно, но FAIL. Кстати, весьма примечательно, что самую последнюю «тень» они всё-таки нарисовали круглой (если вы ее совсем не видите, то пора разбираться с гаммой вашего монитора).

#trail {
	background: #d0d0d0;
	border: 1px solid #c0c0c0;
	border-radius: 40px;
	box-shadow: #d8d8d8 110px -25px 0 -10px,
	            #e0e0e0 210px  15px 0 -15px,
	            #e8e8e8 310px -10px 0 -20px,
	            #f0f0f0 410px   5px 0 -25px,
	            #f4f4f4 510px   0px 0 -30px;
	height: 75px;
	margin: 20px;
	width: 75px;
	}

Свечение


Всякую тень, которую можно окрасить в яркий цвет и сильно размыть, можно использовать для эффекта свечения. Так как CSS box-shadow это позволяет, то почему бы не воспользоваться?

Как получилось у меня? Я залил круг (квадрат) светло-красным цветом и пустил 2 красные размытые «тени»: одну внутрь, другую наружу. Тем самым я получил эффект свечения, при котором центральная часть кажется ярче. Во всяком случае, звезды обычно так и рисуют.

Как выходит у браузеров? Ни один браузер не сделал это идеально. У Opera и Firefox (а также у Safari, но не так выраженно) почему-то вышла тонкая светлая обводка вокруг элемента. Чем выше гамма монитора, тем она заметнее. В принципе эту обводку можно избежать, если сделать элемент прозрачным и оставить только внешнюю «тень». Но тогда и не будет эффект более светлого участка в центре. Ан-нет. Оказывается, стандарт предписывает обрезать тень под элементом, так что прозрачность не поможет. Теперь понятно, откуда взялась окантовка: это anti-aliasing

Safari и Chrome сделали свечение недостаточно округлой. У Chrome просто безобразие.

#glow {
	background: #ff8080;
	border-radius: 40px;
	box-shadow: inset #ff0000 0 0 40px 10px,
	                  #ff0000 0 0 24px 12px;
	height: 75px;
	margin: 45px; 
	width: 75px;
	}

Мнократный border


Возможно, у вас иногда будет появляться необходимость использовать две или больше линий вокруг элемента. Outline даст только одну дополнительную, да и не во всех браузерах закруглишь ее. А у border-style фантазия ограничена. В таком случае поможет box-shadow. В данном примере изображена беговая дорожка.

Как получилось у меня? Нужно наложить несколько «теней» подряд с разными масштабами (размерами). Для коричневых дорожек я увеличивал масштаб на 3 пикселя по сравнению с предыдущей тенью (ну или рамкой). Для белой линии — на один пиксель. Нужно помнить, что более глубокие слои должны находиться в списке последними, так как порядок имеет значение).

Как выходит у браузеров? Opera и Firefox отрисовали почти идентично. А вот Chrome и Safari показали нечто гипнотическое. Тут же, кстати, можно обнаружить причину недостаточно округлой «тени» в предыдущем примере (свечение). Оказывается Webkit-ы

не увеличивают и не уменьшают border-radius для тени пропорционально увеличению/уменьшению самой тени. Досадный косяк.

#multi-border {
	background: #804020;
	border: 1px solid #ffffff;
	border-radius: 40px;
	box-shadow:
	/* линии внутри */
	inset #804020 0 0 0  3px,
	inset #ffffff 0 0 0  4px,
	inset #804020 0 0 0  7px,
	inset #ffffff 0 0 0  8px,
	/* линии снаружи */ 
	      #804020 0 0 0  3px,
	      #ffffff 0 0 0  4px,
	      #804020 0 0 0  7px,
	      #ffffff 0 0 0  8px,
	      #804020 0 0 0 15px;
	height: 75px;
	margin: 35px;
	width: 150px;
	}

Эффект объема (выпуклость)


С помощью box-shadow можно вполне неплохо сделать элемент объемным. Псевдообъемной графикой нынче многие злоупотребляют, но в этой статье мы говорим не о дизайнерских правилах хорошего тона.

Как получилось у меня? Потребовалось создать две внутренние «тени»: одна светлая, другая темная. Светлая — со смещением вправо вниз, темная — влево вверх. При этом светлая и темная «тени» должны быть созданы с помощью полупрозрачности белого и черного цветов. Благодаря полупрозрачности (если правильно отрегулированы альфа-каналы), места слияния темной и светлой «тени» обретают цвет, близкий к цвету background-а. В противном случае, одна из «теней» будет преобладать, что уменьшит реалистичность. Если в примере обнулить размытие «теней», то будет легче понять принцип работы кода.

Как выходит у браузеров? Будем считать, что Opera, Firefox и Safari нарисовали объемный прямоугольник одинаково. Что касается Chrome, тот тут мы и находим причину некоторых косяков в предыдущих примерах: внутренние «тени» всегда вылезают за пределы border-radius.

#embossment {
	background: #404040;
	border-radius: 20px;
	box-shadow: inset rgba(255,255,255,0.2) 8px  8px 18px 5px,
	            inset rgba(0,0,0,0.5)      -8px -8px 18px 5px;
	height: 75px;
	margin: 20px; 
	width: 150px;
	}

Градиент


Маразм крепчает. Теперь рисуем с помощью box-shadow радужный градиент. Вообще градиенты предусмотрены в черновике W3C, но Opera пока не поддерживает их. Так что практическая польза в этом, как ни странно, есть.

Как получилось у меня? Сначала залил прямоугольник красным фоном. Затем поочередно наложил «тени» нужных цветов (для удобства сначала без размытия): желтый, зеленый, голубой, синий, фиолетовый, снова красный. Каждый последующий цвет должен был быть выше по глубине и правее смещен, чтобы был виден предыдущий цвет. Затем применил размытие: радиус должен совпадать с протяженностью цвета в градиенте. Как только увидел результат, я вспомнил, что заблюривание идет во все стороны, а не только по бокам, из-за чего верхняя и нижняя часть всего градиента пропустила сквозь себя красный фон. Чтобы избавится от этого эффекта, пришлось увеличить все «тени» и потом на такую же величину сместить их вправо, чтобы компенсировать изменение размеров. Для контроля проверил без размытия. Готово.

Как выходит у браузеров? Opera и Firefox опять показали идентичный глазу результат. Chrome показал более насыщенный цвет в местах минимального размытия теней. Не возьмусь сказать, кто правильнее сделал. Кажется, что правда лежит посередине. Safari совсем слабо заблюрил «тени», поэтому градиент вышел явно неправильным. Все браузеры, кроме Chrome, притормаживали во время прокрутки страницы до нужного блока с градиентом. Safari тормозил несравненно феерично.

#gradient {
	background: #ff0000;
	border: 1px solid #000000;
	box-shadow: inset #FF0000 -150px 0 100px -100px,
	            inset #FF00FF -250px 0 100px -100px,
	            inset #0000FF -350px 0 100px -100px,
	            inset #00FFFF -450px 0 100px -100px,
	            inset #00FF00 -550px 0 100px -100px,
	            inset #FFFF00 -650px 0 100px -100px;
	height: 200px;
	margin: 20px;
	width: 600px;
	}

Пламя!


Ну а теперь апофеоз фрик-кодинга: огонь с помощью box-shadow! Убил на него, наверное, часа 2, поскольку постоянно приходилось переделывать. В данном примере изображена горящая спичка, находящаяся параллельно к земле и повернутая головкой в сторону зрителя. Получилось, конечно, не слишком правдоподобно. Но ведь это пламя в CSS!

Как получилось у меня? Без комментариев, смотрите сразу код 🙂

Как выходит у браузеров? У Opera и Firefox отличия минимальные. У Safari «тени» опять слишком квадратные, поэтому пламя вышло шире. За головкой спички — какой-то странный черный квадрат. Chrome тоже сделал огонь слишком широким, но в добавок еще и размытие отрисовал весьма грубо.

<div>
	<div></div>
</div>
#black-background {background: #000000;}

#burning {
	background: #402000;
	border-radius: 40px;
	box-shadow:
	/* головка */
	inset #806040 0 0 10px 2px,
	/* прозрачно-голубо-белая часть */
	#102030 0px    0px 20px   6px,
	#c8d8e0 0px  -10px 17px   4px,
	#d8e8f0 0px  -20px 15px  -2px,
	#e0f0f8 0px  -30px 14px  -6px,
	#e8f8ff 0px  -40px 12px  -9px,
	#ffffff 0px  -50px 10px -12px,
	#ffffe0 0px  -55px 10px -14px,
	#ffffc0 0px  -60px 10px -20px,
	#ffffa0 0px  -62px 10px -22px,
	#ffff80 0px  -64px 10px -24px,
	/* желто-красная часть */
	#ffff40 0px    0px 15px   4px,
	#ffff30 0px  -10px 13px   6px,
	#ffff20 0px  -20px 12px   8px,
	#ffff10 0px  -30px 11px   6px,
	#ffff00 0px  -40px 10px   4px,
	#fff000 0px  -50px 10px   2px,
	#ffe000 0px  -60px 10px   0px,
	#ffd000 0px  -70px 10px  -4px,
	#ffc000 0px  -80px 10px  -6px,
	#ffa000 0px  -90px 10px -10px,
	#ff8000 0px -100px 10px -14px,
	#ff6000 0px -110px 10px -16px,
	#ff4000 0px -120px 10px -20px,
	#ff2000 0px -124px 10px -22px,
	#ff0000 0px -127px 10px -24px;
	height: 60px;
	margin: 125px 35px 30px 35px;
	width: 60px;
	}

UPD: Из любезно предоставленного скриншота из IE9 PP4, можно сказать, что новый IE весьма-таки неплох.

box-shadow - Веб-технологии для разработчиков

box-shadowChrome Полная поддержка 10
Полная поддержка 10
Замечания Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Полная поддержка 1
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12Firefox Полная поддержка 4
Полная поддержка 4
Замечания Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Нет поддержки 3.5 — 13
С префиксом Требует вендорный префикс: -moz-
Полная поддержка 49
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 44С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Полная поддержка 9
Полная поддержка 9
Замечания To use box-shadow in Internet Explorer 9 or later, you must set border-collapse to separate.
Замечания Since version 5.5, Internet Explorer supports Microsoft's DropShadow and Shadow Filter. You can use this proprietary extension to cast a drop shadow (though the syntax and the effect are different from CSS3)
Opera Полная поддержка 10.5
Полная поддержка 10.5
Замечания Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Safari Полная поддержка 5.1
Полная поддержка 5.1
Замечания Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Полная поддержка 3
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка ≤37
Полная поддержка ≤37
Замечания Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Полная поддержка ≤37
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 18
Полная поддержка 18
Замечания Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Полная поддержка 18
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Полная поддержка 4
Полная поддержка 4
Замечания Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Нет поддержки 4 — 14
С префиксом Требует вендорный префикс: -moz-
Полная поддержка 49
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 44С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 14
Полная поддержка 14
Замечания Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Полная поддержка 14
С префиксом Требует вендорный префикс: -webkit-
Safari iOS Полная поддержка 5
Полная поддержка 5
Замечания Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Полная поддержка 1
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android Полная поддержка 1.0
Полная поддержка 1.0
Замечания Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Полная поддержка 1.0
С префиксом Требует вендорный префикс: -webkit-
insetChrome Полная поддержка 10
Полная поддержка 10
Полная поддержка 1
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12Firefox Полная поддержка 4
Полная поддержка 4
Нет поддержки 3.5 — 13
С префиксом Требует вендорный префикс: -moz-
IE Частичная поддержка 9
Частичная поддержка 9
Замечания To use box-shadow in Internet Explorer 9 or later, you must set border-collapse to separate.
Замечания inset must be the last keyword in the declaration.
Opera Полная поддержка 10.5Safari Полная поддержка 5.1
Полная поддержка 5.1
Полная поддержка 5
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка ≤37
Полная поддержка ≤37
Полная поддержка ≤37
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 18
Полная поддержка 18
Полная поддержка 18
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Полная поддержка 4
Полная поддержка 4
Нет поддержки 4 — 14
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка 14
Полная поддержка 14
Полная поддержка 14
С префиксом Требует вендорный префикс: -webkit-
Safari iOS Полная поддержка 5
Полная поддержка 5
Полная поддержка 4.2
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android Полная поддержка 1.0
Полная поддержка 1.0
Полная поддержка 1.0
С префиксом Требует вендорный префикс: -webkit-
Multiple shadowsChrome Полная поддержка 10
Полная поддержка 10
Полная поддержка 1
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12Firefox Полная поддержка 4
Полная поддержка 4
Нет поддержки 3.5 — 13
С префиксом Требует вендорный префикс: -moz-
IE Полная поддержка 9
Полная поддержка 9
Замечания To use box-shadow in Internet Explorer 9 or later, you must set border-collapse to separate.
Opera Полная поддержка 10.5Safari Полная поддержка 5.1
Полная поддержка 5.1
Полная поддержка 3
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка ≤37
Полная поддержка ≤37
Полная поддержка ≤37
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 18
Полная поддержка 18
Полная поддержка 18
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Полная поддержка 4
Полная поддержка 4
Нет поддержки 4 — 14
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка 14
Полная поддержка 14
Полная поддержка 14
С префиксом Требует вендорный префикс: -webkit-
Safari iOS Полная поддержка 5
Полная поддержка 5
Полная поддержка 1
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android Полная поддержка 1.0
Полная поддержка 1.0
Полная поддержка 1.0
С префиксом Требует вендорный префикс: -webkit-
Spread radiusChrome Полная поддержка 10
Полная поддержка 10
Полная поддержка 1
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12Firefox Полная поддержка 4
Полная поддержка 4
Нет поддержки 3.5 — 13
С префиксом Требует вендорный префикс: -moz-
IE Полная поддержка 9
Полная поддержка 9
Замечания To use box-shadow in Internet Explorer 9 or later, you must set border-collapse to separate.
Opera Полная поддержка 10.5Safari Полная поддержка 5.1
Полная поддержка 5.1
Полная поддержка 5
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка ≤37
Полная поддержка ≤37
Полная поддержка ≤37
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 18
Полная поддержка 18
Полная поддержка 18
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Полная поддержка 4
Полная поддержка 4
Нет поддержки 4 — 14
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка 14
Полная поддержка 14
Полная поддержка 14
С префиксом Требует вендорный префикс: -webkit-
Safari iOS Полная поддержка 5
Полная поддержка 5
Полная поддержка 4.2
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android Полная поддержка 1.0
Полная поддержка 1.0
Полная поддержка 1.0
С префиксом Требует вендорный префикс: -webkit-

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

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

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

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

1. Первый вариант. Рамка с красивой тенью box-shadow без смещений

Не сложный вариант, что выстроен на свойстве box-shadow на странице, где производит равномерное обтекание каркаса, что идет без смещений.

HTML

Код

<div>Вариант №1. Тень по сторонам</div>


CSS

Код

.koshadows_nalinedsup {
  padding: 15px;
  margin: 27px;
  width: 125px;
  height: 125px;
  box-shadow: 0px 0px 20px 4px #144d98;
  border-radius: 5px;
}


Снимок предоставлен выше, что по стилистике 20px будет выставлять равномерно по сторонам ширину.

2. Второй вариант. Создание рамки со смещенной тенью

Этат вариант почти аналогичен первому, тлко будет со смещенной рамкой.

HTML

Код

<div>Второй вариант №2. Смещенная тень.</div>


CSS

Код

.koshadows_nalinedsup_2 {
  padding: 7px;
  margin: 30px;
  width: 134px;
  height: 134px;
  border-radius: 3px;
  box-shadow: 1px 1px 2px 3px #4b6dc5;
}


Здесь видно, как с верхнего левого угла идет смещение тени.

3. Третий вариант №3. Создать свечение каркаса или рамки

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

HTML

Код

<div>Третий вариант №3. Создать свечение.</div>


CSS

Код

.koshadows_nalinedsup_3 {
  padding: 7px;
  margin: 19px;
  width: 185px;
  height: 108px;
  box-shadow: 0px 0px 18px #253688;
  border-radius: 12px;
}


Закругление углов установливаем в самый низ, так как если ставить выше, будет пропадать рамка.

4. Четвертый вариант. Создать внутренне свечение границ

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

HTML

Код

<div>Четвертый вариант №4. Основное свечение внутри.</div>


CSS

Код

.koshadows_nalinedsup_4 {
  padding: 9px;
  margin: 15px;
  width: 195px;
  height: 117px;
  box-shadow: 0px 0px 19px #2c3a7b inset;
  border-radius: 8px;
}


Такой премер можно пременить при различном оформление элементов.

5. Пятый вариант. Здесь совмещаем цветовую палитру теней

Создадим совмешение теней разной гаммы цвета, которая происходит через запятую. Где получится интересный результать, вероятно самый яркий, плюс еще присутствует 3D формат.

HTML

Код

<div>Пятый вариант №5. Разброс цветовых теней.</div>


CSS

Код

.koshadows_nalinedsup_5 {
  padding: 9px;
  margin: 18px;
  width: 178px;
  height: 123px;
  box-shadow: 0px 0px 14px 2px #0dec0d inset, 4px 4px 9px #0e0eef, -4px -4px 9px #ea0909;
  border-radius: 4px;
}


Такой метод не так популярен, но если его создать, то он безусловно превлечет внимание.

Важно: старые браузеры

Браузер IE до 9 версии не будет поддерживать свойство box-shadow, а точнее просто его не видеть.

Префиксы браузеров под свойство box-shadow:

-webkit-box-shadow - Идет для браузеров Chrome только до 10 обновления, также Safari до 5.1 версий.

-moz-box-shadow - здесь воспроизводится для Firefox, где идет до 4.0 версии.

Вашему вниманию представлено самые простые и актуальные методы на постановку теней свойством box-shadow при помощи CSS. Само свойство box-shadow позволить выставить красивые тени заданному элементу html. Где все больше можно заметить в использование веб разработчиками довольно часто, где все создается для того, чтоб красиво выглядело.

Как пример, это выделение рамки или круга, где также можно применить на тексте, или на картинках изображение, где после этого станет более читабельным контентом не считая оформление дизайна. Свойство box-shadow идет гибким, где можно задать тень каркасу или блоку, да вообще любому элементу, где также позволят поставить заданный объём тени.

CSS свойство box-shadow


Пример

Добавить тени к разным элементам

:

# example1 {
box-shadow: 5px 10px;
}

# example2 {
box-shadow: 5px 10px # 888888;
}

Попробуй сам "

Дополнительные примеры "Попробуйте сами" ниже.


Определение и использование

Свойство box-shadow прикрепляет одну или несколько теней к элементу.


Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Числа, за которыми следует -webkit- или -moz- указывают первую версию, которая работала с префиксом.

Объект
тень коробки 10,0
4,0 -webkit-
9,0 4,0
3,5 млн унций-
5,1
3,1 -webkit-
10.5


Синтаксис CSS

box-shadow: нет | h-смещение v-смещение размытие цвет распространения | вставка | начальный | наследование;

Примечание: Чтобы прикрепить более одной тени к элемент, добавьте список теней, разделенных запятыми (см. пример «Попробуйте сами» ниже).

Значения собственности

Значение Описание Сыграй
нет Значение по умолчанию.Тень не отображается Играй »
h-смещение Обязательно. Горизонтальное смещение тени. Положительное значение ставит тень на правой стороне поля, отрицательное значение помещает тень на левая часть коробки Играй »
V-образное смещение Обязательно. Вертикальное смещение тени.Положительное значение ставит тень под рамкой, отрицательное значение помещает тень над рамкой Играй »
размытие Необязательно. Радиус размытия. Чем выше число, тем более размытым тень будет Играй »
распространение Необязательно. Радиус распространения. Положительное значение увеличивает размер тень, отрицательное значение уменьшает размер тени Играй »
цвет Необязательно.Цвет тени. Значение по умолчанию - цвет текста. Посмотрите на CSS Color Values ​​полный список возможных значений цвета.

Примечание: В Safari (на ПК) параметр цвета является обязательным. Если вы не укажете цвет, тень вообще не будет отображаться.

Играй »
вставка Необязательно. Изменяет тень от внешней тени (начальная) до внутренней тени Играй »
начальный Устанавливает для этого свойства значение по умолчанию.Читать про начальный Играй »
унаследовать Наследует это свойство от своего родительского элемента. Читать про наследство

Совет: Подробнее о допустимых значениях (единицы длины CSS)


Другие примеры

Пример

Добавляем эффект размытия к тени:

# example1 {
box-shadow: 10px 10px 8px # 888888;
}

Попробуй сам "

Пример

Определите радиус распространения тени:

# example1 {
box-shadow: 10px 10px 8px 10px # 888888;
}

Попробуй сам "

Пример

Определить несколько теней:

# example1 {
box-shadow: 5px 5px синий, 10px 10px красный, 15px 15px зеленый;
}

Попробуй сам "

Пример

Добавьте ключевое слово вставки:

# example1 {
box-shadow: 5px 10px inset;
}

Попробуй сам "

Пример

Изображения, брошенные на стол.Этот пример демонстрирует, как создавать "поляроидные" изображения и вращать фото:

div.polaroid {
width: 284px;
отступ: 10px 10px 20px 10px;
граница: сплошная 1px #BFBFBF;
цвет фона: белый;
box-shadow: 10px 10px 5px #aaaaaa;
}

Попробуй сам "

Связанные страницы

Учебное пособие по CSS: закругленные углы CSS

Ссылка на HTML DOM: свойство boxShadow


,

Box Shadow - Попутный ветер CSS

Попутный ветер CSS Попутный ветер CSS v1.6,0 v0.7.4 GitHub щебет диссонанс v1.6.0 v0.7.4 Документация Составные части Screencasts Блог Ресурсы сообщество
Начало работы
  • Монтаж
.

Как создать новый тренд длинной тени с помощью CSS?

Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Общественные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним возможности технической карьеры
  5. Талант Нанять технических талантов
  6. реклама Обратитесь к разработчикам по всему миру
,

css - тени коробки css3 только в одном направлении?

Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Общественные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним возможности технической карьеры
  5. Талант Нанять технических талантов
  6. реклама Обратитесь к разработчикам по всему миру

Загрузка…

  1. Авторизоваться зарегистрироваться
  2. текущее сообщество

.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *