Blur — Помогите новичку в CSS


Содержание

Кроссбраузерный эффект размытия изображения с помощью CSS

По своему действию blur CSS очень похож на фильтр « Размытие по Гауссу ». Теперь мы можем достичь такого же эффекта на веб-страницах.

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

Обратите внимание на IE 9 +

Когда в Microsoft решили довести Internet Explorer до современных веб-стандартов, это привело к потере многих собственных CSS значений , включая фильтры DX , которые поддерживались в этом браузере, начиная с IE 5.5 . К сожалению, их нельзя было заменить альтернативными из CSS3 , что поставило IE9 , 10 и 11 в безвыходное положение. На момент написания этой статьи разработчики, которым нужны изображения с точно таким же эффектов размытием, используют в качестве кроссбраузерного решения скрипт StackBlur , работающий на основе canvas .

Затем эффект размытия, примененный через класс:

SVG фильтр размытия

На данный момент CSS blur background работает в Google Chrome , Safari ( мобильной и настольной версиях ) и Firefox 35+ . Для получения поддержки более ранних версий Firefox , нужно применить фильтр SVG :

Сохраните файл под названием blur.svg , а CSS замените на:

Поддержка старых версий IE

Для получения такого же эффекта в IE 4 — 9 , нужно использовать старый фильтр DX от Microsoft . Наш класс будет выглядеть следующим образом:

Выключение эффекта

Если хотите сфокусировать изображение, нужно при следующем вызове CSS filter blur установить для него значение none. В данном случае я изменяю поведение фильтра при наведении курсора мыши через :hover :

При наведении курсора в браузере ( кроме IE ) вы увидите, что размытое изображение постепенно становится резче благодаря CSS-переходу .

Обрезка краев изображения

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

  1. Если у вас изображение, у которого все края одного цвета, можно установить цвет фона ( background-color ) в или элемент-контейнер такого же цвета;
  2. Используйте свойство clip , чтобы обрезать края изображения. Clip всегда указывается в следующем порядке.

Для изображения, размером 367 пикселей в ширину, 459 пикселей в высоту и эффект blur CSS 2 пикселя, Clip будет « сформулирован » так:

Обратите внимание, что Clip применяется только к элементам, имеющим position: absolute . Если нужно получить поддержку в IE8 и более ранних версиях, не забудьте убрать px на конце значений.

Оберните изображение в элемент-контейнер (например

Размытый текст

Этот фильтр можете пока использовать и для размытия текста.

Данная публикация представляет собой перевод статьи « Cross-browser Image Blur with CSS » , подготовленной дружной командой проекта Интернет-технологии.ру

Кроссбраузерный эффект размытия(blur) изображения в css

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

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

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

7 комментариев

Естественно первым делом кинулся проверять кроссбраузерность метода в IE, и, как всегда, облом. Не работает метод в Эксплорере, почему? А так хотелось….

В IE9 фильтр работает, за более ранние версии ничего сказать не могу… В IE отвечающий за размытие параметр — filter: progid:DXImageTransform.Microsoft.Blur(parameters);
Тут можно более подробно почитать за Blur Filter в Internet Explorer.

Да, в статье все красиво написано, у Вас в примере все правильно написано, но в IE 10 (Win 8 x64) пример, однако, не работает.
Вот скриншот
http://i072.radikal.ru/1411/82/d9cd02cc5e98.jpg
Я не вредничаю, а только лишь хочу добиться кроссбраузерности, так как эффект достоен внимания и хочется его использовать.

И точно, в IE9 работало лишь потому, что в IE10 уже фильтры DX больше не поддерживаются.
Пришлось чуток поморочить голову, но не зря. Решение для достижения эффекта размытия в IE10 нашел в использовании SVG фильтров.
Демо пример (скрин не прилагаю) — http://jsfiddle.net/s9ek8bf6/
Возможно Вам будет интересно глянуть и на такое решение, ну и возможно поможет в дальнейшем еще и такой пример.
Спасибо за комментарии и замечания, этот момент действительно достоин внимания.

�� Действительно работает. Данная картинка, я так понял, обернута в svg. Вот только как теперь к данным элементам можно променять эффект hover?

Эффект размытия blur средствами CSS

В интернете много решений, я попробовал, наверное, все :) Основная проблема — не удаётся достичь кросс-браузерности. Как всегда, отличился IE.

