» » Нокаут и другие эффекты css для blogger

Нокаут и другие эффекты css для blogger

Здравствуйте.
Как сделать необычную форму изображения или написать текст на фоне картинки (что бы сквозь буквы просматривался фон)?
Сегодня хочу рассказать об интересных трюках css - маске и отсечении. Это наиболее часто используемые эффекты.
Сlipping (отсечение) - выделяет элемент, который будет видимым. Всё остальное удаляется. Мasking (маскировка) -  элементы скрытые под маской будут полностью или частично прозрачны.
Есть три способа сделать маскирование: задействовать изображение с прозрачными частями (png), использовать CSS градиент или SVG-элементы.
В статье приведу примеры эффектов, которые можно использовать в своих целях, поменяв в коде нужные параметры.
Любой из кодов вставляется в статью в режиме хтмл в редакторе блога или в гаджет. Сразу отмечу, не каждый браузер понимает эти эффекты.

Эффекты CSS

1. Нокаут
<div class="backdrop">
<div class="ваш текст">
Привет</div>
</div>
<style>
.backdrop {
    background: url("ваша картинка") center;
    background-size: contain;
    margin: auto;
    width: 75vw;  /* размер картинки, больше значение - больше картинка */
}
.text {
    color: white;
    border: 4px solid;
    background: rgb(59, 2, 6);
    mix-blend-mode: multiply;
    font: bolder 12vw 'Alfa Slab One';
    text-align: center;
    margin: 0;
}
</style>

2. Нокаут на белом фоне
Нокаут на белом фоне
Код:
<div class="text">
Текст</div>
<style>.text{
    font: bolder 12vw 'Alfa Slab One';
    text-align: center;
    margin: 0;
    background: url("картинка") center;
    background-size: contain;
    margin: auto;
    width: 75vw;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}</style>

3. Нокаут с эффектом размытия
Нокаут с эффектом размытия
Код:
<div class="backdrop">
    <p class="text">текст</p>
</div>
<style>.backdrop {
    background: url("картинка") center;
    background-size: contain;
    margin: auto;
    width:   75vw;
}
.text {
    text-shadow:  0 0 9px white;
    color: white;
    border: 4px solid;
    background: rgb(59, 2, 6);
    mix-blend-mode: multiply;
    font: bolder 12vw 'Alfa Slab One';
    text-align: center;
    margin: 0;
}</style>
4. Нокаут эффектом наложения:
Нокаут с эффектом размытия
Код:
<div class="backdrop">
<div class="text screen">
текст</div>
</div>
<style>.backdrop {
    background: url("картинка") center;
    background-size: contain;
    margin: auto;
    margin-top: 40px;
    width: 75vw;
}

.text {
    font: bolder 12vw "Alfa Slab One";
    text-align: center;
    margin: 0;
    border: 4px solid;
}.screen {
    color: black;
    mix-blend-mode: screen;
    background-color: rgba(244, 220, 211, 1);
}</style>
Оранжевым в коде выделила цвет наложения.
5. Нокаут с затемнением
Нокаут с затемнением
Код:
<div class="backdrop">
<div class="text darken">
текст</div>
</div>
<style>
.backdrop {
    background: url("картинка") center;
    background-size: contain;
    margin: auto;
    margin-top: 40px;
    width: 75vw;
}

.text {
    font: bolder 12vw "Alfa Slab One";
    text-align: center;
    margin: 0;
    border: 4px solid;
}.darken {
    color: white;
    mix-blend-mode: darken;
    background-color: rgba(59, 2, 6, 1);
}</style>
Оранжевым в коде выделила цвет затемнения.
6. Нокаут с анимацией 
Нокаут с анимацией
Код:
<div class="backdrop">
    <p class="text">текст</p>
</div>
<style>
.backdrop {
    background: url("картинка")
        center;
    background-size: contain;
    margin: auto;
    width: 75vw;
}

.text {
    color: white;
    border: 4px solid;
    background: rgb(59, 2, 6);
    mix-blend-mode: multiply;
    font: bolder 12vw "Alfa Slab One";
    text-align: center;
    margin: 0;
    animation: glow 3s infinite;
}

