USA Stars And Stripes Patterns For CSS Background – USA.css

Category: CSS & CSS3 , Recommended | July 6, 2020
Author: bennettfeely
Views Total: 27 views
Official Page: Go to website
Last Update: July 6, 2020
License: MIT

Preview:

USA Stars And Stripes Patterns For CSS Background – USA.css

Description:

USA.css is a CSS only pattern library that fills your empty background with patriotic stars and stripes patterns.

Created using CSS linear-gradient(), radial-gradient(), and conic-gradient() functions.

Perfect for Independence Day & America First & Make America Great Again design projects to show your American pride.

How to use it:

1. Download and load the minified version of the USA.css library on the page.

<link rel="stylesheet" href="usa.min.css" />

2. Use USA stars as a background pattern.

USA.css Stars Pattern

<div class="usa-stars">
  ... content here ...
</div>

3. Use USA stripes as a background pattern. Supports both vertical and horizontal directions:

<div class="usa-stripes-horizontal">
  ... content here ...
</div>
<div class="usa-stripes-vertical">
  ... content here ...
</div>

4. Create a background pattern with diamonds.

USA.css Diamonds Pattern

<div class="usa-diamond">
  ... content here ...
</div>

5. Create a radial background pattern.

USA.css Radial Pattern

<div class="usa-radial">
  ... content here ...
</div>

6. Create a plaid background pattern.

USA.css Plaid Pattern

<div class="usa-plaid">
  ... content here ...
</div>

7. Create a conic background pattern.

USA.css Conic Pattern

<div class="usa-conic">
  ... content here ...
</div>

You Might Be Interested In:


Leave a Reply