Collection of CSS box-shadow
Surely, some of you noticed that different sites use almost identical shadows in blocks, navigation bars and other containers, plus — minus in the opacity. I analyzed a number of popular sites, both and foreign ones, and tried to collect the most approximate parameters in one large collection, or library. To whom as it is more convenient. I hope someone will come in handy. The main goal of the project is to make it easier for novice web designers and developers to create a pleasant and modern design. Maybe experienced designers will learn something interesting from this development.
The library will be convenient for those who have not yet fully delved into the layout, but want to create beautiful shadows on buttons, blocks, etc. Thus, you can simplify the work with blocks and shorten the time for selecting css shadows in the generator.
Box-shadows.css
Box-shadows.css is a collection of simple and nice css shadows for your projects. In the role of primary use, a simple .bShadow class. Now the collection includes more than 50 actual shadows with the number, as well as three separate classes .bShadow, .bShadow-light and .bShadow-inset. They are great for use in tables, for keeping home pages, containers, navigation and other blocks of your site.
Stopping a number of questions, I will immediately explain why numbers are used, not names or classes like bShadow-01040–00.
The collection does not use stand-alone names, as it is done in animate.css, as for this project it is a little unacceptable. The shadow of the blocks increases with increasing, with different deviations, and due to the sequence of numbers it is possible to choose the optimal variant for yourself, not learning the individual names. This greatly simplifies the work with the collection.
The collection has a number of other possibilities, for example, the use of hover effects, with a smooth switching between shadows.
Additional functions
The site of the project is made visually simple, but it has enough functions to fully customize and select the necessary classes and styles.
Shadow Selection
The site provides a viewing function in which you can specify the background color and container of your site, for further selection of shadows. Selection of shadows and classes is carried out with the help of options or pointing to blocks. The result is displayed as a shadow of the main site container.
Generator min.css file
The site also has a box-shadows.min.css file generator with an instruction that allows the user to create their 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.
Generator css box-shadow
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.
Now the development is at the development stage and a set of 200 stars on GitHub, to get a link to cdnjs. I wish you pleasant enjoyment and creative success. If you have any suggestions, comments or suggestions for improving the project, write in the comments.
Try, experiment, use whatever you want and how you want!
