Css тень внизу блока: shadow — тень блока. Примеры, эффекты (:hover), анимация тени.

Содержание

CSS: тени

Отбрасывание теней

С момента написания этой страницы во многие реализации CSS
было добавлено свойство ‘box-shadow’ из CSS уровня 3, что делает
описанный ниже метод необязательным. Смотрите “Закругленные углы и блоки с тенью” в качестве примера. Эта
страница также показывает более мощный, но в то же время более
сложный, способ создания теней при помощи CSS уровня 2.

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

<div class=back>
  <div class=section>
    <h3>Пусть роза пахнет, - разве ощущает</h3>
    <address>Генрих Гейне (1797-1856), пер. Михаил Фроман</address>

    <p>Пусть роза пахнет, - разве ощущает<br>
    . ..
  </div>
</div>

Вы можете использовать наружный DIV в качестве тени для
внутреннего. Результат должен выглядеть как эта отдельная страница. Сначала, задайте
фоновый цвет для BODY (в нашем примере — светло-зеленый), наружный
DIV сделайте немного темнее фона (зелено-серый) и внутренний DIV
отличным от фона (например, желто-белый):

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

Затем, используя свойства margin и padding, вы смещаете
внутренний DIV немного влево и вверх от наружного DIV:

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

Вам также нужно переместить наружный DIV немного вправо. И если
у вас несколько секций, вы возможно, захотите оставить между ними
немного места:

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

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

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

Разумеется, вы можете изменять размер теней на ваш вкус.

Текстовые тени

В CSS действительно есть свойство для добавления тени
к тексту. У него четыре параметра: цвет тени, горизонтальный отступ
(позитивный — вправо), вертикальный отступ (позитивный — вниз) и
размытие (0 — резкая тень). Например:

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

У этого текста есть тень?

Тень для текста, картинки, блока

Здравствуйте уважаемые начинающие веб-мастера

Продолжаем знакомство с Оригинальными эффектами CSS

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

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

Для создания тени в CSS существуют два свойства:

1. box-shadow — создание тени для блоков;
2. text-shadow — создание тени для текстa

Записывается так:

box-shadow: 4px 4px;

text-shadow: 4px 4px;

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

Раньше у этих свойств были проблемы с кросбраузерностью, и при их написании применялись префиксы. Однако в последних версиях браузеров Chrome 31.0.1650.63, Yandеx 13.1, Opera 12.15, Internet Explorer 11, Firefox 23.0, Safari 5.1.4, эти свойства работают без префиксов.

На всякий случай, если кто то пользуется браузерами более ранних версий, привожу список префиксов.

-moz-box-shadow — значение для Mozilla Firefox 3.6 + ;

-webkit-box-shadow — Safari, Chrome, iOS, Android 2.1-3.0 ;

-o-box-shadow — значение для Opera 11.10 + ;

-ms-box-shadow — значение для IE10 + ;

Для text-shadow — аналогично.

