Шпаргалка по позиционированию элементов с помощью CSS Grid
Сохраняем и держим при себе.
#css #шпаргалка
Учитесь фронтенду с нами — подпишитесь 💻
Сохраняем и держим при себе.
#css #шпаргалка
Как настроить выбор темы на сайте
Для этого нам понадобится медиавыражение `prefers-color-scheme`, которое определяет выбранную в предпочтениях пользователя настройку темы в операционной системе.
Например, это может выглядеть так:
```
@media (prefers-color-scheme: light) {
.block {
background: white;
color: black;
}
}```
Более подробно о медиавыражение рекомендую почитать тут:
https://doka.guide/css/prefers-color-scheme/
#css
Учитесь фронтенду с нами — подпишитесь 💻
Для этого нам понадобится медиавыражение `prefers-color-scheme`, которое определяет выбранную в предпочтениях пользователя настройку темы в операционной системе.
Например, это может выглядеть так:
```
@media (prefers-color-scheme: light) {
.block {
background: white;
color: black;
}
}```
Более подробно о медиавыражение рекомендую почитать тут:
https://doka.guide/css/prefers-color-scheme/
#css
Математические функции CSS со ступенчатыми значениями
В CSS теперь полноценно работают функции round(), rem() и mod(). Работают они точно также, как и в JavaScript, то есть округляют, и возвращают остатки. Это даёт ещё больше возможностей для стилизации сайта без применения JavaScript, но и увеличивает нагрузку со стороны CSS.
Чтобы было понятнее, где это может быть применимо, я нашёл статью, которая объясняет их использование на простых примерах создания спрайтов анимации:
https://habr.com/ru/articles/816587/
#css
Учитесь фронтенду с нами — подпишитесь 💻
В CSS теперь полноценно работают функции round(), rem() и mod(). Работают они точно также, как и в JavaScript, то есть округляют, и возвращают остатки. Это даёт ещё больше возможностей для стилизации сайта без применения JavaScript, но и увеличивает нагрузку со стороны CSS.
Чтобы было понятнее, где это может быть применимо, я нашёл статью, которая объясняет их использование на простых примерах создания спрайтов анимации:
https://habr.com/ru/articles/816587/
#css
Хабр
Новые функции CSS (mod, round) или как сделать анимированные Sprite Sheet без JS
Введение. Что это такое? Sprite Sheet — это техника в веб-разработке, позволяющая использовать множество различных кадров анимации, хранящихся в одном изображении. Это эффективный способ уменьшить...
Учимся создавать анимацию жидкости с помощью JS и CSS
В этом видео вы за 8 минут научитесь делать клёвую анимацию, которая создаёт эффект стекающей жидкости. Причём движение элементов отличается в случае свободного падения и взаимодействия с другими объектами на странице.
Подробнее:
https://youtu.be/a5X512icOM8
#видео #css #javascript
Учитесь фронтенду с нами — подпишитесь 💻
В этом видео вы за 8 минут научитесь делать клёвую анимацию, которая создаёт эффект стекающей жидкости. Причём движение элементов отличается в случае свободного падения и взаимодействия с другими объектами на странице.
Подробнее:
https://youtu.be/a5X512icOM8
#видео #css #javascript
YouTube
Amazing Liquid Dripping Effects using CSS & Javascipt
All Source Code : https://www.patreon.com/onlinetutorials
Get now more than 1000+ source code just by clicking on this link
------------------
Enroll My Course : Next Level CSS Animation and Hover Effects
https://www.udemy.com/course/css-hover-animation…
Get now more than 1000+ source code just by clicking on this link
------------------
Enroll My Course : Next Level CSS Animation and Hover Effects
https://www.udemy.com/course/css-hover-animation…
This media is not supported in your browser
VIEW IN TELEGRAM
Как работает CSS Flexbox: наглядное введение в систему компоновки элементов
CSS Flexbox — это технология для создания сложных гибких макетов за счёт правильного размещения элементов на странице. Используя её, вам не понадобится Bootstrap или его аналог.
В этой статье разобраны возможности CSS Flexbox с помощью гифок, чтобы вы сразу понимали, как работает каждый из методов — настоящая flex шпаргалка для тех, кто хочет быстро прокачать свои скилы в вёрстке.
#css
CSS Flexbox — это технология для создания сложных гибких макетов за счёт правильного размещения элементов на странице. Используя её, вам не понадобится Bootstrap или его аналог.
В этой статье разобраны возможности CSS Flexbox с помощью гифок, чтобы вы сразу понимали, как работает каждый из методов — настоящая flex шпаргалка для тех, кто хочет быстро прокачать свои скилы в вёрстке.
#css
This media is not supported in your browser
VIEW IN TELEGRAM
Форма авторизации с капчей
Наверняка вам придётся делать такую форму в своей практике, поэтому чем быстрее научитесь, тем лучше. В этом проекте форма создана на стандартном стеке — HTML, CSS, JS.
Ниже вы можете посмотреть, как это работает, а также изучить код:
https://codepen.io/Frontend-Portal/pen/oNRbjXG
#codepen #html #css #javascript
Наверняка вам придётся делать такую форму в своей практике, поэтому чем быстрее научитесь, тем лучше. В этом проекте форма создана на стандартном стеке — HTML, CSS, JS.
Ниже вы можете посмотреть, как это работает, а также изучить код:
https://codepen.io/Frontend-Portal/pen/oNRbjXG
#codepen #html #css #javascript
This media is not supported in your browser
VIEW IN TELEGRAM
Магия clip-path
В этой статье вы сможете узнать скрытые возможности
https://emilkowal.ski/ui/the-magic-of-clip-path
#css #en
clip-path
часто используется для обрезки элементов под самые разные формы. Но также его можно применять и для анимаций, создавая сложные эффекты, которые выделят ваш сайт среди сотен других.В этой статье вы сможете узнать скрытые возможности
clip-path
и увидеть интересные способы его использования: https://emilkowal.ski/ui/the-magic-of-clip-path
#css #en
Анимации скролла во фронтенде
Сегодня на сайтах часто используются анимации, которые привязаны к скроллу страницы. Это делает сайт более живым и динамичным.
Если хотите научиться делать также, то эта статья для вас. Здесь вы найдёте несколько демо для изучения работы эффекта на CSS и JS, полезные инструменты, которые упростят создание таких анимаций, а также бесплатный видеокурс по этой теме:
https://scroll-driven-animations.style/
#css #javascript #en
Учитесь фронтенду с нами — подпишитесь 💻
Сегодня на сайтах часто используются анимации, которые привязаны к скроллу страницы. Это делает сайт более живым и динамичным.
Если хотите научиться делать также, то эта статья для вас. Здесь вы найдёте несколько демо для изучения работы эффекта на CSS и JS, полезные инструменты, которые упростят создание таких анимаций, а также бесплатный видеокурс по этой теме:
https://scroll-driven-animations.style/
#css #javascript #en
10 полезных однострочников для CSS, которые пригодятся в большинстве проектов
Эти несколько однострочников помогут вам облегчить вёрстку сайта, избавив от стандартных сложностей и неожиданного поведения страницы:
https://alvaromontoro.com/blog/68055/ten-css-one-liners-for-almost-every-project
#css
Учитесь фронтенду с нами — подпишитесь 💻
Эти несколько однострочников помогут вам облегчить вёрстку сайта, избавив от стандартных сложностей и неожиданного поведения страницы:
https://alvaromontoro.com/blog/68055/ten-css-one-liners-for-almost-every-project
#css
CSS-классы вредны?
Если вы когда-нибудь заглядывали за кулисы пользовательских веб-интерфейсов, то знаете для чего нужно свойство class. Оно ведь нужно для связи HTML с CSS, правда?
Сейчас вы узнаете о том, почему настало время отказаться от него:
https://habr.com/ru/companies/ruvds/articles/829926/
#css #статья
Учитесь фронтенду с нами — подпишитесь 💻
Если вы когда-нибудь заглядывали за кулисы пользовательских веб-интерфейсов, то знаете для чего нужно свойство class. Оно ведь нужно для связи HTML с CSS, правда?
Сейчас вы узнаете о том, почему настало время отказаться от него:
https://habr.com/ru/companies/ruvds/articles/829926/
#css #статья
Топ-7 фишек HTML/CSS верстки сайта, которые вы должны знать
Вёрстка сайта на самом деле не такая сложная, как кажется на первый взгляд. В этом видео вы увидите легкие способы сделать паралакс-эфеект на вашей странице, добавить анимации CSS и многое другое, что поможет вам в дальнейшем быстрее верстать и применять в своей работе.
https://youtu.be/wRZx6ylDfoI?si=r0dIignjsimlmiXu
#видео #html #css
Учитесь фронтенду с нами — подпишитесь 💻
Вёрстка сайта на самом деле не такая сложная, как кажется на первый взгляд. В этом видео вы увидите легкие способы сделать паралакс-эфеект на вашей странице, добавить анимации CSS и многое другое, что поможет вам в дальнейшем быстрее верстать и применять в своей работе.
https://youtu.be/wRZx6ylDfoI?si=r0dIignjsimlmiXu
#видео #html #css
YouTube
Топ-7 фишек HTML/CSS верстки сайта которые ты должен знать
Мы продолжаем рубрику улучшаем код и в этом видео мы поговорим про топ 7 фишек html css для верстки сайта, котоые вы должны знать. Верстка сайта на самом деле не такая сложная как кажется на первый взгляд, да и html css кажется для начинающих темным лесом.…
Полный курс HTML & CSS за 6 часов
Это бесплатный курс на YouTube, где вы узнаете о структуре HTML и разнице между различными тегами, а также способы подключения CSS и базовые стили.
Вы также изучите блочную модель CSS, позиционирование элементов на странице, псевдоклассы и псевдоэлементы. Кроме того, вы научитесь работать с flexbox и использовать его для создания гибких и адаптивных макетов.
В курсе также будет практика на реальных макетах, адаптивная верстка, гриды, Bootstrap, анимации и transitions в CSS.
Успейте посмотреть, пока YouTube ещё работает:
https://youtu.be/TPas02fsuKU
#видео #курс #html #css https://youtu.be/TPas02fsuKU?si=8wn65R5ltccC6wQe
Учитесь фронтенду с нами — подпишитесь 💻
Это бесплатный курс на YouTube, где вы узнаете о структуре HTML и разнице между различными тегами, а также способы подключения CSS и базовые стили.
Вы также изучите блочную модель CSS, позиционирование элементов на странице, псевдоклассы и псевдоэлементы. Кроме того, вы научитесь работать с flexbox и использовать его для создания гибких и адаптивных макетов.
В курсе также будет практика на реальных макетах, адаптивная верстка, гриды, Bootstrap, анимации и transitions в CSS.
Успейте посмотреть, пока YouTube ещё работает:
https://youtu.be/TPas02fsuKU
#видео #курс #html #css https://youtu.be/TPas02fsuKU?si=8wn65R5ltccC6wQe
YouTube
Полный курс HTML & CSS за 6 часов
Привет! Я рада представить вам мой полный курс по HTML и CSS на YouTube! Если вы хотите научиться создавать красивые и функциональные веб-страницы, то этот курс для вас.
Я покажу вам, как клиент взаимодействует с сервером и как использовать текстовый редактор…
Я покажу вам, как клиент взаимодействует с сервером и как использовать текстовый редактор…
24 CSS-проекта за два с половиной часа
В этом видео собраны 24 задания, на протяжении которых вы будете воссоздавать компоненты и макеты из популярных приложений, таких как GitHub, CodePen и других. Вы также создадите анимацию загрузки, индикаторы выполнения, карточки и многое другое, используя чистый CSS.
Смотрим тут:
https://youtu.be/TzuWIHGFKCQ
#видео #css #туториал
Учитесь фронтенду с нами — подпишитесь 💻
В этом видео собраны 24 задания, на протяжении которых вы будете воссоздавать компоненты и макеты из популярных приложений, таких как GitHub, CodePen и других. Вы также создадите анимацию загрузки, индикаторы выполнения, карточки и многое другое, используя чистый CSS.
Смотрим тут:
https://youtu.be/TzuWIHGFKCQ
#видео #css #туториал
YouTube
24 CSS Projects: Loading Animations, Progress Bars, Flashcards & More!
Find out how well you really know CSS with this bumper pack of challenges, all contained in one easy-access video.
✏️ Study this course interactively on Scrimba: https://v2.scrimba.com/css-challenges-c02p
Code is available on the Scrimba course page for…
✏️ Study this course interactively on Scrimba: https://v2.scrimba.com/css-challenges-c02p
Code is available on the Scrimba course page for…