madeas / Box Shadows.css
Projects that are alternatives of or similar to Box Shadows.css
Box-shadows.css 
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
- WordPress Functions.php
- Generator the file box-shadows.min.css
- Box-shadow CSS Generator
- Usage
- License
- Contributing
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/[email protected]/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.
- 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 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.