✅ Как создать неоновый текст?
При правильном использовании, неоновое свечение добавляет приятные футуристические нотки дизайну сайта, при этом магию неоновых вывесок можно воссоздать с помощью CSS.
Что полезно в text-shadow, так это то, что мы можем применить к нему несколько теней, просто разделив их запятыми.
Готовый код для неонового текста: ⤵️
#практика #css
При правильном использовании, неоновое свечение добавляет приятные футуристические нотки дизайну сайта, при этом магию неоновых вывесок можно воссоздать с помощью CSS.
Что полезно в text-shadow, так это то, что мы можем применить к нему несколько теней, просто разделив их запятыми.
Готовый код для неонового текста: ⤵️
text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 40px #b303f8, 0 0 80px #b303f8, 0 0 90px #b303f8, 0 0 100px #b303f8, 0 0 150px #b303f8;#практика #css
👍9🔥4
✅ Тег <meta>
<meta> определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем, содержит метаданные о документе HTML. ⬇️
Мета-элементы обычно используются для указания описания страницы, ключевых слов, автора документа, последнего изменения и других метаданных. Все они размещаются в контейнере <head>
Важные атрибуты: ⤵️
#теория #html
<meta> определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем, содержит метаданные о документе HTML. ⬇️
Мета-элементы обычно используются для указания описания страницы, ключевых слов, автора документа, последнего изменения и других метаданных. Все они размещаются в контейнере <head>
Важные атрибуты: ⤵️
charset - Задает кодировку документаcontent - Устанавливает значение атрибутаhttp-equiv - Предназначен для конвертирования метатега в заголовок HTTP.name - Имя метатега#теория #html
🔥8👏3
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Как добавить loading button на сайт?
Кнопки загрузки можно создать не используя JavaScript. В мире Web разработки есть очень крутая библиотека иконок - Font Awesome, она идет сразу с анимацией и очень облегчает работу. ⬇️
Чтобы добавить эту библиотеку на сайт, достаточно просто подключить готовый код -
Loading 1 -
Кнопки загрузки можно создать не используя JavaScript. В мире Web разработки есть очень крутая библиотека иконок - Font Awesome, она идет сразу с анимацией и очень облегчает работу. ⬇️
Чтобы добавить эту библиотеку на сайт, достаточно просто подключить готовый код -
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">Теперь осталось добавить иконки через тег i (на сайте Font Awesome вы найдете много разных вариантов) ⤵️
Loading 1 -
<i class="fa fa-spinner fa-spin">Loading
Loading 2 - <i class="fa fa-refresh fa-spin">Loading
#практика #html #css👍5🔥5🤯2
✅ Свойство filter: blur()
☑️ Функция blur() устанавливает размытие элемента, словно он находится не в фокусе. ⬇️
В качестве значения указывается радиус размытия, он пишется в любых доступных единицах размера CSS. Чем больше значение, тем сильнее будет размыто изображение
Готовый код: ⤵️
☑️ Функция blur() устанавливает размытие элемента, словно он находится не в фокусе. ⬇️
В качестве значения указывается радиус размытия, он пишется в любых доступных единицах размера CSS. Чем больше значение, тем сильнее будет размыто изображение
Готовый код: ⤵️
img {
filter: blur(10px);
border-radius: 0.4rem;
}
#обучение #css👍6🔥3
✅ Теги <sub> и <sup>
Тег <sub> используется для определения текста с нижним индексом. Сдвигает текст ниже базовой линии, уменьшая его размер.
Тег <sup> отображает текст в виде степени (в виде верхнего индекса). Сдвигает текст ниже базовой линии, уменьшая его размер. ⬇️
☑️ Эти теги чаще используются для выделения отдельных символов, а не слов. Их используют для указания единиц измерения или написания простых формул.
Для создания более сложных формул, теги <sup> и <sub> можно использовать внутри друг друга. ⤵️
Тег <sub> используется для определения текста с нижним индексом. Сдвигает текст ниже базовой линии, уменьшая его размер.
Тег <sup> отображает текст в виде степени (в виде верхнего индекса). Сдвигает текст ниже базовой линии, уменьшая его размер. ⬇️
☑️ Эти теги чаще используются для выделения отдельных символов, а не слов. Их используют для указания единиц измерения или написания простых формул.
Для создания более сложных формул, теги <sup> и <sub> можно использовать внутри друг друга. ⤵️
<p>H<sub>2</sub>O</p>#теория #html
<p>X<sup>3</sup>+X<sup>3</sup>=X<sup>6</sup></p>
🔥6👍5👏3
✅ Как создать вдавленный текст?
Эффект вдавленного текста — один из самых популярных на веб-сайтах со скевоморфным дизайном. Этот эффект лучше всего работает на умеренно светлом фоне с темным текстом. ⬇️
☑️ Вдавленный текст очень часто используется с применением свойства text-shadow. Тень немного смещается по оси Y для создания эффекта небольшого углубления.
Вот вам готовый код для светлого фона ⤵️
Эффект вдавленного текста — один из самых популярных на веб-сайтах со скевоморфным дизайном. Этот эффект лучше всего работает на умеренно светлом фоне с темным текстом. ⬇️
☑️ Вдавленный текст очень часто используется с применением свойства text-shadow. Тень немного смещается по оси Y для создания эффекта небольшого углубления.
Вот вам готовый код для светлого фона ⤵️
text-shadow: 2px 2px 2px rgba(255,255,255,0.3);
background-color: #b9b9b9;
background-clip: text;
color: transparent;
font-family: 'M PLUS 1p', sans-serif;
#обучение #css👍11👏2
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Как сделать анимированный фон?
Анимации — это круто, правда? Они добавляют изюминку на сайт и позволяют ему выделиться на фоне конкурентов.
В веб-дизайне анимация часто используется как способ привлечения внимания. ⤵️
Вы можете создать простой анимированный фон на чистом CSS с помощью готового кода ниже. ⬇️
Анимации — это круто, правда? Они добавляют изюминку на сайт и позволяют ему выделиться на фоне конкурентов.
В веб-дизайне анимация часто используется как способ привлечения внимания. ⤵️
Вы можете создать простой анимированный фон на чистом CSS с помощью готового кода ниже. ⬇️
html, body {
width: 100%;
height:100%;
}
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% и 50%;
}
100% {
background-position: 0% 50%;
}
}
#обучение #css👍7🔥5❤4
✅ Как менять цвет картинок?
Мало кто знает что в css есть свойство которое позволяет менять оттенок картинок с помощью hue-rotate. При повороте оттенка вы указываете угол вокруг цветового круга, под которым будут корректироваться входные образцы. ⬇️
☑️ Угол поворота определяет на сколько изменится данный цвет в цветовом круге от красного до фиолетового. Значение задается в градусах (0deg — 360deg). ↙️
Мало кто знает что в css есть свойство которое позволяет менять оттенок картинок с помощью hue-rotate. При повороте оттенка вы указываете угол вокруг цветового круга, под которым будут корректироваться входные образцы. ⬇️
☑️ Угол поворота определяет на сколько изменится данный цвет в цветовом круге от красного до фиолетового. Значение задается в градусах (0deg — 360deg). ↙️
img {
filter: hue-rotate(170deg);
}
#практика #css👍7🔥4❤3
✅ Что такое CSS препроцессора и зачем они нужны?
☑️ CSS препроцессора – это языки сценариев, которые расширяют возможности CSS по умолчанию.
Они нужны, чтобы сделать CSS чище и в заметной степени сократить количество кода, которое приходится писать для оформления сайта. ⬇️
☑️ CSS препроцессоры преобразуют код, написанный с использованием препроцессорного языка, в чистый и валидный CSS-код. Одна из важных задач препроцессоров — упростить и ускорить процесс разработки и поддержку стилей в проекте. ⤵️
Существует множество разных препроцессоров, о которых мы расскажем в последующем посте.
#теория
☑️ CSS препроцессора – это языки сценариев, которые расширяют возможности CSS по умолчанию.
Они нужны, чтобы сделать CSS чище и в заметной степени сократить количество кода, которое приходится писать для оформления сайта. ⬇️
☑️ CSS препроцессоры преобразуют код, написанный с использованием препроцессорного языка, в чистый и валидный CSS-код. Одна из важных задач препроцессоров — упростить и ускорить процесс разработки и поддержку стилей в проекте. ⤵️
Существует множество разных препроцессоров, о которых мы расскажем в последующем посте.
#теория
👍6🔥4
✅ Теги <del> и <s>
В HTML есть одинаковые теги <del> и <s> которые делают одинаковый функционал, но используются для разных целей. Текст внутри этих тегов отображается как перечеркнутый текст.
☑️ Используйте тег <s> если вы хотите перечеркнуть текст, который больше не является правильным или актуальным. Взамен этого тега рекомендуется использовать стили.
☑️ Но вот тег <del> используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны.
#обучение #html
В HTML есть одинаковые теги <del> и <s> которые делают одинаковый функционал, но используются для разных целей. Текст внутри этих тегов отображается как перечеркнутый текст.
☑️ Используйте тег <s> если вы хотите перечеркнуть текст, который больше не является правильным или актуальным. Взамен этого тега рекомендуется использовать стили.
☑️ Но вот тег <del> используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны.
#обучение #html
👍7🔥4
✅ Как создать эффект свечения текста?
И опять возвращаемся к свойству text-shadow, но сейчас сделаем очень интересный эффект свечения, который поможет не только для привлечения внимания, но и удивит пользователя. ⬇️
☑️ Эффект свечения - ещё один пример использования разных теней. Смысл в том, чтобы убрать смещение тени по вертикали и горизонтали в ноль, а радиус размытия установить в необходимое значение, в зависимости от того на какое расстояние должна распространятся тень.
Каждый может попробовать сделать такой эффект, с помощью готового кода ниже. ⤵️
#обучение #css
И опять возвращаемся к свойству text-shadow, но сейчас сделаем очень интересный эффект свечения, который поможет не только для привлечения внимания, но и удивит пользователя. ⬇️
☑️ Эффект свечения - ещё один пример использования разных теней. Смысл в том, чтобы убрать смещение тени по вертикали и горизонтали в ноль, а радиус размытия установить в необходимое значение, в зависимости от того на какое расстояние должна распространятся тень.
Каждый может попробовать сделать такой эффект, с помощью готового кода ниже. ⤵️
text-shadow: 0px 0px 12px rgba(255,255,255,0.7);
text-transform: uppercase;
font-weight: 700;
color: #fff;
font-size: 90px;
font-family: 'DM Sans', sans-serif; #обучение #css
👍7❤2🔥2
✅ Какие бывают CSS препроцессора?
☑️ Доступно множество препроцессоров CSS, таких как Sass, LESS, Stylus и другие более мелкие препроцессоры.
Все препроцессоры, вероятно, имеют одинаковую функциональность, но каждый из них работает по-разному со своим собственным синтаксисом. ⬇️
1. SASS - самый популярный и часто используемый. Отличается от остальных наиболее сложным синтаксисом. Cамый первый вариант, где не используются фигурные скобки и точки с запятой, а всё сделано на отступах как в Python.
2. LESS - более простой с точки зрения синтаксиса препроцессор, но более ограниченный с функциональной точки зрения. Он находился под влиянием Sass и поэтому реализует многие его функции, такие как примеси, переменные и вложенность.
3. SYLUS - интересный язык, в заметной степени меняющий представление о том, как оформляется CSS. Он напоминает Python, где отсутствуют многие скобки и спецсимволы.
4. SCSS - в нём есть фигурные скобки, как в родном CSS, а ещё есть поддержка современных CSS-трюков, которые используются в разных браузерах.
#теория
☑️ Доступно множество препроцессоров CSS, таких как Sass, LESS, Stylus и другие более мелкие препроцессоры.
Все препроцессоры, вероятно, имеют одинаковую функциональность, но каждый из них работает по-разному со своим собственным синтаксисом. ⬇️
1. SASS - самый популярный и часто используемый. Отличается от остальных наиболее сложным синтаксисом. Cамый первый вариант, где не используются фигурные скобки и точки с запятой, а всё сделано на отступах как в Python.
2. LESS - более простой с точки зрения синтаксиса препроцессор, но более ограниченный с функциональной точки зрения. Он находился под влиянием Sass и поэтому реализует многие его функции, такие как примеси, переменные и вложенность.
3. SYLUS - интересный язык, в заметной степени меняющий представление о том, как оформляется CSS. Он напоминает Python, где отсутствуют многие скобки и спецсимволы.
4. SCSS - в нём есть фигурные скобки, как в родном CSS, а ещё есть поддержка современных CSS-трюков, которые используются в разных браузерах.
#теория
👍8🔥2
✅ Как сделать 3D текст?
Если долго поработать со свойством text-shadow, то вы можете обмануть даже собственное зрение. Это свойство можно добавить на любой текст и выразить его по сравнению с другими. ⬇️
☑️ В 3D глубина создается несколькими текстовыми тенями. Каждый имеет нулевое размытие и все больше смещается от основного текста.
Пробуйте создать 3D текст с помощью готового кода ниже: ⤵️
#обучение #css
Если долго поработать со свойством text-shadow, то вы можете обмануть даже собственное зрение. Это свойство можно добавить на любой текст и выразить его по сравнению с другими. ⬇️
☑️ В 3D глубина создается несколькими текстовыми тенями. Каждый имеет нулевое размытие и все больше смещается от основного текста.
Пробуйте создать 3D текст с помощью готового кода ниже: ⤵️
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
font-weight: 700;
color: #ffffff;
font-size: 90px;
font-family: sans-serif;#обучение #css
👍7❤3🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Как создать эффект растяжения
Свойство letter-spacing определяет межбуквенное расстояние в тексте, но как раз с помощью него можно сверстать интересную растянутую кнопку, которая удивит неожиданностью каждого. ⬇️
☑️ Добавление hover обязательно, он будет менять letter spacing, что способствует растяжению кнопки.
Делимся готовым кодом для создание эффекта растяжения кнопки: ⤵️
Свойство letter-spacing определяет межбуквенное расстояние в тексте, но как раз с помощью него можно сверстать интересную растянутую кнопку, которая удивит неожиданностью каждого. ⬇️
☑️ Добавление hover обязательно, он будет менять letter spacing, что способствует растяжению кнопки.
Делимся готовым кодом для создание эффекта растяжения кнопки: ⤵️
a {
padding: 10px;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
color: #fff;
letter-spacing: 3px;
font-family: sans-serif;
text-decoration: none;
transition: all .35s;
}
a:hover {
letter-spacing: 17px;
}
#практика #css👍9🦄3
✅ Как создать эффект пламени для текста?
Продолжим экспериментировать со свойством text-shadow, вы уже знаете, что за многие текстовые эффекты отвечает как раз это свойство, оно помогает сделать даже самые необыкновенные и различные эффекты на текст. ⬇️
☑️ Эффект огня - это еще одно использование множественных теней. Каждая тень смещена в различных направлениях, использует различные степени размывания, а также, используется смесь теплых цветов для создания впечатления пламени.
Для интересного эффекта огня, вам поможет готовый код ниже. ⤵️
Продолжим экспериментировать со свойством text-shadow, вы уже знаете, что за многие текстовые эффекты отвечает как раз это свойство, оно помогает сделать даже самые необыкновенные и различные эффекты на текст. ⬇️
☑️ Эффект огня - это еще одно использование множественных теней. Каждая тень смещена в различных направлениях, использует различные степени размывания, а также, используется смесь теплых цветов для создания впечатления пламени.
Для интересного эффекта огня, вам поможет готовый код ниже. ⤵️
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;#обучение #css
font-weight: 700;
color: #fff;
font-size: 90px;
font-family: sans-serif;
👍9❤5
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Как сделать Hover Slide Effect?
Slide Effect - интересный способ стилизации кнопки. При наведении мышки на объект слева плавно появляется свойство box-shadow, которое задано в коде. Можно добавить через запятую радиус размытия и распространения, а также сменить цвет.
Оставляем ниже код, для создания такого эффекта кнопки: ⤵️
Slide Effect - интересный способ стилизации кнопки. При наведении мышки на объект слева плавно появляется свойство box-shadow, которое задано в коде. Можно добавить через запятую радиус размытия и распространения, а также сменить цвет.
Оставляем ниже код, для создания такого эффекта кнопки: ⤵️
button {
color: #FFF;
border: 2px solid rgb(216, 2, 134);
width: 220px;
height: 60px;
font-family: sans-serif;
font-size: 15px;
cursor: pointer;
box-shadow: inset 0 0 0 0 #D80286;
transition: ease-out 1s;
background: #162944;
}
button:hover {
box-shadow: inset 400px 0 100px 0 #D80286;
}
#обучение #html #css👍7🔥6
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Highlight Text
Делимся с вами ниже готовым кодом для создания оформленной анимации выделения любого текста, с использованием псевдокласса hover: ⤵️
Делимся с вами ниже готовым кодом для создания оформленной анимации выделения любого текста, с использованием псевдокласса hover: ⤵️
span {
font-family: 'Bebas Neue', cursive;
font-size: 2em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-image: linear-gradient(gold, gold);
background-size: 100% 10px;
background-repeat: no-repeat;
background-position: 100% 0%;
transition: all .7s ease;
}
span:hover {
background-size: 100% 100%;
background-position: 0% 100%;
transition: all .7s ease;
}
#практика #css🔥7👍3
✅ Frozen Text
Вы можете создать эффект замороженного текста с помощью готового кода ниже: ⤵️
Вы можете создать эффект замороженного текста с помощью готового кода ниже: ⤵️
h1 {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/6963bbf342d87b3a2150bd8f59682b89.jpg);
-webkit-background-clip: text;
background-size: contain;
width: 100%;
text-align: center;
color: transparent;
font-weight: 900;
font-size: 59px;
font-family: 'frozen', serif;
}
@font-face {
font-family:'frozen';
src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Ice%20kingdom%20-%20Bold%20-%20Por%20Kustren.woff');
}
#практика #css👍7🔥5❤3
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Как сделать Color Swap?
Color Swap- эффектный способ изменить любой цвет текста с помощью анимированного ползунка. Весь код исполнен на CSS, в основном для создания используется анимация keyframes и псевдокласс before.
Ниже оставляем для вас код эффектного замена цвета текста на чистом CSS: ⤵️
Color Swap- эффектный способ изменить любой цвет текста с помощью анимированного ползунка. Весь код исполнен на CSS, в основном для создания используется анимация keyframes и псевдокласс before.
Ниже оставляем для вас код эффектного замена цвета текста на чистом CSS: ⤵️
div {
font-size: 80px;
font-weight: 700;
position: relative;
color: #262626;
padding: 20px 50px;
font-family: sans-serif;
}
div:before {
background: #262626;
color: white;
content: 'CODEPEN';
position: absolute;
top: 0;
left: 0;
padding: 20px 50px;
-webkit-clip-path: polygon(0% 0% , 30% 0%, 30% 100%, 0% 100%);
clip-path: polygon(0% 0% , 30% 0%, 30% 100%, 0% 100%);
animation: slide 4s 1s linear infinite;
}
@keyframes slide {
50% {
-webkit-clip-path: polygon(70% 0%, 100% 0%, 100% 100%, 70% 100%);
}
}
#обучение #css👍6🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Shine Animation
На сайте интересно выглядит сияющая анимация, это как луч света - линия, вдоль которой переносится световая энергия. Цвет этой линии зависит от заднего фона, условно говоря, если фон желтый, то и линия будет желтого цвета.
Для создания блестящей анимации вам поможет готовый код ниже: ⤵️
На сайте интересно выглядит сияющая анимация, это как луч света - линия, вдоль которой переносится световая энергия. Цвет этой линии зависит от заднего фона, условно говоря, если фон желтый, то и линия будет желтого цвета.
Для создания блестящей анимации вам поможет готовый код ниже: ⤵️
img {
-webkit-mask-image: linear-gradient(45deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);
mask-image: linear-gradient(45deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);
-webkit-mask-size: 800%;
mask-size: 800%;
transition: mask-position 2s ease,-webkit-mask-position 2s ease;
}
img:hover {
-webkit-mask-position: 120%;
mask-position: 120%;
opacity: 1;
}
#обучение #css👍8❤2