CSS в примерах
Две практические статьи с готовым кодом
Пример красивой кнопки для сайта
Кнопка — главный элемент взаимодействия. Разбираю, как собрать её на чистом CSS: градиент по нижней границе, состояние наведения, масштабирование текста. Без картинок и без библиотек.
CSS-анимация: анимированная картинка на сайте
Анимация через keyframes: персонаж из обычных блоков, который качается и «моргает». Показываю, как собрать фигуру из div и оживить её одной строкой анимации.
Почему это стоит уметь
CSS-эффекты не тянут за собой библиотеки и не замедляют сайт, если держать их в разумных пределах. Всё, что нужно, — браузер и понимание, как работают переходы.
Нужен сайт, а не только примеры?
Сделаю сайт под ключ: дизайн, адаптивная вёрстка, кнопки и формы, которые ведут к заявке, базовая SEO-оптимизация. С 2009 года, по договору, с поддержкой после запуска.
Полезно по теме: кнопка на CSS, CSS-анимация, виджет WhatsApp, про Django.