Для всех новых браузеров, кроме IE, для включения эффекта размытия достаточно подключить такой стиль :

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

Чтобы задействовать эффект в IE, мы начинаем танцы с бубном и хороводы с медведями. Вот такая комбинация работает для нормальных браузеров и IE версий ниже 10:

Как известно, в поздних версиях они (парни из майкрософт) отказались от поддержки собственных извращений. Было бы логично, что они включили поддержку того, что описывает спецификация CSS3, но нет.

А звуки бубна влекут нас дальше. Попробуем задействовать фильтры, используя svg формат. Для этого мы создаём файл filters.svg следующего содержания:

А дальше используем вот такой CSS стиль:

Т.е. мы ссылаемся на svg-файл, уточная id, используемого фильтра. Такой вариант сработал только для FF. Я полагаю, что в IE какая то проблема с определением местоположения файла, так как с SVG форматом он должен дружить очень хорошо. Чтобы убедиться в этом, разместим svg внутри html кода, а картинку внутри svg (яйцо в утке, утка в сундуке….).

Для конкретики, я использовал вот такую картинку с красивым видом на закат над озером.

И конкретно для этой картинки получим следующий кусочек HTML:

5 правок в CSS, которые помогут новичку улучшить внешний вид своего блога


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

Перед началом работ понадобится.

  • тема с опциями для настройки CSS или плагин для настройки таблицы стилей
  • доступ к правке таблицы стилей style.css
  • дочерняя тема

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

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

Правка стилей внутри настроек темы

У некоторых тем есть подключаемые опции для CSS, которые можно активировать в режиме администрирования сайта через панель администратора. Для этого надо перейти в подменю Внешний вид → Настроить .

Цукерберг рекомендует:  Профессия - По вопросу докупки проффесии.

Иногда такие настройки внесены отдельным пунктом меню, а иногда — как заголовок » Edit CSS » в специальном разделе.

Плагин для настройки CSS

Если у вашей темы нет такого раздела с настройками, используйте плагин под названием Jetpack. У него есть встроенных редактор таблицы стилей. Придется либо подключить этот плагин к существующей учетной записи на WordPress.com, либо создать новую учетку, чтобы воспользоваться данным инструментом.

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

После установки и активации плагина редактировать внешний вид можно в разделе Внешний вид → Edit CSS .

Создаем дочернюю тему

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

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

Можно также создать папку для дочерней темы и назвать ее именем основной темы с приставкой дочерней темы, поместить туда файл style.css и импортировать код основной таблицы стилей:

Для работ с новой дочерней темой почитайте практическое руководство. После настройки всех параметров перейдем к правке кода.

1. Меняем цвет фона

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

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

Для тем без оформления в полную ширину в тело страниц встраивается простой цвет фона:

Для определения нужного цвета используйте инструмент под названием W3Schools HTML color picker либо установите расширение для Chrome либо Firefox.

Для своего примера я выбрал цвет фона #477C67 :

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

Если вы хотите настроить фоновое изображение для блога, загрузите сначала нужную вам картинку. Убедитесь, что разрешение картинки и параметры блога совпадают. Путь к фоновому изображению может быть таким: » wp-content/uploads/2014/01/IMAGE.jpg «

В итоге должно получиться вот что:

Картинка остается статичной даже при прокрутке.

2. Улучшаем читаемость текста

Иногда вам попадается отличная тема, но с ней есть небольшая проблема. Шрифт у нее слишком маленький. Но мы сейчас это исправим.

Используйте этот код в вашем файле style.css и проблемы со шрифтом решатся.

Подходящий размер шрифта для вашего блога — 14-16 пикселей. Избегайте 12 пикселей для шрифта. Крупный шрифт сделает ваш контент более читаемым и профессиональным. Поправить в коде надо вот что:

В итоге получаем такой код:

3. Меняем внешний вид ссылок

Смена цвета ссылок — следующий шаг, и настроить это можно с помощью следующих параметров:

Берем к примеру цвет #BA2323 и вот что получаем:

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

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

4. Меняем внешний вид заголовков

