От автора: изучаем основы того, как использовать CSS переменные: область видимости, ограничения и взаимодействия с JavaScript, включая интерактивные примеры. Очистите свой Codepen и подготовьте его для самостоятельного выполнения заданий. Почти все языки программирования изначально поддерживают использование переменных, но не CSS. Вначале он их не поддерживал. До сих пор. Действительно, они фактически являются не «переменными», а пользовательскими свойствами CSS. Да, название ...

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

От автора: на красивых, качественных лендингах используются блоки с интересными эффектами и нестандартным расположением элементов. В этом уроке мы приступим к верстке подобных блоков. В создаваемом блоке будут присутствовать наклонные линии, красивый эффект по наведению, раскрытие описания по клику и прочее. В уроке блок будет называться «Наши услуги», но в своих проектах вы сможете использовать данный блок для чего угодно: ...

От автора: для таких элементов как чекбоксы, радиокнопки и некоторых других невозможно определить CSS стили и управлять их внешним видом, поэтому приходится использовать различные хаки, и сегодня я расскажу вам как можно не прибегая к использованию JavaScript управлять внешним видом чекбоксов и радиокнопок на чистом CSS. По результатам урока вы научитесь управлять внешним видом и создавать различные эффекты для чекбоксов ...

Подборка свежих эффектов, интересных идей и полезных наработок. Ползунок в научном стиле Адаптивная таблица с возможностью сортировки данных Демонстрация контрастности текста и фона Эффект наведения на кнопку Тоннели Графический постер на CSS-гридах Анимированные иконки из точек Анимированная на CSS страница 404 ошибки Полосатая иллюстрация Разделение экрана на две части на React Пожелания и идеи по содержанию следующих выпусков приветствуем в комментариях. ...

Подборка свежих эффектов, интересных идей и полезных наработок. Солнечная система на CSS Переключаться между планетами можно навигацией слева или кликом на изображение. Под описанием планеты есть рабочая кнопка «Read more» («Подробнее»).Технологии: CSS, CSS-анимация, CSS-трансформации.Автор: Джейми Коултер (@jcoulterdesign) Посмотреть живой пример Дом с растущей крышей Трехмерная мозаика из шестиугольников Кнопка скрытия/отображения пароля на CSS Картины Мондриана на CSS-гридах Картины поворачиваются в зависимости ...

Подборка свежих эффектов, интересных идей и полезных наработок. SVG-рисунок при прокрутке Необычный слайдер в стиле ползунка Многоугольники Удерживая курсором, фигуры можно перемещать. Обратите внимание, что их цвет меняется в зависимости от положения относительно друг друга (красный, зеленый, синий).Технологии: canvas, JS, Pixi.js.Автор: Блейк Боуэн (@osublake) Посмотреть живой пример Анимация «Старцы» по мотивам Лавкрафта Разворот книги на CSS Поворот карточек на CSS Эффект ...

Подборка свежих эффектов, интересных идей и полезных наработок. Трехмерный городок Кликом и удерживанием курсора можно «крутить» пейзаж.Эффектнее смотрится в полностраничном режиме.Технологии: canvas, JS.Автор: Дэйв ДеСандро (@desandro) Посмотреть живой пример Перетасовка карт на Vue Кнопкой Shuffle колода перетасовывается. Кнопками Slow — Medium — Fast можно управлять скоростью.Технологии: CSS, Vue.js.Автор: Hassan Dj (@itslit) Посмотреть живой пример Анимация страницы отписки от рассылки Генератор домиков ...

Очень часто на сайтах вы могли встречать изменение оформления ссылок или кнопок при наведении. Реализовать задачу позволяет специальный псевдокласс :hover в CSS. Сегодня рассмотрим некоторые приемы верстки позволяющие сделать эту фишку, а ниже опубликуем список наиболее интересных из них (с краткими описаниями/пояснениеми). Все варианты разделим на: Данные группы весьма условны, т.к. многие примеры пересекаются и являются универсальными, то есть могут ...

Подборка свежих эффектов, интересных идей и полезных наработок. CSS-иллюстрация «Спортсменка» По клику на кнопки «Run» и «Walk» девушка переходит на бег или ходьбу.Нижние кнопки управления меняют среду и образ девушки, а ползунком можно управлять скоростью движения.Эффектнее смотрится в полностраничном режиме.Технологии: CSS, CSS-переменные, CSS-анимация, CSS-трансформации.Автор: White Pallet (@WhitePallet) Посмотреть живой пример Имитация экрана Автор демонстрирует, как CSS-функция matrix3d() может применяться с целью ...