Code Ready | Frontend
20.8K subscribers
723 photos
327 videos
17 files
485 links
Авторский канал по Frontend разработке.
Ресурсы, гайды, задачи, шпаргалки.
Информация ежедневно пополняется!

Автор: @energy_it

РКН: https://clck.ru/3NJCKs

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Управление содержимым с overflow

Свойство overflow в CSS определяет, как браузер обрабатывает содержимое, выходящее за пределы элемента.

Оно принимает следующие значения:
• visible — содержимое выходит за границы элемента (значение по умолчанию).
• hidden — обрезает лишнее содержимое, скрывая его.
• scroll — добавляет прокрутку, даже если она не нужна.
• auto — добавляет прокрутку только тогда, когда содержимое превышает размеры элемента.


📣 Code Ready | #свойство #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍27🔥7
👩‍💻 Морфинг формы кнопки

Всем привет! Сегодня научимся создавать кнопку с плавным эффектом изменения формы при наведении. Наша кнопка начнет в виде круга, а при наведении превратится в стильный прямоугольник с закругленными углами.

Для создания эффекта морфинга мы настроим анимацию с помощью свойства transition и будем изменять размеры кнопки, радиус скругления и цвет фона. Добавим немного теней, чтобы кнопка выглядела объёмной и привлекала внимание.


📣 Code Ready | #гайд #css
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!

Привет! Сегодня разберем, как создать анимированный голографический фон с плавным переходом цветов, который придаст вашему сайту стильный и динамичный вид.

Мы используем только CSS, без дополнительных картинок или текстур, чтобы добиться эффекта плавного цветового сдвига.

📣 Code Ready | #гайд #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
👩‍💻 Украшаем свой сайт с помощью CSS

В этом посте мы рассмотрели разные трюки для того, чтобы украсить сайт или добавить крутых эффектов, эти фишки помогают удерживать пользователей на вашем сайты, а также оставить хорошие впечатления

- Параллакс эффект
- Плавный скролл
- Эффект печати
- Фон с градиентом


📣 Code Ready | #css
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
🙄 Знал ли ты, как можно добавить целое видео в любой текст на CSS?

Главное, о чем нужно знать — это свойство 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), что позволяет увидеть только фон внутри текста.

▶️ Ещё кому интересно, оставлю ссылку на готовый код

📣 Code Ready | #css
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.

Это означает, что элемент должен быть заполнен перед отправкой формы.

📣 Code Ready | #свойство #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19🔥7😁3
🖥 Учимся создавать эффект параллакса

В этом посте я покажу как создать простой эффект параллакса, который добавляет глубину и динамичность вашему сайту. Рассмотрим, как добавить несколько секций с фоном, настроить их высоту и использовать фиксированный фон для плавного эффекта.

- HTML структура
- Добавляем стили в
CSS
-
CSS для контента
- JavaScript


📣 Code Ready | #css #js
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, благодаря которому мы сместим элементы при нажатии на кнопку.

📣 Code Ready | #css #js
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, а посмотреть кода, можно чуть ниже.

- Эффект обводки
- Мягкий впад
- Эффект переворота
- Минималистичный


🔥 И как же без кода на codepen.io

📣 Code Ready | #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
🤯 Очень красивый эффект для блока карточки на CSS

На самом деле, это совсем не так тяжело, главное знать пару функций — 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.

▶️ И конечно же полный код карточки на codepen.io

📣 Code Ready | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥26👍13🤝2
👩‍💻 Анимация бургер-кнопки

Всем привет! Сейчас разберем как создать и анимировать бургер-кнопку, которая используется для создания меню на сайтах.

Основой для создания такого эффекта является свойство transform, с помощью которого можно смещать элементы в заданном направлении.

📣 Code Ready | #гайд #css
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24🔥5
👩‍💻 Настраиваемая маска в CSS

Cвойство mask устанавливает изображение, которое используется как слой маски для элемента.

Принимаемые аргументы:

• mask-clip — определяет область распространения маски
mask-size — размер маски
mask-position — размещает маску относительно элемента
• mask-repeat — указывает, должна ли повторяться маска
• mask-mode — определяет, будет ли ссылка на маску
• mask-origin — задает начало координат маски.


📣 Code Ready | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥21👍13🤝3
👩‍💻 Разберем, как максимально просто вставить любую картинку в текст

