Какой тег используется для создания многострочного текстового поля?
Anonymous Quiz
31%
<input type="textarea">
44%
<textarea>
9%
<input type="text">
8%
<multitext>
9%
Узнать ответ
👍8
#css
Псевдокласс :not()
Позволяет вам выбрать все элементы, которые не соответствуют определенному селектору, который вы передаете в качестве аргумента в него.
Когда я узнал про этот псевдокласс, то он мне сразу понравился и я начал активно использовать его в работе :). Он хорошо сокращает количество css правил.
Например, если у вас есть список элементов и вы хотите выбрать все элементы, кроме последнего. Или у вас есть блок, который изначально скрыт и мы его показываем, добавляя класс .active. В обоих случаях, вместо двух правил, мы пишем одно с помощью псевдокласса :not().
А вы пользуетесь этим псевдоклассом? Если да, то делитесь своими кейсами использования в комментариях :)
Псевдокласс :not()
Позволяет вам выбрать все элементы, которые не соответствуют определенному селектору, который вы передаете в качестве аргумента в него.
Когда я узнал про этот псевдокласс, то он мне сразу понравился и я начал активно использовать его в работе :). Он хорошо сокращает количество css правил.
Например, если у вас есть список элементов и вы хотите выбрать все элементы, кроме последнего. Или у вас есть блок, который изначально скрыт и мы его показываем, добавляя класс .active. В обоих случаях, вместо двух правил, мы пишем одно с помощью псевдокласса :not().
А вы пользуетесь этим псевдоклассом? Если да, то делитесь своими кейсами использования в комментариях :)
👍11
#css
Псевдокласс :empty
Применяется для выбора элементов, которые не содержат никакого содержимого или других элементов внутри себя.
Заметьте, что он не будет выбирать элементы, которые пустые, но содержат пробельные символы (например, пробелы или переносы строк).
А если контент для элемента был добавлен с помощью псевдоэлемента
Выглядит интересно, но пользоваться им не приходилось. Так как на практике не встречал задач где его можно примененить.
Можно притянуть за уши несколько примеров. Например скрывать пустые теги из которых удалили содержимое. Либо как-то иначе стилизовать пустые кнопки и ссылки. Или бывают такие случаи, когда добавляешь декоративный элемент через пустой тег.
А что вы думаете на счет псевдокласс :empty? Есть идеи в каких случаях его можно использовать?
Псевдокласс :empty
Применяется для выбора элементов, которые не содержат никакого содержимого или других элементов внутри себя.
Заметьте, что он не будет выбирать элементы, которые пустые, но содержат пробельные символы (например, пробелы или переносы строк).
А если контент для элемента был добавлен с помощью псевдоэлемента
::before или ::after — он все равно считается пустым.Выглядит интересно, но пользоваться им не приходилось. Так как на практике не встречал задач где его можно примененить.
Можно притянуть за уши несколько примеров. Например скрывать пустые теги из которых удалили содержимое. Либо как-то иначе стилизовать пустые кнопки и ссылки. Или бывают такие случаи, когда добавляешь декоративный элемент через пустой тег.
А что вы думаете на счет псевдокласс :empty? Есть идеи в каких случаях его можно использовать?
👍9❤1
#полезное
Интересный сайт с большим набором различных генераторов и инструментов. Причем все сделано качественно, удобно и красиво. А то бывают такие инструменты, в которые зайдешь а ими не возможно пользоваться)
Из самого полезного там есть:
- Крутой набор css анимаций, которые можно настраивать
- Генераторы градиентов, бордеров, теней и.т.д
- Генераторы flex и grid сеток
- Редактор картинок, обрезка, разворот, фильтры
И много всего еще. И это все бесплатно)
Интересный сайт с большим набором различных генераторов и инструментов. Причем все сделано качественно, удобно и красиво. А то бывают такие инструменты, в которые зайдешь а ими не возможно пользоваться)
Из самого полезного там есть:
- Крутой набор css анимаций, которые можно настраивать
- Генераторы градиентов, бордеров, теней и.т.д
- Генераторы flex и grid сеток
- Редактор картинок, обрезка, разворот, фильтры
И много всего еще. И это все бесплатно)
🔥9
#ошибки #css
:hover и transition
Часто у новичков возникает затруднение при использовании псевдокласса
Будьте внимательны и избегайте этой распространенной ошибки в своей работе)
:hover и transition
Часто у новичков возникает затруднение при использовании псевдокласса
:hover в сочетании с transition для плавной анимации свойств элемента. Они ошибочно применяют transition именно к :hover, в результате чего анимация происходит только при наведении курсора, но не работает при его отведении. Чтобы обеспечить плавную анимацию в обоих направлениях, необходимо задать transition непосредственно элементу.Будьте внимательны и избегайте этой распространенной ошибки в своей работе)
👍19
#полезное
Ранее я уже публиковал большой набор SVG иконок. А что если вам нужна простая иконка, например стрелка, и вы не желаете использовать SVG? То такую иконку можно сделать с помощью CSS. Главное - знать некоторые фишки и нестандартные решения.
Представляю вам отличный сайт, на котором собрано множество CSS-иконок. Это не только удобный ресурс, который предоставит вам готовые решения для использования в ваших проектах, но и прекрасная возможность научиться работать с CSS на новом уровне.
Ранее я уже публиковал большой набор SVG иконок. А что если вам нужна простая иконка, например стрелка, и вы не желаете использовать SVG? То такую иконку можно сделать с помощью CSS. Главное - знать некоторые фишки и нестандартные решения.
Представляю вам отличный сайт, на котором собрано множество CSS-иконок. Это не только удобный ресурс, который предоставит вам готовые решения для использования в ваших проектах, но и прекрасная возможность научиться работать с CSS на новом уровне.
🔥9
#макеты
Вот еще один макет для практики, на этот раз немного сложнее. Включает в себя галерею, модальное окно, формы и 6 страниц. К сожалению, мобильного макета нет, поэтому адаптировать придется своими силами.
Вот еще один макет для практики, на этот раз немного сложнее. Включает в себя галерею, модальное окно, формы и 6 страниц. К сожалению, мобильного макета нет, поэтому адаптировать придется своими силами.
👍11
Какой атрибут используется в <img> для установки ссылки на картинку?
Anonymous Quiz
29%
href
65%
src
4%
link
0%
target
2%
Узнать ответ
🔥6
#css
Анимируем подчеркивание ссылки
У ссылок по дефолту есть подчеркивание, которое добавляется свойством
Для этого придется делать кастомное подчеркивание. Есть 2 способа, через псевдоэлемент и бэкграунд. Подробности читайте в статье ⬇️
Читать статью
Анимируем подчеркивание ссылки
У ссылок по дефолту есть подчеркивание, которое добавляется свойством
text-decoration: underline. Но такое подчеркивание невозможно красиво анимировать.Для этого придется делать кастомное подчеркивание. Есть 2 способа, через псевдоэлемент и бэкграунд. Подробности читайте в статье ⬇️
Читать статью
🔥6
#css
Псевдокласс :only-child
Выбирает элемент, который является единственным дочерним элементом. На практике крайне редко можно найти ему применение, особенно в статичных сайтах.
Он может пригодится в веб приложениях. Например у вас менеджер задач, и вы хотите поменять цвет у списка, когда в нем остается одна последняя задача.
Также вместо
Псевдокласс :only-child
Выбирает элемент, который является единственным дочерним элементом. На практике крайне редко можно найти ему применение, особенно в статичных сайтах.
Он может пригодится в веб приложениях. Например у вас менеджер задач, и вы хотите поменять цвет у списка, когда в нем остается одна последняя задача.
Также вместо
:only-child можно использовать комбинацию :first-child:last-child. То есть элемент является первый и в тоже время последним, а значит единственным дочерним элементом.👍7
#html
Как сделать текст по кругу?
Иногда возникает необходимость создать текст, размещенный по кругу, что является не самым распространенным эффектом. С помощью CSS это не удастся сделать. Конечно, можно обернуть каждую букву в тег span и с помощью свойства transform сформировать окружность, однако этот способ является трудоемким и не очень эффективным.
Для автоматизации этого процесса можно использовать библиотеку CircleType.js.
Если данный метод не подходит для вас, то есть еще один простой способ - сделать это через SVG. Про SVG способ читайте в прикрепленной статье
Как сделать текст по кругу?
Иногда возникает необходимость создать текст, размещенный по кругу, что является не самым распространенным эффектом. С помощью CSS это не удастся сделать. Конечно, можно обернуть каждую букву в тег span и с помощью свойства transform сформировать окружность, однако этот способ является трудоемким и не очень эффективным.
Для автоматизации этого процесса можно использовать библиотеку CircleType.js.
Если данный метод не подходит для вас, то есть еще один простой способ - сделать это через SVG. Про SVG способ читайте в прикрепленной статье
🔥5