Читать дальше…
Читать далее »Урок 11. Webpack 4+. Компиляция React JSX
Месячные архивы: Март 2019
Урок 12. Webpack 4+. Компиляция TypeScript
Читать дальше…
Читать далее »Эффект для меню на CSS
От автора: приветствую вас, друзья. Меню является одним из ключевых элементов сайта, поэтому не удивительно, что многие хотят как-то выделить его, добавить ему эффектности. В этом уроке мы реализуем очень простой, но вместе с тем очень симпатичный эффект, который вы можете использовать для меню на ваших сайтах. Эффект реализуется буквально несколькими правилами на CSS и не требует дополнительного кода JS ...
Читать далее »Введение в CSS Grid Layout
От автора: CSS grid layout — это новая модель макета, оптимизированная для двумерных макетов. Она идеально подходит для веб-сайтов, форм, галерей изображений и всего, что требует точного и гибкого позиционирования. CSS включает в себя множество свойств, которые могут помочь с макетом сайта. Но до начала 2017 года в CSS не было механизма создания двухмерных макетов веб-сайтов. Но все изменилось с ...
Читать далее »Создание сетки CSS Grid
От автора: Рассмотрим создание сетки CSS Grid 3х3 с небольшим зазором между треками сетки. Мы создадим базовую сетку, которая выглядит следующим образом: Базовая сетка 3х3 (3 ряда и 3 колонки). Вот код: <!doctype html> <title>Example</title> <style> #grid { display: grid; grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; grid-gap: 2vw; } #grid > div { font-size: 5vw; padding: .5em; background: ...
Читать далее »Создание макета сайта с помощью CSS Grid
От автора: здесь мы используем синтаксис CSS grid layout «ASCII art» для создания макета сайта с тремя столбцами. Сетка включает в себя интуитивно понятный синтаксис «ASCII art», с помощью которого вы можете практически «увидеть» макет в коде. Даже серьезные изменения могут быть выполнены за несколько секунд. Этот интуитивно понятный синтаксис также помогает с адаптивным веб-дизайном. С помощью CSS Grid макет ...
Читать далее »