Последние записи

Еженедельная подборка красивых эффектов на CSS/SVG/JS #54

Подборка свежих эффектов, интересных идей и полезных наработок.

Анимация пейзажа с островом

Технологии: CSS, SVG, GSAP.js.
Автор: Issey (@issey)

Анимация пейзажа с островом на CSS Посмотреть живой пример


(далее…)

Эпичный курс «Великий Кексби» — настоящая вёрстка

Интерактивные курсы помогают познакомиться с синтаксисом и особенностями HTML и CSS, но как новичку перейти от них к вёрстке первого сайта? Для этого был создан эпичный курс «Великий Кексби», доступный по подписке.

Что такое эпичный курс

В отличие от остальной программы, здесь перед учеником ставится полноценная задача: сверстать главную страницу интернет-магазина кошачьих аксессуаров «The Great Keksby».

Keksby1

Вначале он получает макет в формате изображения и описание задачи — дальше начинается работа, поделённая на одиннадцать этапов.

Задания построены аналогично остальным: требуется дописать или исправить код, выполняя поставленные цели. Любые изменения в редакторе будут сразу отображаться в мини-браузере.

Каждый раздел привязан к курсу основной программы. Поэтому вначале придётся пройти основы, чтобы после применить полученные знания на вёрстке интернет-магазина.

(далее…)

Как рисование на чистом CSS помогло мне понять React-компоненты

Перевод статьи How Pure CSS Images Helped Me Understand React Components с сайта medium.com для CSS-live.ru, автор — Майкл Манджаларди

1-mJsGnpEIAfmphAuo130_Zw

В начале 2016-го я так устал от попыток выучить React, что едва не бросил разработку. Я стал жертвой синдрома самозванца. Теперь я работаю React-разработчиком на полную ставку и успел написать книгу «Изучение React.js для визуалов»

Как же я преодолел синдром самозванца и наконец освоил React? Причин несколько, но важнее всего оказалось то, что я научился делать рисунки на чистом CSS.

(далее…)

Заблокированные кнопки — отстой

Перевод статьи DISABLED BUTTONS SUCK с сайта hackernoon.com для CSS-live.ru, автор — Хампус Сетфорс

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

Заблокированная кнопка с надписью «Заблокированные кнопки – отстой». Надпись ниже: «Отчасти из-за плохой контрастности»

Почему они меня выбесили и что заставило меня написать об этом

Пару недель назад на одном мероприятии мне оставили такое сообщение:

Мне нужно идти, но ты можешь добавить меня в фейсбуке, там и продолжим разговор.

Я был так взволнован! Знаете, я обычно не очень хорош в общении с людьми, мне не по душе заводить новые знакомства. Но в этот раз. Я был на встрече. Разговаривал с интересным человеком, который попросил меня быть её другом в интернете. Вот это да!

(далее…)

Доступ к CSS-переменным и их изменение с помощью Javascript

И преимущество перед SASS-переменными

Перевод статьи Accessing and modifying CSS variables with Javascript с сайта hackernoon.com для CSS-live.ru, автор — ReasonCode

SASS-переменные с нами уже давно. Они позволяют задать переменную один раз во время выполнения (runtime) и использовать ее в нескольких местах. Уровень крутости — 3. Хотите уровень 6? Читайте дальше.

Взаимодействие с CSS-переменными при помощи JS после выполнения (post-runtime)

Создадим простую форму, которая будет использовать JS для динамического обновления CSS-переменных (в нашем случае, для изменения свойств color и margin у точки).

