Формошлёп

Самая полная открытая библиотека Если вы любите читать или просто иногда ищете книги для обучения и т.п., то у меня для вас есть отличная находка — Anna's Archive. Это «теневая» библиотека, цель которой — сделать знания доступными для всех. На данный момент там более 63 млн книг. Там есть все: ■ художественная литература ■ научные работы ■ учебники ■ редкие и давно изданные книги По сути, это поисковик по миллионам книг в разных форматах: PDF, EPUB, MOBI и других, подходящих для читалок и планше...

Flip-карточка на чистом CSS Давайте сегодня разберём, как создать интерактивную flip-карточку, с переворотом по клику без JS. HTML: <label class="flip-card"> <input type="checkbox" class="flip-checkbox"> <div class="flip-inner"> <div class="card front"> Hello </div> <div class="card back"> Привет </div> </div> </label> Оборачиваем всё в label, чтобы при клике в любое место карточки checkbox менял своё состояние. Сам checkbox скрываем: .flip-checkbox { display: none; } 3D-контекст: .flip-card { p...

Градиентный разделитель между секциями При создании лендингов, часто нужно как-то красиво отделить один блок (секцию) от другого. Давайте сегодня разберем, как сделать плавный переход с полосами затухающих цветов. HTML: <section class="section-red"> <!-- Контент первой секции --> </section> <!-- Разделитель --> <div class="section-divider"></div> <section class="section-white"> <!-- Контент второй секции --> </section> Здесь две секции и пустой div для разделителя. Стили блоков разбирать не буде...

Библиотека иконок на чистом CSS Если вы ищете легкие и кастомизируемые решения для иконок, то обратите внимание на CSS＊GG. Это библиотека иконок (open-source), в которой более 700 иконок реализованных в основном на чистом CSS. Иконки доступны в нескольких форматах: чистый CSS, SVG и даже готовые пакеты для React. Простое подключение, для конкретной иконки (например search) копируем CSS: .gg-search { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); widt...

Необычный hover-эффект для изображений Нашел один любопытный ховер-эффект для карточек с изображениями — раньше вроде бы не встречал. Выглядит так, будто картинка начинает «рассыпаться» в стороны при наведении. Делается это, конечно, немного геморно и не сказать, что код самый изящный, но если нужен нестандартный визуальный эффект, то можно попробовать) HTML: <div class="card"> <img class="card-front-image" src="..." /> <div class="card-faders"> <img class="card-fader" src="..." /> <!-- ещё 7 ко...

Hover-эффект карточек с выезжающим контентом Сегодня разберем, как создать стильную карточку с контентом, который проявляется при наведении. Главная фишка здесь — игра с позиционированием и трансформацией. HTML: <div class="card"> <div class="img-box"><img src="..."></div> <div class="content"> <h2>Leafs</h2> <p>Lorem ipsum...</p> <a href="#">Read More</a> </div> </div> Карточка содержит блок с изображением и блок с контентом. Базовые стили карточки: .card { position: relative; width: 350px; hei...

Интерактивная карта с 500 000+ телеграм-каналов На днях товарищ скинул интересную карту телеграм-каналов, которую создали ребята из TGPages. Я конечно, сразу пошел проверять,есть там наш "Формошлёп" или нет) Все в порядке, канал на месте. Правда, его почему-то отнесли к тематике «Дизайн и креатив», странновато, конечно, но мб из-за того, что в описании указано, что мы здесь "шлёпаем формы и красим кнопки") Ну да ладно. В общем, карта интересная и залипательная, выполнена в виде звездного неба, с...

Интерактивная галерея без JS Давайте сегодня разберем, как создать интерактивную галерею изображений с эффектом раскрытия по клику на чистом CSS. HTML: <input type="radio" name="slider" id="c1" checked> <label class="card" for="c1"></label> Основа галереи — группа радиокнопок, где каждая кнопка соответствует своему изображению. Атрибут name="slider" объединяет их в группу, позволяя выбрать только один элемент. CSS: input { display: none; } .card { width: 90px; height: 420px; transition: 0.6s cub...

Анимированная градиентная рамка на CSS Сегодня разберем красивый и модный визуальный эффект — анимированную градиентную рамку, которая красиво переливается. HTML: <div class="rainbow"></div> Контейнер для карточки. CSS для карточки: .rainbow { position: relative; width: 400px; height: 300px; border-radius: 12px; overflow: hidden; } Задаем размеры и скругляем углы. overflow: hidden — обрезаем все, что выходит за пределы контейнера. Вращающийся слой: .rainbow::before { content: ""; position: absol...

Группировка выбранных элементов Сегодня разберем, как можно визуально группировать выбранные элементы. Если отметить несколько пунктов подряд, они "склеятся" в единый блок, потеряв скругления между собой. HTML: <div class="card"> <label><input type="checkbox">Первый элемент</label> <label><input type="checkbox" checked>Второй элемент</label> <label><input type="checkbox" checked>Третий элемент</label> <label><input type="checkbox">Четвертый элемент</label> </div> Каждый label содержит чекбокс и ...