✅ Как создать тройную тень?

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

Мы делимся готовым CSS кодом ниже для создания тройной тени, данный код собой представляет только саму тень, стилизацию самого текста выбирайте вручную) ⤵️

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

@code_ready | #обучение #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 | #мем

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

@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 | #мем

✅ Как создать анимированную 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

✅ Как сделать живой эффект для текста?

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

☑️ Это не простая задача, поэтому мы делимся уже готовым HTML & CSS кодом ниже для добавления видео внутрь текста:

<div class="title">
    <h1>simon</h1>
 </div> 

.title {
  color: #FFF;
  font-family: sans-serif;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
h1 {
  font-size: 150px;
  font-weight: 800;
  text-transform: uppercase;
  background-image: url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif);
  background-size: cover;
  color: transparent;
  -moz-background-clip: text;
  -webkit-background-clip: text;
} 

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

✅ Крутые горячие клавиши VS Code

• Ctrl + / — закомментирует или раскомментирует строку. VS Code сам установит или удалит необходимый символ для комментария.

• Alt + ↑ / ↓ — переместит строку с курсором вверх или вниз, в зависимости от комбинации клавиш.

• Shift + Del — удаляет строку целиком. Теперь не нужно выделять мышкой всю строку и потом нажимать Backspace.

@code_ready | #клавиши

✅ Как создать таймер обратного отсчета?

Бывает, что вам для чего-то нужен таймер обратного отсчета, в интернете есть много разных решений, однако они либо очень громоздкие, либо имеют зависимости от других библиотек. ⬇️

☑️ Сегодня мы рассмотрим, как сделать таймер обратного отсчета без использования JavaScript. В придачу создадим к тексту крутой эффект пламени на чистом HTML и CSS: ⤵️

<div class="counter"></div>

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background-color: #000000;
  color: rgb(255, 115, 0);
  font-size: 100px;
  text-transform: uppercase;
  font-family: sans-serif;
  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;
}
.counter {
  counter-reset: ms var(--number);
  animation: count 10s steps(10) infinite;
}
.counter::after {
  content: counter(ms);
  font-size: 10vw;
}
@property --number {
  inherits: false;
  syntax: '<integer>';
  initial-value: 0;
}
@keyframes count {
  0% {
    --number: 10;
  }
}

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

✅ Как создать typing effect?

Оставляем готовый HTML & CSS код, для создания эффекта печати. Он созданный с помощью анимации keyframes, а также для правильной работы необходимо добавить свойство white-space: nowrap, overflow: hidden и width: 21ch. ⬇️

HTML: ⤵️

<div class="wrapper">
    <div class="typing-demo">@code_ready for you!</div>
</div>

CSS: ⤵️

.wrapper {
  height: 100vh;
  display: grid;
  place-items: center;
}
.typing-demo {
  width: 21ch;
  animation: typing 2s steps(22), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 2rem;
}

@keyframes typing {
  from {
    width: 0;
  }
}
@keyframes blink {
  50% {
    border-color: transparent;
  }
}

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

✅ Как создать красивое оформление кода в телеграмм?

Часто задаваемый вопрос, как создать оформление кода? Сегодня пришло время раскрыть все карты и показать как это сделать на самом деле.

Для того чтобы сделать оформление, нужно:

1. В начале написать названия кода, то есть прописать (```html)
2. На следующий строке нужно вставить сам код (<div class="div"> <h1>Любой код</h1></div>)
3. И третий шаг, без отступа в конце кода написать эти три символа (```)

Как это выглядит:
```html
<div class="div">
<h1>Любой код</h1>
</div>```

Результат:

<div class="div">
  <h1>Любой код</h1>
</div>

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

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

Hover кнопка - кнопка которая при наведении становится анимированной и делает интересные эффекты. С помощью hover можно воплотить свои крутые идеи.

☑️ Ну а мы оставляем HTML & CSS код ниже, для создания двух кнопок с крутым эффектом. (Кода достаточно много) ⤵️

<div class="buttons">
    <button class="close">Close</button>
    <button class="offset">Offset</button>
  </div>

body {
  background: hsl(227, 10%, 10%);
  font: 300 30px 'Fira Sans', sans-serif;
  display: flex;
  justify-content: center;
  margin-top: 20%;
}
.close:hover, .close:focus {
  box-shadow: inset -3.5em 0 0 0 var(--hover), inset 3.5em 0 0 0 var(--hover);  
}
.offset {  
  box-shadow: 
    0.3em 0.3em 0 0 var(--color),
    inset 0.3em 0.3em 0 0 var(--color);
  &:hover, &:focus {
    box-shadow: 0 0 0 0 var(--hover), inset 6em 3.5em 0 0 var(--hover);
  }
}
$colors: ( 
  close: #ff7f82,
  offset: #19bc8b
);
@each $button, $color in $colors {
  .#{$button} {
    --color: #{$color};
    --hover: #{adjust-hue($color, 45deg)};
  }
}
button {  
  background: none;
  border: 2px solid;
  font: inherit;
  margin: 1em;
  padding: 1em 2em;
  color: var(--color);
  transition: 0.75s;
  cursor: pointer;
  &:hover,
  &:focus { 
    border-color: var(--hover);
    color: #fff;
  }
}

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

@code_ready | #мем