(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #53

Подборка свежих эффектов, интересных идей и полезных наработок.

Анимация с велосипедом

Эта анимация — интерактивная. Нужно кликнуть по любом ее месту, и дальше вы сможете управлять облаком. Стрелками «влево»-«вправо» на клавиатуре вы двигаете облако, а пробелом вызываете дождик. Велосипедист реагирует на всё это, когда проезжает под облаком.
Технологии: CSS, bodymovin.js, anime,js.
Автор: Мариуш Дабровски (@MarioD)

Анимация с велосипедом Посмотреть живой пример


(далее…)

Интерактивные курсы HTML Academy — быстрый старт для новичка

Если у вас или вашего подопечного цель в сжатые сроки с нуля получить необходимые базовые знания HTML и CSS и начать верстать, то интерактивные курсы позволят сэкономить время.

Начать изучать HTML и CSS по курсам может человек с любым уровнем знаний и образованием, нет никаких ограничений. Сейчас в программе доступно девятьсот шестьдесят пять заданий и испытаний, более трёхсот из них можно пройти бесплатно, периодически появляются новые.

Похожие сайты

(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #52

Подборка свежих эффектов, интересных идей и полезных наработок.

Слайдер на react

Технологии: CSS, react.js.
Автор: Николай Таланов (@suez)

Слайдер на react Посмотреть живой пример


(далее…)

Что может поломать макет на гридах (CSS Grid Layout)

Перевод статьи BREAKING THE GRID с сайта daverupert.com для CSS-live.ru, автор — Дейв Руперт

Два способа поломать CSS-гриды, и как их починить

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

В итоге я нашёл два способа поломать CSS-гриды. Как это бывает, я умудрился в одной раскладке сделать и то, и другое. 

(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #51

Подборка свежих эффектов, интересных идей и полезных наработок.

Спираль из текста на CSS

Технологии: CSS трансформации и анимация.
Автор: Карпе Нумидиум (@carpenumidium)

Спираль из текста Посмотреть живой пример


(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #50

Подборка свежих эффектов, интересных идей и полезных наработок.

Пейзаж с оленями и анимированным фоном

Технологии: CSS, JS.
Автор: Марио Дуарте (@MarioDesigns)

Пейзаж с оленями и анимированным фоном Посмотреть живой пример


(далее…)

Путь верстальщика. Год 2017.

Интро

Давайте сразу обозначим моменты, на основании которых будем рассуждать в дальнейшем.

Первое. Эта статья написана как попытка обновить или дополнить статью Максима Усачёва, написанную в 2012 году. Время течёт, времена меняются, поэтому хотелось бы добавить некоторые рассуждения.

Второе. Статья не заказная, но содержит ссылки на ресурсы, школы и другие источники, которые я советую на основании опыта и мнения. Статья написана с высоты опыта конкретного человека, конкретных идеалов и стандартов, поэтому необходимо понимать, что это всего лишь мнение человека, которому небезразлично развитие начинающих разработчиков, а вовсе не константа, от которой нельзя отклоняться.

В 2017 году сложно представить себе верстальщика, который не умеет использовать JavaScript, и фронтенд-разработчика, который не умеет верстать. Любое из этих проявлений — отклонение от нормы. 

Третье. В 2017 году сложно представить себе верстальщика, который умеет только верстать страницы, используя HTML, CSS и ничего больше. Индустрия и тенденции заставляют верстальщиков изучать JavaScript, что приводит к логическому развитию верстальщика во фронтенд-разработчика. Это логичный и нормальный путь. В 2017 году сложно представить себе верстальщика, который не умеет использовать JavaScript, и фронтенд-разработчика, который не умеет верстать. Любое из этих проявлений — отклонение от нормы. Учитывая это, правильнее было назвать эту статью «путь фронтенд-разработчика», но чтобы никого не пугать, и по причине того, что вёрстка — первая ступень развития фронтенд-разработчика, оставим название статьи таким, какое есть.

Четвёртое. Я буду часто ссылаться на свой опыт, прошу простить.

(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #49

Подборка свежих эффектов, интересных идей и полезных наработок.

Эффект отражения пейзажа в надписи

Анимация работает при наведении курсора
Технологии: CSS.
Автор: Алекс (@alexpopovich)

Этапы формирования заказа на CSS с анимацией Посмотреть живой пример


(далее…)

Руководство по флексбоксам и гридам для дизайнеров

Перевод статьи Designer’s Guide to Flexbox and Grid с сайта medium.com для CSS-live.ru, автор — Джон Яблонски

Главная картинка

Что надо знать дизайнерам про эти раскладочные инструменты и перемены, которые они несут

Со своего появления в 1996-м CSS прошел немалый путь, но доступные нам инструменты для верстки макетов особо не менялись. Табличные раскладки были чересчур жесткими, раскладки на флоатах по сути были хаком, раскладки на основе позиционирования не адаптировались, и ничто из этого не могло эффективно справиться с растущей сложностью. Поймите меня правильно — мы многого добились с этими методами, но они не предназначались для верстки сложных макетов.

(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #48

Подборка свежих эффектов, интересных идей и полезных наработок.

Анимация с мармеладкой

Удерживая курсор, можно перемещать мармеладку. (Для работы анимации требуется высота окна браузера не менее 500px.)
Технологии: canvas, JS: matter, p5
Автор: Мариуш Дабровски (@MarioD)

Анимация с мармеладкой Посмотреть живой пример


(далее…)