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

Блог веб-разработки статьи | видеообзоры | исходный код

filter css

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

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

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

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

<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
    <meta charset="utf-8"/>
    <title>Свойство filter</title>
</head>
<body>
<style>
img{
    transition:all 0.3s linear;
    cursor:pointer;
    filter:sepia();
}
    img:hover{
        filter:none;
    }


</style>
<div>
    <img src="yandexMoney.jpg" alt="Yandex money"/>
</div>
</body>
</html>

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

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

Надо сказать что это далеко не единственное значение или функция которую может применять свойство filter. Мы рассмотрим еще одно значение blur(), это как вы уже догадались размытие .

<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
    <meta charset="utf-8"/>
    <title>Свойство filter</title>
</head>
<body>
<style>


    .black{
        height:50px;
        width:50px;

        filter:blur(5px);

        background:black;
        z-index:1000;
    }

</style>
<div>

</div>
<div class="black">
    <img src="yandexMoney.jpg" alt="Yandex money"/>
</div>
</body>
</html>

Здесь мы видим что для наше изображение стало размазанным, это и есть действие работы функции blur(5px), в ней нужно указывать радиус размытия.

Размытие часто применяют к фоновым изображениям. Вот в принципе и все что я хотел вам рассказать очень надеюсь что эта короткая статья была для вас содержательна и полезна.Удачи!

Оцените статью

Еще статьи

Агрегатные функции в SQL

datalist HTML

Javascript window

JavaScript cookie

CSS валидация

камера html

Скриншоты python

FileSystem api

linux systemd

Комментарии

Проверочный код

В данном разделе пока нет комментариев!

История

    ПОДПИСКА

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

    НОВОСТИ

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