@keyframes glow {
    0% {
        text-shadow: 0 0 10px white;
    }

    15% {
        text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
                   -2px -2px 10px rgba(255, 255, 255, 1);
    }
    30% {
        text-shadow: 2px 2px 4px rgba(255, 255, 255, .7),
                   -2px -2px 4px rgba(255, 255, 255, .7);
    }
    50% {
        text-shadow: 20px 20px 50px rgba(255, 255, 255, .5),
                   -20px -20px 50px rgba(255, 255, 255, .5);
    }
}
</style>
С каждой картинкой будет совсем разный визуальный эффект.
  • Режимы наложения могут быть разные:
  • Умножение (Multiply)
  • Умножение двух цветов.
  • Экранирование (Screen)
  • Наложение (Overlay)
  • Светлые пиксели становятся — светлее,  темные — темнее.
  • Затемнение (Darken)
  • Осветление (Lighten)
  • Противоположность предыдущему. Более светлое значение является основным.
  • Цветовое осветление (Color-Dodge)
  • Добавляется яркость заднему фону. Картинка будет более контрастной.
  • Цветовое затемнение (Color-Burn)
  • Жесткий свет (Hard-Light)
  • Умножаются светлые пиксели и экранируются темные.
  • Мягкий свет (Soft-Light)
  • Умножаются темные цвета и экранируются  светлые.
  • Оттенок (Hue)
  • Насыщение (Saturation)
  • Цвет (Color)
  • Яркость света (Luminosity)
  • Разница (Difference)
  • Исключение (Exclusion)
Работу кодов можно проверить в редакторе.

Генераторы

Придать картинке разнообразную форму можно с помощью генераторов clip-path
Код:
<div class="box clipPolygon">
</div>
<style>
.box {
  width: 300px;
  height: 300px;
  background: black url(ваша картинка);
  background-size: cover;
  margin: 28px auto;
}
.clipPolygon {
 clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
}</style>
Голубым в коде выделен размер картинки
Синим я выделила то, что будет менять форму нашей картинки. Для этого переходим на один из сайт генератор:
  • https://bennettfeely.com/clippy/
  • http://www.cssplant.com/clip-path-generator
  • https://www.uplabs.com/posts/clip-path-generator
  • https://codepen.io/jh3y/pen/XqVQqa
На примере одного покажу работу всех генераторов:
генератор
Вытягивая разноцветные кружки можно создать свою форму.
Есть много готовых форм.
Код формы копируем и вставляем в код предложенный мной выше, удалив, выделенное синим цветом.
генератор эффектов
К этому коду, так же как и к первым, можно добавлять различную анимацию, параллакс, ховер и другие эффекты.

Эффект с помощью png

Перед вами код для создания картинки необычной формы с помощью png/
<img src="основная картинка" style="-webkit-mask-box-image: url(картинка с прозрачным фоном);" />
Код, в который нужно добавить только две ссылки. Первая — на вашу картинку с фоном. Вторая — на картинку с нужным рисунком, но прозрачным фоном (png). Рисунок на ней может быть любой. Например — маска, сердце, бабочка и так далее. Это будет наша маска для основной картинки.
Эффект с помощью png
Красиво, не правда ли?

Градиентные маски

Зеркальная
Зеркальная
Код:
<img src = "картинка"  width="700" height="400" style = "-webkit-box-reflect: below 0px
-webkit-linear-gradient(transparent, transparent 40%, white 90%); margin-bottom:137px;">
Красным выделила в коде размер картинки.

Радиальный градиент
Радиальный градиент
Код:
<img src="картинка" width="256" height="137" style="-webkit-mask-box-image:-webkit-radial-gradient(black 30%, rgba(0,0,0,0.2) 70%, transparent);">
Синим выделила размер картинки
Голубым проценты насыщенности цвета и прозрачности.

Линейный градиент

Линейный градиент
Код:
<img height="400" src="картинка" style="-webkit-mask-box-image: -webkit-linear-gradient(black, transparent);" width="700" />
Линейный градиент 2
Код:
<img height="400" src="картинка"
style="border-radius: 70px;
            -webkit-mask-box-image:
            -webkit-linear-gradient(
            left,transparent, transparent 5%, white 20%, white 80%, transparent 95%);">
Это, конечно, далеко не все эффекты, которые можно сделать с помощью css. Аналогично можно применить эффект к тексту.

Ваши комментарии:

Комментарии со спамом удаляются.