Please enable JavaScript.
Coggle requires JavaScript to display documents.
css - Coggle Diagram
css
CSS
units
Анна Блок
Единицы измерения CSS для font-size
Анна Блок
Единицы измерения CSS для padding, margin, height, width
:book:
Book
Инлайновый контекст форматирования
Слова, часто используемые в CSS-классах
htmlacademy
Использование псевдокласса :nth-child
Теория цвета в цифрах
Сервис для создания спрайтов
Используйте свойство box-sizing
Раскладка в CSS: float
Способы: отступы м/у items в галерее
inline-block
Борьба с пробелами между блочно-строчными элементами
«Загадочные отступы» между инлайн-элементами
Адаптив
html5book
Адаптивная вёрстка сайта, урок первый. Вёрстка главной страницы
Адаптивная вёрстка, урок второй. Адаптивное видео на сайте
Адаптивно-отзывчивый: разбираемся в терминологии
Яндекс
Делать ли мобильную версию? 5 распространенных проблем, которые решает адаптивная верстка
htmlacademy
Адаптивная вёрстка
Выбираем между «min-width» и «max-width»
Ускоряем адаптив сайта в 3 раза с помощью scss-миксина
:movie_camera:
Фрилансер по жизни - IT и фриланс
Адаптивная вёрстка сайтов за 37 минут + макет
Анна Блок
Адаптивность сайта: теория и разбор типичных ситуаций на практике
breakpoints
Как выбрать правильную ширину сайта
100% правильный способ делать адаптивные брейкпоинты в CSS
)
Media Queries for Standard Devices
images
webref
:check:Самоучитель HTML
Изображения + форматы
:check::!:
Как отличить контентное изображение от декоративного
HTML-изображения (img, map,area)
Как правильно задать размеры для IMG если заранее не известны размеры картинки?
Фрилансер по жизни
:check::!:
Адаптивные изображения
:check:
Применение класса "ibg"
:!: От 0 до 1
:check:
Вставка картинок для ретина, webp, оптимизация графики
squoosh - сжатие изображений
Адаптивные изображения
Где скачать бесплатные фотографии для сайта
Favicon Generator
Форматы изображений для веба
медиа выражения для retina
Про retina и
media
Макеев
Skillbox, оптимизация графики, Squoosh и элемент picture
Спрайты
htmlacademy
Фоны.Знакомство-16
Кексби.Четвертьфинал-9-11
Tools
CSS Sprite Generator
svg
Используем SVG на сайте
Доступные SVG-иконки с инлайновыми спрайтами
:movie_camera: BrainsCloud
Как создавать SVG спрайты? | SVG Sprites
Фрилансер
Иконочный шрифт
Все об SVG анимации
Способы генерации SVG-спрайтов на примере библиотеки svg-sprite
Grids
Типы макетов сайта. Верстка страницы по макету. Как верстать макеты
htmlacademy
Примеры использования флексбоксов
:movie_camera:
В чем разница между Float, Flexbox и Grid CSS?
Когда использовать флексы, а когда гриды
microgrids
html5book.ru
Горизонтальное меню для сайта
Grid Cheatsheet
yoksel
malven
masonry
CSS masonry с помощью flexbox, :nth-child() и order
Creating a Responsive Pure CSS Masonry Layout
Animation
High Performance Animations
Forms
Кроссбраузерное оформление для HMTL5 элемента input с типом range
Стилизация старого доброго элемента button
Макеев
Кастомные чекбоксы правильно
КАК СТИЛИЗОВАТЬ ПОЛЕ ДЛЯ ОТПРАВКИ ФАЙЛА
псевдоклассы
htmlacademy
Использование псевдокласса :nth-child
other
htmlacademy
Как прятать
w3.org
Наследуемые свойства
Full property table
:arrow_right: колонка inheritance
Почему мы предпочитаем CSS(--variable) переменным SASS($variable)?
Fonts
шрифты
fontstorage
Google Fonts
Подключение нестандартных шрифтов
Part 1
Part 2
Webfont Generator
fontsquirrel
генераторы иконочных шрифтов
icomoon.io
fontastic.me
glyphter.com
flexbox
flexbugs