Значение 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/

Как человек, который любит создавать CSS-анимацию, я использую один из наиболее мощных инструментов perspective. Хотя свойство perspective не поддерживает 3D-эффекты само по себе (поскольку базовые фигуры не могут иметь глубины), вы можете использовать свойство transform для перемещения и поворота объектов в 3D-пространстве (с осями X, Y и Z), а затем используйте perspective для контроля глубины.
#css3
https://webformyself.com/kak-rabotaet-css-perspective/

CSS продолжает развиваться, как и его кузен Javascript. Я подумал, что поделюсь с разработчиками некоторыми свойствами макета CSS, которые пока относительно неизвестны. Первые 3 — это вариации почти одного и того же, а четвертое — самое непонятное и неподдерживаемое из всех.
#css3
https://webformyself.com/4-neizvestnyx-svojstva-maketa-css/

Сегодня сложно представить себе современный сайт, на котором бы не использовались тени. Благодаря теням можно обратить внимание на тот или иной элемент, сделать его объемным и более привлекательным.
#css3
https://webformyself.com/filtr-drop-shadow-dlya-izobrazhenij/

В этом уроке вы найдете интересный эффект свечения для текста на CSS. Данный эффект великолепно подойдет, к примеру, для заголовка на первом экране вашего сайта. Эффект смотрится достаточно интересно и наверняка позволит задержать посетителей немного дольше на вашем сайте. При этом сам эффект очень прост в реализации и создается буквально в несколько строк кода.
#css3
https://webformyself.com/effekt-svecheniya-dlya-teksta-na-css/

Этот пост предназначен для людей, которые никогда не играли с красным квадратом в CSS.
#css3
https://webformyself.com/vvedenie-v-css-animaciyu/

Несколько полезных функций CSS для диапазонов значений уже некоторое время хорошо поддерживаются, и я наконец их нашел. Я недавно узнал о трех функциях CSS, и я не могу поверить, что никогда не слышал о них раньше: min, max, и clamp. Они позволяют определять гибкий диапазон значений для любого свойства в одной строке. Они кажутся простыми, но открывают множество возможностей.
#css3
https://webformyself.com/min-max-i-clamp-css/

Данная статья предлагает руководство ко всему, что вам нужно знать о центрировании в CSS.
#css3
https://webformyself.com/centrirovanie-v-css/

Инструменты для вертикального выравнивания в последнее время стали намного лучше. В первые годы работы в качестве дизайнера веб-сайтов я разрабатывал дизайн домашней страницы шириной 960 пикселей и выравнивал элементы по горизонтали на странице с помощью сетки из 12 столбцов. Появились медиа-запросы, которые потребовали серьезного психологического сдвига. Конечно, они решили некоторые значительные проблемы, но представили новые, например, работу с выравниванием, когда элементы переносятся или иным образом перемещаются в макете.
#css3
https://webformyself.com/dostizhenie-vertikalnogo-vyravnivaniya/

Многие разработчики используют несколько семейств шрифтов и размеров шрифта, чтобы лучше представить веб-страницу. Например, разработчик может использовать шрифт Bold Comic Sans для заголовков и шрифт Roboto для текста. Однако из-за этого ваш веб-сайт может выглядеть неаккуратным, поскольку многие браузеры не поддерживают все шрифты. Свойство CSS font-size-adjust поможет избежать такой ситуации, сделав размер шрифта автоматически настраиваемым.
#css3
https://webformyself.com/kak-avtomaticheski-nastroit-razmer-shrifta-s-pomoshhyu-css-font-size-adjust/

Бывают случаи, когда желательно иметь шкалу размера шрифта между двумя крайностями в зависимости от ширины экрана. Странно то, что я видел, как люди используют, чтобы достичь этого, например, RFS. Сам RFS представляет собой пример того, как НЕ делать это в эпоху вычислений и сравнений CSS3.
#css3
https://webformyself.com/adaptivnyj-razmer-shrifta-s-ispolzovaniem-chistogo-css/

Переменные CSS (также известные как пользовательские свойства) поддерживаются в веб-браузерах почти четыре года. Мне нравится использовать их в зависимости от проекта и ситуации. Они очень полезны и просты в использовании, но часто фронтенд-разработчик может неправильно их использовать или неправильно понимать.
#css3
https://webformyself.com/vse-o-peremennyx-css/