Как сделать с помощью CSS срезанные углы блока использование свойств box-shadow и mask


Содержание материала:

Тень блока (свойство box-shadow) | CSS

box-shadow generator

Свойство box-shadow (w3.org) создаёт элементу тень.

inset

Как создать объёмный HTML элемент из нескольких box-shadow

box-shadow может иметь сколько угодно значений. Поэтому им можно заменить картинки форматов JPEG, PNG и даже GIF [инструмент lvivski.com]. Можно, но не нужно. А вот создание объёма может быть полезным для того, чтобы смастерить, например, объёмную красивую кнопку.

цвет одной стороны

цвет другой стороны

Эффект тени блока

Тень вокруг div CSS

Хм, отбрасывает ли предмет тень, когда свет на него падает сверху? Да, если предмет удалён от поверхности. Чем дальше, тем интенсивнее тень. Сама проверяла, светя фонариком.

CSS тень с одной стороны

Снизу (под блоком div)

По бокам (справа и слева)

Многослойный блок с помощью box-shadow

Разноцветная CSS рамка

Еще варианты можно посмотреть у css.yoksel.ru.

CSS внутренняя тень блока (внутри элемента)

Как сделать вдавленный элемент

Как сделать выпуклый элемент с округлыми краями

box-shadow inset и картинка img

box-shadow и HTML тег input

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

Или подсветка внутри input (получилась красивая форма входа CSS):

box-shadow и transition или animation

box-shadow можно плавно изменять, но нужно учитывать особенность этого изменения:

75 комментариев:

К boxShadow подставляйте необходимые цифры.

Один селектор, я посчитала лишним писать каждый раз HTML. К тому же тут не нужен даже весь код CSS, нужно только значение box-shadow. У «box-shadow inset и картинка img» и ниже есть HTML после CSS. Анонимный Отлично СПАСИБИЩЕ! Анонимный Спасибо за статью. А что нужно добавит, чтоб это работало и в сафари 5.1. ? у меня не получается! NMitra Добавьте -webkit-

-webkit-box-shadow: 0 0 8px; Анонимный Нет, не помогает. Я взял на вооружения boxShadow18. Сафари не реагирует. NMitra Он вообще box-shadow не понимает или именно мой код? У браузеров может быть разная поддержка на разных устройствах. На компьютере будет работать, а на планшетах и телефонах — нет. Эффект box-shadow можно заменить с помощью фоновой картинки. Анонимный #leftmenu <
width: 100%;
max-width: 180px;
margin: 1em auto;
padding: 1em;
border-radius: 40px;
background: rgb(100,100,100) radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35));/*(Скорее всего тут я допускаю ошибку*/
box-shadow:
inset rgba(0,0,0,.6) 0 -3px 8px,
inset rgba(252,255,255,.7) 0 3px 8px,
rgba(0,0,0,.8) 0 3px 8px -3px;
-webkit-box-shadow: inset 0px 0px -3px 8px rgba(0, 0, 0, 0.6),
-webkit-box-shadow: inset 0px 0px 3px 8px rgba(252, 255, 255, 0.7),
-webkit-box-shadow: 0px 3px 8px -3px rgba(0, 0, 0, 0.8);
>
NMitra Вместо одной

background: rgb(100,100,100) radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35));

background-color: #646464;
background-image: -webkit-radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35));
background-image: radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35)); Анонимный #leftmenu
День добрый! Я Вас не оставляю в покое. Спасибо что откликнулись. Просто действительно понравилось ваша статья и примеры, и решил некоторые свой блоки оформить подобным образом. Что касается моей проблемы, такова эффекта я и вчера добился, но тогда пропадает эффект выпуклости, а это для меня как-то важно. А именно почему можете посмотреть, при желании, на сайте www.dlcompany.org спасибо за отзывчивость. Анонимный Скажите пожалуйста, как для движка mozilla применить одновременно и внутреннюю и внешнюю тень, через запятую работает только одна тень (которая первая, вторая игнорируется). Вот правда — на движке web-kit работает всё 100% — и в chrome и в maxthon — и вроде даже в последней opera, а вот в seamonkey, mozilla, pale moon — нет, в internet explorer — тоже неработает (я имел ввиду запись типа:
box-shadow:0px 0px 30px 4px rgba(236, 255, 66, 1), inset 0px 0px 13px 3px rgba(0, 0, 0, 0.98);
-moz-box-shadow: 0px 0px 30px 4px rgba(236, 255, 66, 1), inset 0px 0px 13px 3px rgba(0, 0, 0, 0.98);
-webkit-box-shadow:0px 0px 30px 4px rgba(236, 255, 66, 1), inset 0px 0px 13px 3px rgba(0, 0, 0, 0.98);) NMitra Вы хоть имя подставляйте.

