На стиле — подборка интересных CSS-свойств
vk f t

На стиле — подборка интересных CSS-свойств

Вы не пове­ри­те, до чего дошёл про­гресс!

В совре­мен­ном вебе CSS нужен уже не толь­ко для того, что­бы оформ­лять сти­ли заго­лов­ков. В 2019 году на сти­лях дела­ют меню, настра­и­ва­ют ани­ма­цию и дела­ют трёх­мер­ные сай­ты. Сего­дня — обзор инте­рес­ных CSS-свойств и их при­ме­не­ние.

Липкие блоки

При­мер: Codepen

Что исполь­зу­ем: sticky

Недав­но в CSS появи­лись «лип­кие» бло­ки — они созда­ют такие эле­мен­ты на стра­ни­це, кото­рые при скрол­ле оста­ют­ся на сво­ём месте. Но как толь­ко до них доез­жа­ют дру­гие бло­ки, залип­ший тоже начи­на­ет дви­гать­ся. Полу­ча­ет­ся, что он «лип­кий» до тех пор, пока не меша­ет дру­гим, — потом ведёт себя как обыч­ный блок. Рань­ше для тако­го нужен был JavaScript, а теперь вон до чего тех­ни­ка дошла! 

Пока пол­но­стью это рабо­та­ет толь­ко в Хро­ме и Сафа­ри, но для дру­гих бра­у­зе­ров мож­но ука­зать, что это как бы обыч­ный блок:

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

Галерея в стиле Pinterest

При­мер: Codepen

Что исполь­зу­ем: общий кон­тей­нер со свой­ства­ми column-width и column-gap

Что­бы сде­лать такую же сет­ку, как в Pinterest, исполь­зу­ют колон­ки с хит­ро­стью: кла­дут изоб­ра­же­ния в общий кон­тей­нер и под­клю­ча­ют CSS. Что­бы один эле­мент не раз­ры­вал­ся меж­ду дву­мя колон­ка­ми, нуж­но доба­вить изоб­ра­же­ни­ям свой­ство column-break-inside: avoid.


Плавное кадрирование

При­мер: Codepen

Что исполь­зу­ем: object-fit и object-position

Рань­ше обре­зать изоб­ра­же­ние было непро­сто, но в новом CSS появи­лись два класс­ных свой­ства — object-fit и object-position. Они меня­ют раз­ме­ры и поло­же­ние кар­тин­ки, не тро­гая соот­но­ше­ния сто­рон. Мож­но, конеч­но, кад­ри­ро­вать кар­тин­ку и в редак­то­ре, но с CSS это будет плав­но и эсте­тич­но.

В при­ме­ре по ссыл­ке вы уви­ди­те, как это рабо­та­ет: про­сто нажми­те на чек­бокс и попро­буй­те не сде­лать это сно­ва 🙂

Увеличение картинок при наведении

При­мер: Codepen

Что исполь­зу­ем: обо­ра­чи­ва­ем img в свой­ство overflow со зна­че­ни­ем hidden

Попу­ляр­ный и про­стой при­ём, кото­рый визу­аль­но выде­ля­ет кар­тин­ки на стра­ни­це. Смысл его в том, что кар­тин­ка слег­ка уве­ли­чи­ва­ет­ся при наве­де­нии на неё кур­со­ра, но оста­ёт­ся в преж­них габа­ри­тах.

Текст с картинкой в рамке

При­мер: Codepen

Что исполь­зу­ем: display:grid и grid-row.

Любо­пыт­ное свой­ство, кото­рое поз­во­ля­ет быст­ро гене­ри­ро­вать кар­тин­ки с тек­стом вни­зу и рам­кой по кру­гу. Рам­ка тоже умная: на текст не зале­за­ет, если нуж­но — ста­нет длин­нее или коро­че, что­бы не мешать над­пи­си.

Класс­ная шту­ка для быст­ро­го созда­ния фир­мен­ных кар­ти­нок в боль­ших объ­ё­мах.

Классика: ховер

При­мер: Tympanus.net

Что исполь­зу­ем: hover.

:hover — это псев­до­класс, кото­рый при­ме­ня­ет­ся к объ­ек­ту, если на него наве­дён кур­сор мыши. Мож­но ска­зать «при наве­де­нии под­крась ссыл­ку крас­ным» или «при наве­де­нии убе­ри под­чёр­ки­ва­ние». Вот это «при наве­де­нии» и есть псев­до­класс :hover.

Это настоль­ко фун­да­мен­таль­ное свой­ство CSS, что исполь­зу­ет­ся прак­ти­че­ски вез­де, где есть интер­нет или веб-технологии. Без него любой обзор свойств будет непол­ным, пото­му что без обра­бот­ки наве­де­ния мыши на эле­мент поло­ви­на свойств про­сто пере­ста­нет рабо­тать.

Глав­ная фиш­ка хове­ра — его уни­вер­саль­ность. На него мож­но пове­сить что угод­но и обра­ба­ты­вать это как угод­но. Ино­гда нам кажет­ся, что если его отклю­чить, то поло­ви­на интер­не­та про­сто пере­ста­нет рабо­тать.

Ещё по теме