Заголовок типично ставится h1 , а подзаголовки — h2 . Если вам надо поставить свой цвет и параметр для заголовка, можно внести несколько правок для конкретного поста. Для этой настройки надо указать дополнительно параметр, и вот как.

Находим стиль, соответствующий нашему заголовку » some-style «. Редактировать надо следующую часть кода:

Меняем на голубой #5CBDBD :

Для редактирования стилей надо править параметр вместо some-style на h1<> или h2<> или h3<> .

5. Изменяем цветовую схему виджетов

Один из простейших способов редактировать виджет — дополнение цветами. Править надо секцию, начинающуюся с widget-title . Тут можно установить цвет для виджета в дочерней теме:


Заключение

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

Источник:code.tutsplus.com

Насколько полезным был этот пост?

Нажмите на звезду, чтобы оценить этот пост!

Средний рейтинг: 4.8 / 5. Количество голосов: 4

Фильтры в CSS: размытие, оттенки серого, яркость и много других эффектов в CSS!

Дата публикации: 2020-08-03

От автора: фильтры изначально входили в спецификацию SVG. Позже люди поняли, что это очень полезный инструмент, и W3C начали работу по добавлению некоторых распространенных фильтров в CSS. CSS фильтры – довольно мощный и простой инструмент. С их помощью можно делать размытие, изменять яркость или насыщенность изображений и т.д. Фильтры можно использовать как отдельно, так и в комбинациях.

Для применения фильтра необходимо использовать следующий синтаксис:

Давайте коротко пройдемся по всем фильтрам.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Яркость

С помощью данного фильтра можно управлять яркостью изображений. В качестве параметра принимается значение, большее или равное нулю. Если задать значение 0%, то мы получим полностью черное изображение. Точно так же значение 100% даст нам исходное изображение. Для осветления изображения можно задать значение более 100%. К примеру, значение 300% сделает изображения в 3 раза светлее:

Контраст

С помощью данного фильтра можно управлять контрастом изображений. Как и яркость, тут принимается значение, большее или равное нулю. Фильтр контролирует разницу между светлыми и темными частями изображения в CSS. То есть значение 0% даст нам серое изображение. Значение 100% даст нам исходное изображение, а значения выше 100% будут увеличивать контраст изображения:

Оттенки серого

Из названия ясно, что фильтр помогает делать изображение черно-белым. Фильтр постепенно конвертирует все цвета изображений в оттенки серого. Значение 0% не окажет никакого эффекта на изображение, а 100% сделает изображение полностью черно-белым. Отрицательные значения не принимаются.

Насыщенность

Фильтр управляет насыщенностью цветов изображений. Значение 0% уберет все цвета с изображения, а значение выше 100% добавит контрастности. На 100% мы видим оригинальное изображение. Отрицательные значения не принимаются.

Сепия

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

Поворот цвета

Фильтр изменяет все цвета изображений. Угол поворота цветов зависит от заданного параметра. При значении 0deg изображение остается прежним. У данного фильтра нет максимального значения, однако выше 360deg эффект начинает повторяться. То есть значения 90deg и 450deg дадут одинаковый результат.

Инверсия

Фильтр инвертирует все цвета изображений. Сила инверсии зависит от параметра. Значение 0% никак не повлияет на изображение, а 100% полностью его инвертирует.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Размытие

Фильтр применяет к изображениям размытие по Гауссу. Цвета начинают перемешиваться и наползать друг на друга. Передаваемый параметр радиуса задает количество пикселей на экране, которые будут смешиваться. Чем больше значение, тем сильнее размытие. Фильтр принимает значения в любой форме, кроме процентов.

Прозрачность

Фильтр добавляет прозрачности изображениям. На 100% изображение будет полностью непрозрачным, а при 0% полностью прозрачным. Фильтр работает точно так же, как известное свойство opacity, разница только в производительности. Свойство filter использует аппаратное ускорение в некоторых браузерах, что может повысить его производительность.

Отбрасываемая тень

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

Все фильтры до этого момента были довольно общими, хотя и полезными. Однако вашему проекту может потребоваться что-то более специфичное. Если ни один из фильтров выше вам не подошел, вы можете создать свой SVG фильтр и через id передать его в фильтр url().

Объединение и анимация фильтров