Комментарий 46:
сделать так, чтобы на всех браузерах на всех устройствах при использовании всех операционных систем картинка 3D выглядела одинаково крайне не просто. Или просто, коли использовать нарисованный background: url(). Разработчик может лишь следовать общим стандартам w3.org и сделать так, чтобы при отсутствии поддержки box-shadow или другого свойства макет сайта не разъехался и были доступны основные функции регистрации, заказа, формы связи и т.п.

Комментарий 47:
у меня всё работает на windows, префиксы пишутся в другом порядке

Срезать угол у блока

14.06.2014, 22:39

Срезать угол у блока на неоднородном слое CSS
Всем привет. Необходимо срезать угол у блока, под которым находится неоднородный фон. Стандартный.

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

Блок на угол родительского блока
Как поставить div на угол родительского div в данном случае?

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

Срезать блок по бокам
Всем привет. Подскажите как можно срезать блок(зеленый) по бокам. Вырезать боковины, обернуть в.

Примеры. CSS Shadow/CSS Тень

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

Перспектива.

HTML

CSS

Завернутые углы

HTML

CSS

Изгиб по вертикали

HTML

CSS

Склейка

HTML

CSS

Подняты уголки

HTML

CSS

Поднятый один уголок

HTML

CSS

Поднятый другой уголок

HTML

CSS

Горизонтальный изгиб

HTML

CSS

Слоистый

HTML

CSS

Сервисы для генерации CSS тени.

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

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

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

Здравствуйте, дорогие читатели блога. Сегодня мы с Вами будем делать красивую тень для блоков при помощи CSS. Я думаю, что это очень сильно пригодится Вам, тем более если Вы делаете шаблоны. А блоки с тенью смотрятся очень привлекательно и современно.

Посмотреть пример

Тень блока с CSS

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

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

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

В основном все современные браузеры поддерживают эффекты тени:

  • Internet Explorer 9.0 и выше;
  • Firefox 3.5 и выше;
  • Chrome 1 и выше;
  • Safari 3 и выше;
  • Opera 10.5 и выше.

Ещё хотелось бы упомянуть один не маловажный момент: для некоторых браузеров мы будем использовать некие префиксы. Для Firefox используется -moz-, для Chrome и Safari нужно использовать префикс -webkit.

Ну а сейчас переходим к самой интересной части. Давайте рассмотрим все эффекты тени по отдельности, эффектов будет 8.

Эффект тени 1

В данном примере тень от блока находится снизу.

Эффект тени 2

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

Делаем тень блока в CSS

Добрый день, дорогие посетители!

В этой статье я хотела бы рассмотреть, как сделать с помощью CSS тень блока.

Когда мы разрабатываем дизайн своего сайта, нам хочется придать ему оригинальный внешний вид. Используя специальное свойство, мы можем задать тень блока CSS практически любому элементу на странице, и это позволят нам добиться определённой объёмности.

Навигация по статье:

Как сделать в CSS тень блока?

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

Вот самый простой способ использования данного свойства:

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

В этом случае мы получим вот такую тень:

Для того, что бы указать смещение тени влево и вверх мы должны задать сдвиг со знаком минус (-).

Расширенное задание параметров box-shadow

В этом свойстве можно так же указать размытие и цвет тени блока. В этом случае наше свойство будет выглядеть вот так:

Значение 5px задает размытие тени, а #cccссс – цвет тени в шестнадцатеричной системе.

