Emmet, шпаргалка сокращений. Шорткоды
Emmet — плагин, с которым быстрее писать HTML и CSS код при помощи различных команд. Здесь собраны основные сокращения и варианты их применения.
Список записей блога
-
-
Стрелка и пальчик
Илья Бирман написал заметку, в которой затронул вопрос: а нужно ли, чтобы курсор менялся при наведении на кнопку? Правда, без собственного ответа. Я считаю, что курсор при наведении всегда должен меняться на руку с пальцем. И сейчас попробую обосновать свою точку зрения.
-
Фотошоп для верстальщика. Бесплатный мини-курс.
Три коротких видео, которые помогут разобраться в основных принципах работы с фотошопом для вёрстки.
-
Адаптивный треугольник в CSS
Рассмотрим варианты, как сделать треугольник, который смотрит вниз, с помощью CSS, используя псевдоэлемент «after»
-
webTrip #1, год 1991: рождение Веба, первый сайт и Терминатор-2
webTrip — шоу об истории Всемирной Сети и околотематических событиях.
В этом выпуске: рождение Веба и первого сайта, фотошоп-2, Джон Бардин — изобретатель транзистора и выход на экраны Терминатора-2. -
Форматы растровой графики для веба
Самые популярные форматы растровой графики — GIF, JPG и PNG. За счёт поддержки браузерами и малого веса.
-
Анимация таблицы в CSS
Реализуйте эффект, чтобы строка таблицы изменяла форму при наведении курсора.
-
Чек-лист верстальщика
Гигиена кода — залог крепкой и надёжной вёрстки. Чеклист помогает не допускать банальных ошибок и освободить голову для решения сложных задач.
-
Отлов пустых элементов на сайте 👻
Пустые элементы в разметке плохо сказываются на доступности сайта. Их нужно наполнять контентом или удалять.
-
Анимированная рамка с градиентом
Сделайте, чтобы рамке с градиентом добавлялась анимация при наведении на элемент.
-
Изменение сниппета для Emmet
Инструкция по настройке существующих сниппетов под себя.
-
Задачка на прокачку: выход из прямоугольника
Повторите эффект, когда картинка выходит за рамки родительского блока
-
Основные селекторы CSS
Селекторы объясняют браузеру, какие стили применить к элементу. Это основа CSS.
-
CSS свойство box-shadow и его параметры
Box-shadow добавляет элементу одну или несколько теней
-
Задачка на прокачку: блоки без текста
В этой задачке на прокачку нужно подсветить блоки без текста красным и добавить в них надпись.
-
Emmet для Sublime text: установка
Emmet — плагин, ускоряющий написание HTML и CSS кода. Статья поможет установить плагин для Sublime text.
-
Задачка на прокачку: выпадающее меню-2
Придумал новую задачку, по мотивам прошлой. Думаю, будет легко, но весело. Возникнут сложности — начните с первой 😉
-
Блочная вёрстка на примере банки с водой
Рассмотрим вёрстку блока с контентом на примере банки с водой: как правильно использовать отступы и не писать лишний код.
-
Задачка на прокачку: выпадающее меню
Задачка на прокачку — это небольшое упражнение на знание CSS. Времени на решение много не уйдёт, а размяться поможет. Главное условие — соблюдать ограничения. Надеюсь, вам понравится.
-
Emmet: автоматическая замена синтаксиса
Короткая заметка о том, как настроить синтаксис для плагина «Emmet» в текстовом редакторе «Sublime».