LiveCSSPlay — пошаговое применение CSS к вашему HTML

LiveCSSPlay представляет из себя интерактивный инструмент, позволяющий вам писать CSS-код по частям, а не сразу целиком

Далее вы можете наблюдать, как ваш HTML-документ стилизуется шаг за шагом

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

Стоимость: #бесплатно

#CSS #HTML #web

ChatGPT пока не смог заменить фронтендера, но уже близок к этому.

Смотри эксперимент у Анны Блок

https://youtube.com/shorts/eztsC9ONjuw?si=LHqG8H-lnQs3pmvp

CSS-трюк: плавный переход от height=0 к auto

HTML:

<div class="accordion">
  <div class="accordion-title">Hover me!</div>
  <div class="accordion-body">
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ullam ipsam dignissimos perspiciatis consequatur itaque maxime nihil cupiditate veniam. Perferendis!</p>
    </div>
  </div>
</div>

CSS

.accordion {
  max-width: 500px;
  background-color: black;
  
  font-family: system-ui;
  color: white;
  
  border-bottom: 5px solid limegreen;
  cursor: pointer;
}

.accordion-title {
  font-weight: 700;
  font-size: 1.5rem;
  padding: 1rem;
}

.accordion-body {
  padding-inline: 1rem;
}

👉 https://dev.to/francescovetere/css-trick-transition-from-height-0-to-auto-21de

#css #html #transition #tricks

🕹Злой полицейский — Подписаться

Введение в Popover API

В последнее время браузеры стремительно обретают довольно важные возможности. Возможности, для реализации которых могло потребоваться несколько библиотек JavaScript (или CSS), теперь доступны в браузерах из коробки.

👉 https://www.dev-notes.ru/articles/frontend/popover-api-101/

👮‍♂️ Злой полицейский - Подписаться

#html #javascript #popover