Skip to content

Latest commit

 

History

History
181 lines (119 loc) · 7.51 KB

README.md

File metadata and controls

181 lines (119 loc) · 7.51 KB
Raw

Box-shadows.css releases changelog npm chat gitter license

flagru flagen

logo

A cross-browser collection of CSS box-shadow

  • Generator the file box-shadows.min.css
  • Box-shadow CSS Generator

Try, experiment, use whatever you want and how you want!

box-shadows.css is a collection of simple and pleasant shadows for you to use in your projects. Great for tables, homepages content, containers, navigation and other blocks your website.

Version v1.0.5 became much simpler since support for the prefix is no longer required. To verify this, check the support of your browser on the site Can I Use.

NPM

npm install box-shadows-css --save-dev

Content

Basic Usage

1. Include the stylesheet

Include the stylesheet on your document's <head>

<head>
  <link rel="stylesheet" href="/box-shadows.css">
  <!-- or include it directly via CDN -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/box-shadows-css@1/box-shadows.min.css">
</head>

Download

See box-shadows.css and box-shadows.min.css

You can use the generator to create minimal file on your own and reduce the load on the site.

2. Add the class

Add the class .bShadow to the block you want to use:

<div class="bShadow"></div>

3. Add the class number

Finally you need to add an additional class to the existing .bShadow- with the number or use one of the classes separately, without class .bShadow. For example,

<div class="bShadow bShadow-1"></div>
<!-- or -->
<div class="bShadow-1"></div>
  • Now the collection consists of 53 variants of shadows with the number, as well as four independent classes: .bShadow, .bShadow-light, .bShadow-inset and .bSnone.

See example

4. Hover effect

Add the class h to the element .bShadow- to create a hover effect. For example,

<div class="bShadow-38 bShadow-1h"></div>

See example block one (.bShadow) / try, experiment, use whatever you want and how you want!

If you want the shadow not to appear when hovering or clicking, use the class .bSnone

5. Animation on CSS Transform

Class .bShadow uses a smooth default animation in .2s transition: transform 0.2s ease-in-out, and also includes a property that warns the browser about the upcoming shadow transformation and position will-change: transform, box-shadow;.

Use this to make a beautiful animation of your blocks. For example,

.transform-translateY-5:hover {
  -webkit-transform: translateY(-5px) translateZ(0);
  transform: translateY(-5px) translateZ(0);
}
<div class="bShadow transform-translateY-5 bShadow-1h">bShadow</div>

See example

6. Adding the inset parameter

To add a parameter, just insert the script on the HTML page and specify in it the classes for which you want to apply it.

Full example for .bShadow-1. A point in front of the class is required!

[].forEach.call(document.querySelectorAll('.bShadow-1'), function(node) {
  var bsh = getComputedStyle(node).boxShadow;
  node.style.boxShadow = "inset " + bsh;
});

See example

WordPress Functions.php

Use the library by including the stylesheet in your functions.php your theme in WordPress.

wp_enqueue_style( 'bshadows-style', '/box-shadows.min.css', array(), '1.0.4' );

To update the version, change 1.0.4 on new.

Generator the file box-shadows.min.css

The site also has a box-shadows.min.css file generator with an instruction that allows the user to create her/his own file consisting only of the selected classes. This will help reduce the load on the site if your project uses less than two or three shadows.

  1. go to the site
  2. сlick the button "show in blocks" and follow the instruction
  3. finally click the "download" button and connect the downloaded file to your site

It is great!

Box-shadow CSS Generator

You can use the classic css box-shadow generator to supplement the collection with your own styles. By clicking the “Save and add next” button, you can create an infinite number of classes. The first generated and subsequent classes are assigned a sequence number that is not in the collection. You can copy the received styles and paste into the root CSS or the box-shadows.min.css file created on the site.

Usage

To use box-shadows.css in your website, simply add the stylesheet into your document's <head>. Add the class .bShadow to an element, along with any of the .bShadow- with number or singly, add hover effect and javascript for creating property inset. Optional. Download the entire library or create your own smaller one, using the CSS file generator. If you do not have enough classes, you can create them yourself in the generator and add them to the downloaded file. That's all! You've got a CSS block with shadow.

License

Box-shadows.css.css is licensed under the MIT license

Contributing

If you have any suggestions, or you find an error, tell me in twitter @andrejsharapov. I will answer you.

↑ to top