Для задания смешения и размытия мы можем указывать величину в пикселях или относительных единицах измерения (em).

Цвет так же можно задавать различными способами. Мы можем задать цвет тени шестнадцатеричным значением, использовать формат RGB или же можно задать полупрозрачную тень с помощью формата RGBA. Например, вот так:

Здесь первый три цифры (120,120,120) – это значения цветов красный, зелёный, синий.
Последнее число (0.5) – это уровень прозрачности, который может иметь значения от 0 до 1

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

И тогда мы получим такой результат:

Как делается внутренняя тень CSS?

Для задания внутренней тени нужно в свойстве box-shadow, перед заданием смешения указать параметр inset.

Запись свойства в этом случае будет выглядеть так:

И получим такой результат:

Использование нескольких теней одновременно

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

Вот как это выглядит:

Еще один момент! Так как свойство box-shadow относится к разряду свойств CSS3, то оно может не поддерживаться более старыми версиями браузеров, поэтому если вам нужно сделать коссбраузерную верстку с поддержкой теней, то свойство box-shadow нужно задавать для каждого браузера со специальными кроссбраузерными префиксами:

-webkit – для вебкит браузеров (Яндекс-браузер, GoogleChrome, новая версия Opera и т.д.)
-moz – для Mozilla Firefox
-о – для старых версий Opera
-ms — для Internet Explorer 8

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

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

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

Как срезать углы на css

Как срезать углы на css

Проблема

Срезание углов — это не только быстрый способ достичь цели, но и популярный вариант стилизации как в печатном дизайне, так и в веб-дизайне. Чаще всего он подразумевает обрезание одного или нескольких уголков контейнера под углом 45°. В последнее время, в связи с тем, что скевоморфизм начал сдавать позиции плоскому дизайну, этот эффект пользуется особенной популярностью. Когда углы срезаются только с одной стороны и каждый из них занимает 50% высоты элемента, это создает фигуру в форме стрелки, что также часто используется в оформлении кнопок и элементов навигации типа «хлебные крошки».

Однако в CSS все еще недостаточно инструментов для создания этого эффекта с помощью простых и понятных однострочных решений. Из-за этого многие разработчики склоняются к использованию фоновых изображений: либо закрывают срезанные углы треугольниками (на одноцветном фоне), либо создают весь фон с помощью одного или нескольких изображений, где углы уже срезаны. Очевидно, что такие методы совершенно негибкие, они сложны в сопровождении и увеличивают время ожидания вследствие дополнительных HTTP-запросов и общего размера файлов веб-сайта.

Пример веб-сайта, где срезанный угол (нижний левый у полупрозрачного поля Find & Book) отлично вписывается в дизайн

Решение

Одно возможное решение предлагают нам всемогущие градиенты CSS. Предположим, что нам требуется только один срезанный угол, скажем, нижний правый. Трюк в том, чтобы воспользоваться способностью градиентов принимать направление угла (например, 45deg ) и позиции границ перехода цвета в абсолютных значениях, которые не меняются при изменении габаритных размеров элемента, которому принадлежит фон. Из вышесказанного следует, что нам будет достаточно одного линейного градиента.

Мы добавим прозрачную границу перехода цвета для создания срезанного угла и еще одну границу перехода цвета в той же позиции, но уже с цветом, соответствующим фону. Код CSS будет следующим (для угла размером 15px ):

