{"id":269088,"date":"2018-04-16T06:26:36","date_gmt":"2018-04-16T13:26:36","guid":{"rendered":"http:\/\/css-tricks.com\/?p=269088"},"modified":"2018-09-29T23:49:17","modified_gmt":"2018-09-30T06:49:17","slug":"1-html-element-5-css-properties-magic","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/1-html-element-5-css-properties-magic\/","title":{"rendered":"1 HTML Element + 5 CSS Properties = Magic!"},"content":{"rendered":"

Let’s say I told you we can get the results below with just one HTML element and five CSS properties for each. No SVG, no images (save for the background<\/code> on the root that’s there just to make clear that our one HTML element has some transparent parts), no JavaScript. What would you think that involves?<\/p>\n

<\/p>\n

\"Screenshots.
The desired results.<\/figcaption><\/figure>\n

Well, this article is going to explain just how to do this and then also show how to make things fun by adding in some animation.<\/p>\n

CSS-ing the Gradient Rays<\/h3>\n

The HTML is just one <div><\/code>.<\/p>\n

<div class='rays'><\/div><\/code><\/pre>\n
In the CSS, we need to set the dimensions of this element and we need to give it a background<\/code> so that we can see it. We also make it circular using border-radius<\/code>:<\/p>\n
.rays {\r\n  width: 80vmin; height: 80vmin;\r\n  border-radius: 50%;\r\n  background: linear-gradient(#b53, #f90);\r\n}<\/code><\/pre>\n
And… we’ve already used up four out of five properties to get the result below:<\/p>\n
See the Pen<\/a> by thebabydino (@thebabydino<\/a>) on CodePen<\/a>.<\/p>\n
So what’s the fifth? mask<\/code> with a repeating-conic-gradient()<\/code> value!<\/p>\n
Let’s say we want to have 20<\/code> rays. This means we need to allocate $p: 100%\/20<\/code> of the full circle for a ray and the gap after it.<\/p>\n
\"Illustration.
Dividing the disc into rays and gaps (live<\/a>).<\/figcaption><\/figure>\n
Here we keep the gaps in between rays equal to the rays (so that’s .5*$p<\/code> for either a ray or a space), but we can make either of them wider or narrower. We want an abrupt change after the ending stop position of the opaque part (the ray), so the starting stop position for the transparent part (the gap) should be equal to or smaller than it. So if the ending stop position for the ray is .5*$p<\/code>, then the starting stop position for the gap can’t be bigger. However, it can be smaller and that helps us keep things simple because it means we can simply zero it.<\/p>\n
\"SVG
How repeating-conic-gradient()<\/code> works (live<\/a>).<\/figcaption><\/figure>\n
$nr: 20; \/\/ number of rays\r\n$p: 100%\/$nr; \/\/ percent of circle allocated to a ray and gap after\r\n\r\n.rays {\r\n  \/* same as before *\/\r\n  mask: repeating-conic-gradient(#000 0% .5*$p, transparent 0% $p);\r\n}<\/code><\/pre>\n
Note that, unlike for linear and radial gradients, stop positions for conic gradients cannot be unitless. They need to be either percentages or angular values. This means using something like transparent 0 $p<\/code> doesn’t work, we need transparent 0% $p<\/code> (or 0deg<\/code> instead of 0%<\/code>, it doesn’t matter which we pick, it just can’t be unitless).<\/p>\n
\"Screenshot
Gradient rays (live demo<\/a>, no Edge support).<\/figcaption><\/figure>\n
There are a few things to note here when it comes to support:<\/p>\n