CSS Starbursts

Developer
Peter Hrynkow
Size
2,605 Kb
Views
99,176
  1. CSS Starbursts Previews
  2. CSS Starbursts HTML Codes
  3. CSS Starbursts CSS Codes

How do I make an css starbursts?

Left: 12 points and requires only 1 div. Right: 24 points but requires a nested span.. What is a css starbursts? How do you make a css starbursts? This script and codes were developed by Peter Hrynkow on 14 September 2022, Wednesday.

CSS Starbursts Previews
IQ Test

CSS Starbursts - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Starbursts</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.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! */ html,body { width: 100%; height: 100%;
}
.starburst { font: 4em/1.4 'Lobster', georgia, serif; background: #202020; /* Uncomment this to tart them up.. background: radial-gradient(circle, #e00000 20%, #990000 80%); text-shadow: 0 .05em .05em rgba(0,0,0,.5); */ width: 2.5em; height: 2.5em; text-align: center; color: #fff;
}
.starburst,
.starburst span { display: box; box-align: center; box-pack: center;
}
.starburst span { width: 100%; height: 100%; background: inherit; transform: rotate(45deg);
}
.starburst:before,
.starburst:after ,
.starburst span:before,
.starburst span:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: inherit; z-index: -1; transform: rotate(30deg);
}
.starburst:after { transform: rotate(-30deg);
}
.starburst span:after { transform: rotate(30deg);
}
.starburst span:before { transform: rotate(-30deg);
}
.example { position: absolute; top: 50%; margin-top: -1.25em; margin-left: -1.25em;
}
#example-1 { left: 25%;
}
#example-2 { left: 75%; transform: rotate(-45deg);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!DOCTYPE html>
<html lang="en">
<head>	<meta charset="utf-8" />	<title>Untitled</title>	<meta name="generator" content="BBEdit 10.5" /> <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head>
<body> <div class="starburst example" id="example-1">Hello</div> <div class="starburst example" id="example-2"><span>Bam</span></div>
</body>
</html>
</body>
</html>

CSS Starbursts - Script Codes CSS Codes

html,body { width: 100%; height: 100%;
}
.starburst { font: 4em/1.4 'Lobster', georgia, serif; background: #202020; /* Uncomment this to tart them up.. background: radial-gradient(circle, #e00000 20%, #990000 80%); text-shadow: 0 .05em .05em rgba(0,0,0,.5); */ width: 2.5em; height: 2.5em; text-align: center; color: #fff;
}
.starburst,
.starburst span { display: box; box-align: center; box-pack: center;
}
.starburst span { width: 100%; height: 100%; background: inherit; transform: rotate(45deg);
}
.starburst:before,
.starburst:after ,
.starburst span:before,
.starburst span:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: inherit; z-index: -1; transform: rotate(30deg);
}
.starburst:after { transform: rotate(-30deg);
}
.starburst span:after { transform: rotate(30deg);
}
.starburst span:before { transform: rotate(-30deg);
}
.example { position: absolute; top: 50%; margin-top: -1.25em; margin-left: -1.25em;
}
#example-1 { left: 25%;
}
#example-2 { left: 75%; transform: rotate(-45deg);
}
CSS Starbursts - Script Codes
CSS Starbursts - Script Codes
Home Page Home
Developer Peter Hrynkow
Username peterhry
Uploaded September 14, 2022
Rating 4
Size 2,605 Kb
Views 99,176
Do you need developer help for CSS Starbursts?

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!

Peter Hrynkow (peterhry) Script Codes
Name
Hardward Accelerate Mask Reveal
Curved type with SVG
CSS Animation seeking with JavaScript
CSS Button with Angled Sides
Simple scroll prompt
Cross-browser vertical centering without Javascript and almost no CSS.
Kris Kross Hamburger
Word Wrap Algorithm for Multiline Canvas Text
A Pen by Peter Hrynkow
3D Message Flipper
Create amazing video scripts 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!