Тонування
Зображення повинно бути темним, мати невеликий рівень контрасту.
Вибір зображення - це ваша прерогатива, але давайте припустимо, що ви обрали світле зображення. Ви могли затемнити його програмно або з використанням CSS, накласти прозорий колір. Ймовірно, самий правильний спосіб зробити це - використовувати кілька фонів, але це не так вже просто і зробити. Хитрість полягає у використанні градієнта, що не змінюється, тобто є цільним.
.darken {
background-image:
linear-gradient(
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
),
url(shoes.jpg);
}
Чорний оверлей - простий і універсальний, але можна використовувати різні кольори.
За допомогою цього методу ви можете обирати колір на власний смак:
Білий текст
Він повинен бути білим!
Зображення на всю робочу зону
Це популярний спосіб - використання зображення в якості фону, кожен робив подібне хоча б раз.
body {
background: /* робимо все тут */;
/* Це буде гарантувати суцільне покриття */
background-size: cover;
}
Якщо ви хочете охопити весь екран, але потім мати можливість прокручувати
вниз, встановіть height: 100vh
.
Браузерна підтримка трохи відрізняється. Тож краще робити фіксовану висоту за допомогою JavaScript.
Текст у вікні
Це максимально простий і дуже надійний спосіб. На швидку руку додайте м'який, прозорий чорний прямокутник і білий текст. Якщо накладання достатньо непрозоре, ви можете використовувати будь-яке зображення і текст, як і раніше, буде повністю читабельним.
Працює з будь-яким поєднанням кольорів.
Розмиття
Несподівано хороший спосіб для накладання тексту - це розмивання частини базового зображення.
.module {
background: url(http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg);
background-attachment: fixed;
overflow: hidden;
}
.module > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
}
.module > header::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(12px);
filter: blur(12px);
}
Крім розмиття, ми ще використовуємо колір, але це не обов'язково робити, звичайного розмиття буде достатньо
Пом'якшення частини зображення називається scrim.
Scrim- це прийом у фотографії, коли світло роблять більш м'яким м'яким. Тепер так називають ще й техніку для пом'якшення зображення, вона ідеально підходить для підвищення читабельності тексту на зображенні.
Затемнення донизу
Floor Fade - це коли у вас є зображення, яке непомітно затемнюється донизу і на фоні цього затемнення ми розміщуємо білий текст.
.module {
background:
linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.6)
),
url(skyscrapers.jpg);
}
Ви можете піти іншим шляхом і не накладати сильне затемнення, якщо ви додасте невелику тінь до тексту:
.title {
text-shadow: 0 1px 0 black;
}
На закінчення...
Це досить весело, знаходити інші способи і грати з поєднанням цих методів.
Сподіваюсь, ви знайдете ці демо корисними!
Ще немає коментарів