✅ Как создать поочередную анимацию свечения?

Эффект анимации светящегося текста — это потрясающий текстовый эффект CSS, если говорить более подробно, «Эффекты анимации светящегося текста», как и его название, предлагают вам поразительный эффект, благодаря которому ваш текст будет непрерывно светиться. ⬇️

☑️ Каждая буква вашего текста загорается одна за другой и светится на темном фоне. Это оставит у посетителей более глубокое впечатление о вашем веб-сайте, и они смогут вернуться на него снова. Давайте получим эффекты анимации светящегося текста и насладимся тем, что он предлагает!

HTML ⤵️
<div class="text-container">
   <span>g</span>
   <span>l</span>
   <span>o</span>
   <span>w</span>
</div>

CSS ⤵️
@import url('https://fonts.googleapis.com/css2?family=Baloo+Thambi:wght@400&display=swap');

body {
  background-color: #000;
  color: #111;
  text-align: center;
  font-family: 'Baloo Thambi', cursive;
  font-size: 100px;
}
.text-container > span {
  text-transform: uppercase;
  animation: glow 2s ease-in-out infinite;
}
@keyframes glow {
  0%, 100% {
    color: #FFF;
    text-shadow: 0 0 10px #0652DD, 0 0 50px #0652DD, 0 0 100px #0652DD;
  }
  10%, 90% {
    color: #111;
    text-shadow: none;
  }
}

.text-container > span:nth-child(2) {
  animation-delay: 0.25s;
}
.text-container > span:nth-child(3) {
  animation-delay: 0.5s;
}
.text-container > span:nth-child(4) {
  animation-delay: 0.75s;
}

#обучение #html #css

✅ Лучшие шрифты для Halloween

Вы уже готовый к Хэллоуину? Как раз в честь этого мы нашли топ 5 лучших шрифтов на тематику Halloween. Данные шрифты можно добавить на любой сайт и тем самым создать устрашающею атмосферу.

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

@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Eater&family=Mystery+Quest&family=Nosifer&family=Sancreek&display=swap');



font-family: 'Creepster', sans-serif;
font-family: 'Eater', sans-serif;
font-family: 'Mystery Quest', sans-serif;
font-family: 'Nosifer', sans-serif;
font-family: 'Sancreek', sans-serif;

#практика #halloween

✅ Что такое Domain и Hosting

Для создания своего веб сайта (помимо его разработки) ему нужен Domain и Hosting, без которых невозможно создать ни один сайт в Интернете. В данном посте мы разберем что это и для чего использовать, чтобы каждый из вас не путался и понимал как оно устроено. ⬇️

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

DOMAIN - это адрес/имя, который есть у каждого сайта. По этому адресу легко найти нужный сайт среди множества ресурсов в сети.
Пример домена - google.com.
Существуют много видов доменов: .com домен верхнего уровня в системе доменных имен интернет-сети, .ru национальный домен верхнего уровня для России и так далее.

В следующей теории разберем все типы и виды доменов и разницу между ними.

#теория

✅ Вечерняя информация про лучшие фреймворки

Фреймворк — программная платформа, определяющая структуру программной системы, облегчающее разработку и объединение разных компонентов большого программного проекта.

☑️ В данном вечернем посте мы покажем топ 3 лучших фреймворков для WEB разработки. ⬇️

1. REACT.JS - это JavaScript-фреймворк для создания пользовательских интерфейсов. Он был разработан Facebook и представляет собой библиотеку для создания компонентов пользовательского интерфейса.

☑️ Основное преимущество React.js — виртуальный DOM, который позволяет более эффективно выполнять изменения и обновления веб-страниц.

2. ANGULAR.JS - один из популярных фреймворков для разработки веб-приложений. Он разрабатывается и поддерживается Google. Angular предоставляет множество функций для управления состоянием приложения, маршрутизации, отображения и тестирования.

☑️ Angular имеет богатый набор инструментов, таких как двусторонняя связь данных (two-way data binding), dependency injection и встроенная поддержка AJAX, HTTP и Observables.

3. - VUE.JS - это прогрессивный JavaScript-фреймворк, который был создан, чтобы объединить лучшие аспекты React и Angular. Vue.js предлагает легкий и гибкий инструментарий, который позволяет легко интегрироваться с уже существующими проектами и библиотеками.

☑️ Особенность Vue.js заключается в его простоте и гибкости. Вы можете легко перейти от простого JavaScript к TypeScript и использовать такие особенности, как двусторонняя связь данных и компонентный подход к разработке.

#теория

✅ Как разбить текст на два разных цвета?

Для создания данного эффекта для начала нужно создать 2 текста, чтобы потом наложить из друг на друга. Следующий шаг будет стилизовать текст чтобы он выглядит красиво, дальше останется только правильно настроить свойство clip-path. ⬇️

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

Оставляем для вас ниже HTML & CSS код для создания текста с двумя цветами:

