#полезное
Интересный сайт с большим набором различных генераторов и инструментов. Причем все сделано качественно, удобно и красиво. А то бывают такие инструменты, в которые зайдешь а ими не возможно пользоваться)
Из самого полезного там есть:
- Крутой набор 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