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

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

Здрастуй, дорогий читачу хабра!
Сьогодні ми поговоримо про «липких» блоках, новому властивість для зображень object-fit, просунутому використання CSS-лічильників, ключовому слові currentColor, і про те, чи є анімація в z-index.

position: sticky

Не так давно з'явилося те, чого ми так довго чекали! Тепер ми можемо створювати «липкі» блоки, які будуть вести себе як фіксовані, але при цьому не перекривати інші блоки. Іншими словами, поки на сторінці є вільне місце, блок залишається на місці, але, якщо при скролле сторінки на це саме вільне місце наїжджають інші блоки, вони рухають sticky-блок. Втім, краще 1 раз побачити.

position: sticky animation

Поки що підтримують це властивість лише Firefox і Safari останніх версій, але для інших браузерів можна просто задати будь-яке інше позиціонування:

.sticky {
position: static; /* вказуємо перед sticky */
position: sticky;
top: 0px; /* обов'язково вказуємо позицію елемента */
}

В такому випадку ми отримаємо sticky-блок для підтримуючих це властивість браузерів і звичайний статичний блок для інших.

Особливо це властивість придасться мобільних версій сайтів, коли нам начебто і потрібний елемент з фіксованим позиціонуванням, але він не повинен перекривати інші блоки, т. к. вільного місця на екрані мало. Так і в настільних версіях він виглядає досить-таки цікаво.

background-size <img /> або чарівне властивість object-fit

Пам'ятаєте, як часто вам хотілося задати зображення властивість background-size? Адже це так зручно: не потрібно вираховувати ширину, висоту, стежити за пропорціями. Так от, тепер для цього є чудова властивість object-fit, яка дуже непогано підтримується webkit-браузерами, і буде підтримуватися firefox-ом з наступної версії. Для всього іншого є полифил.

Принцип роботи object-fit такий же, як у background-size для фонових зображень, з тією лише різницею, що воно застосовується для зображень, відео та інших медіа-елементів:

.image__contain {
object-fit: contain; // зображення скорочується або розтягується, щоб повністю поміститися в область з збереженням пропорцій
} 
.image__fill {
object-fit: fill; // розтягується на всю область блоку
}
.image__cover {
object-fit: cover; // розтягується на всю область блоку із збереженням пропорцій і центрується
}
.image__scale-down {
object-fit: scale-down; // зображення стискується (але не розтягується!), щоб повністю поміститися в область з збереженням пропорцій
}

css object-fit
Приклад

Просунуті CSS лічильники

В одній з минулих статей ми вже розглядали базові можливості CSS-лічильників, але цього, безумовно, мало для технології з такими широкими можливостями.

Почнемо з чогось простого. Наприклад, з пэйджинации:

<div class="pages">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>

.pages {
counter-reset: pages;
}
.pages a {
counter-increment: pages;
}
.pages a:before {
content: counter(pages);
}

Як бачите, номери прописуються автоматично за допомогою CSS. У реальних проектах це марно, але, погодьтеся, виглядає досить забавно:)


Приклад.

Також можна вважати зазначені користувачем елементи:

<div class="languages">
<input id="с" type="checkbox"><label for="с"></label>
<input id="C++" type="checkbox"><label for="C++">C++</label>
<input id="C#" type="checkbox"><label for="C#">C#</label>
<input id="Java" type="checkbox"><label for="Java">Java</label>
<input id="JavaScript" type="checkbox"><label for="JavaScript">JavaScript</label>
<input id="PHP" type="checkbox"><label for="PHP">PHP</label>
<input id="Python" type="checkbox"><label for="Python">Python</label>
<input id="Рубін" type="checkbox"><label for="Рубін">Ruby</label>
</div>
<p class="total">
Total selected:
</p>

.languages {
counter-reset: characters;
}
input:checked {
counter-increment: characters;
}
.total:after {
content: counter(characters);
} 

Тут ми збільшуємо значення лічильника на кожний зазначений чекбокс з допомогою селектора input:checked і виводимо його значення.


Приклад

Також можна написати невеликий калькулятор:

<div class="numbers">
<input id="one" type="checkbox"><label for="one">1</label>
<input id="two" type="checkbox"><label for="two">2</label>
<input id="three" type="checkbox"><label for="three">3</label>
<input id="four" type="checkbox"><label for="four">4</label>
<input id="five" type="checkbox"><label for="five">5</label>
<input id="one-hundred" type="checkbox"><label for="one-hundred">100</label>
</div>
<p class="sum">
Sum 
</p>

.numbers {
counter-reset: sum;
}

#one:checked { counter-increment: sum 1; }
#two:checked { counter-increment: sum 2; }
#three:checked { counter-increment: sum 3; }
#four:checked { counter-increment: sum 4; }
#five:checked { counter-increment: sum 5; }
#one-hundred:checked { counter-increment: sum 100; }

.sum::after {
content: '= ' counter(sum);
} 

І знову нічого складно: для кожного чекбокса вказується число, на яке він збільшить значення лічильника, яка потім виводиться.


Приклад і стаття, розкрила мені очі.

currentColor

Вже досить давно (з моменту виходу IE9) ми можемо користуватися чудовим, але маловідомим ключовим словом currentColor. У чому його суть? Воно містить у собі поточне значення кольору елемента, як наследованное від батьків, так і не успадковане за замовчуванням. Це дозволяє не ставити багато разів один і той же колір і іноді не вводити змінні (якщо ви працюєте з препроцессорами).

Наприклад, це може бути дуже корисно при роботі з SVG-іконками, які міняють свій колір залежно від стану батьків. Звичайно, нам довелося б записати це приблизно так:

.button {
color: black;
}
.button:hover {
color: red;
}
.button:active {
color: green;
}

.button svg {
fill: black;
}
.button:hover svg {
fill: red;
}
.button:active svg {
fill: green;
}

але currentColor робить код куди лаконічніше:

svg {
fill: currentColor;
}

.button {
color: black;
border: 1px solid currentColor;
}
.button:hover {
color: red;
}
.button:active {
color: green;
}

Ще один приклад корисної області застосування — псевдо-елементи:

a {
color: #000;
}
a:hover {
color: #333;
}
a:active {
color: #666;
}

after a:,
a:hover:after,
a:active:after {
background: currentColor;
...
}


Transition для z-index

Можливо, ви не здогадувалися, але властивість z-index також підтримує анімовані переходи. Однак, воно змінює значення по кроках, тому здається, що ніякого переходу ні. Але він є! Не дайте себе обдурити!

z-index transition

Відмінний приклад того, як це працює.

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

P.s. Окреме спасибі користувачеві DonSinDRom, який буквально засипає мене посиланнями на нові цікаві css-фішки після кожної статті :)
Сподобалася вам добірка?

/>
/>


<input type=«radio» id=«vv64107»
class=«radio js-field-data»
name=«variant[]»
value=«64107» />
Так, дізнався багато нового;
<input type=«radio» id=«vv64109»
class=«radio js-field-data»
name=«variant[]»
value=«64109» />
Новими для мене виявилося 1-2 рецепта;
<input type=«radio» id=«vv64111»
class=«radio js-field-data»
name=«variant[]»
value=«64111» />
Все це я вже знав.

Проголосувало 45 осіб. Утрималося-2 людини.


Тільки зареєстровані користувачі можуть брати участь в опитуванні. Увійдіть, будь ласка.


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

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.