​#javascript #snippets

Копирование текста в буфер на JavaScript

Как скопировать фрагмент текста без использования сторонних библиотек?

https://prglb.ru/4jxbj

​Как сверстать таймлайн в стиле BBC?

https://dev.to/peterc/how-to-create-joined-bulletpoint-lists-with-css-bbc-news-style-1eem

#css #snippets

​Скролл и параллакс

Подборка красивых и полезных эффектов для вашего сайта.

https://prglb.ru/n63d

#snippets #css #effects

​Большая коллекция самых популярных разметок, компонентов и паттернов CSS

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

#css #interface #snippets

https://csslayout.io/

​Несколько симпатичных эффектов для кнопок

https://codepen.io/ViktorKorolyuk/pen/GYGwpv

#snippets #code #interface

​Коллекция 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