WebTaverna /> js, css, html

🪞 Зеркальное отражение текста с помощью CSS HTML разметка ⤵️

<h1 data-text="WebTaverna">WebTaverna</h1>

CSS стили ⤵️

h1 {
  position: relative;
  color: #fff;
  font-size: 5em;
  font-weight: 800;
}
h1:before {
  content: attr(data-text);
  position: absolute;
  transform-origin: bottom;
  transform: rotateX(180deg);
  line-height: 1em;
  background: linear-gradient(0deg, #ffffff88 0, rgba(255, 255, 255, 0) 80%);
  -webkit-background-clip: text;
  color: rgba(0, 0, 0, 0);
  opacity: 0.5;
}

👍- если было полезно | ➡️ WebTaverna

Анимация в URL с помощью JavaScript и Emoji 👨‍💻

const myEmojis = ['😃', '🤨', '😡']

function urlAnimate () {
    
    window.location.hash = myEmojis
        [Math.floor((Date.now()/100)%myEmojis.length)]

    setTimeout(urlAnimate, 1000)
}

urlAnimate()

👍- если было полезно | ➡️ WebTaverna

🔰 Шпаргалка по CSS свойству transform

transform позволяет применять двумерные и трёхмерные преобразования к элементам, изменяя их форму, размер и положение.

В общем виде свойство transform записывается так: transform: функция(значение);, где функция — это тип преобразования, а значение — параметры этого преобразования. Свойство transform принимает следующие значения: 🔜 none — никакого преобразования не применяется; 🔜 rotate(angle) — вращает элемент на заданный угол; 🔜 scale(x, y) — масштабирует элемент по осям X и Y; 🔜 translate(x, y) — перемещает элемент на заданные координаты; 🔜 skew(x-angle, y-angle) — наклоняет элемент на заданные углы по осям X и Y. Transform не должен использоваться для изменения основной структуры веб-страницы. Он нужен для создания эффектов и анимаций, а не для основного макета страницы. 👍- если было полезно | ➡️ WebTaverna

Проверяем, правильно ли заполнено поле ввода с цифрами? 🔍 Решить эту задачу нам помогут псевдоклассы в CSS :in-range и :out-of-range, которые используются для стилизации полей ввода, поддерживающих атрибуты min и max 🔜 :in-range - введённое значение попадает в диапазон от min до max; 🔜 :out-of-range - не попадает в диапазон от min до max. Пример ⤵️

<input type="number" min="1" max="3">

input:in-range {
  background-color: #17a992;
  border: 5px solid #006776;
}
input:out-of-range {
  background-color: #f4a898;
  border: 5px solid #e62a5a;
}

Атрибуты min и max могут иметь поля ввода с типами date, month, week, time, datetime-local, number и range, в которых эти атрибуты задают диапазон допустимых значений, которые пользователь может вводить в поле. 👍- если было полезно | ➡️ WebTaverna

Маскирование в CSS c помощью свойства mask ☀️ Данное CSS свойство устанавливает изображение, которое используется как слой маски для элемента ⤵️

img {
  mask: url("./graph.png");
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-position: center;
} 

🔜 mask: url() - задаём png изображение слоя-маски; 🔜 mask-repeat - определяем порядок повторений; 🔜 mask-size - определяем размеры изображения-маски; 🔜 mask-position - устанавливаем начальную позицию относительно слоя; Также это можно записать в одну строку ⤵️

img {
  mask: url("./graph.png") center/cover no-repeat;
}

👍- если было полезно | ➡️ WebTaverna

💓 Анимация в виде "Шкалы сердцебиения" с помощью SVG и CSS

Отлично подойдет для оформления каких-либо элементов на сайтах медицинской тематики

HTML-разметка

<div class="loading">
    <svg width="16px" height="12px">
        <polyline id="back" points="1 6 4 6 6 11 10 1 12 6 15 6"></polyline>
        <polyline id="front" points="1 6 4 6 6 11 10 1 12 6 15 6"></polyline>
    </svg>
</div>

CSS-стили

.loading {
  transform: scale(10);
}
.loading svg polyline {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.loading svg polyline#back {
  stroke: #ff4d5033;
}
.loading svg polyline#front {
  stroke: #ff4d4f;
  stroke-dasharray: 12, 36;
  stroke-dashoffset: 48;
  animation: dash 1s linear infinite;
}
@keyframes dash {
  62.5% {
    opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
  }
}

👍- если было полезно | ➡️ WebTaverna

В России можно посещать IT-мероприятия хоть каждый день: как оффлайн, так и онлайн Но где их находить? Как узнавать о них раньше, чем когда все начнут выкладывать фотографии оттуда? Переходите на канал IT-Мероприятия России. В нём каждый день анонсируются мероприятия со всех городов России 📆 в канале размещаются как онлайн, так и оффлайн мероприятия; 👩‍💻 можно найти ивенты по любому стеку: программирование, frontend-backend разработка, кибербезопасность, дата-аналитика, osint, devops и другие; 🎙 разнообразные форматы мероприятий: митапы с коллегами по цеху, конференции и вебинары с известными опытными специалистами, форумы и олимпиады от важных представителей индустрии и многое другое А чтобы не искать по разным форумам и чатам новости о предстоящих ивентах: 🚀 IT-мероприятия России — подписывайся и будь в курсе всех предстоящих мероприятий!

Анимированный текст с градиентом на 🔠🔠🔠 HTML разметка

<h1>t.me/WebTaverna</h1>

CSS стили

h1 {
  background: linear-gradient(90deg, 
              #d988da, #dcde8a, #d988da);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 3s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}
@keyframes animate {
  0% { background-position: -500%; }
  100% { background-position: 500%; }
}

👍- если было полезно | ➡️ WebTaverna

Выравнивание чисел с помощью CSS свойства font-variant-numeric Данное свойство позволяет управлять начертаниями цифр, дробей и порядковых числительных 👍- если было полезно | ➡️ WebTaverna

Реклама есть, продаж нет — почему? Если реклама запущена, а в продажах тишина — дело часто не в рекламе. Перед тем как обсуждать бюджеты и форматы, мы задаём простой вопрос: что происходит с клиентом после клика? 📊 В одном проекте половину заявок теряли на этапе звонка — люди просто не дозванивались. В другом — реклама обещала одно, а сайт и отдел продаж продавали другое. В таких условиях любая реклама лишь ускоряет потери. Поэтому бизнесу чаще нужен не «ещё один канал», а взгляд на свою систему целиком. А уже потом — медиаплан. ✅ Об этом и не только мы говорим в канале Digital Agency Insight: разбираем, что важно увидеть в бизнесе до запуска рекламы, где обычно «течёт» воронка и как на всё это влияют законы о рекламе и правила площадок в России и за рубежом. Смотреть #реклама 16+ О рекламодателе