Как добавить плейсхолдер для [contenteditable]

HTML:

<pre contenteditable placeholder="Сюда можно писать"></pre>

CSS:

[contenteditable]:empty:before {
    display: block;
    color: #999;
    content: attr(placeholder);
}

#css #development #tips #tricks

Контрольные точки медиа-выражений Bootstrap

Twitter Bootstrap — самый популярный CSS-фреймворк. У него более 165к звезд и 79к форков на GitHub.

Bootstrap использует шесть контрольных точек для медиа-выражений...

👉 https://www.kobzarev.com/programming/media-queries-breakpoints/

#css #breakpoints #bootstrap

SnipCSS — инструмент для извлечения CSS из веб-компонентов

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

При этом вы также можете заменить любой авторский текст, изображение и SVG на данные, сгенерированные AI, или иконки под лицензией MIT

Стоимость: #бесплатно (но есть платные тарифы)

#CSS #web #code

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

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

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

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

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

#CSS #HTML #web

Best CSS Button Generator — генератор олдовых стилей кнопок на CSS

Сервис предлагает удобный интерфейс для дизайна кнопок, которые легко интегрируются с различными фреймворками и библиотеками

Вы можете выбрать из 30+ предопределённых стилей или цветовых тем, которые затем можно легко настроить, чтобы они соответствовали интерфейсу вашего сайта

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

#CSS #web

NeoBrutalismCSS — новый взгляд на веб-дизайн

Данный CSS-фреймворк воплощает эстетику необрутализма в веб-разработке, предлагая простой и минималистичный подход к стилизации ваших веб-проектов

Инструмент создан с акцентом на простоту, позволяя избавиться от сложности изучения множества имён классов, как в других фреймворках

Он следует минималистичному подходу, применяя основные стили, основанные на семантике HTML, что делает его удобным для быстрого начала работы и создания современной, необруталистской эстетики

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

#web #CSS

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

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

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

Новые CSS-анимации

👉 https://www.youtube.com/watch?v=jeVNN3mFxOA

#development #css #animation

Источник: @mihdan_dev

Load Awesome — коллекция CSS-анимаций загрузки

👉 https://labs.danielcardoso.net/load-awesome/animations.html

#css #animation #preloader

Источник: @mihdan_dev

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

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

Вышел новый HTML5 Boilerplate о_О

Ребята наигрались с огромной пачкой "нужных" фронтовых утилит и пошли по пути упрощения. Это заняло у них много времени!

В этом выпуске вы найдете тонну изменений. Они удалили Modernizr, Normalize.css, Babel, поддержку Internat Explorer, Google Analytics и серверные конфигурации и заменили Webpack на Parcel.

👉 https://htmlcssjavascript.com/web/html5-boilerplate-v9-0-0-released/

#html5 #parcel #boilerplate #css

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

Библиотека UI компонентов на Tailwind CSS

Красивые, отзывчивые компоненты пользовательского интерфейса и шаблоны сайтов с современным дизайном, на 100% бесплатные и с открытым исходным кодом.

👉 https://floatui.com

#css #ui #tailwind #templates #components

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

Что нового в современном CSS

Обзор новых важных CSS-свойств, которые появились в 2023 году и продолжают расширяться до сих пор. С ними можно верстать сайты проще, быстрее и круче.

👉 https://thecode.media/css-new-2024/

#css #news

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

Интерактивный генератор CSS гридов

Генератор создаёт сетки на основе grid-area, что очень удобно, когда нужно создавать сложную разметку блоков на странице.

👉🏻 https://grid.layoutit.com

#css #grid #services

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

Интерактивное руководство по CSS селектору :has()

Мы всегда хотели, чтобы в CSS был способ стилизовать элемент на основе его потомков. Это было невозможно, пока селектор :has() не стал поддерживаться во всех основных браузерах.

В этой статье я расскажу о проблемах и пролью свет на некоторые интересные случаи использования селектора :has().

👉🏻 https://ishadeed.com/article/css-has-guide/

#css #guid

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

Интерактивное руководство по CSS Container Queries

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

👉🏻 https://ishadeed.com/article/css-container-query-guide/

#css #development

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

Tailwind против семантического CSS

В этом исследовании сравниваются два сайта с похожим дизайном: коммерческий шаблон Spotlight от разработчиков Tailwind и тот же сайт с семантическим CSS.

👉 https://nuejs.org/blog/tailwind-vs-semantic-css/

#css #tailwind

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

Бесконечная прокрутка логотипов на чистом HTML и CSS

Помните HTML-элемент marquee? Он устарел, поэтому вряд ли стоит его использовать, когда понадобится что-то вроде горизонтальной автопрокрутки. Вот тут-то и приходит на помощь CSS, потому что в нём есть все необходимые инструменты для реализации этой функции.

👉 https://www.dev-notes.ru/articles/frontend/infinite-scrolling-logos-html-css/

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

#css #marquee

Стилизация чекбоксов и радиокнопок

Верстаем красивые и доступные чекбоксы и радиокнопки несколькими способами.

👉 https://doka.guide/recipes/checkbox-radio-style/

#css #forms

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

Техника LQIP на чистом CSS

Фронт из компании Canva придумал новую реализацию техники LQIP (заглушки изображений в низком качестве) с компактным форматом (описывается одним числом) и моментальной отрисовкой на CSS.

В статье интересные детали реализации — например, bit packing на CSS. Это просто отвал башки.

👉 https://leanrada.com/notes/css-only-lqip/

#css #lqip

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