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

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

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

Раскладка на CSS-гридах с использованием CSS-перспективы

Имитация обложек музыкальных альбомов.
Технологии: CSS-гриды, CSS-трансформации, JS.
Автор: Энди Барефут (@andybarefoot)

Интересная раскладка на CSS-гридах с использованием CSS-перспективы Посмотреть живой пример


(далее…)

Лучший способ реализовать «обёртки» в CSS

Перевод статьи The Best Way to Implement a “Wrapper” in CSS с сайта css-tricks.com для CSS-live.ru, автор — Калоян Косев

Иногда первое, что мы пишем на странице — это элемент, оборачивающий всё остальное на странице. Термин «Обёртка» типичен для этого. Мы задаём ему класс, отвечающий за инкапсуляцию всех визуальных элементов на странице.

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

Перед тем, как пойти дальше, сначала рассмотрим разницу между «обёрткой» (wrapper) и «контейнером» (container).

«Обёртка» против «Контейнера»

Я вижу разницу между элементом-обёрткой и элементом-контейнером.

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

Так что, мне кажется,  есть смысл оставить два названия, поскольку они предполагают разные функции.

(далее…)

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

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

Верстка страницы в стиле комиксов на CSS-гридах

Технологии: CSS grid, clip path.
Автор: Рен Айша (@rrenula)

Часы, цифры которых тоже состоят из цифр Посмотреть живой пример


(далее…)

От 0 до джуниора за месяц — онлайн-интенсив «Базовый HTML и CSS»

Что такое интенсив в HTML Academy

Это пять недель плотной работы: вёрстка учебного и личного проектов, еженедельные лекции, пять часов консультаций с наставником, подготовка проекта к финальной защите. Таким образом, формат учёбы максимально приближен к рабочему процессу в крупной IT-компании: настоящие дизайн-макеты, техническое задание, ревью от старшего разработчика и горящие сроки.

Курс рассчитан на тех кто только знакомится с вёрсткой, начинающих верстальщиков и тех, кто нуждается в систематизации своих навыков.

Всего интенсив состоит из десяти вебинаров, их ведут четыре опытных преподавателя-разработчика.

(далее…)

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

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

Анимация текста в стиле отпечатков пальцев

Технологии: CSS, SVG, CSS анимация, GSAP.js.
Автор: Джон Хили (@jhealey5)

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


(далее…)

Сентябрь уже подходит к концу

В честь начала осени действуют акции на курсы HTML Academy и ещё можно успеть ими воспользоваться до 1 октября.

Пройти бесплатно курс «Анимация»

В формате интерактивной игры можно изучить основы анимации на CSS. Предстоит пройти путь развития цивилизации, покорить космический простор и в финале запустить ракету на Луну.

animate

(далее…)

Еженедельная подборка красивых эффектов на 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-гриды. Как это бывает, я умудрился в одной раскладке сделать и то, и другое. 

(далее…)