starburst.css

KO | EN

gitlite — search

#javascript #python #hacktoberfest #llm #golang #android #machine-learning #macos #java #windows #awesome #awesome-list #mcp #open-source

(★ 8)

Everyone said it couldn't be done. I'm glad to prove them wrong. Creating starbursts in CSS will no longer be a problem.

starburst.css Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# starburst.css
>Now using real CSS!

### Download: [Sass version](https://github.com/pestbarn/starburst.css/blob/master/source/starburst.scss) | [Vanilla version](https://github.com/pestbarn/starburst.css/blob/master/source/starburst.css) ###
[Official demo](https://codepen.io/lethargic/full/RRYdxX)

## Requirements
* Sass 3.4.22 (Selective Steve) or higher
* Compass 1.0.3 (Polaris) or higher
* *------OR------*
* Just a regular browser *(vanilla version only)*

## Installation: Sass
1. Download or copy this repo (or `git clone git@github.com:pestbarn/starburst.css.git`)
2. Somewhere at the top of your Sass file, insert `@import "starburst";`
3. Insert `@include starburst(opts);` inside the selector of your choice
4. Set the element's `height` and `width`
5. You're done!

## Installation: vanilla
1. Download or copy `starburst.css`
2. Import/link to it like you would with any CSS file
3. Use the class name `starburst` together with
    * `starburst--top`
    * `starburst--bottom`
    * `starburst--both`, and/or
    * `starburst--circular`

## Example
**Using Sass version:**

```html
<div class="burst"></div>
```

```scss
div.burst {
    width: 200px;
    height: 200px;
    @include starburst(both, 15, maroon, darkred, 1, 1);
}
```

**Using vanilla:**

```html
<div class="burst starburst starburst--top starburst--circular"></div>
```

```css
div.burst {
    width: 200px;
    height: 200px;
}
```

## Variables

## Browser support
| Browser         | Version tested               |
| :---            | ---:                         |
| Chrome          | 52+                          |
| Firefox         | 47+                          |
| Safari          | 9.1.1+                       |
| IE              | 11                           |
| Edge            | 44+                          |
| Chrome (mobile) | 52+ (on Android 6.0.1)       |
| Safari (mobile) | 601.1+ (on iOS 9.3)          |
| Windows Phone   | *not tested*                 |
**Have you tested in other browsers? Please leave a comment [here](https://github.com/pestbarn/starburst.css/issues/1).**

## Credits
* Special thanks to [Calley Nye](https://about.me/calleynye) for the [original inspiration](http://codepen.io/syren/pen/Ahkrv) which got me started on Starburst.css,
* To [Lea Verou](http://lea.verou.me/) for the exceptional [Prism.js](http://prismjs.com/)
* To [the Codepen team](http://codepen.io/about/) for making my life so much easier)
* To [the H5BP team](https://html5boilerplate.com/)
* To [Nicolas Gallagher](http://nicolasgallagher.com/) and [Jonathan Neal](http://www.jonathantneal.com/) for [Normalize.css](https://necolas.github.io/normalize.css/)

starburst.css

starburst.css Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

starburst.css

starburst.css Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README