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.
- Basic Usage
- WordPress Function.php
- Generator the file box-shadows.min.css
- Box-shadow CSS Generator
- Usage
- License
- Contributing
Include the stylesheet on your document's <head>
<head>
<link rel="stylesheet" href="/box-shadows.css">
<!-- or -->
<link rel="stylesheet" href="/box-shadows.min.css">
</head>
See box-shadows.css and box-shadows.min.css
You can use the generator to create your own minimal file and reduce the load on the site.
Add the class .bShadow
to the block you want to use:
<div class="bShadow"></div>
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
Add the class h
to the element .bShadow-
to create an 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
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
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
Use the library by including the stylesheet in your function.php your theme in WordPress.
wp_enqueue_style( 'bShadows-style', '//madeas.github.io/box-shadows.min.css', array(), '1.0.4' );
To update the version, change 1.0.4
on new.
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.
- go to the site
- сlick the button "show in blocks" and follow the instruction
- finally click the "download" button and connect the downloaded file to your site
It great!
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.
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 create 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.
Box-shadows.css.css is licensed under the MIT license. (http://opensource.org/licenses/MIT)
If you have any suggestions, or you find an error, tell me in twitter @andrejsharapov. I will answer you.