Code Ready | Frontend

✅ Как сделать подпрыгивающий текст? Создание эффекта подпрыгивания может добавить захватывающий и привлекательный вид вашему веб-дизайну. Прыгающий текстовый эффект с отражением, созданный только с помощью HTML и CSS, что делает его легко переносимым на разные веб-сайты. ⬇️ ☑️ Он использует HTML-элемент span для позиционирования каждой буквы в строке и отскакивает каждую во время текстовой анимации, поэтому будьте осторожны при ее размещении. HTML ⤵️ <div class="waviy"> <span style="--i:1">J</span> <span style="--i:2">U</span> <span style="--i:3">M</span> <span style="--i:4">P</span> <span style="--i:5">I</span> <span style="--i:6">N</span> <span style="--i:7">G</span> </div> CSS ⤵️ .waviy { position: relative; -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0,0,0,.2)); font-size: 48px; } .waviy span { font-family: sans-serif; position: relative; display: inline-block; color: #fff; text-transform: uppercase; animation: waviy 1.2s infinite; animation-delay: calc(.1s * var(--i)); } @keyframes waviy { 0%,40%,100% { transform: translateY(0) } 20% { transform: translateY(-20px) } } #html #css #обучение

✅ Как создать SVG Text анимацию? Если говорить подробно, SVG — Text Animation это мощный текстовый эффект CSS, разработанный автором Webstoryboy. Он предоставляет вам возможность выделить ваш текст, добавив эффекты к контуру и фону текста. ⬇️ ☑️ Сначала будет показан контур вашего текста, чтобы люди могли узнать его содержание, а затем фон. Он работает постоянно, чтобы вы могли привлечь больше внимания посетителей вашего сайта. Мы сделали HTML & CSS код ниже, чтобы вы смогли добавить SVG эффект прямо себе на сайт: HTML ⤵️ <svg viewbox="0 0 1320 300"> <text> webstoryboy </text> </svg> CSS ⤵️ svg { font-family: sans-serif; position: absolute; width: 50%; height: 50%; } svg text { animation: stroke 5s infinite alternate; stroke-width: 2; stroke: #365fa0; font-size: 100px; font-weight: 600; } @keyframes stroke { 0% { fill: rgba(72,138,20,0); stroke: rgba(54,95,160,1); stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 2; } 70% {fill: rgba(72,138,20,0); stroke: rgba(54,95,160,1); } 80% {fill: rgba(72,138,20,0); stroke: rgba(54,95,160,1); stroke-width: 3; } 100% { fill: rgba(72,138,204,1); stroke: rgba(54,95,160,0); stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0; } } #обучение #html #css

✅ Как сделать мультяшный текст? Для данного текстового эффекта достаточно добавить CSS свойство text-shadow, а также использовать мультяшный шрифт "Luckiest Guy". Мы делимся готовым кодом ниже для создания интересного эффекта текста: ⤵️ @import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap'); h1 { font-size: 140px; font-family: 'Luckiest Guy'; color: #fff; -webkit-font-smoothing: antialiased; text-shadow: 0px -6px 0 #212121, 0px -6px 0 #212121, 0px 6px 0 #212121, 0px 6px 0 #212121, -6px 0px 0 #212121, 6px 0px 0 #212121, -6px 0px 0 #212121, 6px 0px 0 #212121, -6px -6px 0 #212121, 6px -6px 0 #212121, -6px 6px 0 #212121, 6px 6px 0 #212121, -6px 18px 0 #212121, 0px 18px 0 #212121, 6px 18px 0 #212121, 0 19px 1px rgba(0,0,0,.1), 0 0 6px rgba(0,0,0,.1), 0 6px 3px rgba(0,0,0,.3), 0 12px 6px rgba(0,0,0,.2), 0 18px 18px rgba(0,0,0,.25), 0 24px 24px rgba(0,0,0,.2), 0 36px 36px rgba(0,0,0,.15); } #практика #css

✅ Как сделать градиентное переливание текста? Градиентное переливание - чистый HTML и CSS, поэтому он будет очень прост в использовании и не требует JavaScript. Он посылает красочный переход разных цветов по тексту с помощью градиента, придавая ему очень современный вид. Оставляем готовый код ниже, c помощью которого вы сможете добавить данный эффект на сайт: ⤵️ span { text-transform: uppercase; font-weight: 700; font-size: 55px; font-family: sans-serif; background-image: linear-gradient(-225deg, #231557 0%, #670303 29%, #ff4545 67%, #fff800 100%); background-size: auto auto; background-clip: border-box; background-size: 200% auto; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: color 2s linear infinite; } @keyframes color { to { background-position: 200% center; } } #практика #css

✅ Как сделать интересную анимацию загрузки? Анимация загрузки создана с помощью CSS свойства transform: rotate. Может использоваться в качестве загрузки при ожидании ответа на веб-странице, созданной только с использованием HTML и CSS. Текст переворачивается слева направо и представляет собой очень плавную анимацию. Делимся готовым HTML & CSS кодом для создания анимации загрузки: HTML ⤵️ <div class="waviy"> <span style="--i:1">L</span> <span style="--i:2">o</span> <span style="--i:3">a</span> <span style="--i:4">d</span> <span style="--i:5">i</span> <span style="--i:6">n</span> <span style="--i:7">g</span> <span style="--i:8">.</span> </div> CSS ⤵️ .waviy { position: relative; } .waviy span { position: relative; display: inline-block; font-size: 43px; color: #fff; text-transform: uppercase; animation: flip 2s infinite; animation-delay: calc(.2s * var(--i)) } @keyframes flip { 0%,80% { transform: rotateY(360deg) } } #обучение #html #css

✅ Как создать анимацию Text Filling? В этой анимации текст заполняется цветом, в определенном направлении, т. е. слева направо, справа налево, сверху вниз или снизу вверх. ⬇️ ☑️ Этот тип анимации не ограничивается только текстом. Вы можете использовать ту же технику, чтобы заполнить любую часть или форму. Мы сделали вариант оранжевой заливки текста в CSS. В этом коде вы можете поменять цвета и стили под себя: ⤵️

span {
  font: 700 4em/1 "Oswald", sans-serif;
  padding: .25em 0 .325em;
  text-shadow: 0 0 80px rgba(255,255,255,.5);
  background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: filling 80s linear infinite;
  transform: translate3d(0,0,0);
}

@keyframes filling {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

#обучение #css

✅ 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

✅ Как сделать Color Swap? 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

✅ 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

✅ Highlight Text Делимся с вами ниже готовым кодом для создания оформленной анимации выделения любого текста, с использованием псевдокласса 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

✅ Как сделать Hover Slide Effect? 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

✅ Как создать эффект пламени для текста? Продолжим экспериментировать со свойством 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;
font-weight: 700;
color: #fff;
font-size: 90px;
font-family: sans-serif; 

#обучение #css

✅ Как создать эффект растяжения Свойство 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

✅ Как сделать 3D текст? Если долго поработать со свойством 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

✅ Какие бывают CSS препроцессора? ☑️ Доступно множество препроцессоров CSS, таких как Sass, LESS, Stylus и другие более мелкие препроцессоры. Все препроцессоры, вероятно, имеют одинаковую функциональность, но каждый из них работает по-разному со своим собственным синтаксисом. ⬇️ 1. SASS - самый популярный и часто используемый. Отличается от остальных наиболее сложным синтаксисом. Cамый первый вариант, где не используются фигурные скобки и точки с запятой, а всё сделано на отступах как в Python. 2. LESS - более простой с точки зрения синтаксиса препроцессор, но более ограниченный с функциональной точки зрения. Он находился под влиянием Sass и поэтому реализует многие его функции, такие как примеси, переменные и вложенность. 3. SYLUS - интересный язык, в заметной степени меняющий представление о том, как оформляется CSS. Он напоминает Python, где отсутствуют многие скобки и спецсимволы. 4. SCSS - в нём есть фигурные скобки, как в родном CSS, а ещё есть поддержка современных 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

✅ Теги <del> и <s> В HTML есть одинаковые теги <del> и <s> которые делают одинаковый функционал, но используются для разных целей. Текст внутри этих тегов отображается как перечеркнутый текст. ☑️ Используйте тег <s> если вы хотите перечеркнуть текст, который больше не является правильным или актуальным. Взамен этого тега рекомендуется использовать стили. ☑️ Но вот тег <del> используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны. #обучение #html

✅ Что такое CSS препроцессора и зачем они нужны? ☑️ CSS препроцессора – это языки сценариев, которые расширяют возможности CSS по умолчанию. Они нужны, чтобы сделать CSS чище и в заметной степени сократить количество кода, которое приходится писать для оформления сайта. ⬇️ ☑️ CSS препроцессоры преобразуют код, написанный с использованием препроцессорного языка, в чистый и валидный CSS-код. Одна из важных задач препроцессоров — упростить и ускорить процесс разработки и поддержку стилей в проекте. ⤵️ Существует множество разных препроцессоров, о которых мы расскажем в последующем посте. #теория

✅ Как менять цвет картинок? Мало кто знает что в css есть свойство которое позволяет менять оттенок картинок с помощью hue-rotate. При повороте оттенка вы указываете угол вокруг цветового круга, под которым будут корректироваться входные образцы. ⬇️ ☑️ Угол поворота определяет на сколько изменится данный цвет в цветовом круге от красного до фиолетового. Значение задается в градусах (0deg — 360deg). ↙️

img {
   filter: hue-rotate(170deg);
}

#практика #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