​#interface #code #css

Карусель изображений на чистом CSS

Полностью функциональная карусель со стрелками и контролами без единой строчки JS.

https://prglb.ru/4yfkh

#code #html

Сниппет для просмотра всех SVG в спрайте

const sprite = document.querySelector("#sprite");
const symbols = sprite.querySelectorAll("symbol");

symbols.forEach(symbol => {
  document.body.insertAdjacentHTML("beforeend", 
  '<svg width="50" height="50">' +
     '<use xlink:href="#${symbol.id}" />' + 
  '</svg>')
});

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

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

#snippets #code #interface

​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

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

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

#code #snippets #interface #animation

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

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

#interface #snippets #code

Круговое меню на HTML, CSS и JS

Верстаем симпатичное меню с помощью базовых знаний HTML, CSS, JS и геометрии 😲

Смотреть и повторять: https://www.youtube.com/watch?v=RR1Ag4SQ54E&feature=youtu.be

#code #video