Создать гибкие изображения, когда они находятся в макете, в наше время достаточно просто. Однако в более сложных интерфейсах нам часто приходится размещать изображения внутри адаптивных элементов, таких как эта карточка ниже.
#css3
https://webformyself.com/gibkie-izobrazheniya-v-maketax-s-izmenyayushhimisya-proporciyami/
#css3
https://webformyself.com/gibkie-izobrazheniya-v-maketax-s-izmenyayushhimisya-proporciyami/
WebForMySelf - Как создать свой сайт, блог, интернет-магазин бесплатно и самостоятельно - Проект содержит массу полезных статей и видео уроков по сайтостроению. Будет полезен веб-разработчикам, а также новичкам, которые только пытаются постигнуть азы сайтостроения.
Гибкие изображения в макетах с изменяющимися пропорциями - WebForMySelf - Как создать свой сайт, блог, интернет-магазин бесплатно…
Как разместить гибкое изображение внутри адаптивных элементов. Использование свойства object-fit. Отделение основного содержимого от фона
Эй! Вам нужно создать навигацию для сайта, и вы будете работать с мобильным поведением. Какой шаблон вы выбираете? Если вы похожи на большинство людей, то, вероятно, это меню «гамбургер», при нажатии которого используется небольшой JavaScript для расширения вертикального списка навигационных ссылок. Но это не единственный вариант.
#css3
https://webformyself.com/tri-css-alternativy-navigacii-v-javascript/
#css3
https://webformyself.com/tri-css-alternativy-navigacii-v-javascript/
Webformyself
Три CSS альтернативы навигации в JavaScript
Навигация JavaScript и CSS: альтернативы. Меню на отдельной странице. Горизонтальный скроллер. Гамбургер
В своей повседневной работе я разговариваю со многими людьми, у которых много проблем с доступностью различных таблиц и сеток. Сетки иногда дают нам проблемы с комбобоксами и неудачными всплывающими подсказками, которые причиняют головную боль разработчикам, пытающимися правильно реализовать доступность.
#css3
https://webformyself.com/setki-chast-1-ispolzovat-setku-ili-tablicu/
#css3
https://webformyself.com/setki-chast-1-ispolzovat-setku-ili-tablicu/
Webformyself
Сетки Часть 1: Использовать сетку или таблицу
Путеводитель по сеткам. Что это такое. Сравнение с таблицами. Что и когда лучше использовать. Семантика
Значение display inline-block является классическим! Оно не ново, и поддержка браузеров — это не то, о чем вам стоит беспокоиться. Я уверен, что многие из нас достигают этого интуитивно. Но давайте поставим точку в этом вопросе. Для чего это на самом деле полезно? Когда вы выбираете его среди других, возможно, похожих, вариантов?
#css3
https://webformyself.com/kogda-ispolzovat-inline-block/
#css3
https://webformyself.com/kogda-ispolzovat-inline-block/
Когда вы меняете font-weight шрифта, это обычно вызывает небольшое смещение макета. Это потому, что полужирный текст часто больше и занимает больше места. Иногда это не имеет значения, например, вертикальный стек ссылок, где более широкий / полужирный текст все равно ничего не смещает. Иногда это имеет значение, например, горизонтальный ряд, где более широкий / жирный текст слегка отодвигает другие элементы.
#css3
https://webformyself.com/poluzhirnyj-shrift-pri-navedenii-bez-sdviga-maketa/
#css3
https://webformyself.com/poluzhirnyj-shrift-pri-navedenii-bez-sdviga-maketa/
Webformyself
Полужирный шрифт при наведении без сдвига макета
Жирный или полужирный шрифт при наведении без смещения макета. Выделение и дополнительная ширина
Если вы знакомы с CSS, вы, вероятно, знаете об свойстве box-shadow все. Но знаете ли вы, что существует фильтр CSS drop-shadow, который делает нечто подобное? Например, box-shadow, мы можем передать значения для x-offset, y-offset, радиуса размытия и цвета.
#css3
https://webformyself.com/drop-shadow-nedoocenennyj-filtr-css/
#css3
https://webformyself.com/drop-shadow-nedoocenennyj-filtr-css/
Webformyself
Drop-Shadow: недооцененный фильтр CSS
Самый недооцененный фильтр CSS: чем полезен Drop-Shadow. Добавление тени к непрямоугольным фигурам и обрезанным элементам
Вы когда-нибудь боролись с вертикальным выравниванием содержимого интерактивных элементов? Вы не одиноки. Многие из сталкивались с этим. В этой статье мы рассмотрим, как центрировать содержимое кнопок и элементов ввода с помощью line-height, padding и flexbox.
#css3
https://webformyself.com/vertikalnoe-vyravnivanie-teksta-v-knopkax-i-elementax-vvoda/
#css3
https://webformyself.com/vertikalnoe-vyravnivanie-teksta-v-knopkax-i-elementax-vvoda/
Webformyself
Вертикальное выравнивание текста в кнопках и элементах ввода
Вертикальное выравнивание текста интерактивных элементов. Свойства font-size, line-height, padding, border. Альтернативный подход
Давайте изучим четыре тонких текстовых эффекта CSS, которые могут добавить динамичности вашему сайту.
#css3
https://webformyself.com/chetyre-effekta-teksta-kotorye-ozhivyat-vash-sajt/
#css3
https://webformyself.com/chetyre-effekta-teksta-kotorye-ozhivyat-vash-sajt/
Webformyself
Четыре эффекта текста, которые оживят ваш сайт
4 текстовых эффекта для динамичности сайта: волны, свечение, отображение, вибрация. Примеры кода
Современный CSS предоставляет нам ряд свойств для создания пользовательских стилей элемента select, которые имеют почти идентичный начальный вид для одиночных, множественных и отключенных элементов select в популярных браузерах.
#css3
https://webformyself.com/polzovatelskie-stili-elementov-select-na-css/
#css3
https://webformyself.com/polzovatelskie-stili-elementov-select-na-css/
Webformyself
Пользовательские стили элементов select на CSS
Как задать пользовательский стиль элемента select в CSS. Распространенные проблемы. Базовый HTML. Множественный выбор
В верстке таблицы являются одним из элементов, с адаптивностью которых на сайте могут возникнуть проблемы. Хотелось бы, чтобы и таблицы были адаптивными, и табличная информация осталась при этом читабельной и удобной для восприятия. В данном уроке будет показано несколько способов сделать таблицы на вашем сайте адаптивными.
#css3
https://webformyself.com/adaptivnye-tablicy/
#css3
https://webformyself.com/adaptivnye-tablicy/
Webformyself
Адаптивные таблицы
В данном уроке будет показано несколько способов сделать таблицы на вашем сайте адаптивными
Помимо использования медиа-запросов и современных макетов CSS, таких как flexbox и grid, для создания адаптивных веб-сайтов, есть некоторые упускаемые из виду вещи, которые мы можем сделать для создания адаптивных сайтов. В этой статье мы рассмотрим ряд инструментов (связанных с HTML и CSS), которые у нас есть, от адаптивных изображений до относительно новых функций CSS, которые работают нативно, независимо от того, используем мы медиа-запросы или нет.
#css3 #html
https://webformyself.com/za-predelami-media-zaprosov-novye-funkcii-dlya-adaptivnogo-dizajna/
#css3 #html
https://webformyself.com/za-predelami-media-zaprosov-novye-funkcii-dlya-adaptivnogo-dizajna/
Webformyself
За пределами медиа-запросов: новые функции для адаптивного дизайна
Как сделать дизайн сайта адаптивным с помощью новых функций HTML и CSS. Установка минимальных и максимальных значений. Изображения