background: #58a;
background:linear-gradient(-45deg, transparent 15px, #58a 0);

Просто, не так ли? Результат вы видите на рисунке.

Технически первое объявление нам даже не требуется. Мы добавили его только в качестве обходного пути: если градиенты CSS не поддерживаются, то второе объявление будет проигнорировано, так что мы как минимум получим фон сплошного цвета. Теперь предположим, что нам требуются два срезанных угла, скажем, оба нижних. Это невозможно реализовать с помощью одного градиента, так что нам понадобятся два. Первой мыслью может быть нечто подобное:

background: #58a;
background: linear-gradient(-45deg, transparent 15px, #58a 0), linear-gradient(45deg, transparent 15px, #655 0);

Однако, это не работает. По умолчанию оба градиента занимают всю площадь элемента, так что они заслоняют друг друга. Мы должны уменьшить их, ограничив каждый из них половиной элемента с помощью background-size :
background: #58a;
background: linear-gradient(-45deg, transparent 15px, #58a 0) right, linear-gradient(45deg, transparent 15px, #655 0) left;
background-size: 50% 100%;

Результат вы можете видеть на рисунке.

Несмотря на то что мы применили background-size , градиенты все равно перекрывают друг друга. Причина в том, что мы забыли выключить background-repeat,поэтому каждый из фонов повторяется дважды. Следовательно, один из фонов все так же заслоняет другой, но на этот раз за счет повторения. Новая версия кода выглядит так:
background: #58a;
background: linear-gradient(-45deg, transparent 15px, #58a 0) right, linear-gradient(45deg, transparent 15px, #655 0) left;
background-size: 50% 100%;
background-repeat: no-repeat;

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

background: #58a;
background: linear-gradient(135deg, transparent 15px, #58a 0) top left,

linear-gradient(-135deg, transparent 15px, #655 0) top right,

linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,

linear-gradient(45deg, transparent 15px, #655 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

СОВЕТ
Мы использовали разные цвета (#58a и #655 ) для упрощения отладки. На практике оба градиента будут одного и того же цвета.
Но проблема предыдущего кода в том, что он трудно поддается сопровождению. Он требует внести пять правок для изменения фонового цвета и четыре для изменения величины угла. Примесь, созданная с помощью препроцессора, могла бы сократить количество повторений. Вот как этот код будет выглядеть в SCSS:
SCSS
@mixin beveled-corners($bg,
$tl:0, $tr:$tl, $br:$tl, $bl:$tr) <
background: $bg;
background:
linear-gradient(135deg, transparent $tl, $bg 0)
top left,
linear-gradient(225deg, transparent $tr, $bg 0)
top right,
linear-gradient(-45deg, transparent $br, $bg 0)
bottom right,
linear-gradient(45deg, transparent $bl, $bg 0)
bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
>

Затем, когда необходимо, его можно будет вызывать, как показано далее, с 2–5 аргументами:
SCSS
@include beveled-corners(#58a, 15px, 5px);
В этом примере мы получим элемент, у которого верхний левый и нижний правый углы срезаны на 15px , а верхний правый и нижний левый — на 5px , аналогично тому, как работает border-radius , когда мы указываем меньше четырех значений. Это возможно благодаря тому, что мы в нашей примеси SCSS также позаботились о значениях по умолчанию для аргументов, — и да, эти значения по умолчанию могут ссылаться и на другие аргументы тоже.
ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/bevel-corners-gradients

Искривленные срезанные углы

Превосходный пример использования искривленных срезанных углов на веб-сайте http://g2geogeske.com; дизайнер сделал их центральным элементом оформления: они присутствуют в навигации, в содержимом и даже в нижнем колонтитуле.
Вариация метода с градиентами позволяет создавать искривленные срезанные углы — эффект, который многие называют «внутренним радиусом рамки», так как он выглядит словно инвертированная версия скругленных углов. Единственное отличие заключается в использовании радиальных градиентов вместо линейных:
background: #58a;
background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left,

radial-gradient(circle at top right, transparent 15px, #58a 0) top right,

radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,

radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

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

Решение со строковым SVG и border-image

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

Аналогично, для изменения фонового цвета также необходимы четыре правки, а если учитывать резервное решение, то все пять; анимировать изменение величины срезанного угла невероятно сложно, а в некоторых браузерах вообще невозможно. К счастью, в зависимости от желаемого результата мы можем воспользоваться еще парой методов. Один из них подразумевает объединение border-image со строковым SVG-кодом, в котором и генерируются углы.

Зная, как работает border-image (если вам необходимо освежить эти знания в памяти, подсказку вы найдете здесь), можете ли вы уже представить, как должен выглядеть требуемый SVG-код?

Так как габаритные размеры для нас неважны ( border-image позаботится о масштабировании, а SVG-рисунки идеально масштабируются вне зависимости от габаритов — будь благословенна векторная графика!), все размеры можно приравнять к единице, для того чтобы оперировать более удобными и короткими значениями. Величина срезанного угла будет равна единице, и прямые стороны также будут равны единице. Результат (увеличенный для удобства восприятия). Код, необходимый для этого, показан далее:
border: 15px solid transparent;
border-image: 1 url(‘data:image/svg+xml,\
\

Обратите внимание, что размер шага нарезки равен 1 . Это не означает 1 пиксел; фактический размер определяется системой координат SVG-файла (потому-то у нас и отсутствуют единицы измерения). Если бы мы использовали проценты, то нам пришлось бы аппроксимировать 1/3 изображения дробным значением, вроде 33.34% . Прибегать к приблизительным значениям всегда рискованно, так как в разных браузерах значения могут округляться с разной степенью точности. А придерживаясь единиц изменения системы координат SVG-файла, мы избавляем себя от головной боли, сопутствующей всем этим округлениям.

Как вы видите, срезанные углы присутствуют, но фона нет. Эту проблему можно решить двумя способами: либо определить фон, либо добавить ключевое слово fill к объявлению border-image , чтобы центральный элемент нарезки не отбрасывался. В нашем примере мы лучше определим отдельный фон, так как это определение будет также служить обходным путем для браузеров, не поддерживающих данное решение.

Помимо этого, вы, вероятно, заметили, что теперь срезанные углы меньше, чем при использовании предыдущей техники, и это может поставить в тупик. Мы ведь задали ширину рамки, равную 15px! Причина в том, что в решении с градиентом эти 15 пикселов отсчитывались вдоль градиентной линии, которая перпендикулярна направлению градиента. Однако ширина рамки измеряется не по диагонали, а по горизонтали/вертикали.

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

Короче говоря, для того, чтобы достичь того же визуального результата, нам необходима ширина рамки, в 2 раз превышающая размер, который мы бы использовали в методе с градиентом. В данном случае это будет пиксела, что разумнее всего аппроксимировать до 20px , если только перед нами не стоит задача как можно точнее приблизить размер диагонали к заветным 15px :
border: 20px solid transparent;
border-image: 1 url(‘data:image/svg+xml,\
\

0,2″/>\
’);
background: #58a;
Однако, как можно видеть, результат не совсем тот, которого мы ожидали.

Куда делись наши кропотливо срезанные углы? Не бойся, юный падаван, углы все так же на месте. Вы сразу же поймете, что произошло, если установите другой фоновый цвет, например #655.
Как демонстрирует рисунок ниже, причина, почему наши углы исчезли, кроется в фоне: тот фон, который мы выше определили, попросту заслоняет их. Все, что нам нужно сделать для устранения этого неудобства, — с помощью background-clip запретить фону подлезать под область рамки:
border: 20px solid transparent;
border-image: 1 url(‘data:image/svg+xml,\
\

0,2″/>\
’);
background: #58a;
background-clip: padding-box;

Теперь проблема решена, и наше поле выглядит точно так же, как раньше. К тому же на этот раз мы можем с легкостью изменить размер углов, внеся всего лишь одну правку: просто скорректируем ширину рамки. Мы можем даже анимировать этот эффект, потому что border-width поддерживает анимацию!

А для смены фона требуется теперь две правки вместо пяти. Кроме того, так как наш фон не зависит от эффекта, накладываемого на углы, мы можем определить для него градиент или любой другой узор, при условии, что по краям цвет все так же будет равен #58a .

Например, мы используем радиальный градиент от цвета hsla(0,0%,100%,.2) до transparent. Осталось решить лишь одну небольшую проблему. Если border-image не поддерживается, то резервное решение не ограничится отсутствием срезанных углов. Из-за того что фон обрезан, пространство между краем поля и его содержимым уменьшится. Для того чтобы исправить это, необходимо для рамки определить тот же цвет, который мы используем для фона:
border: 20px solid #58a;
border-image: 1 url(‘data:image/svg+xml,\
\

\
’);
background: #58a;
background-clip: padding-box;

В браузерах, где наше определение border-image поддерживается, этот цвет будет проигнорирован, но там, где border-image не работает, дополнительный цвет рамки обеспечит более изящное резервное решение. Единственный его недостаток — увеличение количества правок, необходимых для изменения фонового цвета, до трех.
ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/bevel-corners

Решение с обтравочным контуром

Хотя решение с border-image очень компактное и хорошо соответствует принципам DRY, оно накладывает определенные ограничения. Например, наш фон все так же должен быть либо целиком, либо хотя бы вдоль кромок заполнен сплошным цветом.

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

Помните свойство clip-path из секрета «Как сделать ромб»? Обтравочные контуры CSS обладают поразительным свойством: они позволяют смешивать процентные значения (с помощью которых мы указываем габаритные размеры элемента) с абсолютными, обеспечивая невероятную гибкость. Например, код обтравочного контура, обрезающего элемент до формы прямоугольника со скошенными углами размером 20px (если измерять по горизонтали), выглядит так:
background: #58a;
clip-path: polygon(
20px 0, calc(100% — 20px) 0, 100% 20px,
100% calc(100% — 20px), calc(100% — 20px) 100%,
20px 100%, 0 calc(100% — 20px), 0 20px);
Несмотря на краткость, в этом фрагменте кода принципы DRY не соблюдены, и это становится одной из самых больших проблем, если вы не используете препроцессор. В действительности этот код — лучшая иллюстрация принципа WET из всех решений на чистом CSS, представленных в этой книге, ведь для изменения размера угла здесь требуется внести целых восемь (!) правок.

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

Все, что для этого нужно, — использовать другой обтравочный контур. Помимо многословности и ограниченной поддержки браузерами, недостатком этого решения является то, что, если мы не позаботимся о достаточно широкой забивке, текст также будет обрезан, так как при обрезке элемента его составляющие никак не учитываются. В противоположность этому метод с градиентом позволяет тексту просто выходить за границы обрезанных углов (ведь они всего лишь часть фона), а метод с border-image работает так же, как обычные рамки, — переносит текст на новую строку.

border-radius: 15px;
corner-shape: bevel;

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

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

Определение и применение

CSS свойство box-shadow добавляет одну или несколько теней к элементу. Для указания нескольких теней необходимо добавить дополнительное значение тени /-ей, разделенных запятыми.

Используя CSS свойство border-radius , вы можете получить тень с закругленными углами. Множественные тени наносятся по z-оси спереди назад (с первой заданной тенью сверху), этот принцип используется и у свойства text-shadow .

  • При работе с CSS свойством box-shadow допускается использование в объявлении от двух до четырех числовых значений для одной тени. К обязательным значениям этого свойства относятся только расположение горизонтальной и вертикальной тени. В них допускается использовать отрицательные значения.
  • К необязательным значениям относятся значение цвета тени (по умолчанию черный), радиус размытия (по умолчанию 0, отрицательные значения не допускаются) и размер тени, или радиус растяжения (значение по умолчанию 0).
  • Обращаю Ваше внимание, что если Вы не указываете в своём объявлении необязательные значения, то они установятся в значения по умолчанию (h-shadow v-shadow black 0 0).

CSS свойство box-shadow и его параметры

Box-shadow добавляет элементу одну или несколько теней

Смещение тени

У свойства box-shadow есть два обязательных параметра:

  1. смещение по оси X,
  2. смещение по оси Y.

Принципиально важен порядок записи. Первое значение — всегда смещение по оси X, второе — по оси Y.

Если по одной из осей смещение не нужно, ставим ноль:

Отрицательное значение для осей box-shadow

Тень сместится в противоположном направлении:

Радиус размытия тени

Третий параметр свойства box-shadow. Если его не указать, принимается значение 0, а размер тени равен размеру элемента, к которому применяется.

При значении больше нуля, края теряют чёткость, тень становится больше и визуально легче. Размытие применяется со всех сторон:

Отрицательное значение считается ошибкой и тень не отобразится вовсе.

Радиус растяжения тени

Четвёртый параметр свойства box-shadow. Меняет величину тени относительно элемента. Растягивает во все стороны:

В данном случае тень больше элемента на 16 пикселей по ширине и высоте: 8px слева + 8px справа и 8px сверху + 8px снизу.

Отрицательное значение растяжения тени в CSS

Тень не растягивается, а сужается со всех сторон на указанное значение:

Цвет тени

По умолчанию цвет тени дублирует цвет шрифта: как на примерах выше.

Цвет тени указывается в любом доступном CSS формате:

Зададим элементу синюю тень:

Внутренняя тень

Параметр inset отображает тень внутри блока.

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

Второй вариант удобней для восприятия при чтении кода.

Несколько теней

Несколько теней задаются через запятую. Порядок отображения сверху вниз:

Если поменять местами, голубую тень не будет видно:

Одновременно заданы внутренняя и внешняя тень:

Тень с закруглёнными углами

Если элементу задать свойство border-radius, тень будет с закругленными углами.

Задавая растяжение тени, мы увеличиваем и её скругление. Например, border-radius 8px, а растяжение тени — 4.

8+4=12px — это радиус скругления тени.

Этот же принцип распространяется и на сжатие тени, когда значение отрицательное.

8+(-4)=4px — получим скругление тени в два раза меньше.

Если сжатие тени больше, чем border-radius, получим тень с прямыми углами. Например, сжатие 16px.

8+(-16)=(-8), но у скругления не может быть отрицательного значения и применится ноль.

CSS свойство box-shadow поддерживается всеми популярными браузерами, кроме Opera Mini.

Необычные тени с CSS3 box-shadow

Различного рода тени (особенно необычной формы), как правило делаются с помощью функций Photoshop Blending. Но сейчас, когда у нас есть CSS3, можно делать и кое-что поинтереснее, чем просто тени, не прибегая к помощи инструментариев от Adobe.

Как насчет такой тени, как на рисунке? Как думаешь, можно-ли ее сделать на CSS без картинок?

Свойство box-shadow

Свойство box-shadow дает тебе возможность добавлять к блочным элементам множественные тени (внутренние и внешние). Для этого тебе нужно указать значения цвета, размера, размытости и смещения ( color, size, blur и offset).

Это какие-то зашифрованные космические технологии?

Нет, тут все просто. Вот быстрый пример:

Этот CSS генерирует такие тени:

  • Положительное значение горизонтального смещения смещает тень вправо от блока; при отрицательном значении тень смещается влево.
  • Второе значение — вертикальное смещение. Положительное значение смещает тень вниз, а отрицательное — вверх.
  • Для радиуса размытия ты не можешь использовать отрицательные значения. Чем больше значение — тем более размыт край тени.
  • При положительном значении расстояния распространения тень расширяется во всех направлениях, в соответствии с указанным радиусом. При отрицательном значении тень сокращается.
  • Цвет — это, собственно, цвет самой тени.
  • inset (на примере отсутствует) при наличии изменяет тень с внешней на внутреннюю.

Хватит теории! Давай примеры!

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

Эффект глубины для body

Красивая неровная тень

Советы

Попробуй приукрасить тень при помощи цвета RGBa. Свойство box-shadow может использовать CSS3 RGBa цвет для создания тени с разными уровнями прозрачности. Если браузеры, в которых должен работать проект, поддерживают свойство box-shadow, то они точно должны поддерживать и цветовой режим RGBa.

Используй в одном правиле сразу несколько теней:

А что с IE7-8?

Для поддержки этих браузеров можно использовать javascript плагин PIE или подбирать соответствующие фильтры.

Вывод

Эти методы можно использовать уже сегодня. Почему? Да просто потому, что ты можешь это делать! И, главное, даже в старых браузерах box-shadow уж никак не навредит.

Как сделать с помощью CSS срезанные углы блока: использование свойств box-shadow и mask

Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».

Бесплатные уроки CSS для начинающих

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

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Топ-пост этого месяца:  Лайфхак по SEO или 30 советов как подружиться с Яндексом
Добавить комментарий