Starburst

Developer
Ludvig Lindblom
Size
3,581 Kb
Views
48,576
  1. Starburst Previews
  2. Starburst HTML Codes
  3. Starburst CSS Codes

How do I make an starburst?

What is a starburst? How do you make a starburst? This script and codes were developed by Ludvig Lindblom on 25 July 2022, Monday.

Starburst Previews
IQ Test

Starburst - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Starburst</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/yjfis.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import "compass/css3";
$width: 15em;
$height: 15em;
$size: 3em;
$lineheight: 5em;
%starburst { width: $width; height: $height; background: $darkbluegrey; border-radius: 1.9em;
}
.starburst { @extend %starburst; margin: 5em auto 0; position: relative; span { color: $lightbright; text-align: center; font-size: $size; font-weight: 800; line-height: $lineheight; display: block; width: 100%; height: 100%; position: absolute; z-index: 2; transform: rotate(-13deg); } &:before, &:after { @extend %starburst; position: absolute; top: 0; left: 0; content: ""; } &:before { transform: rotate(-30deg); } &:after { transform: rotate(30deg); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='starburst'> <span> 50% off </span>
</div>
</body>
</html>

Starburst - Script Codes CSS Codes

@import "compass/css3";
$width: 15em;
$height: 15em;
$size: 3em;
$lineheight: 5em;
%starburst { width: $width; height: $height; background: $darkbluegrey; border-radius: 1.9em;
}
.starburst { @extend %starburst; margin: 5em auto 0; position: relative; span { color: $lightbright; text-align: center; font-size: $size; font-weight: 800; line-height: $lineheight; display: block; width: 100%; height: 100%; position: absolute; z-index: 2; transform: rotate(-13deg); } &:before, &:after { @extend %starburst; position: absolute; top: 0; left: 0; content: ""; } &:before { transform: rotate(-30deg); } &:after { transform: rotate(30deg); }
}
Starburst - Script Codes
Starburst - Script Codes
Home Page Home
Developer Ludvig Lindblom
Username ludviglindblom
Uploaded July 25, 2022
Rating 3
Size 3,581 Kb
Views 48,576
Do you need developer help for Starburst?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ludvig Lindblom (ludviglindblom) Script Codes
Name
Canvas animation
Canvas box-shadow pixel art generator
Fullscreen API
Christmas Tree
Christmas ornaments
CSS loading spinners
I Am Left logo as a scalable canvas
The Ultimate Flexbox Cheat Sheet
Disable JavaScript execution from console
Optical illusion - Motion Binding
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!