Еженедельная подборка красивых эффектов на CSS/SVG/JS #59
0
Cтатьи по тегу «CSS»
Еженедельная подборка красивых эффектов на CSS/SVG/JS #58
Подборка свежих эффектов, интересных идей и полезных наработок.
Имитация крема на CSS
Проводя курсором по середине квадрата, вы стираете «крем» и видите текст.
Технологии: CSS-трансформации, CSS-фильтры.
Автор: Юсуке Накая (@YusukeNakaya)
Еженедельная подборка красивых эффектов на CSS/SVG/JS #57
Подборка свежих эффектов, интересных идей и полезных наработок.
Раскладка на CSS-гридах с использованием CSS-перспективы
Имитация обложек музыкальных альбомов.
Технологии: CSS-гриды, CSS-трансформации, JS.
Автор: Энди Барефут (@andybarefoot)
Еженедельная подборка красивых эффектов на CSS/SVG/JS #56
Подборка свежих эффектов, интересных идей и полезных наработок.
Верстка страницы в стиле комиксов на CSS-гридах
Технологии: CSS grid, clip path.
Автор: Рен Айша (@rrenula)
Еженедельная подборка красивых эффектов на CSS/SVG/JS #55
Подборка свежих эффектов, интересных идей и полезных наработок.
Анимация текста в стиле отпечатков пальцев
Технологии: CSS, SVG, CSS анимация, GSAP.js.
Автор: Джон Хили (@jhealey5)
Еженедельная подборка красивых эффектов на CSS/SVG/JS #54
Подборка свежих эффектов, интересных идей и полезных наработок.
Еженедельная подборка красивых эффектов на CSS/SVG/JS #53
Подборка свежих эффектов, интересных идей и полезных наработок.
Анимация с велосипедом
Эта анимация — интерактивная. Нужно кликнуть по любом ее месту, и дальше вы сможете управлять облаком. Стрелками «влево»-«вправо» на клавиатуре вы двигаете облако, а пробелом вызываете дождик. Велосипедист реагирует на всё это, когда проезжает под облаком.
Технологии: CSS, bodymovin.js, anime,js.
Автор: Мариуш Дабровски (@MarioD)
Еженедельная подборка красивых эффектов на CSS/SVG/JS #52
Подборка свежих эффектов, интересных идей и полезных наработок.
Еженедельная подборка красивых эффектов на CSS/SVG/JS #51
Подборка свежих эффектов, интересных идей и полезных наработок.
Спираль из текста на CSS
Технологии: CSS трансформации и анимация.
Автор: Карпе Нумидиум (@carpenumidium)
Еженедельная подборка красивых эффектов на CSS/SVG/JS #50
Подборка свежих эффектов, интересных идей и полезных наработок.
Путь верстальщика. Год 2017.
Интро
Давайте сразу обозначим моменты, на основании которых будем рассуждать в дальнейшем.
Первое. Эта статья написана как попытка обновить или дополнить статью Максима Усачёва, написанную в 2012 году. Время течёт, времена меняются, поэтому хотелось бы добавить некоторые рассуждения.
Второе. Статья не заказная, но содержит ссылки на ресурсы, школы и другие источники, которые я советую на основании опыта и мнения. Статья написана с высоты опыта конкретного человека, конкретных идеалов и стандартов, поэтому необходимо понимать, что это всего лишь мнение человека, которому небезразлично развитие начинающих разработчиков, а вовсе не константа, от которой нельзя отклоняться.
В 2017 году сложно представить себе верстальщика, который не умеет использовать JavaScript, и фронтенд-разработчика, который не умеет верстать. Любое из этих проявлений — отклонение от нормы.
Третье. В 2017 году сложно представить себе верстальщика, который умеет только верстать страницы, используя HTML, CSS и ничего больше. Индустрия и тенденции заставляют верстальщиков изучать JavaScript, что приводит к логическому развитию верстальщика во фронтенд-разработчика. Это логичный и нормальный путь. В 2017 году сложно представить себе верстальщика, который не умеет использовать JavaScript, и фронтенд-разработчика, который не умеет верстать. Любое из этих проявлений — отклонение от нормы. Учитывая это, правильнее было назвать эту статью «путь фронтенд-разработчика», но чтобы никого не пугать, и по причине того, что вёрстка — первая ступень развития фронтенд-разработчика, оставим название статьи таким, какое есть.
Четвёртое. Я буду часто ссылаться на свой опыт, прошу простить.
Еженедельная подборка красивых эффектов на CSS/SVG/JS #49
Подборка свежих эффектов, интересных идей и полезных наработок.
Эффект отражения пейзажа в надписи
Анимация работает при наведении курсора
Технологии: CSS.
Автор: Алекс (@alexpopovich)
Еженедельная подборка красивых эффектов на CSS/SVG/JS #48
Подборка свежих эффектов, интересных идей и полезных наработок.
Анимация с мармеладкой
Удерживая курсор, можно перемещать мармеладку. (Для работы анимации требуется высота окна браузера не менее 500px.)
Технологии: canvas, JS: matter, p5
Автор: Мариуш Дабровски (@MarioD)
Еженедельная подборка красивых эффектов на CSS/SVG/JS #47
Подборка свежих эффектов, интересных идей и полезных наработок.
Слайдер с эффектом размытия при смене изображений
Технологии: CSS анимация, трансформации, SVG фильтры, JS
Автор: Дамиан Мути (@damianmuti)
Еженедельная подборка красивых эффектов на CSS/SVG/JS #46
