Главная » Текст » Нокаут и другие эффекты 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>
<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>
Текст</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. Нокаут эффектом наложения:<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>
Код:
6. Нокаут с анимацией
<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>
<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>
Оранжевым в коде выделила цвет затемнения.<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>
С каждой картинкой будет совсем разный визуальный эффект.<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>
Голубым в коде выделен размер картинки</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). Рисунок на ней может быть любой. Например — маска, сердце, бабочка и так далее. Это будет наша маска для основной картинки.
Красиво, не правда ли?
Градиентные маски
ЗеркальнаяКод:
<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" />Код:
<img height="400" src="картинка"Это, конечно, далеко не все эффекты, которые можно сделать с помощью css. Аналогично можно применить эффект к тексту.
style="border-radius: 70px;
-webkit-mask-box-image:
-webkit-linear-gradient(
left,transparent, transparent 5%, white 20%, white 80%, transparent 95%);">
Комментарии со спамом удаляются.