11 месяцев назад
💻 Web-разбор: как сделать плавное увеличение фото при наведении курсора
💻 Web-разбор: как сделать плавное увеличение фото при наведении курсора Всем привет! Сегодня разберём, как с помощью CSS сделать красивый эффект: когда наводишь курсор на картинку - она плавно увеличивается. Такой приём часто используют на сайтах и портфолио, чтобы выделить изображения и сделать интерфейс современным. 📄 HTML-разметка <div class="img-hover-zoom"> <img src="путь_к_твоей_картинке.jpg" alt="Пример фото"> </div> 🎨 CSS для плавного увеличения .img-hover-zoom { height: 300px; ...
457 читали · 6 лет назад
На стиле — подборка интересных CSS-свойств
Вы не пове­ри­те, до чего дошёл про­гресс! В совре­мен­ном вебе CSS нужен уже не толь­ко для того, что­бы оформ­лять сти­ли заго­лов­ков. В 2019 году на сти­лях дела­ют меню, настра­и­ва­ют ани­ма­цию и дела­ют трёх­мер­ные сай­ты. Сего­дня — обзор инте­рес­ных CSS-свойств и их при­ме­не­ние. Липкие блоки При­мер: Codepen Что исполь­зу­ем: sticky Недав­но в CSS появи­лись «лип­кие» бло­ки — они созда­ют такие эле­мен­ты на стра­ни­це, кото­рые при скрол­ле оста­ют­ся на сво­ём месте. Но как толь­ко до них доез­жа­ют дру­гие бло­ки, залип­ший тоже начи­на­ет дви­гать­ся...