Для получения различных эффектов можно объединять несколько фильтров. В большинстве случаев порядок фильтров не имеет значения, однако применяются они в том порядке, в котором они прописаны в CSS, и некоторые фильтры переписывают другие. К примеру, если использовать фильтр sepia после grayscale, то мы получим сепию и наоборот. Фильтры поддаются анимации. Если правильно все сделать, можно добиться интересного эффекта. Разберем пример ниже:

Цукерберг рекомендует:  Обучение - Обучение программированию.

В коде выше на разных этапах анимации применяются разные фильтры. Результат можно посмотреть в демо ниже:

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

Замечания

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

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

Свойство filter поддерживается во всех основных браузерах. В Chrome и Opera нужно добавлять префикс. Нет поддержки в IE, хотя Edge частично поддерживает фильтр. Частичная поддержка означает, что Edge поддерживает все фильтры, кроме url().

Заключение

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

Автор: Gajendar Singh

Редакция: Команда webformyself.


Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Прозрачные блоки с размытым фоном CSS3

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

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

ZorNet-Заголовок

html <
background: url(http://i.playground.ru/i/43/79/90/00/file/content/vf2ho2jn.jpg) no-repeat 50% fixed;
background-size: cover;
position: relative;
height: 2000px;
overflow-y: scroll;
>

.apodiv * <
position: relative;
>

body <
background: inherit;
>

.apodiv <
background: inherit;
position: relative;
width: 40%;
margin: 10vh auto 15vh;
border-radius: 15px;
border: 10px solid rgba(245, 240, 240, 0.15);
box-shadow: 1px 1px 4px rgba(14, 14, 14, 0.37);
z-index: 5;
cursor: move;
padding: 10px;
min-height: 300px;
color: #f5ecec;
text-shadow: 0 1px 0 #232222;
>
.apodiv:before <
content: »;
position: absolute;
top: 0;
left:0;
right:0;
bottom:0;
background: inherit;
filter: blur(5px);
filter: url(#blur);
>

svg <
height:0;
width: 0;
position: absolute;
z-index: 0;
>

Кроссбраузерный эффект размытия(blur) изображения в css

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

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

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

7 комментариев

Естественно первым делом кинулся проверять кроссбраузерность метода в IE, и, как всегда, облом. Не работает метод в Эксплорере, почему? А так хотелось….

В IE9 фильтр работает, за более ранние версии ничего сказать не могу… В IE отвечающий за размытие параметр — filter: progid:DXImageTransform.Microsoft.Blur(parameters);
Тут можно более подробно почитать за Blur Filter в Internet Explorer.

Да, в статье все красиво написано, у Вас в примере все правильно написано, но в IE 10 (Win 8 x64) пример, однако, не работает.
Вот скриншот
http://i072.radikal.ru/1411/82/d9cd02cc5e98.jpg
Я не вредничаю, а только лишь хочу добиться кроссбраузерности, так как эффект достоен внимания и хочется его использовать.

И точно, в IE9 работало лишь потому, что в IE10 уже фильтры DX больше не поддерживаются.
Пришлось чуток поморочить голову, но не зря. Решение для достижения эффекта размытия в IE10 нашел в использовании SVG фильтров.
Демо пример (скрин не прилагаю) — http://jsfiddle.net/s9ek8bf6/
Возможно Вам будет интересно глянуть и на такое решение, ну и возможно поможет в дальнейшем еще и такой пример.
Спасибо за комментарии и замечания, этот момент действительно достоин внимания.

�� Действительно работает. Данная картинка, я так понял, обернута в svg. Вот только как теперь к данным элементам можно променять эффект hover?

Как размыть (css) div без размытия дочернего элемента

Если я не хочу размывать кнопку, что мне нужно сделать?

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

Существует альтернативное решение: создайте два элемента внутри родительского div — один div для фона и другой div для содержимого. Установите position:relative в родительский div и установите position:absolute; top:0px; right:0px; bottom:0px; left:0px; (или установите высоту/ширину на 100%) дочернему элементу для фона. Используя этот метод, содержимое div не будет влиять на свойства фона.

Если вы видите маскировку фона над контентом, используйте свойство z-index , чтобы отправить фон за второй контент div .

15 эффектов для изображений (используем только CSS3)

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

Установка

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

* <
-webkit-box-sizing : border-box ;
-moz-box-sizing : border-box ;
-ms-box-sizing : border-box ;
box-sizing : border-box ;
>

body <
background : #333 ;
>

.pic <
border : 10px solid #fff ;
float : left ;
height : 300px ;
width : 300px ;
margin : 20px ;
overflow : hidden ;

-webkit-box-shadow : 5px 5px 5px #111 ;
box-shadow : 5px 5px 5px #111 ;
>

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

Масштабирование и панорамирование

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

Увеличение

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

Как Вы можете видеть здесь мы используем два класса pic и grow . Базовый pic который задает размер изображения и границы. Теперь давайте посмотрим, CSS.

/*GROW*/
.grow img <
height : 300px ;
width : 300px ;

-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.grow img : hover <
width : 400px ;
height : 400px ;
>

Само по себе изображение 400х400px, но мы его подгоняем под размеры блока 300x300px и указываем transition свойство, означающее что другие свойства будут изменяться плавно в течении одной секунды, подробно про transition. Так как нам необходимо увеличение изображение то при наведении оно возвращается к исходным размерам.

Уменьшение


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

/*SHRINK*/
.shrink img <
height : 400px ;
width : 400px ;

-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.shrink img : hover <
width : 300px ;
height : 300px ;
>

Горизонтальное смещение

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

Изображение имеет размер 600х300px.

/*SIDEPAN*/
.sidepan img <
margin-left : 0px ;
-webkit-transition : margin 1s ease ;
-moz-transition : margin 1s ease ;
-o-transition : margin 1s ease ;
-ms-transition : margin 1s ease ;
transition : margin 1s ease ;
>

.sidepan img : hover <
margin-left : -200px ;
>

Все с помощью того же свойства transition мы плавно меняем, но уже свойство margin . При наведении смещаем картинку влево на 200px.

Вертикальное смещение

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

Изображение имеет размер 300х600px.

/*VERTPAN*/
.vertpan img <
margin-top : 0px ;
-webkit-transition : margin 1s ease ;
-moz-transition : margin 1s ease ;
-o-transition : margin 1s ease ;
-ms-transition : margin 1s ease ;
transition : margin 1s ease ;
>

Цукерберг рекомендует:  Вакансии ООО Пиком

.vertpan img : hover <
margin-top : -200px ;
>

Теперь смещаем вверх на 200px.

Трансформация

Повышаем сложность создаваемых эффектов. Начнем с простого наклона, а дальше больше. Использоваться будет свойство transform — еще эффект с помощью transform.

Наклон

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

/*TILT*/
.tilt <
-webkit-transition : all 0.5s ease ;
-moz-transition : all 0.5s ease ;
-o-transition : all 0.5s ease ;
-ms-transition : all 0.5s ease ;
transition : all 0.5s ease ;
>

.tilt : hover <
-webkit-transform : rotate ( -10deg ) ;
-moz-transform : rotate ( -10deg ) ;
-o-transform : rotate ( -10deg ) ;
-ms-transform : rotate ( -10deg ) ;
transform : rotate ( -10deg ) ;
>

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

Поворот

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

/*MORPH*/
.morph <
-webkit-transition : all 0.5s ease ;
-moz-transition : all 0.5s ease ;
-o-transition : all 0.5s ease ;
-ms-transition : all 0.5s ease ;
transition : all 0.5s ease ;
>

.morph : hover <
border-radius : 50% ;
-webkit-transform : rotate ( 360deg ) ;
-moz-transform : rotate ( 360deg ) ;
-o-transform : rotate ( 360deg ) ;
-ms-transform : rotate ( 360deg ) ;
transform : rotate ( 360deg ) ;
>

Суть заключается в том, что для классы morph вращается на 360 градусов при наведении курсора мыши. В это же время, border-radius принимает значение 50%, в результате чего получается круг.

Фокусировка

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

/*FOCUS*/
.focus <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.focus : hover <
border : 70px solid #000 ;
border-radius : 50% ;
>

При наведении курсора, увеличиваем толщину границы с 10 до 70px, и как в предыдущем примере border-radius в 50%.

Фильтры изображений

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

Размытие

Первый эффект, который мы рассмотрим это размытие. Здесь с кодом все еще проще, одна строка.

/*BLUR*/
.blur img <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.blur img : hover <
-webkit-filter : blur ( 5px ) ;
>

Как вы можете видеть, мы используем -webKit-filter , с размытием 5px.

Черно-белое изображение

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

/*B&W*/
.bw <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.bw : hover <
-webkit-filter : grayscale ( 100% ) ;
filter : grayscale ( 100% ) ;
>

Здесь я установил оттенки серого ( grayscale ) со значением 100%. Процент оттенков серого можно понизить.

Осветление

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

/*DARKEN*/
.brighten img <
-webkit-filter : brightness ( 65% ) ;
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>


.brighten img : hover <
-webkit-filter : brightness ( 145% ) ;
>

Изначально яркость делаем 65%, а при наведении устанавливаем значение 145% т.е. ярче на 45% от нормального состояние картинки.

Сепия

Еще один ретро эффект) перевод цветного изображения в тональность сепия.

/*SEPIA*/
.sepia img <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.sepia img : hover <
-webkit-filter : sepia ( 100% ) ;
>

Значения фильтров сепия и оттенки серого указаны в процентах, где 100% является максимальным. Если не указывать число то 100% будут применены по умолчанию.

Контрастность

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

/*CONTRAST*/
.contrast img <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.contrast img : hover <
-webkit-filter : contrast ( 185% ) ;
>

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

Оттенок изображения

Данный фильтр изменяет цвета картинки в зависимости от заданного угла.

/*HUE_ROTATE*/
.hue-rotate img <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.hue-rotate img : hover <
-webkit-filter : hue-rotate ( 65deg ) ;
>

Значение оттенка изображения задается в градусах от 0-360, где 0 это нормальное значение.

Инверсия

Еще один Webkit фильтр изображений — это инверсия.

/*INVERT*/
.invert img <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.invert img : hover <
-webkit-filter : invert ( 100% ) ;
>

Данный фильтр инвертирует цвета. Значение задается в % от 0-100.

Также мы можем объединить фильтры в одном правиле. Получается более комплексный эффект для изображения. Например сделать картинку черно-белой и добавить контрастности:

Прозрачность

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

/*OPACITY*/
.opacity img <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.opacity img : hover <
-webkit-filter : opacity ( 25% ) ;
>

Значение прозрачности в фильтре задается опять таки процентами, где 100% это не прозрачно, а 0% полностью прозрачно. Особенность использования прозрачности заключается в том, что его можно использовать как обычное свойство CSS, а не только как фильтр. Соответственно и работает такой эффект во всех браузерах, даже в IE9+.

При таком варианте использование значение берется из интервала от 1 до 0.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или добавляйте в круги на Google+. Не забывайте оставлять комментарии, спасибо!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

Использование размытия движения в анимациях CSS3

4 апреля 2015 | Опубликовано в css | 1 Комментарий »

Переходы и анимации CSS3 очень полезны, но нередко они слишком идеальны. Обращали ли вы внимание, что компьютерные игры выглядят покадрово при 25-30 кадрах в секунду, а фильмы выглядят естественно при том же количестве кадров? Обычная видеокамера захватывает каждый кадр в течение 0,04 секунд. Все, что движется быстрее, выглядит слегка размыто. А игра, идеально создающая каждый кадр, без размытия движения может выглядеть несколько странно.

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

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

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

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

Такая запись означает:

  • Отступ на -15px
  • Размытие радиусом 10px
  • Расстояние распространения -5px

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

Полное определение ключевых кадров передвигает элемент слева направо первые 50% анимации, после чего передвигает налево вторую половину времени. Таким образом, наибольшие значения свойств тени текста и тени блока заданы на 25% и 75% соответственно:

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

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

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

Этот эффект работает во всех новых версиях браузеров:

  • Internet Explorer с 10 версии
  • Firefox
  • Chrome, Safari и Opera от 15 версии, хотя для них потребуется приставка производителя -webkit для всех свойств анимаций и трансформаций.

Единственное несколько странное поведение обнаруживается в браузере Internet Explorer версии 10. Браузер не показывает тени, если начальные и конечные значения не заданы однозначным образом, например:

Другими словами, браузер Internet Explorer версии 10 не будет анимировать, если значение начала задано как box-shadow: none. Возможно, это относится и к другим свойствам CSS, так что перед использованием стоит проверить.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих