#css

Знаете чем display: none отличается от visibility:hidden?

Такой вопрос однажды мне попался на собеседовании. Поэтому держите статью про это, может пригодиться 😊

#полезное #css

nth-child генератор

Бывало у вас такое, что нужну было воспользоваться свойством nth-child, но не стандартным, а с более сложной последовательностью?
Данный генератор сильно упрощает работу с этим свойствам, выбираешь нужную последовательность элементов и генерируется 5 вариантов использования nth-child

Практически все верстальщики используют div.container для выравнивания контента в своих проектах, однако данный метод имеет некоторые особенности, от которых можно избавиться.

В этой статье вы узнаете о интересном способе, который позволит полностью отказаться от использования контейнера и достичь того же эффекта.
#css #html

Разберем сегодня псевдокласс :is()

С его помощью можно сократить длинные селекторы, так как он позволяет выбирать несколько элементов с помощью одного правила.

Например вместо такой конструкции:

button:hover,
button:focus,
button.active {
background-color: black;
color: white;
}

Можно написать так:

button:is(:hover, :focus, .active) {
background-color: black;
color: white;
}

Согласитесь, выглядит красивее)

Также приклепляю статью, для более подробного ознакомления с псевдоклассом :is()
#css

#макеты
Покопался немного в старых файлах, и нашел несколько макетов, которые верстал года 4 назад. Буду постепенно публиковать их для вас)

Держите первый макет и тренируйтесь)

#codepen

Красивый ховер эффект для карточек

#макеты
Держите еще один макет для тренировки из личного архива)

#css
Псевдокласс :empty

Применяется для выбора элементов, которые не содержат никакого содержимого или других элементов внутри себя.

Заметьте, что он не будет выбирать элементы, которые пустые, но содержат пробельные символы (например, пробелы или переносы строк).

А если контент для элемента был добавлен с помощью псевдоэлемента ::before или ::after — он все равно считается пустым.

Выглядит интересно, но пользоваться им не приходилось. Так как на практике не встречал задач где его можно примененить.

Можно притянуть за уши несколько примеров. Например скрывать пустые теги из которых удалили содержимое. Либо как-то иначе стилизовать пустые кнопки и ссылки. Или бывают такие случаи, когда добавляешь декоративный элемент через пустой тег.

А что вы думаете на счет псевдокласс :empty? Есть идеи в каких случаях его можно использовать?

#полезное
Интересный сайт с большим набором различных генераторов и инструментов. Причем все сделано качественно, удобно и красиво. А то бывают такие инструменты, в которые зайдешь а ими не возможно пользоваться)

Из самого полезного там есть:
- Крутой набор css анимаций, которые можно настраивать
- Генераторы градиентов, бордеров, теней и.т.д
- Генераторы flex и grid сеток
- Редактор картинок, обрезка, разворот, фильтры

И много всего еще. И это все бесплатно)

#полезное
Ранее я уже публиковал большой набор SVG иконок. А что если вам нужна простая иконка, например стрелка, и вы не желаете использовать SVG? То такую иконку можно сделать с помощью CSS. Главное - знать некоторые фишки и нестандартные решения.

Представляю вам отличный сайт, на котором собрано множество CSS-иконок. Это не только удобный ресурс, который предоставит вам готовые решения для использования в ваших проектах, но и прекрасная возможность научиться работать с CSS на новом уровне.

#полезное #новичок
Держите видео о том, как загрузить на github свой проект и разместить его на бесплатном хостинге GitHub Pages.

#макеты
Вот еще один макет для практики, на этот раз немного сложнее. Включает в себя галерею, модальное окно, формы и 6 страниц. К сожалению, мобильного макета нет, поэтому адаптировать придется своими силами.

#css #игры
Flex Box Adventure

Еще одна игра для изучения и тренировки флексов. В игре есть 3 уровня сложности, поэтому она может быть интересна не только для новичков.

#css #игры
Grid Attack

Еще одна CSS игра. На этот раз для изучения гридов