HTML ⤵️
<div class="text-box">
<h1>428 FOLLOWERS</h1>
<h1>428 FOLLOWERS</h1>
</div>

CSS ⤵️
.text-box {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
color: #fff;
font-family: sans-serif;
font-size: 100px;
font-weight: 700;
background-color: #000;
}
h1:nth-child(2) {
position: absolute;
background-color: #fff;
color: #000;
clip-path: inset(-1% -1% 50% -1%);
}

#обучение #html #css

✅ Как создать анаглифический эффект?

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

Делимся готовым кодом ниже для создания анаглифического эффекта: ⤵️

h1 {
margin: auto;
position: relative;
font: 100px Helvetica, Sans-Serif;
letter-spacing: -5px;
color: rgba(0,0,255,0.5);
}
h1:after {
margin: auto;
content: "Anaglyph";
position: absolute; left: 4px; top: 4px;
color: rgba(255,0,0,0.5);
}

#практика #css

✅ Как сделать градиентную обводку текста?

Лучший вариант сделать текст более выразительным и оригинальным это добавить ему обводку. В этом сможет помочь свойство -webkit-text-stroke. ⬇️

☑️ Стилевое свойство text-stroke одновременно устанавливает цвет и толщину контура вокруг букв и символов текста, используется вместе с движком -WebKit. Но также чтобы создать градиент нужно добавить 2 свойства: background-clip: text и background-image: linear-gradient.

Делимся готовым кодом ниже для создания градиентной обводки: ⤵️

