Code Ready | Frontend

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

span {
  font: 700 4em/1 "Oswald", sans-serif;
  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%; }
}

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

✅ Как создать плавную анимацию фигуры? Делимся готовым HTML и CSS кодом ниже для создания интересно стилизованной анимации фигуры. Она бесконечно повторяется по одинаковой траекторией и создает фигуру напоминающею лужу: HTML ⤵️

<svg viewbox="0 0 999 999">
    <path class="path" fill="#333" stroke="white" stroke-width="2" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
    C46.039,146.545,53.039,128.545,66.039,133.545z"/>
</svg>

CSS ⤵️

body {
  background: #333;
}
.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: path 5s linear alternate infinite;
}
@keyframes path {
  from {
    stroke-dashoffset: 999;
  }
  to {
    stroke-dashoffset: 0;
  }
}

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

✅ Утренняя информация про Microsoft Office 💻 Microsoft Office — офисный пакет приложений, созданных корпорацией Microsoft. В состав этого пакета входит программное обеспечение для работы с различными типами документов. ⬇️ 1. 📘 Microsoft Word — текстовый процессор, предназначенный для создания, просмотра, редактирования и форматирования текстов статей, деловых бумаг, а также иных документов. 2. 🥬 Microsoft Excel — табличный процессор, поддерживает все необходимые функции для создания электронных таблиц любой сложности. Занимает ведущее положение на рынке. 3. 🥩 Microsoft PowerPoint — программа подготовки презентаций и просмотра презентаций. 4. Microsoft Teams — корпоративная платформа, объединяющая в рабочем пространстве чат, встречи, заметки и вложения. 5. OneDrive — облачное хранилище, созданное компанией Microsoft в августе 2007 года. 6. Microsoft Outlook — персональный информационный менеджер. В состав Outlook входят: календарь, планировщик задач, записки, менеджер электронной почты, адресная книга. Поддерживается совместная сетевая работа. 7. Microsoft OneNote — программа для создания быстрых заметок и организации личной информации, блокнот с иерархической организацией записей, может служить аналогом обычного канцелярского блокнота. Также сюда входят многие другие приложения, такие как ACCESS, FRONTPAGE и другие, о которых мы расскажем в следующей теории. #теория

✅ Как создать крутой эффект при наведении? Оставляем CSS код ниже для создания интересного hover эффекта, когда пользователь наводит мышкой на текст, к нему добавляеся тень, glitch эффект и он становится объемным: ⬇️

@font-face {
  src: url("https://www.axis-praxis.org/fonts/webfonts/MetaVariableDemo-Set.woff2")
  format("woff2");
  font-family: "Meta";
}
body {
  background-color: #8357eb;
}
h1 {
  transition: all 0.8s;
  -webkit-text-stroke: 4px #d6f4f4;
  font-variation-settings: "wght" 900, "ital" 1;
  font-size: 15rem;
  text-align: center;
  color: transparent;
  font-family: "Meta", sans-serif;
  text-shadow: 10px 10px 0px #07bccc, 15px 15px 0px #e601c0, 20px 20px 0px #e9019a, 25px 25px 0px #f40468, 45px 45px 10px #482896;
  cursor: pointer;
}
h1:hover {
  font-variation-settings: "wght" 100, "ital" 0;
  text-shadow: none;
}

#практика #css

✅ Как создать озвучку текста? 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);
});

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

✅ Как скопировать текст в буфер обмена нажатием на кнопку? На самом деле, создать данную кнопку очень просто, в основном весь код занимает как раз стилизация 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);
} 

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

✅ Как создать стилизованную кнопку копирования в буфер обмен? Я всегда думал, что создание кнопки копирования занимает очень много строк кода и времени. На самом деле, создать данную кнопку очень просто, в основном весь код занимает как раз стилизация 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 {
  width: 240px;
  height: 45px;
  font-size: 20px;
  border: none;
  outline: none;
  border-bottom: .2em solid #E91E63;
  background: rgba(#E91E63, .2);
  color: #E91E63;
}

JavaScript ⤵️

function copytext() {
  var copyText = 
  document.getElementById('input'); 
  var 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);
} 

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

✅ Создание интересного шрифта 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

✅ Создание интересного шрифта 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

✅ Как создать анимированные буквы при наведении? Создание анимированных букв при наведении может добавить захватывающий и привлекательный вид вашему тексту. Данная анимация, создана только с помощью 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

✅ Как сделать пылающий эффект? С помощью свойства 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