Кто-нибудь знает, можно ли сделать следующее изображение в CSS? Светлые и темные линии могут и должны быть одинаковой ширины, а края затухают до более темного цвета, так что общий фон будет темного цвета (в этом случае темно-синий).
Любая помощь приветствуется. Мои навыки в google не помогли в этом эффекте, были найдены только "звездочки/значки".
Нет. К сожалению, сгенерированные изображения css3 не включают в себя конические / angular градиенты (хотя они могут появиться в следующей редакции!), Что было бы наиболее вероятным способом сделать это, используя только css. Однако вы можете сделать это, используя css + svg. У меня на самом деле был этот документ svg, сидящий вокруг из эксперимента, который я сделал один раз:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="512px" height="512px" viewBox="-256 -256 512 512"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Burst</title>
<defs>
<g id="burst">
<g id="quad">
<path id="ray" d="M0,0 -69,-500 69,-500 z" />
<use xlink:href="#ray" transform="rotate(30)"/>
<use xlink:href="#ray" transform="rotate(60)"/>
<use xlink:href="#ray" transform="rotate(90)"/>
</g>
<use xlink:href="#quad" transform="rotate(120)"/>
<use xlink:href="#quad" transform="rotate(240)"/>
</g>
<radialGradient id="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="white" stop-opacity="0.65"/>
<stop offset="100%" stop-color="black" stop-opacity="0.65"/>
</radialGradient>
<!-- a circle mask -->
<mask id="m"><circle r="256" fill="white"/></mask>
</defs>
<!-- added a mask and scaled it to a different aspect ratio below. scale(x,y) -->
<g mask="url(#m)" transform="scale(1, 0.75)">
<use xlink:href="#burst" fill="lightslateblue"/>
<use xlink:href="#burst" fill="darkslateblue" transform="rotate(15)"/>
<circle r="360px" fill="url(#grad)" />
</g>
</svg>
Установите это как фоновое изображение и установите css background-size: cover. Это. Здесь скрипка, использующая это изображение в URL-адресе данных.
Да, возможно.
У меня был такой же вопрос пару месяцев назад, и я не мог найти примеров такого эффекта, выполняемого с помощью чистого CSS. Итак, я решил заняться этим.
После большого количества экспериментов я наконец придумал решение, которое не только было в CSS, но и довольно переносимым (относительно говоря).
Я начал с создания только верхней половины и нижней половины отдельно, используя обход линейного градиента на псевдонимах ::before и ::after, а второй шаг (который, безусловно, был самым трудоемким шагом) слияние двух половин в один элемент.
Рабочая демонстрация: http://codepen.io/pestbarn/pen/aBybeK
(оригинальный плакат хотел получить эффект виньетки, который я создал отдельно в приведенном выше демо, используя оверлей div с радиальным градиентом)
Я предоставил как ванильный CSS, так и Sass mixin на github.com/pestbarn/starburst.css, и вы найдете несколько примеров на официальной демонстрации стр.
Этот кросс-браузер?
Насколько я могу судить, да. Вы можете увидеть текущую поддержку браузера в репозитории.
Могу ли я его анимировать?
Да, например, вы будете анимировать любые другие элементы. Попробуйте сами!
Есть ли какие-либо оговорки?
Увы, есть. Использование двух цветов, существенно отличающихся от другого (например, яркости), создаст зубчатые края. Поэтому я рекомендую использовать цвета, которые очень похожи друг на друга.
Кроме того, поскольку эффект создается с использованием псевдоэлементов, вам в некоторых случаях необходимо явно задать высоту и ширину элемента.
Не стесняйтесь экспериментировать!
Существует экспериментальное свойство проект для CSS4 Lea Verou:
div
{
repeating-conical-gradient(black, black 5%, #f06 5%, #f06 10%)
}
Но, насколько я понимаю, это всего лишь предложение и невозможно в CSS3. Просто придерживайтесь фонового изображения, или вы можете попробовать использовать треугольные изображения во вращающихся элементах.