​Коллекция CSS-лоадеров

Несколько эффектных лоадеров на чистом CSS. Пусть ожидание будет приятным ⏳

Забирайте: https://prglb.ru/4mb2r

#snippets #interface #css

​JavaScript-однострочники

Несколько полезных приемов на JS, укладывающихся в одну строчку кода:

Удаление дубликатов из массива

const deDupe = [...new Set(myArray)];

Изменение значений двух переменных

[varA, varB] = [varB, varA];

Установка свойства по условию

const myObject = { ...myProperty && { propName: myProperty } };

Форматирование JSON-строки

const formatted = JSON.stringify(myObj, null, 2);

Создание массива, заполненного числами

const numArray = Array.from(new Array(52), (x, i) => i);

Перемешивание массива

myArray.sort(() => { return Math.random() - 0.5});

Глубокое клонирование

const myClone = JSON.parse(JSON.stringify(originalObject));

Источник: https://prglb.ru/5ximt

#code #snippets #javascript

Рваные края в диагональных градиентах

👎 При создании диагональных линейных градиентов в CSS с резким переходом на месте стыка цветов образуется рваная линия.
background: linear-gradient(176deg, white, white 75%, black 75%, black 100%);

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

👉 Способ 1 - десятые доли процента:
background: linear-gradient(176deg, white, white 75%, black 75.3%, black 100%);

👉 Способ 2 - функция calc:
background: linear-gradient(176deg, white, white 75%, black calc(75% + 1px), black 100%);

Источник: https://prglb.ru/3wj0g

#css #snippets #code

Адаптивная комикс-панель с CSS Clip-Path

Верстаем симпатичный блок с нестандартным дизайном с помощью SVG и CSS Clip-Path.

Смотреть: https://prglb.ru/wm0e

#css #svg #snippets

Очень приятная анимация формы для ввода данных карты

Смотреть: https://prglb.ru/1z3gu

#code #snippets #interface #animation

Красивый hover-эффект для кнопки

Код: https://prglb.ru/37lv6

#interface #snippets #code

Круглый прогресс-бар на JavaScript

Создание симпатичного динамического прогресс-бара.

Смотреть: https://www.youtube.com/watch?v=amrIqeOXQW0&feature=youtu.be

#video #javascript #snippets #interface

Анимированный прогресс-бар

Симпатичный индикатор прогресса без JS: https://codepen.io/Thibaut/pen/ouKvy

#snippets #interface

Чекбоксы с интересным эффектом

Карандаш ставит галочку в чекбоксе, а стерка - убирает. Забирайте: https://prglb.ru/5o9en

#snippets #css #effects

Крутой эффект перелистывания страниц на CSS

https://codepen.io/amit_sheen/full/WNweryv

#snippets #effects #css

​Адаптивный таймлайн с изображениями

Туториал по созданию красивой и адаптивной временной шкалы: https://prglb.ru/5crl7

#interface #snippets

Витраж на HTML и CSS

Пошаговое руководство: https://proglib.io/w/933dff6c

#snippets #video

​6 скрытых жемчужин JavaScript, которые вы могли пропустить

6 свеженьких сниппетов, которые могут вас приятно удивить: https://proglib.io/w/d002d875

#javascript #snippets

​Топ-10 веб-приложений на CodePen за 2021 год

От анимированной кнопки загрузки до полноценного дашборда - вдохновляйтесь: https://proglib.io/w/4d48b047

#snippets

Карточки с параллакс-эффектом

Очень красивый эффект при наведении: https://proglib.io/w/a61647c9

#interface #animation #snippets

​Самые залайканные codepens в 2021

Подборка проектов с самым большим количеством сердечек за 2021 год: https://proglib.io/w/a30e146f

#snippets

​Эффект переворачивания страниц без JavaScript

https://proglib.io/w/ecbdc9c7

#snippets #animation

Эффект печати текста

https://proglib.io/w/0005da84

#snippets #animation