Кладовка кода

Естественно адаптивная сетка CSS с помощью minmax() и min()

От автора: CSS Grid в настоящее время широко поддерживается в современных браузерах, и многие люди отлично пользуются этим! Но, к…

5 лет ago

Как добавить социальные кнопки на сайт

От автора: мы живем в социальное время. Сегодня взаимодействие с другими людьми важно как никогда прежде, если мы говорим об…

5 лет ago

Большие меню, маленькие экраны: адаптивная многоуровневая навигация

От автора: если вы когда-либо работали над адаптивным вебсайтом, вам, несомненно, приходилось биться над одной из самых коварных проблем этой…

5 лет ago

Усеченный многострочный текст с кнопкой «показать больше» (только с помощью CSS)

От автора: на днях у нас в офисе зашла дискуссия об усечении текста, и я с тех пор задался вопросом,…

5 лет ago

Анимация переменных шрифтов с помощью CSS и Splitting JS

От автора: некоторое время назад я создал на Codepen демо-версию анимированного переменного шрифта. В этой статье я объясню, что такое переменные…

5 лет ago

Полезные однострочники на JavaScript

Автор статьи, перевод которой мы сегодня публикуем, говорит, что он программирует на JavaScript уже многие годы. За это время он…

5 лет ago

Пример слайдера на чистом CSS3

Честно стырено с habr. 1. Верстаем основу Для реализации слайдера нам понадобится довольно простой набор тэгов, которые будут в свою…

5 лет ago

Слайдер на чистом CSS. Пример от школы разработки интерфейсов Yandex.

Слайдер сделан с помощью связки <input> и <label for=”#id”>. Вся магия происходит на уровне селектора #button-N:checked ~ .slider-inner .slider-slides. Когда…

5 лет ago

Бургер-меню с выездом влево

HTML часть. Не забываем подключить jquery. <!DOCTYPE html> <html lang="en"> <link rel="stylesheet" href="css/burger_menu.css"> <head> <meta charset="UTF-8"> <title>Burger menu</title> </head> <body>…

6 лет ago

Трансформация 3D карточки-поворот на 180 градусов CSS3

HTML часть <div class="section"> <div class="container"> <div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div> <div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div> <div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div> <div class="card"><img…

6 лет ago