* {
box-sizing: border-box;
}
body {
background-color: #000119;
display: grid;
font-family: Poppins, sans-serif;
place-items: center;
}
h1 {
background-clip: text;
background-image: linear-gradient(to right, #09f1b8, #00a2ff, #ff00d2, #fed90f);
font-size: 150px;
font-weight: 700;
letter-spacing: 20px;
-webkit-text-stroke: transparent 10px;
}

#обучение #css

✅ Языки программирования для Backend разработки

В прошлой теории мы разобрали что используют в работе Frontend разработчики, но существует также часть Backend, у них совершенно разные цели, соответственно Backend разработчик использует другие языки программирования и инструменты для работы. ⬇️

☑️ Backend разработчики используют 4 главных языка: PHP, Java, Python и Ruby, все они нужны для разных задач и целей программиста.

1. PHP - скриптовый язык общего назначения, интенсивно применяемый для разработки веб-приложений, распространённый язык программирования с открытым исходным кодом. PHP специально сконструирован для веб-разработок и его код может внедряться непосредственно в HTML.

2. PYTHON - высокоуровневый язык программирования общего назначения с динамической строгой типизацией и автоматическим управлением памятью, ориентированный на повышение производительности разработчика, читаемости кода и его качества, а также на обеспечение переносимости написанных на нём программ.

3. JAVA - строго типизированный объектно-ориентированный язык программирования общего назначения. Это быстрый, безопасный и надежный язык программирования для всего: от мобильных приложений и корпоративного ПО до приложений для работы с большими данными и серверных технологий.

4. RUBY - это язык программирования, который можно использовать для разных целей. Чаще всего он применяется в веб-разработке. Ruby высокоуровневый, близкий к человеку: код на нем интуитивно понятный, а писать программы удобно. Язык часто используют со фреймворком Ruby on Rails для веб-программирования.

#теория

✅ Как создать плавный hover эффект?

Hover эффекты - технология веб-анимации, благодаря которой элементы сайта изменяют свой вид при наведении на них курсора или клике по ним.

☑️ Делимся уже готовым CSS кодом ниже для создания крутого hover эффекта. При наведении курсора на текст, он плавно меняет цвет и плавно подчеркивается линией слева: ⤵️

body {
  display: grid;
  place-content: center;
}
h1 {
  font-family: system-ui, sans-serif;
  font-size: 5rem;
  cursor: pointer;
}

h1 {
  --s: 0.1em;   
  --c: #2c4bff; 
  color: #0000;
  background: 
    linear-gradient(90deg,var(--c) 50%,#000 0) calc(100% - var(--_p,0%))/200% 100%,
    linear-gradient(var(--c) 0 0) 0% 100%/var(--_p,0%) var(--s) no-repeat;
  -webkit-background-clip: text,padding-box;
  background-clip: text,padding-box;
  transition: 0.5s;
}
h1:hover {
  --_p: 100%;
}

#практика #css

✅ Как сделать пылающий эффект?

С помощью свойства text-shadow можно создавать невероятные текстовые эффекты, которые украсят ваш сайт и сделают его уникальным в зависимости от дизайна. Таким образом можно создать пылающий эффект. ⬇️

☑️ Он сделает любой текст намного красивее и поможет привлечь к нему внимания. Его создание очень простое, достаточно правильно настроить тени, выбрать соответствующий цвет и добавить шрифт Akronim чтобы текст был более красивый.

Мы оставляем CSS код ниже для создания отличного пылающего эффекта: ⤵️

@import url(https://fonts.googleapis.com/css?family=Akronim);

h1 {
  color: rgb(255, 115, 0);
  font-size: 100px;
  text-transform: uppercase;
  font-family: 'Akronim';
  text-align: center;
  text-shadow: 0 3px 20px red, 0 0 20px red, 0 0 10px orange, 4px -5px 6px yellow, -4px -10px 10px yellow, 0 -10px 30px yellow;
}

#обучение #css

✅ Как создать анимированные буквы при наведении?

Создание анимированных букв при наведении может добавить захватывающий и привлекательный вид вашему тексту. Данная анимация, создана только с помощью HTML и CSS, что делает её легко переносимым на разные веб-сайты.

☑️ Делимся ниже HTML и CSS кодом, для создания крутых анимированных букв при наведении:

HTML ⤵️

<div class="animated">
  <div class="let">A</div>
  <div class="let">n</div>
  <div class="let">i</div>
  <div class="let">m</div>
  <div class="let">a</div>
  <div class="let">t</div>
  <div class="let">e</div>
  <div class="let">d</div>
</div>

CSS ⤵️

body{ background-color: #000; }

.animated{
  display: flex;
  margin-top: 20%;
  align-items: center;
  justify-content: center;
}
.let{
  color: #fff;
  font-size: 70px;
  font-family: cursive;
  letter-spacing: 3px;
  font-weight: 600;
  transition: 0.5s;
  cursor: pointer;
}
.let:hover{
  transform: translateY(-1rem);
  background: -webkit-linear-gradient(120deg, hsl(190, 100%, 50%), hsl(319, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}



#практика #html #css

✅ Создание интересного шрифта Rocher

Rocher - очень красивый шрифт, который точно украсит и сделает уникальным любой текст. Для его добавления нужно прописать свойство font-face и указать src на этот шрифт. ⬇️

☑️ Также можно поменять его стандартный цвет на любой другой, с помощью свойства base-palette - дескриптор указывается с использованием нулевого индекса палитр, созданных создателем шрифта.

Ниже вы найдете готовый CSS код для добавления шрифта Rocher фиолетового цвета: ⤵️

@font-face {
  font-family: 'Rocher';
  src: url(https://assets.codepen.io/9632/RocherColorGX.woff2);
}

body {
  font-family: 'Rocher';
  text-align: center;
  font-size: 50px;
}

@font-palette-values --Purples {
  font-family: Rocher;
  base-palette: 6;
}
h1 {
  font-palette: --Purples;
}

#обучение #css

✅ Как скопировать текст в буфер обмена нажатием на кнопку?

На самом деле, создать данную кнопку очень просто, в основном весь код занимает как раз стилизация input и самой button. ⬇️

☑️ Чтобы долго не объяснять, мы оставляем ниже готовый код, написанный на HTML, CSS и JavaScript для создания красиво стилизованной кнопки копировать в буфер обмена:

HTML ⤵️

<input type="text" id="input"> 
  <button onclick="copytext()" type="button">Скопировать</button>

SCSS ⤵️

 body {
  text-align: center;
  margin-top: 10%;
  background-color: #000;
}
 input, button {
  padding: .4em;
  width: 200px;
  font-size: 20px;
  border: none;
  outline: none;
  border-bottom: .2em solid #E91E63;
  background: rgba(#E91E63, .2);
  color: #E91E63;
}

JavaScript ⤵️

 function copytext() {
  const copyText = 
  document.getElementById('input'); 
  const copy = copyText.value;
  navigator.clipboard.writeText(copy).then(
  function () { 
  console.log('Успешно'); 
  }).catch(function (err) { 
  console.log('Something went wrong', err);
  });
  
  alert("Copied the text: " + copyText.value);
} 

@code_ready | #практика #html #css #js

✅ Как создать озвучку текста?

SpeechSynthesis - это интерфейс Web Speech API, который используется для перевода текста в речь. Он содержит содержимое, которое должен прочитать речевой сервис, и информацию о том, как его читать (например, язык, высота тона и громкость). ⬇️

☑️ Делимся уже готовым HTML, CSS и JS кодом ниже для создания озвучки текста, с помощью элементов textarea, button и свойства SpeechSynthesis:

HTML ⤵️

<textarea></textarea>
<button>Speak</button>

SCSS ⤵️

button {
  width: 85px;
  background-color: blue;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}
textarea, button {
  border: 1.5px solid #000;
  border-radius: 5px;
  outline: none;
  padding: 8px;
  display: block;
  margin: 0 auto;
  margin-top: 15px;
}

JavaScript ⤵️

const button = document.querySelector('button');
const text = document.querySelector('textarea');

button.addEventListener('click', () => {
  const utterance = new SpeechSynthesisUtterance(text.value);
  speechSynthesis.speak(utterance);
});

@code_ready | #обучение #html #css #js