Code Ready | Frontend

✅ Как создать анимированную SVG волну? SVG — «масштабируемая векторная графика» — это вид графики, которую создают с помощью математического описания геометрических примитивов, которые и образуют все детали будущего изображения. ⬇️ ☑️ Также SVG помогают делать невероятные текстовые анимации, который точно запомнятся пользователю. Мы оставляем HTML и CSS код ниже, для создания анимированной SVG волны: HTML ⤵️

<svg viewbox="0 0 100 20">
    <defs>
      <lineargradient id="gradient" x1="0" x2="0" y1="0" y2="1">
        <stop offset="5%" stop-color="#326384"/>
        <stop offset="95%" stop-color="#123752"/>
      </lineargradient>
      <pattern id="wave" x="0" y="0" width="120" height="20" patternunits="userSpaceOnUse">
        <path id="wavePath" d="M-40 9 Q-30 7 -20 9 T0 9 T20 9 T40 9 T60 9 T80 9 T100 9 T120 9 V20 H-40z" mask="url(#mask)" fill="url(#gradient)"> 
          <animatetransform
              attributename="transform"
              begin="0s"
              dur="1.5s"
              type="translate"
              from="0,0"
              to="40,0"
              repeatcount="indefinite" />
        </path>
      </pattern>
    </defs>
    <text text-anchor="middle" x="50" y="15" font-size="17" fill="url(#wave)"  fill-opacity="0.6">LOADING</text>
    <text text-anchor="middle" x="50" y="15" font-size="17" fill="url(#gradient)" fill-opacity="0.1">LOADING</text>
  </svg>

CSS ⤵️

body,html{margin:0;padding:0;height:100%;}
body{
  font-family: 'Cabin Condensed', sans-serif;
  display:flex;
  justify-content:center;
  align-items:center;
}
svg{font-weight:700;max-width:600px;height:auto;}

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

Недоработка, получается) @code_ready | #мем

✅ Как создать интересную анимацию при наведении? Когда пользователь наводит мышкой на определенный объект и он начинает ярко светиться или делать другие крутые эффекты, это всегда вызывает эмоции, тем самым привлекая больше внимания к тексту. Мы делимся вариантом эффекта при наведении. В этом коде вы можете добавить или поменять все стили под себя: HTML ⤵️

<h1><span>I</span>M<span>POSSIBLE</span></h1>

CSS ⤵️

h1{
  color: #5b5b5b;
  font-size: 50px;
  font-family: monospace;
  letter-spacing: 7px;
  text-align: center;
  margin-top: 20%;
  cursor: pointer;
}
h1 span{
  transition: .8s all;
}
h1:hover span:nth-child(1){
  margin-right: 5px;
}
h1:hover span:nth-child(1):after{
  content: "'";
}
h1:hover span:nth-child(2){
  margin-left: 30px;
}
h1:hover span{
  color: #fff;
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff;
}

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

Хоть кто-то указывает правду

Больше в этот бар не пойду @code_ready | #мем

✅ Создание шрифта Bungee Shade Bungee Shade - очень красивый шрифт, который точно украсит и сделает уникальным любой текст. Для его добавления нужно прописать свойство font-family и импортировать его с google fonts. ⬇️ ☑️ Также он сразу добавляет интересную обводку и тень для текста, что и делает данный шрифт уникальным. Ниже вы найдете готовый CSS код для добавления шрифта Bungee Shade: ⤵️

@import url('//fonts.googleapis.com/css?family=Bungee+Shade');

h1 {
  color: #2c3e50;
  margin-top: 10%;
  font-size: 55px;
  font-family: 'Bungee Shade';
  text-align: center;
  margin: auto;
}

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

@code_ready | #мем

✅ Как создать тройную тень? Эффект фанеры создается множеством теней, где каждый следующий слой смещается все больше и больше, а также происходит чередование цветов. Кроме того, размывание не используется совсем, чтобы сохранить очертания оригинального текста. Мы делимся готовым CSS кодом ниже для создания тройной тени, данный код собой представляет только саму тень, стилизацию самого текста выбирайте вручную) ⤵️

h1 { 
  text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px   30px 0 #ffd217, 40px 40px 0 #5ac7ff; 
}

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

HTTPS паркинга не найдется?

✅ Как создать hover эффект для кнопки? Если вы хотите сделать красивое оформление с простой анимацией и не использовать много кода, в этом смогут помочь hover эффекты. ⬇️ ☑️ Hover - самый важный и нужный псевдокласс в css для создания быстрых анимированных действий, срабатывает когда пользователь наводит на элемент мышью. Оставляем готовый CSS код ниже, для создания кнопки с hover эффектом. При наведении кнопка бликом меняет свой градиентный цвет на другой: ⤵️

button {
  width: 280px;
  height: 80px;
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  display: block;
  margin: 20% auto;
  border: none;
  background-size: 300% 100%;
  border-radius: 50px;
  transition: all 1s ease-in-out;
  cursor: pointer;
}
button:hover {
  background-position: 100% 0;
  transition: all 1s ease-in-out;
}
button {
  background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);
  box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
}

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

Не украл, а вдохновился архитектурой кода @code_ready | #мем

👋 Добро пожаловать в Code Ready! Мы решили не ограничиваться одними эффектами и расширяем наш канал. Теперь, здесь публикуются только самые интересные опросы, крутые IT мемы, туториалы и не только. Навигация: #обучение — эффект или анимация с кодом и объяснением #теория — познавательные теории про Frontend #мем — интересный мем про IT тематику #практика — эффект или анимация только с готовым кодом