This media is not supported in your browser
VIEW IN TELEGRAM
Свойство overflow в CSS определяет, как браузер обрабатывает содержимое, выходящее за пределы элемента.
Оно принимает следующие значения:
• visible — содержимое выходит за границы элемента (значение по умолчанию).
• hidden — обрезает лишнее содержимое, скрывая его.
• scroll — добавляет прокрутку, даже если она не нужна.
• auto — добавляет прокрутку только тогда, когда содержимое превышает размеры элемента.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍27🔥7
Всем привет! Сегодня научимся создавать кнопку с плавным эффектом изменения формы при наведении. Наша кнопка начнет в виде круга, а при наведении превратится в стильный прямоугольник с закругленными углами.
Для создания эффекта морфинга мы настроим анимацию с помощью свойства transition и будем изменять размеры кнопки, радиус скругления и цвет фона. Добавим немного теней, чтобы кнопка выглядела объёмной и привлекала внимание.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥18👍13🤝5👎2
Привет! Сегодня разберем, как создать анимированный голографический фон с плавным переходом цветов, который придаст вашему сайту стильный и динамичный вид.
Мы используем только CSS, без дополнительных картинок или текстур, чтобы добиться эффекта плавного цветового сдвига.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍22👎1🔥1😁1
В этом посте мы рассмотрели разные трюки для того, чтобы украсить сайт или добавить крутых эффектов, эти фишки помогают удерживать пользователей на вашем сайты, а также оставить хорошие впечатления
- Параллакс эффект
- Плавный скролл
- Эффект печати
- Фон с градиентом
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍33🔥21🤝3
This media is not supported in your browser
VIEW IN TELEGRAM
Главное, о чем нужно знать — это свойство background-clip: text, которое заставляет фоновое изображение заполнять только сам текст, а не весь блок.
.clip-text {
background: url (http://i.giphy.com/fsULJFFGv8X3G.gif);
background-size: cover;
background-position: center;
-webkit-background-clip: text;
color: transparent;
}
Из-за этого текст становится "покрашенным" в изображение, а сам цвет текста устанавливается как прозрачный (color: transparent), что позволяет увидеть только фон внутри текста.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍35🔥13🤝6
This media is not supported in your browser
VIEW IN TELEGRAM
Псевдокласс
:required
в CSS используется для стилизации элементов формы, которые имеют атрибут required
. Это означает, что элемент должен быть заполнен перед отправкой формы.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19🔥7😁3
В этом посте я покажу как создать простой эффект параллакса, который добавляет глубину и динамичность вашему сайту. Рассмотрим, как добавить несколько секций с фоном, настроить их высоту и использовать фиксированный фон для плавного эффекта.
- HTML структура
- Добавляем стили в CSS
- CSS для контента
- JavaScript
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥19👍14🤝4
Всем привет! Сегодня попробую показать, как создать и анимировать простое меню для сайта на Html, Css и Js!
Анимировать меню будем с помощью свойства
transform
, благодаря которому мы сместим элементы при нажатии на кнопку.Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21👎6🔥5
В этом посте мы рассмотрим несколько различных hover эффектов, с которыми можно сделать сайт красивее и более динамичным. Всё создано на чистом Css, а посмотреть кода, можно чуть ниже.
- Эффект обводки
- Мягкий впад
- Эффект переворота
- Минималистичный
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥26👍13🤝2
This media is not supported in your browser
VIEW IN TELEGRAM
На самом деле, это совсем не так тяжело, главное знать пару функций — blur, calc и самые базовые в языке стилей.
Вот код карточки, но без доп. эффектов:
.card {
background: #191c29;
width: var(--card-width);
height: var(--card-height);
justify-content: center;
align-items: center;
color: rgb(88 199 250 / 0%);
}
Разберем самые важные функции:
• CSS-функция var() — подставляет кастомные свойства в качестве значения свойств
• Стилевая функция blur() — задаёт размытие по Гауссу изображений, фоновых картинок или текста.
• Функция calc() — производит математические вычисления прямо в css.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥26👍13🤝2
Всем привет! Сейчас разберем как создать и анимировать бургер-кнопку, которая используется для создания меню на сайтах.
Основой для создания такого эффекта является свойство transform, с помощью которого можно смещать элементы в заданном направлении.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24🔥5
Cвойство mask устанавливает изображение, которое используется как слой маски для элемента.
Принимаемые аргументы:
• mask-clip — определяет область распространения маски
• mask-size — размер маски
• mask-position — размещает маску относительно элемента
• mask-repeat — указывает, должна ли повторяться маска
• mask-mode — определяет, будет ли ссылка на маску
• mask-origin — задает начало координат маски.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥21👍13🤝3
Чтобы добиться такого эффекта, применяется несколько CSS-свойств, все они банальные, но всё же, вот пару свойств, с помощью которых можно создать этот эфффект:
• background-image — добавляет фоновое изображение
• background-size: cover — делает так, чтобы изображение полностью покрывало текст
• background-clip: text — обрезает фоновое изображение по форме текста.
• color: transparent — делает текст прозрачным, чтобы был виден только фон изображения.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥8
В общем, это два разных CSS-свойства для создания теней, но они применяются в разных случаях и имеют разные особенности. Рассмотрим их по очереди:
• box-shadow — добавляет тень к рамке элемента, то есть вокруг его границ. Это свойство работает с любыми элементами, создавая тень, повторяющую контуры элемента.
• drop-shadow — применяется с функцией
filter
и позволяет создавать более сложные тени для графики и текстов. Оно учитывает прозрачность и форму содержимого элемента, что особенно полезно для изображений и SVG.Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍35🔥10
Знакомы с этим свойством? Благодаря свойству backdrop-filter в CSS, вы можете применить фильтры к элементу, который находится за ним, создавая уникальные и привлекательные визуальные эффекты.
Может принимать следующие значения:
• none — фильтры не применяются (по умолчанию)
• blur — размывает элемент
• brightness — изменяет яркость
• contrast — изменяет контрастность
• grayscale — преобразует элемент в оттенки серого
• hue-rotate — вращает цветной круг элемента
• invert — инвертирует цвета
• opacity — изменяет прозрачность
• saturate — изменяет насыщенность цветов
• sepia — применяет сепийный фильтр к элементу
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🔥4
Сброс и нормализация CSS — это два подхода к управлению базовыми стилями на веб-странице, но их цели и методы различаются.
• Сброс — это процесс удаления всех браузерных стилей по умолчанию. Цель сброса — создать абсолютно «чистую» страницу, где все элементы, такие как отступы, шрифты и марджины, будут иметь нейтральные значения, чтобы устранить различия между браузерами.
• Нормализация — это подход, который стремится обеспечить единообразие отображения элементов в разных браузерах. Она исправляет стили, чтобы они выглядели одинаково во всех браузерах, но не удаляет все настройки, как в случае со сбросом.
В итоге, сброс полностью обнуляет стили, а нормализация старается выровнять стили, не нарушая базовых настроек.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
Columns — свойство которое автоматически разбивает содержимое на несколько колонок. Оно управляет тем, сколько будет колонок и какой ширины они будут.
Шорткат columns объединяет два свойства:
• column-width — ширина каждой колонки
• column-count — количество колонок
Также есть и другие дополнительные свойства, которые помогают создавать улучшенные колонки:
• column-gap — Задает расстояние между колонками
• column-rule — Задает стиль, цвет и ширину линии между колонками. Сокращение для column-rule-style/color/rule.
• column-fill — Управляет тем, как браузер распределяет содержимое между колонками.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥7
Которое позволяет задавать цвет акцента для некоторых интерактивных элементов формы. Кастомизирует элементы интерфейса, сохраняя при этом их стандартный вид, что упрощает поддержку единого стиля на странице.
В качестве принимаемых аргументов выступает цвет в любом формате.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19🔥9
Который используется для выделения слов с ошибками в орфографии. Также позволяет стилизовать текст, который был отмечен браузером как неправильно написанный.
Принимаемые свойства:
• background-color — цвет фона
• color — цвет текста
• text-decoration — текстовое оформление (подчеркивание, перечеркивание)
• box-shadow — тень вокруг элемента
Важно не забыть указать
spellcheck="true"
в нужном теге для работы псевдоэлемента!Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥9
Которые позволяет стилизовать первую букву любого текстового элемента. Он часто используется для создания инициалов или других типографических эффектов.
Принимает много разных свойств:
• color — цвет первой буквы
• background-color — цвет фона
• font-family — шрифт первой буквы
• font-size — размер шрифта
• font-weight — жирность шрифта
• line-height — высота строки
• text-decoration — текстовое оформление (подчеркивание, перечеркивание)
• text-transform — преобразование текста (заглавные буквы, прописные буквы)
• margin — внешние отступы
• padding — внутренние отступы
• border — граница первой буквы
• float — Выравнивание (например: слева, справа).
• text-shadow — тень текста
Please open Telegram to view this post
VIEW IN TELEGRAM
👍28🔥11