Добірка цікавих CSS рецептів «Голі п'ятниці #3»

голі п'ятниці

Здрастуй, дорогий читачу хабра!
Сьогодні ми поговоримо про градієнтних межах, режими накладення, про те, як раціональніше створити стандартну іконку меню. А так само відкриємо для себе заново старе css властивість visibility і розглянемо нове медіа-вираз @Supports.

Градієнтні кордону на чистому CSS

Нарешті, ми перейшли у нову еру. Еру, в якій можна використовувати красиві градієнти замість нудних одноколірних кордонів.

градієнтні кордону

Робиться це відносно просто:

.gradient-block-vertical {
border-top: 20px solid orange; /*визначаємо верхню і нижню межі*/
border-bottom: 20px solid red;
background-image: linear-gradient(to bottom, #5c5fa5 0%, #893f60 100%),
linear-gradient(to bottom, #5c5fa5 0%, #893f60 100%); /*задаємо 2 лінійних градієнта*/
background-position: 0 0, 100% 0; /*задаємо цим градієнтам розміри*/
background-size: 20px 100%; /*поміщаємо їх по краях блоку*/
background-repeat: no-repeat; /*забуваємо скасувати повторення фотнового зображення*/
}

З горизонтальним градієнтом поступаємо аналогічно:

.gradient-block-horizontal {
border-left: 20px solid #5c5fa5;
border-right: 20px solid #893f60;
background-image: linear-gradient(to right, #5c5fa5 0%, #893f60 100%),
linear-gradient(to right, #5c5fa5 0%, #893f60 100%);
background-position: 0 0, 0 100%;
background-size: 100% 20px;
background-repeat: no-repeat;

}

А ось для створення диогонального градієнта доведеться трохи повозитися і ввести псевдоелементи:

.gradient-block-diagonal:before,
.gradient-block-diagonal:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
}
.gradient-block-diagonal:before {
background-position: 0 0, 0 100% ;
background-repeat: no-repeat;
background-size: 100% 20px;
background-image: linear-gradient(to right, #5c5fa5 0%, #893f60 100%),
linear-gradient(to left, #5c5fa5 0%, #893f60 100%);
}
.gradient-block-diagonal:after {
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
background-size: 20px 100%;
background-image: linear-gradient(to bottom, #5c5fa5 0%, #893f60 100%),
linear-gradient(to top #5c5fa5 0%, #893f60 100%);
}

Тут ми самому блоку задаємо тільки розміри, ніяких кордонів. Після цього вішаємо з горизонтального і вертикального градієнту на кожен псевдоэлемент.

Помацати код можна тут.

Коли-небудь, у світлому майбутньому (коли весь світ відмовиться від IE10 і нижче) ми зможемо використовувати призначене для цього властивість border-image. Приблизно ось так:

.gradient-block {
border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%); /*вказуємо фонове зображення/градієнт*/
border-image-slice: 1; /*задаємо для нього внутрішнє зміщення*/
}


Іконка меню без фонових зображень

Згадайте, як часто вам доводилося додавати на сторінку стандартну іконку меню, в простолюдді званий «гамбургером»?

Як правило, ця іконка просто вставляється фонову картинку. Але ж це всього лише 3 прямокутні смужки, невже немає способів краще? Є, як мінімум, 3.

1. Тінь.

.shadow-icon {
position: relative;
}
.shadow-icon:after {
content: "";
position: absolute;
left: 0;
top: -50px;
height: 100%;
width: 100%;
box-shadow: 0 5px 0 #000, 0 15px 0 #fff, 0 25px 0 #000, 0 35px 0 #fff, 0 45px 0 #000;
}

Рішення просте, хоча й не надто очевидна. Просто задаємо 3 прямокутні тіні, кожну з різним зміщенням.

2. Градієнт.

.gradient-icon {
background: linear-gradient(to bottom, #000 0%, #000 20%, transparent 20%, transparent 40%, #000 40%, #000 60%, transparent 60%, transparent 80%, #000 80%, #000 100%);
}

Тут все ще простіше: малюємо 3 смужки градієнтом.

3. Символ UTF-8.
Просто копіюємо і вставляємо символ ☰ (номер в Юнікод: U+2630, код HTML: ☰). Очевидно, це самий простий і лаконічний метод. Однак, гнучко налаштувати його не вийде. Фактично, можна настроїти тільки колір, а також вказати шрифт і змінити його розмір.

Приклад використання всіх трьох способів.

Це не єдині методи створення такої іконки. Для цього можна використовувати SVG, відповідний иконочный шрифт, або ж банально використовувати кордону в зв'язці з псевдоэлементами.

Режими накладення шарів у CSS

Ще одна гарна новина: з недавнього часу Firefox і Safari підтримують режими накладання елементів, аналогічні режимам накладання шарів у фотошопі
Також вони під прапорами, але вже працюють у Chrome і Opera. Це означає, що вже скоро буде включена повна підтримка і в цих браузерах. Тому можна починати використовувати для некритичного функціоналу. Наприклад, для стилізації ховер ефектів. У вас є унікальна можливість зробити це одними з перших, надавши лиск вашому сайту.

Наприклад, так:
mix-blend-mode

або так:
mix-blend-mode

Варіантів використання і стилізації маса. Людина з гарним смаком (на відміну від автора) може створити дійсно шикарні ефекти.

Код всієї цієї краси досить простий:

/*Стилі для фонового блоку, в якому лежить зображення*/
.blend {
background: #fff; /*колір фону елемента*/
}
.blend:hover {
background: #000;
}
/*Безпосередньо */
.blend img {
mix-blend-mode: darken; /*режим накладання*/
}



Включити відображення mix-blend-mode Chrome і Opera можна використавши прапори:
chrome://flags/#enable-experimental-web-platform-features
opera://flags/#enable-experimental-web-platform-features

Приклад.
Більш детально почитати про режими накладення рекомендую тут.

А про те, як дізнатися, чи підтримує браузер mix-blending-mode, і що це за дивне медіа-вираз у прикладі, читайте нижче.

@Supports

В CSS нарешті з'явилося нове медіа-вираз @supports, якого дуже не вистачало. Як можна здогадатися з назви, воно
служить для визначення підтримуються браузером властивостей. Поки що його підтримують не всі браузери, але для перевірки некритичного функціоналу воно вже цілком годиться.

@supports (display: flex) {
div { display: flex; }
}

/*Можна перевіряти і префікси*/
@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {
section {
display: -webkit-flex;
display: -moz-flex;
display: flex;
float: none;
}
}


Visibility: visible

Як ви думаєте, що призойдет, якщо блок з властивістю visibility: visible помістити в блок visibility: hidden?

.hidden {
visibility: hidden;
}
.hidden .visible {
visibility: visible;
}

Здавалося б, батько повинен перекрити властивість нащадка і зробити його невидимим. Але все зовсім не так. Батьківський блок сховає всі, крім дочірнього.

visibility

Можете спробувати самі.

Мені здається, цю особливість можна цікаво обіграти в інтерфейсі сторінки при взаємодії з користувачем.

На сьогодні все. Сподіваємося, це добірка виявиться для когось корисною. До швидких зустрічей!

Джерело: Хабрахабр

1 коментар

avatar
Помилок море… Відразу видно, що перекладали гугл-перекладачем з російської. Читати такий текст не дуже приємно.

ми поговоримо про градієнтних межах -> ми поговоримо про градієнтні рамки (або бордери)
стару css властивість visibility
розглянемо новий медіа-вираз @Supports
Градієнтні кордони (або все-таки рамки) на чистому CSS
поміщаємо їх по краях блоку -> розміщуємо їх по краях блоку
поступаємо аналогічно -> чинимо аналогічно
для створення діогонального градієнта
і ввести псевдоелементи -> і створити\використати псевдоелементи
Після цього чіпляємо по горизонтальному і вертикальному градієнту на кожен псевдоэлемент.
Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.