Внешний вид тени (направление, цвет, размер, размывание), задается значениями. Рассмотрим их подробно, так как именно ими нам придётся оперировать, чтобы реализовать задуманный вид.

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

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Как сделать тень CSS</title> <style> .blok{ background: #fcdd76; width: 300px; height: 100px; box-shadow: 4px 4px } </style> </head> <body> <div></div> </body> </html>

Для текста тень задаётся аналогично.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Как сделать тень CSS</title> <style type="text/css"> .blok{ background: #fcdd76; width: 300px; height: 100px; box-shadow: 4px 4px; } p{ padding: 40px 0 0 80px; font-size: 24px; text-shadow: 10px 10px; font-weight: bold; } </style> </head> <body> <div> <p>Блок с тенью</p> </div> </body> </html>

Следующим шагом зададим цвет для тени. Для этого нужно просто ввести в значение код цвета, причем можно использовать любой формат, от шестеричного до rgba (с прозрачностью)

box-shadow: -4px -4px #0ea8f4; text-shadow: -10px -10px #94a7af;

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

box-shadow: 4px 4px 5px #0ea8f4; text-shadow: 10px 10px 2px #94a7af;

По умолчанию, все браузеры отображают тень того же размера, что и объект её отбрасывающий. Можно её увеличить. Для этого в значения вводиться четвёртый параметр.

И если при этом обнулить сдвиг, и размывание, то получается довольно оригинальный эффект рамки вокруг блока, что очень хорошо смотрится в сочетании с border-radius

box-shadow: 0px 0px 0px 5px #0ea8f4; border-radius: 10px;

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

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

text-shadow: 1px 1px #94a7af, 2px 2px #94a7af, 3px 3px #94a7af, 4px 4px #94a7af, 5px 5px #94a7af, 6px 6px #94a7af, 7px 7px #94a7af;

Можно сделать обводку текста тенью. В посте Анимация для шапки сайта у меня есть пример и набор теней необходимый для этого.

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

Можно изменить последовательность теней, от большей к меньшей, и в самой большой применить третье значение (размывание). Короче — простор для творчества.

Это же свойство — множество теней, отлично применяется к box-shadow, принимающего четвёртое значение (растяжение тени).

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

box-shadow: 0px 0px 0px 2px #f90914, 0px 0px 0px 7px #a7f9c9, 0px 0px 0px 9px #f90914, 0px 0px 5px 10px #ff4d00; border-radius:10px;

Тут тоже простор для творчества. Кстати, все приведённые выше стили, можно подключать встроенным способом, то есть прописывать их прямо в html тег, с помощью атрибута style.

Хотя делать это нужно очень ограничено, только в нестандартных ситуациях. А лучше всего все стили выносить в отдельный файл.

Дальше ещё интереснее, так как обратимся к таким средствам CSS3, как псевдоклассы.

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

Сначала применим псевдокласс :hover. Он изменяет цвет элемента, при наведении на него курсора.

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Как сделать тень CSS</title> <style> .blok{ background: #fcdd76; width: 300px; height: 100px; box-shadow: 0px 0px 0px 5px #0ea8f4; border-radius: 10px; } .blok:hover{ background: #fcdd76; width: 300px; height: 100px; box-shadow: 0px 0px 0px 5px #f26522; border-radius: 10px; } p{ padding: 40px 0 0 80px; font-size: 24px; text-shadow: 1px 1px #94a7af, 2px 2px #94a7af, 3px 3px #94a7af, 4px 4px #94a7af, 5px 5px #94a7af, 6px 6px #94a7af, 7px 7px #94a7af; font-weight: bold; } </style> </head> <body> <div></div> </body> </html>

До наведения курсора:

При наведении курсора:

Далее обратимся к псевдоэлементам :before и :after, а так же свойству transform

При помощи псевдоэлементов :before и :after, можно добавить дополнительные стили до и после элемента.

Свойство transform, согласно своему названию, может вращать, сдвигать, наклонять и масштабировать элемент, а так же комбинировать эти действия.

Подробную информацию об этих средствах CSS, можно найти в интернете, у меня же практическое руководство, поэтому сразу перейдём к написанию кода.

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Как сделать тень CSS</title> <style> .blok { position: relative; width: 30em; /*1em = font-size, в нашем случае - 20px*/ height: 10em; padding: 0.5em; /*Сдвиг левой тени*/ background: #ffe5b4; border-radius: 0.5em; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7), 0 1px 4px rgba(0, 0, 0, 0.7); /*Тень дублируется, для более чёткого отображения границы*/

} .blok:before, .blok:after { content:""; /*обязательная строка, для правильного отображения псевдоэлементов*/ position: absolute; z-index: -5; bottom: 1em; width: 90%; /*Ширина тени относительно блока*/ height: 20%; box-shadow: 0 15px 7px rgba(0, 0, 0, 0.7); -webkit-transform: rotate(-3deg); /*поворот угла*/ -moz-transform: rotate(-3deg); -ms-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg); } .blok:after { right: 0.5em; /*Отступ тени от правого края*/ left: auto; -webkit-transform: rotate(3deg); /*обратный поворот угла*/ -moz-transform: rotate(3deg); -ms-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg); } p { font-size: 20px; font-weight: bold; padding-left: 9em; text-shadow: -0.4em -0.4em #94a7af; margin: auto; } </style> </head> <body> <div> <p>Блок с тенью</p> </div> </body> </html>

Результат:

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

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Как сделать тень CSS</title> <style> .blok { position: relative; width: 30em; height: 9em; padding: 1em; margin: 2em 0.5em 4em; background: #ffe5b4; box-shadow: 0 1px 5px #464451;

}

.blok:before, .blok:after { content: ""; position: absolute; z-index: -2;

}

.blok:before { top: 0px; bottom: 0px; left: 10px; right: 10px; box-shadow: 0px 1px 15px #464451; border-radius: 120px / 15px; }

p { font-size: 20px; font-weight: bold; padding-left: 10em; text-shadow: -0.4em -0.4em #94a7af; margin: auto; }

</style> </head> <body> <div> <p>Блок с тенью</p> </div> </body> </html>

Результат:

Пока всё. Желаю творческих успехов.

Перемена

Две бывшие одесситки на Brighton Beach
— Фирочка! Вы слышали весь этот ужас?
— А какой именно?
— Ну, если выбрали Обаму, так значить придут негры и нас всех будут насиловать!
После долгой паузы…………
— Сима, во-первых, попритушите Ваши радостные глазки! Во-вторых, я
смотрю на вас и удивляюсь. Вы что, всему этому верите? Это же все их
предвыборные обещания!

Градиент CSS. Плавный переход от одного цвета к другому < < < В раздел > > > Прозрачные изображения и прозрачный текст CSS

Как создавалась функция shadow spread в Figma

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

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

Существует много возможностей для формирования надежной веб-платформы проектирования для команд, вместе создающих продукты. Мы предоставляем систему, которая помогает вам разрабатывать и понимать ценность сложных дизайн-систем, обеспечивать совместную работу в реальном времени для дизайнеров, разбросанных по всему миру и даже совершенствовать старые инструменты, такие как перо. Вы можете спросить: тогда почему до сих пор нет поддержки изменения размера тени, базовой функции CSS box-shadow? Хотя прошло уже 958 дней с тех пор, как пользователь в Spectrum впервые попросил добавить ее. Неужели нам так сложно сделать тень, просто … больше?

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

Как видите, форма теней выглядят знакомо. Чтобы создать подобную тень, мы копируем геометрию объекта, заливаем его одним цветом, делаем его размытым и визуализируем под самим узлом.

Может показаться, что рендеринг тени со значением spread может быть таким же простым, как масштабирование геометрии тени. Это так для прямоугольника, но не для более сложного объекта – скажем, логотипа Figma, в котором полно дыр:

Если мы будем руководствоваться определением shadow spread – расширение тени на определенное количество пикселей наружу (или внутрь) от фигуры во всех направлениях, то получим примерно такой результат:

Но никто не сказал мне этого до того, как в прекрасный майский день во время Maker Week я решил заняться созданием этой функции. Осознав ошибочность этого подхода, я решил разобраться. Это не ракетостроение, подумал я. Мы можем выяснить, как визуализировать тени 2D-фигур.

Это правда, что есть несколько интересных алгоритмических способов решения этой проблемы, но ни один из них не вписывался в нашу существующую систему рендеринга. Также можно использовать неалгоритмический способ – используя штрихи для эмуляции теней – но я быстро понял, что это тоже не вариант. Мы обрабатываем определенные углы вершин в штрихах иначе, чем нужно для shadow spread, и в нашем прототипе рендерера нет кода генерации штрихов. Каким-то образом нам нужно было найти способ заставить эту функцию работать без добавления тонны сложного кода в две разные кодовые базы рендеринга.

Фреймворк для определения приоритетов

Если есть одна вещь, которая мне нравится больше, чем отладка ошибок рендеринга, это чтение спецификаций об интернет-технологиях. (Спросите меня обо всех странных вещах, которые я узнал о GIF89 в прошлом году, добавляя в Figma поддержку GIF). Я опросил коллег каких предположений касательно размера тени мы придерживались. Мы знаем, что сегодня пользователи Figma внедряют обходные пути и добавляют документацию для передачи проекта разработчикам, когда речь идет о значениях shadow spread. Если мы хотим облегчить передачу проекта разработчикам, то наши ограничения должны определяться CSS. Нужно ли нам рисовать идеальную тень для лого Figma? Можем ли мы сделать это в CSS?!

На самом деле, не можем. Особенность параметра box-shadow заключается в том, что он работает только для рендеринга теней блоков (и других подобных объектов, которые включают эллипсы, если вы правильно настроили радиусы углов). box-shadow не будет отображать тень логотипа Figma, как копию логотипа, но как блок.

(Кроме того: на каждом этапе этого процесса кто-то говорил мне: «на самом деле, значения размера тени поддерживаются в filter: drop–shadow()», и указывал на страницу MDN, которая по ошибке утверждала, что значения размера тени еще не поддерживались браузерами. К сожалению, это не правда, что явно указано в спецификации W3C).

Мы провели дискуссию с нашими дизайнерами. Они были уверены, что в большинстве вариантов использования будет достаточно функции shadow spread для прямоугольников и эллипсов. Кроме того, подкрепленный идеей, что соответствие CSS должно мотивировать наши решения, мы решили, что не имеет значения, можем ли мы сделать логотип в форме Figma. Мы решили безжалостно расставить приоритеты: по крайней мере, мы будем делать то, что умеет CSS.

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

Вверху: тень, создаваемая простым растяжением геометрии объекта; внизу: тень, созданная путем создания нового закругленного прямоугольника

Препятствия

Конечно, это не было так просто, как мы ожидали. В этом плане было несколько проблем: как создать правильные эллипсы? (Тень эллипса больше не будет определенно эллиптической; наш код генерации эллипса не генерирует не эллипсы, а простые преобразования эллипса в любом направлении сохраняют свои эллиптические свойства). Как отображать закругленные углы, когда эффект spread shadow был применен к прямоугольнику с закругленными углами? (Спецификация W3 определяет, как общее правило о преобразовании угловых радиусов, так и конкретную формулу, которая будет использоваться для больших значений spread shadow). Как отображать shadow spread на узлах только для обводки?

Мы решили некоторые из этих проблем с помощью проверенного временем метода: нажимать кнопки в CodePen и смотреть, что делают браузеры. Интересно, что браузеры не создают эллиптические тени, они просто создают больший эллипс. Решив подражать CSS, мы тоже это делаем.

Эффект становится более выраженным, когда оси эллипса расходятся:

Что еще более удивительно, после следования кубическому правилу W3C для угловых радиусов теней с большими значениями shadow spread (тщательно продуманное правило!), сравнение наших результатов с CodePen показало, что браузеры вообще не реализуют это. Чтобы создать тень для прямоугольника с закругленными углами, браузеры – а теперь и Figma – просто добавляют или вычитают значение shadow spread и исходный радиус угла.

Но CodePen не помог бы в определении shadow spread только для узлов обводки, поскольку наш подход уже значительно отличается от CSS. Даже полностью прозрачная заливка в CSS влияет на их собственные тени и маскирует их (но не другие тени). В Figma используется подход, близкий к физическому рендерингу, позволяющий пользователю видеть тени сквозь прозрачные и полупрозрачные заливки.

Ниже те же прямоугольники (заливки с нулевой непрозрачностью, с обводками и тенями) в CSS (слева) и Figma (справа):

Хотя легко узнать, как визуализировать тень для узла с заливкой (внизу слева), вы можете представить, как применить shadow spread для обводки несколькими способами:

A. Начните обводку с помощью параметра spread, оставив обводку постоянной
B. Добавьте spreadна внешнюю сторону ширины обводки.
C. Добавьтеspread к ширине штриха, отцентрированный так, чтобы тень распределялась по обе стороны
D. Добавьте параметр spread к каждому краю ширины обводки, в конечном итоге добавив 2 * spread к ширине обводки.

Изучив варианты, мы пришли к варианту D: мы подумали, что, когда вы переключаете видимость заливки объекта, внешний след тени должен оставаться прежним, что исключает вариант C. Из оставшихся вариантов D, похоже, больше всего соответствует идее shadow spread: тень, вытянутая вдоль каждой точки с помощью параметра spread.

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

Утилита : Utility : Вспомогательные классы | HTML CSS

Коллекция полезных классов для стилизации вашего контента. Адаптивные объекты. Вспомогательные классы.

Комбинирование различных радиусов скругления с тенями у элементов при наведении.
Прикольная заглавная буква. Отображение логотипа в зависимости от цветового режима. Точка трансформации элемента. Режим смешивания цветов выбранного элемента с низлежащими слоями.

Panel

Блочная панель для разделов сайта

Фреймворк UIkit использует блочные панели для выделения определенных разделов вашего контента.
Они могут быть расположены в столбцах модульной сетки, например, из компонента Grid.
Для создания блочной панели добавьте к элементу <div> класс .uk-panel.

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

<ul uk-grid>
    <li>
        <div>
        	Высокий уровень вовлечения достойных представителей целевой аудитории является четким доказательством простого факта.
        </div>
    </li>
    <li>
        <div>
        	Внедрение современных методик обеспечивает актуальность существующих гибких и административных условий адаптивности.
        </div>
    </li>
    <li>
        <div>
        	В рамках спецификации современных стандартов, разработчики крупнейших компаний, превозмогая сложившуюся непростую ситуацию сайта.
        </div>
    </li>
</ul>

Scrollable panel

Блочный контейнер с вертикальной полосой прокрутки

Scrollable panel по умолчанию имеет небольшие внутренние отступы и стиль для всех четырёх границ.
Добавьте класс .uk-panel-scrollable,
чтобы дать панели фиксированную высоту и сделать ее прокручиваемой если ее содержимое превышает высоту.

<div>
    <ul>
        <li><label><input type="checkbox"> Местные всезнайки</label></li>
        <li>
            <label><input type="checkbox"> Приобретенные свойства</label>
            <ul>
                <li><label><input type="checkbox"> Естественные склонности</label></li>
                <li><label><input type="checkbox"> Домашнее состояние</label></li>
                <li>
                    <label><input type="checkbox"> Пять шиллингов</label>
                    <ul>
                        <li><label><input type="checkbox"> Нормального типа</label></li>
                        <li><label><input type="checkbox"> Приобретенный признак</label></li>
                    </ul>
                </li>
                <li><label><input type="checkbox"> Действительность представляет</label></li>
            </ul>
        </li>
        <li><label><input type="checkbox"> Известный момент</label></li>
        <li><label><input type="checkbox"> Проявляется спонтанность</label></li>
    </ul>
</div>

Clearing и Floating

Создание и очистка плавающих элементов

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

Следующие классы помогут вам настроить основные макеты в HTML документе.

Класс	Описание
`.uk-float-left`	Добавьте этот класс, чтобы разместить элемент слева.
`.uk-float-right`	Добавьте этот класс, чтобы разместить элемент справа.
`.uk-clearfix`	Добавьте этот класс в родительский контейнер, чтобы очистить floats.

Overflow

Утилита «Overflow»

Управляем отображением блочного элемента с помощью утилиты Overflow,
которая определяет,
необходимо ли для переполненного блочного элемента обрезать содержимое и установить полосы прокрутки или всё-таки отобразить как есть.

UIkit 3 предоставляет разные классы для изменения поведения переполненного блочного элемента.

Класс Описание

.uk-overflow-hidden Добавьте этот класс, чтобы обрезать содержимое, которое превышает размеры его контейнера, без предоставления прокрутки.

.uk-overflow-auto Добавьте этот класс, чтобы создать контейнер, обеспечивающий горизонтальную или вертикальную полосу прокрутки всякий раз, когда содержимое элементов шире или выше самого контейнера, если содержимое переполняет блок.

Класс	Описание
`.uk-overflow-hidden`	Добавьте этот класс, чтобы обрезать содержимое, которое превышает размеры его контейнера, без предоставления прокрутки.
`.uk-overflow-auto`	Добавьте этот класс, чтобы создать контейнер, обеспечивающий горизонтальную или вертикальную полосу прокрутки всякий раз, когда содержимое элементов шире или выше самого контейнера, если содержимое переполняет блок.

Примечание
Класс .uk-overflow-auto полезен, когда приходится обрабатывать таблицы на отзывчивом сайте,
которые в какой — то момент могут оказаться слишком большими (широкими).
Класс-помощник также отлично работает с элементами <pre>.

Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы
Нижний колонтитул	Нижний колонтитул	Нижний колонтитул	Нижний колонтитул	Нижний колонтитул	Нижний колонтитул	Нижний колонтитул	Нижний колонтитул
Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы
Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы

<div>
    <table>
        <thead>
            <tr>
                <th>Заголовок таблицы</th>
                <th>Заголовок таблицы</th>
                <th>Заголовок таблицы</th>
                <th>Заголовок таблицы</th>
                <th>Заголовок таблицы</th>
                <th>Заголовок таблицы</th>
                <th>Заголовок таблицы</th>
                <th>Заголовок таблицы</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>Нижний колонтитул</td>
                <td>Нижний колонтитул</td>
                <td>Нижний колонтитул</td>
                <td>Нижний колонтитул</td>
                <td>Нижний колонтитул</td>
                <td>Нижний колонтитул</td>
                <td>Нижний колонтитул</td>
                <td>Нижний колонтитул</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Данные таблицы</td>
                <td>Данные таблицы</td>
                <td>Данные таблицы</td>
                <td>Данные таблицы</td>
                <td>Данные таблицы</td>
                <td>Данные таблицы</td>
                <td>Данные таблицы</td>
                <td>Данные таблицы</td>
            </tr>
            <tr>
                <td>Данные таблицы</td>
                <td>Данные таблицы</td>
                <td>Данные таблицы</td>
                <td>Данные таблицы</td>
                <td>Данные таблицы</td>
                <td>Данные таблицы</td>
                <td>Данные таблицы</td>
                <td>Данные таблицы</td>
            </tr>
        </tbody>
    </table>
</div>

Overflow Auto

Утилита «Overflow Auto»

Данная утилита предоставляет при необходимости вертикальную полосу прокрутки,
если содержимое переполняет блочный элемент и целиком не помещается.
Добавьте атрибут uk-overflow-auto к требуемому элементу,
класс .uk-overflow-auto установится автоматически, также
будет добавлена минимальная высота для элемента.

<div uk-modal>
    <div uk-overflow-auto></div>
</div>

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

Открыть модальное окно

Модальный заголовок

В рамках спецификации современных стандартов, некоторые особенности внутренней области являются только методом резинового участия и своевременно верифицированы. Каждый из нас понимает очевидную вещь: высококачественный прототип будущего проекта в значительной степени обусловливает важность системы массового участия. Лишь символы крупнейших сайтов и по сей день остаются уделом работников, которые жаждут быть преданы с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг. Тщательные исследования конкурентов лишь добавляют фракционных разногласий и представлены в исключительно положительном свете. И нет сомнений, что пользователи крупнейших компаний представлены в исключительно положительном свете. Как уже неоднократно упомянуто, стремящиеся вытеснить традиционное умение, нанотехнологии формируют глобальную веб сеть и при этом — заблокированы в рамках своих собственных рациональных ограничений.
Прежде всего, убеждённость некоторых пользователей, в своём классическом представлении, допускает внедрение экспериментов, поражающих по своей масштабности и грандиозности. Есть над чем задуматься: непосредственные участники технического прогресса могут быть объективно рассмотрены соответствующими умениями. В частности, повестка сегодняшнего дня требует от нас анализа с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг. Но предприниматели в сети интернет представляют собой не что иное, как знак победы маркетинга над разумом и должны быть в равной степени предоставлены сами себе. В рамках спецификации современных стандартов, независимые сайты, вне зависимости от их уровня, должны быть объединены в целые кластеры себе подобных.
Укрепление и развитие внутренней структуры предполагает независимые способы реализации поэтапного и последовательного развития устройства. В целом, конечно, внедрение современных методик, в своём классическом представлении, допускает внедрение стандартных подходов. С учётом сложившейся обстановки, глубокий уровень погружения предполагает независимые способы реализации системы массового участия.
Легко сказать, почему представители современных резервов, превозмогая сложившуюся ситуацию, разоблачены. Мы вынуждены отталкиваться от того, что высокое качество позиционных исследований однозначно фиксирует необходимость с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг, которые жаждут быть ассоциативно распределены по отраслям. С другой стороны, постоянный количественный рост и сфера активности является качественно новой ступенью как самодостаточных, так и внешне зависимых концептуальных решений.
Принимая во внимание показатели успешности, внедрение современных методик представляет собой интересный эксперимент проверки направлений прогрессивного развития. Задача, в особенности же сайтостроение сегодняшнего дня обеспечивает широкому кругу (специалистов) участие в формировании прогресса профессионального сообщества. Современные технологии достигли такого уровня, что высокое качество позиционных исследований позволяет оценить значение дальнейших направлений развития. Приятно наблюдать, как стремящиеся нанотехнологии призваны к ответу.
В частности, разбавленное изрядной долей мышление не даёт нам иного выбора, кроме определения своевременного выполнения сверхзадачи. Вот вам яркий пример современных тенденций — укрепление и развитие внутренней структуры создаёт необходимость включения в производственный план целого ряда внеочередных мероприятий с учётом комплекса направлений прогрессивного развития.

Сбросить
Сохранить

<a href="#modal-overflow" uk-toggle>Открыть модальное окно</a>

<div uk-modal>
    <div>
        <button type="button" uk-close></button>
        <div>
            <h3>Модальный заголовок</h3>
        </div>
        <div uk-overflow-auto>
            <p>В рамках спецификации современных стандартов, некоторые особенности внутренней области являются только методом резинового участия и своевременно верифицированы. Каждый из нас понимает очевидную вещь: высококачественный прототип будущего проекта в значительной степени обусловливает важность системы массового участия. Лишь символы крупнейших сайтов и по сей день остаются уделом работников, которые жаждут быть преданы с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг. Тщательные исследования конкурентов лишь добавляют фракционных разногласий и представлены в исключительно положительном свете. И нет сомнений, что пользователи крупнейших компаний представлены в исключительно положительном свете. Как уже неоднократно упомянуто, стремящиеся вытеснить традиционное умение, нанотехнологии формируют глобальную веб сеть и при этом - заблокированы в рамках своих собственных рациональных ограничений.</p>
            <p>Прежде всего, убеждённость некоторых пользователей, в своём классическом представлении, допускает внедрение экспериментов, поражающих по своей масштабности и грандиозности. Есть над чем задуматься: непосредственные участники технического прогресса могут быть объективно рассмотрены соответствующими умениями. В частности, повестка сегодняшнего дня требует от нас анализа с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг. Но предприниматели в сети интернет представляют собой не что иное, как знак победы маркетинга над разумом и должны быть в равной степени предоставлены сами себе. В рамках спецификации современных стандартов, независимые сайты, вне зависимости от их уровня, должны быть объединены в целые кластеры себе подобных.</p>
            <p>Укрепление и развитие внутренней структуры предполагает независимые способы реализации поэтапного и последовательного развития устройства. В целом, конечно, внедрение современных методик, в своём классическом представлении, допускает внедрение стандартных подходов. С учётом сложившейся обстановки, глубокий уровень погружения предполагает независимые способы реализации системы массового участия.</p>
            <p>Легко сказать, почему представители современных резервов, превозмогая сложившуюся ситуацию, разоблачены. Мы вынуждены отталкиваться от того, что высокое качество позиционных исследований однозначно фиксирует необходимость с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг, которые жаждут быть ассоциативно распределены по отраслям. С другой стороны, постоянный количественный рост и сфера  активности является качественно новой ступенью как самодостаточных, так и внешне зависимых концептуальных решений.</p>
            <p>Принимая во внимание показатели успешности, внедрение современных методик представляет собой интересный эксперимент проверки направлений прогрессивного развития. Задача, в особенности же сайтостроение сегодняшнего дня обеспечивает широкому кругу (специалистов) участие в формировании прогресса профессионального сообщества. Современные технологии достигли такого уровня, что высокое качество позиционных исследований позволяет оценить значение дальнейших направлений развития. Приятно наблюдать, как стремящиеся нанотехнологии призваны к ответу.</p>
            <p>В частности, разбавленное изрядной долей мышление не даёт нам иного выбора, кроме определения своевременного выполнения сверхзадачи. Вот вам яркий пример современных тенденций - укрепление и развитие внутренней структуры создаёт необходимость включения в производственный план целого ряда внеочередных мероприятий с учётом комплекса направлений прогрессивного развития.</p>
        </div>
        <div>
            <button type="button">Сбросить</button>
            <button type="button">Сохранить</button>
        </div>
    </div>
</div>

Вы можете изменить высоту цели, добавив в атрибут опции selContainer и selContent.

Опция	Значение	По умолчанию	Описание
`selContainer`	String	`.uk-modal`	CSS селектор для элемента контейнера, который обеспечивает высоту.
`selContent`	String	`.uk-modal-dialog`	CSS селектор для элемента, который оборачивает внутреннее содержимое, чтобы обеспечить его высоту.

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

Какой-то контент перед контейнером «Overflow Auto».
Какой-то контент после контейнера «Overflow Auto».

<div>
    <div>
        <p>Какой-то контент перед контейнером «Overflow Auto».</p>
        <div uk-overflow-auto="selContainer: .uk-height-medium; selContent: .js-wrapper">
            <div uk-grid>
                <div><img src="/demo/img/light.jpg" alt=""></div>
                <div><img src="/demo/img/dark.jpg" alt=""></div>
                <div><img src="/demo/img/photo.jpg" alt=""></div>
                <div><img src="/demo/img/photo2.jpg" alt=""></div>
            </div>
        </div>
        <p>Какой-то контент после контейнера «Overflow Auto».</p>
    </div>
</div>

Resize

Управление изменением размера элемента

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

Класс	Описание
`.uk-resize`	Добавьте этот класс, чтобы включить горизонтальное и вертикальное изменение размера.
`.uk-resize-vertical`	Добавьте этот класс, чтобы включить только вертикальное изменение размера.

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


            
<!-- Вертикальное изменение размера -->
<div uk-grid>
    <div>...</div>
    <div>...</div>
</div>

<div uk-grid>
    <div></div>
    <div></div>
</div>


            
<!-- Горизонтальное и вертикальное изменение размера -->
<div uk-grid>
    <div>...</div>
    <div>...</div>
</div>

<div uk-grid>
    <div></div>
    <div></div>
</div>

<div uk-grid>
    <div>
        <pre>
            <code>
&lt;!-- Вертикальное изменение размера --&gt;
&lt;div uk-grid&gt;
    &lt;div&gt;...&lt;/div&gt;
    &lt;div&gt;...&lt;/div&gt;
&lt;/div&gt;

&lt;div uk-grid&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
            </code>
        </pre>
    </div>
    <div>
        <pre>
            <code>
&lt;!-- Горизонтальное и вертикальное изменение размера --&gt;
&lt;div uk-grid&gt;
    &lt;div&gt;...&lt;/div&gt;
    &lt;div&gt;...&lt;/div&gt;
&lt;/div&gt;

&lt;div uk-grid&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
            </code>
        </pre>
    </div>
</div>

Display

Значения свойства «display»

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

Класс	Описание
`.uk-display-block`	Заставляет элемент вести себя как блочный элемент.
`.uk-display-inline`	Заставляет элемент вести себя как встроенный элемент.
`.uk-display-inline-block`	Заставляет элемент вести себя как inline-block (нечто: блочно-строчный).

Inline

Утилита «Inline»

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

Класс	Описание
`.uk-inline`	Добавьте этот класс, чтобы применить поведение встроенного блока к элементу, добавляется `max-width 100%` и создаётся контекст позиции.
`.uk-inline-clip`	Так же как `.uk-inline`, но доплнительно ещё обрезает переполненные дочерние элементы (если превышены размеры).

<div>
    <img alt="">
    <div></div>
</div>

Адаптивные объекты

Адаптивное поведение элементов

В UIkit 3 элементы <img>, <canvas>, <audio> и <video> адаптируются к ширине их родительского контейнера по умолчанию. Чтобы применить адаптивное поведение к iframe добавьте атрибут uk-responsive. Для других элементов или для применения другого поведения вы можете добавить один из следующих классов.

Класс	Описание
`.uk-responsive-width`	Добавьте этот класс, чтобы применить адаптивное поведение к любому элементу. Он регулирует ширину объекта в соответствии с шириной его родителя, сохраняя исходное соотношение сторон.
`.uk-responsive-height`	Добавьте этот класс, чтобы настроить высоту объекта (а не его ширину) в соответствии с высотой его родителя, сохраняя исходное соотношение сторон.
`.uk-preserve-width`	Добавьте этот класс, чтобы избежать адаптивного поведения по умолчанию и сохранить исходные размеры изображения. Вы также можете добавить класс к родительскому элементу, тогда будет применено ко всем соответствующим элементам, содержащим его. Если вы встраиваете Google Карты на свой сайт, этот вариант может понадобиться для исправления изображений карты.

<img src="" alt="">

<iframe src="" frameborder="0" uk-responsive></iframe>

Border radius

Утилита «Border radius»

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

Класс	Описание
`.uk-border-rounded`	Добавьте этот класс, чтобы применить закругленные углы.
`.uk-border-circle`	Добавьте этот класс, чтобы использовать круглую форму.
`.uk-border-pill`	Добавьте этот класс, чтобы установить форму эллипса, таблетки.

<img src="/demo/img/avatar.jpg" alt="Border rounded">
<img src="/demo/img/avatar.jpg" alt="Border circle">
<img src="/demo/img/avatar.jpg" alt="Border pill">

Border circle

Border pill

<div uk-grid>
    <div>
        <div>
            <img data-src="/demo/img/dark.jpg" alt="Border circle" uk-img>
            <div>
                Border circle
            </div>
        </div>
    </div>
    <div>
        <div>
            <img data-src="/demo/img/dark.jpg" alt="Border pill" uk-img>
            <div>
                Border pill
            </div>
        </div>
    </div>
</div>

Box shadow

Добавление тени к элементам

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

Класс	Описание
`.uk-box-shadow-small`	Добавьте этот класс, чтобы применить маленькую тень к элементу.
`.uk-box-shadow-medium`	Добавьте этот класс, чтобы добавить умеренную (среднюю) тень.
`.uk-box-shadow-large`	Добавьте этот класс, чтобы задать элементу большую тень.
`.uk-box-shadow-xlarge`	Добавьте этот класс, чтобы применить к элементу очень большую тень.

Разметка

<div></div>

Примеры

Несколько примеров с различными размерами теней, которые можно смело применять на практике.

<div uk-grid>
    <div>
        <div>Small</div>
    </div>
    <div>
        <div>Medium</div>
    </div>
    <div>
        <div>Large</div>
    </div>
    <div>
        <div>XLarge</div>
    </div>
</div>

Box shadow bottom

Тень в нижней части элемента

Чтобы добавить тень к нижней части элемента, так что получится эффект «Парящий», добавьте класс .uk-box-shadow-bottom.
Этот класс также можно комбинировать с одним из других модификаторов .uk-box-shadow-*, например,
можно добавить тень от блока при наведении.

<div></div>

Примеры

Box shadow hover

Тень от блока при наведении

При добавлении одного из классов -box-shadow-hover-, при наведении на элемент, элемент плавно выделяется путём отбрасывания тени.
Это также может быть использовано для изменения размера тени при наведении. Для этого просто объедините их с одним из классов выше.
Чтобы применить тень от блока при наведении, добавьте один из следующих классов.

Класс	Описание
`.uk-box-shadow-hover-small`	Добавьте этот класс, чтобы создать небольшую тень блоку при наведении на него курсором.
`.uk-box-shadow-hover-medium`	Добавьте этот класс, чтобы использовать среднюю тень при наведении.
`.uk-box-shadow-hover-large`	Добавьте этот класс, чтобы применить большую тень при наведении.
`.uk-box-shadow-hover-xlarge`	Добавьте этот класс, чтобы применить очень большую тень от блока при наведении на него курсором.

<div></div>

Примеры с наведением. Несколько вариантов решения

<div uk-grid>
    <div>
        <div>Hover Small</div>
    </div>
    <div>
        <div>Hover XLarge</div>
    </div>
    <div>
        <div>Small + Hover Large</div>
    </div>
    <div>
        <div>XLarge + Hover Medium</div>
    </div>
</div>

Drop cap

Буквица. Оформление первой буквы

Drop cap — позволяет оформить первую букву строки делая предложение с красивой большой буквы как это делают в газетах и журналах.
С помощью класса .uk-dropcap вы можете создать прикольную первую буквицу внутри текста, абзаца,
просто добавив класс непосредственно к элементу <p>. Реализация будет выглядеть следующим образом:

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

<p>
	Таким образом, семантический разбор внешних противодействий является качественно новой ступенью переосмысления внешнеэкономических буковок. 
	Банальные, но неопровержимые выводы, а также элементы буквенного процесса формируют глобальный интерактивный инструмент, и при этом - 
	призваны к ответу. Лишь расположение крупнейших генераторов смешаны с не уникальными данными до степени совершенной неузнаваемости, 
	из-за чего возрастает их статус бесполезности.
</p>

Logo

Утилита «Logo» — Оформление логотипа

С классом .uk-logo вы можете легко определить свой логотип, например, установив логотип в панели навигации Navbar.

<a href=""></a>

Пример

Добавьте класс .uk-light из компонента Инверсия при отображении лого на темном фоне,
чтобы его цвет автоматически инвертировался для лучшей видимости.

Логотип картинкой

В качестве логотипа вы также можете использовать элемент <img>, например с SVG.

<a href="">
    <img src="" alt="">
</a>

Вы можете автоматически отображать альтернативные логотипы для светлого и темного фона с помощью компонента Inverse.
Просто нужно добавить класс .uk-logo-inverse ко второму изображению логотипа.
В зависимости от цветового режима, когда применяется класс .uk-light или .uk-dark к родительскому элементу, будет отображаться инвертированный логотип.

HTML разметка

<div>
    <a href="">
        <img src="" alt="">
        <img src="" alt="">
    </a>
</div>

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

На примерах можно увидеть отображение логотипа в зависимости от цветового режима.

<div uk-grid>
    <div>
        <div>
            <a href="#">
                <img src="/demo/img/logo-placeholder.svg" alt="">
                <img src="/demo/img/logo-placeholder-light.svg" alt="">
            </a>
        </div>
    </div>
    <div>
        <div>
            <a href="#">
                <img src="/demo/img/logo-placeholder.svg" alt="">
                <img src="/demo/img/logo-placeholder-light.svg" alt="">
            </a>
        </div>
    </div>
</div>

Blend mode

Режимы наложения : «Blend mode»

Определяет режим наложения (смешивания) исходного цвета на фоновый цвет или фоновое изображение.
С помощью режимов наложения объекты смешиваются друг с другом.

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

Классы «режимов смешивания» цветов выбранного элемента с низлежащими слоями:

Класс	Описание
`.uk-blend-multiply`	Этот класс устанавливает эффект режима смешивания «Умножение».
`.uk-blend-screen`	Этот класс устанавливает эффект режима смешивания «Осветление».
`.uk-blend-overlay`	Этот класс устанавливает эффект режима смешивания «Перекрытие».
`.uk-blend-darken`	Этот класс устанавливает режим смешивания «Замена тёмным».
`.uk-blend-lighten`	Этот класс устанавливает режим смешивания «Замена светлым».
`.uk-blend-color-dodge`	Этот класс устанавливает режим смешивания «Осветление основы».
`.uk-blend-color-burn`	Этот класс устанавливает режим смешивания «Затемнение основы».
`.uk-blend-hard-light`	Этот класс устанавливает режим смешивания «Направленный свет».
`.uk-blend-soft-light`	Этот класс устанавливает режим смешивания «Рассеянный свет».
`.uk-blend-difference`	Этот класс устанавливает эффект режима наложения «Разница».
`.uk-blend-exclusion`	Этот класс устанавливает эффект режима наложения «Исключение».
`.uk-blend-hue`	Этот класс устанавливает эффект режима наложения «Тон».
`.uk-blend-saturation`	Этот класс устанавливает эффект режима наложения «Насыщенность».
`.uk-blend-color`	Этот класс устанавливает эффект режима наложения «Цвет».
`.uk-blend-luminosity`	Этот класс устанавливает эффект режима наложения «Яркость».

<div>
    <div></div>
    <img src="" alt="">
</div>

mix-blend-mode

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

<div uk-grid>
    <div>
        <div>
            <img src="/demo/img/dark.jpg" alt="Blend Multiply">
            <div>
                <p>Multiply</p>
            </div>
        </div>
    </div>
    <div>
        <div>
            <img src="/demo/img/dark.jpg" alt="Blend Screen">
            <div>
                <p>Screen</p>
            </div>
        </div>
    </div>
    <div>
        <div>
            <img src="/demo/img/dark.jpg" alt="Blend Overlay">
            <div>
                <p>Overlay</p>
            </div>
        </div>
    </div>
    <div>
        <div>
            <img src="/demo/img/dark.jpg" alt="Blend Darken">
            <div>
                <p>Darken</p>
            </div>
        </div>
    </div>
    <div>
        <div>
            <img src="/demo/img/dark.jpg" alt="Blend Lighten">
            <div>
                <p>Lighten</p>
            </div>
        </div>
    </div>
    <div>
        <div>
            <img src="/demo/img/dark.jpg" alt="Blend Color Dodge">
            <div>
                <p>Color Dodge</p>
            </div>
        </div>
    </div>
    <div>
        <div>
            <img src="/demo/img/dark.jpg" alt="Blend Color Burn">
            <div>
                <p>Color Burn</p>
            </div>
        </div>
    </div>
    <div>
        <div>
            <img src="/demo/img/dark.jpg" alt="Blend Hard Light">
            <div>
                <p>Hard Light</p>
            </div>
        </div>
    </div>
    <div>
        <div>
            <img src="/demo/img/dark.jpg" alt="Blend Soft Light">
            <div>
                <p>Soft Light</p>
            </div>
        </div>
    </div>
    <div>
        <div>
            <img src="/demo/img/dark.jpg" alt="Blend Difference">
            <div>
                <p>Difference</p>
            </div>
        </div>
    </div>
    <div>
        <div>
            <img src="/demo/img/dark.jpg" alt="Blend Exclusion">
            <div>
                <p>Exclusion</p>
            </div>
        </div>
    </div>
    <div>
        <div>
            <img src="/demo/img/dark.jpg" alt="Blend Hue">
            <div>
                <p>Hue</p>
            </div>
        </div>
    </div>
    <div>
        <div>
            <img src="/demo/img/dark.jpg" alt="Blend Saturation">
            <div>
                <p>Saturation</p>
            </div>
        </div>
    </div>
    <div>
        <div>
            <img src="/demo/img/dark.jpg" alt="Blend Color">
            <div>
                <p>Color</p>
            </div>
        </div>
    </div>
    <div>
        <div>
            <img src="/demo/img/dark.jpg" alt="Blend Luminosity">
            <div>
                <p>Luminosity</p>
            </div>
        </div>
    </div>
</div>

<div uk-grid>
	
    <div>
    	<div data-src="/demo/img/light.jpg" uk-img>
    		<p>
    			<b>blend<br> color-burn</b>
    		</p>
    	</div>
    </div>
    <div>
    	<div data-src="/demo/img/light.jpg" uk-img>
    		<p>
    			<b>blend<br> difference</b>
    		</p>
    	</div>
    </div>
    <div>
    	<div data-src="/demo/img/light.jpg" uk-img>
    		<p>
    			<b>blend<br> color-dodge</b>
    		</p>
    	</div>
    </div>
    
</div>

Transform center

Центр трансформации

Точка трансформации в самом центре. Чтобы центрировать элемент «в себе», добавьте класс uk-transform-center.
Это особенно полезно при абсолютном позиционировании.

Transform origin

Координаты точки : Точка трансформации

Устанавливайте координаты точки, относительно которой будет происходить трансформация элемента. Чтобы изменить источник анимации, например масштабирование, добавьте один из классов uk-transform-origin-*. Это можно комбинировать вместе с компонентом Animation.

Класс	Описание
`.uk-transform-origin-top-left`	Переход происходит сверху слева.
`.uk-transform-origin-top-center`	Переход происходит сверху.
`.uk-transform-origin-top-right`	Переход происходит сверху справа.
`.uk-transform-origin-center-left`	Переход происходит слева.
`.uk-transform-origin-center-right`	Переход происходит справа.
`.uk-transform-origin-bottom-left`	Переход происходит внизу слева.
`.uk-transform-origin-bottom-center`	Переход происходит снизу.
`.uk-transform-origin-bottom-right`	Переход происходит снизу справа.

<div></div>

Примеры. Появление с разных сторон

<div uk-grid>
    <div tabindex="0">
        <div>
            <p>Bottom Right</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Top Center</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Bottom Center</p>
        </div>
    </div>
</div>

Disabled

Отключение элемента

Чтобы отключить поведение клика любому элементу, например <a>,
<button> или <iframe>, добавьте к нему класс .uk-disabled.

Drag

Курсор «Перемещение» : Плюшка «Drag»

Чтобы применить курсор перемещения к перетаскиваемым элементам, добавьте класс .uk-drag.

<div></div>

Чтобы создать тень для блока загрузочной области добавьте класс .uk-dragover.

Компоненты UIkit 3

Всё о :Before и :After в CSS

Сегодня мы собираемся рассмотреть псевдо-элементы :before и :after. Вы, наверное, часто видели как их используют в сложных примерах CSS. Итак, сегодня Вы можете также научиться их использовать самостоятельно.

Что такое псевдо-элемент и чем он отличается от псевдо-класса? Почему псевдо-элементы иногда имеют одно двоеточие, а иногда и два? Как :before и :after реализован в CSS? Какие приемы используют разработчики во всем мире для создания удивительных вещей при помощи CSS? Читайте дальше, чтобы узнать это.

Псевдо-классы vs. Псевдо-элементы

Очень многие люди путают эти понятия или не понимают в чем разница (включая и меня, прежде чем погрузиться в это исследование). Если вы воспользуетесь поиском, чтобы найти различия между ними, то вы найдете длинные и слишком «технические» ответы, перемешанные с простыми, голословными заявлениями о том, что это различные вещи по сути, но без обсуждения, как и почему. Некоторые источники, такие как W3Schools, похоже, используют эти термины как взаимозаменяемые, что часто приводит к их неправильному использованию. Ответ же на этот вопрос довольно прост.

Псевдо-классы: относятся ко всему элементу

Во-первых, давайте посмотрим на псевдо-классы, которые нацелены на весь элемент или его состояние.

a:link {color: #111}
a:hover {color: #222}
div:first-child {color: #333}
div:nth-child(3) {color: #444}

Как вы можете видеть, что эти условия не обязательно основаны на DOM, в результате выбирается весь элемент в каждом случае. Что в конечном итоге определяет стили для всей ссылки, параграфа, div-а и т.д.

Псевдо-элементы: целевой элемент — часть целого.

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

p::first-line {color: #555}
p::first-letter {color: #666}
a::before {content : «hello world»;}

Как видите, все они указывают только на часть элемента: на первую строку или первую букву параграфа, например. Они также обладают замечательной способностью определять и даже добавлять вещи, которые даже не указаны в HTML, а именно это :before и :after, то что сегодня мы и обсуждаем.

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

:before vs. ::before

Перед тем, как перейти непосредственно к объяснению :before и :after, и как их можно использовать для выполнения некоторых интересных задач, давайте проясним еще один важный момент, который часто вызывает вопросы. Если вы посмотрите в Интернете примеры с :before и :after, то вы найдете использование двух разных вариантов.

Иногда разработчики используют одно двоеточие, а иногда они будут использовать два. Они используют разные функции? Вовсе нет, оказывается, они абсолютно одинаковые с функциональной точки зрения, то есть вы получите тот же результат и они используются для одинаковых целей. Так в чем же разница? Вот пример:

/*CSS2*/
.example:before {}
.example:after {}
.example:first-child {}

/*CSS3*/
.example::before {}
.example::after {}
.example:first-child {}

Как вы можете видеть, в CSS2, мы использовали одно двоеточие для определения псевдо-классов и псевдо-элементов. Однако, чтобы помочь различать их, в CSS3 добавлено второе двоеточие только для псевдо-элементов.

Проблемы с IE, опять.

Так почему же мы все еще видим оба синтаксиса в современных примерах и учебниках? Остаются ли некоторые разработчики просто в неведении относительно этого изменения? Это может и так, но, вероятно, ответственность за большинство из этих противоречий лежит на нашем старом друге — Internet Explorer-е, разрушителе всего нового и хорошего в мире веб-разработки.

Оказывается, что все современные браузеры понимают синтаксис двойного двоеточия, но, к сожалению, с IE8 это не так. По этой причине, при кодировании с ::before и ::after, большинство разработчиков предпочитают для совместимости просто использовать синтаксис CSS2 с одним двоеточием. Чтобы не усложнять объяснение мы будем придерживаться этого синтаксиса в остальной части этой статьи.

Что такое :before и :after?

Это всё была теория, но это необходимо знать, если вы собираетесь участвовать в обсуждении вопросов использования :before и :after в CSS. Теперь мы можем, наконец, посмотреть как эти вещи работают.

Концепция здесь на самом деле очень проста. Оба псевдо-элемента :before и :after позволяет фактически добавить HTML-элементы из вашего CSS-кода, не загромождая самой разметки. Это открывает большие возможности для добавления различных декоративных элементов, которые не обязательно заслуживают дополнительной разметки.

Например, предположим, что у вас есть несколько телефонных номеров на своем сайте и вы хотели бы разместить ☎ значок перед ними. Вы можете использовать псевдо-элемент :before, чтобы сделать это (content:»☎»):

.phoneNumber:before {
content:»&#9742;»;
font-size: 15px;
}

Этот код будет вставлять маленький значок перед каждым элементом с классом .phoneNumber. :after работает точно так же, только, как вы можете догадаться, он будет добавлять значок после номера телефона.

.phoneNumber:after {
content:»&#9742;»;
font-size: 15px;
}

Небольшой пример

Одной из причин по которой :before и :after стали невероятно популярны в последнее время, является их способность значительно увеличить сложность CSS элементов. Без дополнительной разметки, мы можем использовать эти псевдо-элементы для добавления дополнительных элементов и слоев.

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

.button {
height: 100px;
width: 100px;
position: relative;
margin: 50px;
color: white;
text-align: center;
line-height: 100px;

/*закругленные углы и тень*/
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
-moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
box-shadow: 2px 2px 4px rgba(0,0,0,0.4);

/*градиент*/
background: #e51d16; /* для старых браузеров */
background: -moz-linear-gradient(top, #e51d16 0%, #b21203 100%); /* для FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e51d16), color-stop(100%,#b21203)); /* для Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e51d16 0%,#b21203 100%); /* для Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e51d16 0%,#b21203 100%); /* для Opera 11.10+ */
background: -ms-linear-gradient(top, #e51d16 0%,#b21203 100%); /* для IE10+ */
background: linear-gradient(top, #e51d16 0%,#b21203 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#e51d16′, endColorstr=’#b21203′,GradientType=0 ); /* IE6-9 */
}

Весь этот код приведет к созданию довольно простой, круглой кнопки:

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

.button:before {
content:»»;
}

Теперь мы можем задать стили, чтобы добавить нужный эффект. Тут уже всё зависит от вашей фантазии или вы можете посмотреть многочисленные уроки по CSS в сети.

.button:before {
content:»»;
width: 100%;
height: 100%;
display: block;
z-index: -1;
position: relative;
padding: 15px;
background: #ddd;
left: -15px;
top: -15px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
-moz-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
}

Теперь наша кнопка немного больше по размеру. Псевдо-элемент :before образует внешнее кольцо. Мы установили ему z-index: -1, чтобы спрятать его за кнопку и использовали абсолютное позиционирование, чтобы поставить его на нужное место.

Теперь предположим, что мы хотели сделать то же самое еще раз. Это можно осуществить используя псевдо-элемент :after и повторить процесс.

.button:after {
content:»»;
width: 100%;
height: 100%;
display: block;
z-index: -2;
position: relative;
padding: 25px;
background: #eee;
position: absolute;
left: -25px;
top: -25px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
-moz-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
}

Он просто добавляет еще один слой. Теперь кажется, что у нашей кнопки есть двойная, объемная рамка:

Демонстрация

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

Перевод статьи с designshack.net

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Размытие фона средствами CSS

В CSS3 есть множество новых свойств, которые могут значительно ускорить
вёрстку тех или иных элементов страницы. Например, css-фильтры, об одном из
которых сегодня предлагается поговорить.

Каждый из нас хотя бы раз имел возможность наблюдать эффект размытия на
странице. Зачастую для его создания используется jQuery-библиотека
bjurjs. Однако, не на всех сайтах целесообразно использовать jQuery, да и
технологии не стоят на месте: теперь мы можем воспользоваться решением на чистом CSS. Попробуем?

Пример простейшей разметки:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>Blur</title>
    <link href="style.css" rel="stylesheet"/>
  </head>

  <body>
    <main>
      <div></div>
      <div>
        <h3>Welcome to our website!</h3>
      </div>
    </main>
  </body>

</html>

Итак, задан родительский div с классом wrapper, служащий контейнером для двух
вложенных div’ов: inner-wrapper будет содержать текст приветствия, а blur —
изображение, к которому нужно применить эффект размытия.

Обратимся к стилям.

.wrapper {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}

.inner-wrapper,
.blur {
  position: absolute;
  width: 500px;
  height: 300px;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

Как можно видеть, дочерние блоки абсолютно позиционированы и находятся на
одном уровне. Дело в том, что эффект размытия будет применяться и к тексту
приветствия, чего нам хотелось бы избежать. Поэтому лучше управлять положением
блоков относительно друг друга при помощи z-index. Сделаем это, а также
зададим необходимый бэкгрануд для .blur:

.inner-wrapper {
  z-index: 100;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 5px rgba(0,0,0,.5);
}

.blur {
  z-index: 99;
  background-image: url(image.png);
  background-size: cover;
  background-repeat: no-repeat;
}

На данный момент получаем простейшую страничку с картинкой и текстом:

Настало время применить магию! Увы, firefox пока не поддерживает css-фильтры,
поэтому в дело пойдёт небольшой трюк: нужно «скормить» ему svg-файл
со следующим содержимым:


<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <filter>
    <feGaussianBlur stdDeviation="5"/>
  </filter>
</svg>

и указать путь к этому файлу, а также обратиться к нужному фильтру. В нашем случае фильтр
всего один: тот, что определён под id blur. Вот как должен быть преобразован
css-код для получения эффекта размытия:

.inner-wrapper {
  z-index: 100; 
  color: #fff;
  text-align: center;
  text-shadow: 0 0 5px rgba(0,0,0,.5);
}

.blur {
  z-index: 99; 
  background-image: url(image.png);
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  filter: blur(5px);
  filter: url('blur.svg#blur'); 
}

А вот и итоговый вариант с применением эффекта размытия:

Единственный недостаток: нечёткие границы размытия, которые выходят за пределы
родительского элемента. Часто такой побочный эффект может быть
нежелательным. Ну, что ж, можно поиграть с радиусом размытия или применить
overflow: hidden.

Стиль слоя «Тень» в Photoshop

Рекомендую обратить особое внимание на чекбокс «Глобальное освещение» (Use Global Light). По умолчанию в нём проставлена галка. Наличие галки говорит о том, что при изменении угла освещения в конкретно этом стиле слоя «Тень», угол освещения будет изменяться и в других стилях этого документа, использующих освещение, таких, как «Тиснение» (Bevel and Emboss), «Внутренняя тень» (Inner Shadow), «Тенях», применённых к другим слоям, и т.д. Без галки у каждого из этих стилей будет свой собственный угол освещения. В большинстве случаев галка применяется, т.к. обычно для всех эффектов нужен единый источник света:

В примере угол освещения верхнего и нижнего текста 130° и 50° соответственно, кроме того, я добавил эффект «Тиснение» (Bevel and Emboss) с такими же углами освещения:

Смещение (Distance)

Ползунок смещения изменяет визуальное кажущееся расстояние между объектом и фоном, на котором лежит тень. Эффект достигается за счет смещения тени относительно объекта, который её отбрасывает:

В примере тень нижнего текста смещена сильнее, что даёт эффект большего расстояния объекта от фона:

Размах (Spread)

Ползунок «Размах» изменяет уменьшение интенсивности тени линейно, или, другими словами, изменяет то, как она постепенно исчезает при приближении к краю.

Обычно этот параметр оставляют равным нулю 0%, но если вам понадобились тени с резкими краями, вам надо его увеличить. Величина 100% даёт резкую границу.

Пример текстов с разными значениями «Размаха»:

Размер (Size)

Ползунок «Размера» изменяет видимый размер тени. Когда он установлен но ноль, тень имеет точно такой же размер, как и форма объекта. При увеличении значения этого параметра, форма тени увеличивается в размере с шагом в 1 пиксель.

Пример разных значений «Размера»:

Контур (Contour)

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

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

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

В следующем примере форма контура изменена с линейной на форму обычной и перевёрнутой буквы «U»:

Шум (Noise)

Опция «шум» является весьма полезной, когда необходимо придать вашей тени зернистость, например, при создании стиля, напоминающего, к примеру, бетон. Для совершенно гладкой тени оставьте его значение 0%.

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

Слой выбивает тень (Layer Knocks Out Drop Shadow)

Понимание этой опции несколько сложно для новичков.

Когда вы создаёте слой и применяете к нему стили, в рабочем окне отображаются две вещи, слой и стили. Если вы уменьшаете опцию «Заливка» (Fill) до 0%, то содержимое слоя скрывается из видимости, но содержимое стиля отображается так же, как и раньше, подробнее читайте в Руководстве по опциям «Заливка» и «Непрозрачность» и практический пример.
Но, под слоем с «Заливкой», равной нулю, отображается содержимое слоя, находящегося под ним, и при включённой опции «Слой выбивает тень» это содержимое перекрывает тень. Если снять галку, то содержимое нижнего слоя отображаться не будет, и, соответственно, не будет перекрывать стиль слоя тень. На примере ниже у верхнего текста эта опция включена, у нижнего — отключена.

Сохранение и загрузка настроек стилей слоя по умолчанию

Вы можете сохранять и загружать настройки по умолчанию для каждого эффекта в диалоговом окне стилей слоя. Нажав на кнопку «Использовать по умолчанию» (Make Default), Photoshop сохранит активные в настоящее время настройки, как новые настройки по умолчанию для этого эффекта.
Нажав на кнопку «Восстановить значения по умолчанию» (Reset to Default), Photoshop загрузит эти сохранённые настройки.

box-shadow — CSS: каскадные таблицы стилей

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

Свойство box-shadow позволяет отбрасывать тень от кадра практически любого элемента. Если для элемента с тенью блока указан border-radius , тень блока принимает те же закругленные углы.Порядок z-порядка нескольких теней блока такой же, как и нескольких теней текста (первая указанная тень находится сверху).

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

 
тень коробки: нет;


box-shadow: 60–16 пикселей бирюзовый;


box-shadow: 10px 5px 5px черный;


box-shadow: 2px 2px 2px 1px rgba (0, 0, 0, 0,2);


box-shadow: вставка 5em 1em золото;


box-shadow: 3px 3px красный, -1em 0 0,4em оливковый;


box-shadow: наследовать;
box-shadow: начальный;
box-shadow: вернуться;
box-shadow: отключено;

Укажите одиночную тень блока, используя:

Два, три или четыре <длина> значений.
- Если указаны только два значения, они интерпретируются как значения <смещение-x> и <смещение-y> .
- Если задано третье значение, оно интерпретируется как <радиус размытия> .
- Если дано четвертое значение, оно интерпретируется как <распространение-радиус> .
Необязательно: вставка ключевое слово.
Необязательно, значение <цвет> .

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

Значения

вставка: Если не указано (по умолчанию), предполагается, что тень является падающей тенью (как если бы прямоугольник был поднят над содержимым).
Наличие ключевого слова inset изменяет тень на одну внутри кадра (как если бы содержимое было вдавлено внутри рамки). Вставные тени рисуются внутри границы (даже прозрачные), над фоном, но под содержимым.
<смещение-x> <смещение-y>: Это два значения для установки смещения тени. определяет горизонтальное расстояние. Отрицательные значения помещают тень слева от элемента. определяет вертикальное расстояние. Отрицательные значения помещают тень над элементом. См. <длина> для получения информации о возможных единицах.
Если оба значения равны 0 , тень помещается за элементом (и может создавать эффект размытия, если задано и / или ).
<радиус размытия>: Это третье значение <длина> .Чем больше это значение, тем больше размытие, поэтому тень становится больше и светлее. Отрицательные значения не допускаются. Если не указано, это будет 0 (край тени резкий). В спецификации не содержится точного алгоритма расчета радиуса размытия, однако он уточняется следующим образом:
… для длинного прямого края тени это должно создать цветовой переход по длине расстояния размытия, которое перпендикулярно и центрируется на краю тени, и которое колеблется от полного цвета тени в конечной точке радиуса внутри тени до полного прозрачный в конечной точке за ее пределами.
<радиус распространения>: Это четвертое значение <длина> . Положительные значения заставят тень расширяться и увеличиваться в размерах, отрицательные значения заставят тень сжиматься. Если не указано, это будет 0 (тень будет того же размера, что и элемент).
<цвет>: См. Возможные ключевые слова и обозначения в значениях .
Если не указано, по умолчанию используется .

Интерполяция

Каждая тень в списке (обработка none как список нулевой длины) интерполируется через компонент цвета (как цвет), а также x, y, размытие и (при необходимости) распространение (как длину) составные части. Для каждой тени, если обе входные тени являются или не являются , вставкой , то интерполированная тень должна соответствовать входным теням в этом отношении. Если какая-либо пара входных теней имеет одну вставку , а другую — не вставку , весь список теней не интерполируется.Если списки теней имеют разную длину, то более короткий список дополняется в конце тенями, цвет которых — , прозрачный , все длины — 0 , и чья вставка (или нет) соответствует более длинному списку.

 нет | <тень> #  где 
  <тень> = вставка? && <длина> {2,4} && <цвет>?  
  где 
  <цвет> =  |  |  |  | <шестнадцатеричный цвет> | <имя-цвета> | текущий цвет | <цвет устаревшей системы>  
 , где 
   = rgb (<процент> {3} [/ ]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?) 
  = rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, ?) 
  = hsl (   [/ ]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?) 
  = hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?)  
 , где 
  <альфа-значение> = <число> | <процент> 
 <оттенок> = <число> |

Установка трех теней

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

HTML

    Можешь застрелить меня своими словами, 

Можешь порезать меня глазами, 

Ты можешь убить меня своей ненавистью, 

Но все равно, как воздух, поднимусь. 
 & mdash; Майя Анжелу

CSS

  blockquote {
  отступ: 20 пикселей;
  тень коробки:
       вставка 0 -3em 3em rgba (0,0,0,0.1),
             0 0 0 2px rgb (255,255,255),
             0.3em 0.3em 1em rgba (0,0,0,0.3);
}

Результат

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

Когда x-offset , y-offset и blur равны нулю, тень блока будет сплошным контуром равного размера со всех сторон. Тени отрисовываются задом наперед, поэтому первая тень располагается поверх последующих теней. Когда border-radius установлен на 0, как это установлено по умолчанию, углы тени будут, ну, углами.Если бы мы поставили border-radius любого другого значения, углы были бы скруглены.

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

HTML

    Привет, мир

CSS

  п {
  box-shadow: 0 0 0 2em # F4AAB9,
              0 0 0 4em # 66CCFF;
  маржа: 4em;
  заполнение: 1em;
}

Результат

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

Все, что вам нужно знать о CSS3 Box Shadow

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

Элемент уровня блока — это любой элемент, имеющий структуру и макет. Наиболее распространенным элементом уровня блока является DIV, хотя почти любой элемент может быть преобразован в блок с помощью display: block .

CSS-свойство box-shadow дает нам огромное количество вариантов для создания теневых эффектов как внутри, так и снаружи элемента.

Синтаксис следующий (все в одной строке):

 тень коробки:
вставка xPosition yPosition blurSize spreadSize color;

Где:

вставка (необязательно), если включена, тень блока существует внутри блока.Если опущено, тень блока существует за пределами блока.
xPosition — горизонтальное смещение тени блока относительно элемента уровня блока.
y Позиция — это вертикальное смещение тени блока относительно элемента уровня блока.
blurSize (необязательно) — размер размытия теней.
spreadSize (необязательно) — размер распространения тени.
цвет — это значение цвета и может быть любым из обычных цветовых форматов — шестнадцатеричным, rgb, rgba, hsl, hsla или именованным цветом.

Предполагая, что у нас есть DIV на нашей странице с классом myElement, мы могли бы создать простую тень блока на этом элементе, используя код:

 .myElement {
    box-shadow: 2px 2px 2px # 666;
}

В приведенном выше фрагменте кода мы устанавливаем координаты x и y тени на 2 пикселя, чтобы создать тень в правом нижнем углу. Мы также установили размер размытия на 2 пикселя и цвет на # 666 (серый).

Если мы хотим, чтобы тень перемещалась в верхний левый угол, а не в нижний правый угол, мы просто используем отрицательные значения для положения тени по осям x и y.

 .myElement {
    box-shadow: -2px -2px 2px # 666;
}

Используя значения xPosition и yPosition без размытия, мы можем создать тень блока со смещением, например:

 .myElement {
    тень коробки: 2px 2px 0 # 666;
}

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

.myElement {
    тень коробки: 0 0 0 2px # 666;
}

Хотите, чтобы тень вашего блока была размытой? Без проблем!

 .myElement {
    box-shadow: 0 0 5px 2px # 666;
}

Если вы хотите, чтобы ваша тень появлялась внутри вашего элемента, используйте ключевое слово inset. Положительные числа заставят тень появиться слева (на xPosition) и выше (на yPosition).

 .myElement {
    box-shadow: вставка 2px 2px 2px # 000;
}

В то время как отрицательные числа заставят тень появляться на правом и нижнем крае.

 .myElement {
    box-shadow: вставка -2px -2px 2px # 000;
}

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

 .myElement {
    box-shadow: вставка 0 25px 2px # 92baf4;
}

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

 .myElement {
    box-shadow: вставка 0 -25px 2px # 92baf4;
}

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

 .myElement {
    box-shadow: 2px 2px 2px # 666, вставка 0 -25px 2px # 92baf4;
}

Используя border-radius из последнего блога, мы можем объединить их, чтобы создать более закругленную кнопку.Это выглядит лучше, но тень будет иметь тот же радиус, что и у коробки

 .myElement {
    радиус границы: 8 пикселей;
    box-shadow: 2px 2px 2px # 666, вставка 0 25px 0 # 92baf4;
}

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

 .myElement {
    радиус границы: 8 пикселей;
    box-shadow: 2px 2px 2px # 666, вставка 0 60px 0 -36px # 92baf4;
}

Итак, какие браузеры поддерживают box-shadow? К счастью, больше, чем те, которые поддерживают изображение границы!

Все зеленое для всех браузеров — ну IE9 и выше.Он также поддерживается на мобильных устройствах, но если вы хотите использовать его на Android и iOS 3 и 4, вам необходимо добавить префикс -webkit-. Точно так же, если вы все еще поддерживаете Firefox 3.6, вам нужно добавить префикс -moz-.

Если вы создали какие-либо потрясающие эффекты тени коробки, дайте нам знать в комментариях!

Внимательный взгляд на CSS Box Shadow

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

Примеры

Ниже приведены три различных примера применения свойства CSS box-shadow к div .

Пример 1: Простая тень

Вот как можно сделать div едва уловимой серой тенью.

  box-shadow: 0 0 10px серый;

Пример 2: Внутренняя тень

Внутренняя тень может быть визуализирована с использованием значения свойства вставки .

  box-shadow:  вставка  0 0 10 пикселей;

`Пример 3: Смещение падающей тени`

В этом примере тень блока отбрасывается со смещением в сторону правого нижнего края блока с использованием горизонтального смещения и вертикального смещения 5 пикселей.

  box-shadow:  5px 5px  10px;

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

  box-shadow:  -5px -5px  10px;

Теперь, когда вы увидели несколько примеров CSS box-shadow в действии, давайте копнем глубже.

`Синтаксис`

Общий синтаксис свойства box-shadow выглядит следующим образом:

  box-shadow:  [вставка]   [горизонтальное смещение]   [вертикальное смещение]   [радиус размытия]   [расстояние распространения]   [цвет] ;

`Значения свойств CSS`

Свойство CSS box-shadow имеет шесть возможных значений:

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

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

Четыре значения свойств, горизонтальное смещение, вертикальное смещение, радиус размытия и расстояние распространения, должны использовать единицы длины CSS (например, пиксели, em,% и т. Д.).

Значение цвета должно быть единицей цвета CSS, например шестнадцатеричным значением (например, # 000000).

`Сводная информация о стоимости недвижимости`

Стоимость объекта	Обязательно?	Блок	Значение по умолчанию, если не указано
вставка	№	ключевое слово	Если вставка не указана, тень блока будет вне HTML-элемента.
смещение по горизонтали	Есть	длина	Нет значения по умолчанию. Это необходимо указать.
смещение по вертикали	Есть	длина	Нет значения по умолчанию. Это необходимо указать.
радиус размытия	№	длина	0
расстояние разнесения	№	длина	0
цвет	№	цвет	Равно свойству цвета элемента / элементов HTML, к которым применяется тень блока.

`вставка`

Если присутствует значение свойства ключевого слова вставки , тень блока будет помещена внутри элемента HTML.

  box-shadow:  inset  0 0 5px 5px оливковый;

Для сравнения, вот та же тень блока без свойства вставки:

  box-shadow: 0 0 5px 5px оливковый;

`смещение по горизонтали`

Значение смещения по горизонтали управляет положением тени блока по оси x.Положительное значение сдвинет тень блока вправо, а отрицательное значение - влево.

В следующем примере горизонтальное смещение установлено на 20 пикселей или удвоено значение вертикального смещения (которое установлено на 10 пикселей), поэтому тень в два раза шире по горизонтали.

  box-shadow:  20px  10px;

`смещение по вертикали`

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

В следующем примере вертикальное смещение имеет длину -20 пикселей или вдвое больше горизонтального смещения (10 пикселей), поэтому размер тени вдвое больше по вертикальной оси. Кроме того, поскольку значение отрицательное, расположение тени смещено в сторону верхней части поля.

  box-shadow: 10px  -20px ;

`радиус размытия`

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

Радиус размытия не является обязательным. Если вы не укажете его, по умолчанию будет установлено значение 0. Кроме того, оно не может иметь отрицательного значения, в отличие от горизонтального и вертикального смещения.

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

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

  box-shadow: 5px 5px  20px ;

`расстояние разнесения`

Расстояние распространения увеличивает или уменьшает тень блока во всех направлениях.Если он имеет положительное значение, тень блока будет увеличиваться в размерах со всех сторон. Если он имеет отрицательное значение, тень блока будет сжиматься со всех сторон.

Обратите внимание на то, что из-за положительного расстояния распространения (10 пикселей) со всех сторон поля появляется падающая тень 10 пикселей, потому что нет горизонтального и вертикального смещения:

  box-shadow: 0 0 10px  5px ;

При отрицательном расстоянии распространения тень сжимается со всех сторон. В следующем примере тень меньше ширины блока из-за отрицательного расстояния распространения и отсутствия горизонтального смещения:

  box-shadow: 0 10px 10px  -5px ;

`цвет`

Как вы уже можете понять по названию, значение цвета задает цвет тени блока.Его можно указать с помощью любой цветовой единицы CSS. Указать значение цвета необязательно.

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

   цвет: красный; 
box-shadow: 0 0 10px 5px;

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

   цвет: красный; 
box-shadow: 0 0 10px 5px  синий ;

`Множественные тени коробки`

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

Синтаксис следующий:

 box-shadow:  [свойства тени блока 1] ,  [свойства тени блока 2] ,  [свойства тени блока n] ;

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

В следующем примере есть две тени блока: красная в верхнем левом углу и синяя в правом нижнем углу.

  box-shadow:  -5px -5px 30px 5px красный ,
               5px 5px 30px 5px синий ;

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

Свойство CSS box-shadow хорошо поддерживается браузерами. Используя Internet Explorer в качестве наименее распространенного знаменателя, свойство поддерживается с IE 9 (выпущенного в 2011 году).

`Примеры теней CSS-боксов`

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

Посмотреть демо

`Связанное содержимое`

`CSS3 Box Shadow, только сверху / справа / снизу / слева и все · GitHub`

CSS3 Box Shadow, только сверху / справа / снизу / слева и все · GitHub

Мгновенно делитесь кодом, заметками и фрагментами.

CSS3 Box Shadow, только верх / правый / нижний / левый и все




	Box Shadow

	<стиль>
	.ящик {
	высота: 150 пикселей;
	ширина: 300 пикселей;
	поле: 20 пикселей;
	граница: сплошная 1px #ccc;
	}

	. Верх {
	box-shadow: 0 -5px 5px -5px # 333;
	}

	.правый {
	box-shadow: 5px 0 5px -5px # 333;
	}

	. Низ {
	box-shadow: 0 5px 5px -5px # 333;
	}

	.левый {
	box-shadow: -5px 0 5px -5px # 333;
	}

	. Все {
	box-shadow: 0 0 5px # 333;
	}

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

`CSS Изображение с тенью`

`Изображения с эффектом тени`

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

`Изображение с тенью CSS`

`Исходный код`

`Изображение с закругленными углами и CSS Shadow`

`Исходный код`

.img { ширина: 400 пикселей; высота: 200 пикселей; граница: 2px solid #fff; фон: url (img / tiger.png) без повтора; -moz-box-shadow: 10px 10px 5px #ccc; -webkit-box-shadow: 10px 10px 5px #ccc; box-shadow: 10px 10px 5px #ccc; -moz-border-radius: 25 пикселей; -webkit-border-radius: 25 пикселей; радиус границы: 25 пикселей; }

`Закругленные изображения с тенью CSS`

`Исходный код`

.img { ширина: 190 пикселей; высота: 190 пикселей; граница: 2px solid #fff; фон: url (img / duck.png) без повтора; -moz-box-shadow: 0px 6px 5px #ccc; -webkit-box-shadow: 0px 6px 5px #ccc; box-shadow: 0px 6px 5px #ccc; -moz-border-radius: 190 пикселей; -webkit-border-radius: 190 пикселей; радиус границы: 190 пикселей; }

`Изображения со вставкой CSS Shadow`

`Исходный код`

.img { ширина: 400 пикселей; высота: 200 пикселей; граница: 2px solid #fff; фон: url (img / tiger.png) без повтора; -moz-box-shadow: вставка 10px 10px 50px #fff; -webkit-box-shadow: вставка 10px 10px 50px #fff; box-shadow: вставка 10px 10px 50px #fff; }

`Изображение за текстом`

Вы можете писать текст поверх магов в CSS.

`Исходный код`

Дикая жизнь ....

`Фигурное изображение с тенью CSS`

`Исходный код`

.img { ширина: 270 пикселей; высота: 150 пикселей; граница: 2px solid #fff; фон: url (img / fish.png) без повтора; box-shadow: 0px -10px 30px #ccc; белый цвет; размер шрифта: 50 пикселей; граница-верх-левый-радиус: 75 пикселей; граница-верх-правый-радиус: 75 пикселей; граница-нижний-левый-радиус: 0 пикселей; граница-нижний-правый-радиус: 0px; }

`Как добавить тень блока к блокам`

Эй,

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

Надеюсь, это поможет.

С уважением, Врунда Канзара

Спасибо за ответ!

Есть довольно много разных UAG-блоков / элементов, в которые я хотел бы добавить эффект box-shadow. К сожалению, я не знаю CSS-классы UAG-блоков для использования пользовательского CSS.

Не могли бы вы помочь мне добавить box-shadow в некоторые из наиболее часто используемых UAG-блоков: например: SECTION, ADVANCED COLUMNS, INFO BOX.

Было бы здорово, если бы box-shadow мог быть настраиваемым свойством в следующей версии UAG-plugin.

Спасибо за отличную работу !!!

Абу Марьям

Этот ответ был изменен 2 года назад Абу Марьям.

Привет,

Разобрался как это сделать. Для тех, кто хочет знать, вот как я это сделал:

- В каждом блоке есть расширенная опция (внизу) для добавления дополнительного класса CSS. - Выберите имя для дополнительного класса CSS (например, uag-new-class). - В админке WordPress перейдите в Внешний вид >> Настройщик. - В настройщике (внизу) добавьте класс Extra CSS как:

uag-new-class { box-shadow: 5px 5px 5px; }

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

Было бы здорово, если бы box-shadow мог быть настраиваемым свойством в следующей версии UAG-plugin.

Большое спасибо! Действительно отличный плагин !!!

Абу Марьям

Привет @ abu-maryam,

Я рад, что вы нашли решение. Я добавлю запрос функции в наш список задач. Благодарим вас за терпение и усилия, чтобы довести это до нас.

Кроме того, предоставленное вами решение является очень правильным.

С уважением, Врунда Канзара

Большое спасибо !!!

Я действительно забыл точку (.) в стиле CSS. Должно быть:

. uag-new-class { box-shadow: 5px 5px 5px; }

Привет, Абу Марьям

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

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

Синтаксис:

 box-shadow: h-offset v-offset цвет размытия;

значения box-shadows:

h-offset: Требуется и используется для установки положения тени по горизонтали.Положительное значение используется для установки тени на правой стороне поля, а отрицательное значение используется для установки тени на левой стороне поля.
v-offset: Требуется и используется для установки положения тени по вертикали. Положительное значение используется для установки тени внизу для блока, а отрицательное значение используется для установки тени над блоком.
blur: Это необязательный атрибут, работа этого атрибута заключается в размытии тени блока.
spread: Используется для установки размера тени.Размер спреда зависит от его значения.
цвет: Необязательный атрибут, используемый для установки цвета тени.

Пример 1: В этом примере устанавливается тень блока в нижней части поля.

< html >

< 000 0005 000 00050005 0004 >

Box-shadow Property

title >

000 000 000 000 000 9000 h2 {

выравнивание текста: по центру;

фон: зеленый;

padding-top: 60px;

цвет: белый;

ширина: 500 пикселей;

высота: 130 пикселей;

box-shadow: 0 10px 10px синий;

}

стиль >

головка >

000 000

< h2 > GeeksForGeeks h2 >

корпус >

000 000 000 000 000 000 000 000 000

Вывод:

Пример 2: В этом примере устанавливается тень блока в левой части поля.

< html >

< 000 0005 000 00050005 0004 >

Box-shadow Property

title >

000 000 000 000 000 9000 h2 {

выравнивание текста: по центру;

фон: зеленый;

padding-top: 60px;

цвет: белый;

ширина: 500 пикселей;

высота: 130 пикселей;

box-shadow: -10px 0px 10px синий;

}

стиль >

головка >

000 000

< h2 > GeeksForGeeks h2 >

корпус >

000 000 000 000 000 000 000 000 000 000 000

Вывод:

вставка: По умолчанию тень генерируется за пределами поля, но значение вставки можно использовать для создания тени внутри поля.

Пример 3: В этом примере создается тень внутри коробки.

< html >

< 000 0005 000 00050005 0004 >

Box-shadow Property

title >

000 000 000 000 000 9000 h2 {

выравнивание текста: по центру;

фон: зеленый;

padding-top: 60px;

цвет: белый;

ширина: 500 пикселей;

высота: 130 пикселей;

box-shadow: 0px 10px 20px синяя вставка;

}

стиль >

головка >

000

< h2 > GeeksForGeeks h2 >

корпус >

000 000 000 000 000 000 000 000 000

Выход:

.

Category Css