Адаптивный треугольник в 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».
-
CSS: Картинка по центру
Самый простой способ поставить картинку по центру — флекс. Работает одинаково хорошо со всеми тегами: див, спан или чекбокс, не важно.
-
Не используйте #ID в CSS
Используйте ID по прямому назначению: для идентификации элементов. Для полей ввода, якорных ссылок или яваскрипта. Стили через #id не назначайте.