Заметки Верстальщика

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

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

#ошибки #css:hover и transitionЧасто у новичков возникает затруднение при использовании псевдокласса :hover в сочетании с transition для плавной анимации свойств элемента. Они ошибочно применяют transition именно к :hover, в результате чего анимация происходит только при наведении курсора, но не работает при его отведении. Чтобы обеспечить плавную анимацию в обоих направлениях, необходимо задать transition непосредственно элементу.Будьте внимательны и избегайте этой распространенной ошибки в своей работе)#ошибки #css:hover и transitionЧасто у новичков возникает затруднение при использовании псевдокласса :hover в сочетании с transition для плавной анимации свойств элемента. Они ошибочно применяют transition именно к :hover, в результате чего анимация происходит только при наведении курсора, но не работает при его отведении. Чтобы обеспечить плавную анимацию в обоих направлениях, необходимо задать transition непосредственно элементу.Будьте внимательны и избегайте этой распространенной ошибки в своей работе)

#полезноеИнтересный сайт с большим набором различных генераторов и инструментов. Причем все сделано качественно, удобно и красиво. А то бывают такие инструменты, в которые зайдешь а ими не возможно пользоваться)Из самого полезного там есть:- Крутой набор css анимаций, которые можно настраивать- Генераторы градиентов, бордеров, теней и.т.д- Генераторы flex и grid сеток- Редактор картинок, обрезка, разворот, фильтрыИ много всего еще. И это все бесплатно)

#cssПсевдокласс :emptyПрименяется для выбора элементов, которые не содержат никакого содержимого или других элементов внутри себя.Заметьте, что он не будет выбирать элементы, которые пустые, но содержат пробельные символы (например, пробелы или переносы строк).А если контент для элемента был добавлен с помощью псевдоэлемента ::before или ::after — он все равно считается пустым.Выглядит интересно, но пользоваться им не приходилось. Так как на практике не встречал задач где его можно примененить.Можно притянуть за уши несколько примеров. Например скрывать пустые теги из которых удалили содержимое. Либо как-то иначе стилизовать пустые кнопки и ссылки. Или бывают такие случаи, когда добавляешь декоративный элемент через пустой тег.А что вы думаете на счет псевдокласс :empty? Есть идеи в каких случаях его можно использовать?

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

#cssПсевдокласс :not()Позволяет вам выбрать все элементы, которые не соответствуют определенному селектору, который вы передаете в качестве аргумента в него.Когда я узнал про этот псевдокласс, то он мне сразу понравился и я начал активно использовать его в работе :). Он хорошо сокращает количество css правил. Например, если у вас есть список элементов и вы хотите выбрать все элементы, кроме последнего. Или у вас есть блок, который изначально скрыт и мы его показываем, добавляя класс .active. В обоих случаях, вместо двух правил, мы пишем одно с помощью псевдокласса :not().А вы пользуетесь этим псевдоклассом? Если да, то делитесь своими кейсами использования в комментариях :)#cssПсевдокласс :not()Позволяет вам выбрать все элементы, которые не соответствуют определенному селектору, который вы передаете в качестве аргумента в него.Когда я узнал про этот псевдокласс, то он мне сразу понравился и я начал активно использовать его в работе :). Он хорошо сокращает количество css правил. Например, если у вас есть список элементов и вы хотите выбрать все элементы, кроме последнего. Или у вас есть блок, который изначально скрыт и мы его показываем, добавляя класс .active. В обоих случаях, вместо двух правил, мы пишем одно с помощью псевдокласса :not().А вы пользуетесь этим псевдоклассом? Если да, то делитесь своими кейсами использования в комментариях :)

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

Разберем сегодня псевдокласс :is()С его помощью можно сократить длинные селекторы, так как он позволяет выбирать несколько элементов с помощью одного правила.Например вместо такой конструкции:button:hover,button:focus,button.active { background-color: black; color: white;}Можно написать так:button:is(:hover, :focus, .active) { background-color: black; color: white;}Согласитесь, выглядит красивее)Также приклепляю статью, для более подробного ознакомления с псевдоклассом :is()#css

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