Создать гибкие изображения, когда они находятся в макете, в наше время достаточно просто. Однако в более сложных интерфейсах нам часто приходится размещать изображения внутри адаптивных элементов, таких как эта карточка ниже.
#css3
https://webformyself.com/gibkie-izobrazheniya-v-maketax-s-izmenyayushhimisya-proporciyami/

Эй! Вам нужно создать навигацию для сайта, и вы будете работать с мобильным поведением. Какой шаблон вы выбираете? Если вы похожи на большинство людей, то, вероятно, это меню «гамбургер», при нажатии которого используется небольшой JavaScript для расширения вертикального списка навигационных ссылок. Но это не единственный вариант.
#css3
https://webformyself.com/tri-css-alternativy-navigacii-v-javascript/

В своей повседневной работе я разговариваю со многими людьми, у которых много проблем с доступностью различных таблиц и сеток. Сетки иногда дают нам проблемы с комбобоксами и неудачными всплывающими подсказками, которые причиняют головную боль разработчикам, пытающимися правильно реализовать доступность.
#css3
https://webformyself.com/setki-chast-1-ispolzovat-setku-ili-tablicu/

Значение display inline-block является классическим! Оно не ново, и поддержка браузеров — это не то, о чем вам стоит беспокоиться. Я уверен, что многие из нас достигают этого интуитивно. Но давайте поставим точку в этом вопросе. Для чего это на самом деле полезно? Когда вы выбираете его среди других, возможно, похожих, вариантов?
#css3
https://webformyself.com/kogda-ispolzovat-inline-block/

Когда вы меняете font-weight шрифта, это обычно вызывает небольшое смещение макета. Это потому, что полужирный текст часто больше и занимает больше места. Иногда это не имеет значения, например, вертикальный стек ссылок, где более широкий / полужирный текст все равно ничего не смещает. Иногда это имеет значение, например, горизонтальный ряд, где более широкий / жирный текст слегка отодвигает другие элементы.
#css3
https://webformyself.com/poluzhirnyj-shrift-pri-navedenii-bez-sdviga-maketa/

Если вы знакомы с CSS, вы, вероятно, знаете об свойстве box-shadow все. Но знаете ли вы, что существует фильтр CSS drop-shadow, который делает нечто подобное? Например, box-shadow, мы можем передать значения для x-offset, y-offset, радиуса размытия и цвета.
#css3
https://webformyself.com/drop-shadow-nedoocenennyj-filtr-css/

Вы когда-нибудь боролись с вертикальным выравниванием содержимого интерактивных элементов? Вы не одиноки. Многие из сталкивались с этим. В этой статье мы рассмотрим, как центрировать содержимое кнопок и элементов ввода с помощью line-height, padding и flexbox.
#css3
https://webformyself.com/vertikalnoe-vyravnivanie-teksta-v-knopkax-i-elementax-vvoda/

Давайте изучим четыре тонких текстовых эффекта CSS, которые могут добавить динамичности вашему сайту.
#css3
https://webformyself.com/chetyre-effekta-teksta-kotorye-ozhivyat-vash-sajt/

Современный CSS предоставляет нам ряд свойств для создания пользовательских стилей элемента select, которые имеют почти идентичный начальный вид для одиночных, множественных и отключенных элементов select в популярных браузерах.
#css3
https://webformyself.com/polzovatelskie-stili-elementov-select-na-css/

В верстке таблицы являются одним из элементов, с адаптивностью которых на сайте могут возникнуть проблемы. Хотелось бы, чтобы и таблицы были адаптивными, и табличная информация осталась при этом читабельной и удобной для восприятия. В данном уроке будет показано несколько способов сделать таблицы на вашем сайте адаптивными.
#css3
https://webformyself.com/adaptivnye-tablicy/

Помимо использования медиа-запросов и современных макетов CSS, таких как flexbox и grid, для создания адаптивных веб-сайтов, есть некоторые упускаемые из виду вещи, которые мы можем сделать для создания адаптивных сайтов. В этой статье мы рассмотрим ряд инструментов (связанных с HTML и CSS), которые у нас есть, от адаптивных изображений до относительно новых функций CSS, которые работают нативно, независимо от того, используем мы медиа-запросы или нет.
#css3 #html
https://webformyself.com/za-predelami-media-zaprosov-novye-funkcii-dlya-adaptivnogo-dizajna/

CSS Grid — это набор свойств, призванных сделать макет проще, чем когда-либо. Как и почти всегда, есть некоторая кривая обучения, но, честно говоря, с Grid будет весело работать, когда вы освоите его. Одна из областей, в которой он хорош — это хэдер и футер. Немного изменив свое мышление, мы можем получить хэдер и футер, которые ведут себя так, как будто они зафиксированы, или имеют такую «липкую» обработку (нет position: sticky, но такой футер занимает нижнюю часть экрана, даже если на странице нет достаточно контента, чтобы сместить его туда).
#css3
https://webformyself.com/kak-ispolzovat-css-grid-dlya-zakrepleniya-xedera-i-futera/