Чтобы добиться такого эффекта, применяется несколько CSS-свойств, все они банальные, но всё же, вот пару свойств, с помощью которых можно создать этот эфффект:

• background-image — добавляет фоновое изображение

• background-size: cover — делает так, чтобы изображение полностью покрывало текст

background-clip: text — обрезает фоновое изображение по форме текста.

color: transparent — делает текст прозрачным, чтобы был виден только фон изображения.


📣 Code Ready | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥8
👩‍💻 Отличие между drop-shadow и box-shadow

В общем, это два разных CSS-свойства для создания теней, но они применяются в разных случаях и имеют разные особенности. Рассмотрим их по очереди:

• box-shadow — добавляет тень к рамке элемента, то есть вокруг его границ. Это свойство работает с любыми элементами, создавая тень, повторяющую контуры элемента.

• drop-shadow — применяется с функцией filter и позволяет создавать более сложные тени для графики и текстов. Оно учитывает прозрачность и форму содержимого элемента, что особенно полезно для изображений и SVG.

📣 Code Ready | #css
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 — применяет сепийный фильтр к элементу


📣 Code Ready | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🔥4
👩‍💻 Разница между «сбросом» и «нормализацией»

Сброс и нормализация CSS — это два подхода к управлению базовыми стилями на веб-странице, но их цели и методы различаются.

• Сброс — это процесс удаления всех браузерных стилей по умолчанию. Цель сброса — создать абсолютно «чистую» страницу, где все элементы, такие как отступы, шрифты и марджины, будут иметь нейтральные значения, чтобы устранить различия между браузерами.

• Нормализация — это подход, который стремится обеспечить единообразие отображения элементов в разных браузерах. Она исправляет стили, чтобы они выглядели одинаково во всех браузерах, но не удаляет все настройки, как в случае со сбросом.

В итоге, сброс полностью обнуляет стили, а нормализация старается выровнять стили, не нарушая базовых настроек.

📣 Code Ready | #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
👩‍💻 Каждый думаю использовал мультиколонки в CSS, сейчас разберем одно свойство которое за это отвечает

Columns — свойство которое автоматически разбивает содержимое на несколько колонок. Оно управляет тем, сколько будет колонок и какой ширины они будут.

Шорткат columns объединяет два свойства:

• column-width — ширина каждой колонки
• column-count — количество колонок


Также есть и другие дополнительные свойства, которые помогают создавать улучшенные колонки:

• column-gap — Задает расстояние между колонками
• column-rule — Задает стиль, цвет и ширину линии между колонками. Сокращение для column-rule-style/color/rule.
• column-fill — Управляет тем, как браузер распределяет содержимое между колонками.

📣 Code Ready | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥7
👩‍💻 Используете CSS свойство accent-color?

Которое позволяет задавать цвет акцента для некоторых интерактивных элементов формы. Кастомизирует элементы интерфейса, сохраняя при этом их стандартный вид, что упрощает поддержку единого стиля на странице.

В качестве принимаемых аргументов выступает цвет в любом формате.


📣 Code Ready | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19🔥9
👩‍💻 Показываю вам достаточно полезный псевдоэлемент — spelling-error

Который используется для выделения слов с ошибками в орфографии. Также позволяет стилизовать текст, который был отмечен браузером как неправильно написанный.

Принимаемые свойства:
background-color — цвет фона
color — цвет текста
text-decoration — текстовое оформление (подчеркивание, перечеркивание)
box-shadow — тень вокруг элемента


Важно не забыть указать spellcheck="true" в нужном теге для работы псевдоэлемента!

📣 Code Ready | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥9
👩‍💻 Рассмотрим псевдокласс firstletter!

Которые позволяет стилизовать первую букву любого текстового элемента. Он часто используется для создания инициалов или других типографических эффектов.

Принимает много разных свойств:
color — цвет первой буквы
background-color — цвет фона
font-family — шрифт первой буквы
font-size — размер шрифта
font-weight — жирность шрифта
line-height — высота строки
text-decoration — текстовое оформление (подчеркивание, перечеркивание)
text-transform — преобразование текста (заглавные буквы, прописные буквы)
margin — внешние отступы
padding — внутренние отступы
border — граница первой буквы
float — Выравнивание (например: слева, справа).
text-shadow — тень текста


📣 Code Ready | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍28🔥11