Как создать радиальный градиент в CSS?
Для создания фона в виде радиального (кругового, эллиптического) градиента испольуется функция radial-gradient.
Самый простой градиент задаётся двумя цветами.
Цветов мы можем перечислить сколько угодно. Браузер сам распределит градиент таким образом, чтобы последний цвет всегда заходил в угол элемента.
Форма градиента задаётся ключевым словом circle или ellipse (по умолчанию).
Мы можем задавать положение центральной точки, используя те же ключевые слова, что и для background-position, но с приставкой at: at left, at top, at right, at bottom, at center (по умолчанию). Значения можно сочетать, чтобы поместить центр градиента в нужный угол элемента: at top left — центр градиента в верхнем левом углу.
#css
Для создания фона в виде радиального (кругового, эллиптического) градиента испольуется функция radial-gradient.
Самый простой градиент задаётся двумя цветами.
.element {
background-image: radial-gradient(#6e4aff, #49A16C);
}
В этом случае начальная точка помещается в центр элемента, а градиент рисуется таким образом, чтобы в углах элемента был последний указанный в скобках цвет.Цветов мы можем перечислить сколько угодно. Браузер сам распределит градиент таким образом, чтобы последний цвет всегда заходил в угол элемента.
Форма градиента задаётся ключевым словом circle или ellipse (по умолчанию).
Мы можем задавать положение центральной точки, используя те же ключевые слова, что и для background-position, но с приставкой at: at left, at top, at right, at bottom, at center (по умолчанию). Значения можно сочетать, чтобы поместить центр градиента в нужный угол элемента: at top left — центр градиента в верхнем левом углу.
#css
JavaScript. Произойдет ли ошибка при выполнении этого кода?
Anonymous Quiz
15%
Да
81%
Нет
4%
Посмотреть ответ
This media is not supported in your browser
VIEW IN TELEGRAM
Cloud Upload Bubbles
При нажатии на кнопку запускается CSS-анимация, применяемая к генерируемым элементам.
#js
При нажатии на кнопку запускается CSS-анимация, применяемая к генерируемым элементам.
#js
JavaScript. Каким будет результат?
Anonymous Quiz
37%
0 1 2 и 0 1 2
14%
0 1 2 и 3 3 3
39%
3 3 3 и 0 1 2
10%
Посмотреть ответы
2 DIV 3D dice.gif
181.7 KB
2 DIV 3D dice
Анимация игральной объемной кости, реализованная с помощью двух тегов div на чистом CSS.
#css
Анимация игральной объемной кости, реализованная с помощью двух тегов div на чистом CSS.
#css
JavaScript. Каким будет результат?
Anonymous Quiz
71%
Hello
20%
Hey!
4%
undefined
2%
ReferenceError
1%
TypeError
2%
Посмотреть ответы
This media is not supported in your browser
VIEW IN TELEGRAM
Css/Js/Gsap Mask Lamp
Свет качающейся лампы освещает то одну, то другую сторону картинки. Сделано с помощью стандартной библиотеки анимации JavaScript GSAP.
#js
Свет качающейся лампы освещает то одну, то другую сторону картинки. Сделано с помощью стандартной библиотеки анимации JavaScript GSAP.
#js
JavaScript. Метод toFixed()
Метод
Для использования метода
В приведенном примере у нас есть число
Метод
toFixed() в JavaScript используется для форматирования числа с фиксированным количеством знаков после десятичной точки. Он возвращает строковое представление числа с указанным числом знаков после запятой.Для использования метода
toFixed(), вызовите его на числе, которое хотите отформатировать, и передайте количество желаемых знаков после десятичной точки в виде аргумента. Метод toFixed() вернет строку с отформатированным числом.В приведенном примере у нас есть число
3.14159, к которому мы применяем метод toFixed() с аргументом 2. Метод toFixed(2) форматирует число, оставляя два знака после десятичной точки, и возвращает строку "3.14". Мы выводим эту строку в консоль и получаем "3.14". Обратите внимание, что метод toFixed() округляет число в соответствии с правилами округления.This media is not supported in your browser
VIEW IN TELEGRAM
Snow
Реализовано без использования JS. Каждому элементу рандомно задается размер и время падения в SCSS.
#css
Реализовано без использования JS. Каждому элементу рандомно задается размер и время падения в SCSS.
#css