Hello to all!
Surely, some of you noticed that almost different types of shadows were used in different sites in blocks, navigation panels and other containers, plus or minus a couple of pixels in the direction of transparency. I analyzed a number of popular sites, both ours and foreign ones, and tried to collect the most approximate parameters of the used shadows into one large collection or library. Who is more convenient. I hope someone will come in handy.
The main goal of the project is to facilitate the work of novice web designers and developers in creating a pleasant and modern design. Perhaps experienced designers will also learn something interesting from this development.
The library will be convenient for those who have not yet had time to fully delve into the layout, but want to create beautiful shadows on buttons, blocks, etc. Thus, you can simplify work with blocks and reduce the time for css selection of shadows in the generator.
Box-shadows.css
Box-shadows.css is a collection of simple and pleasant css shadows (box-shadow) for your projects. The main role is a simple class
.bShadow . Now the collection has more than 50 current variants of shadows with a number, as well as three independent classes
.bShadow ,
.bShadow-light and
.bShadow-inset . They are great for use in spreadsheets, for the contents of home pages, containers, navigation and other blocks of your site.
Preventing a series of questions, I will explain at once why numbers are used, and not names or classes of type
bShadow-01040-00 .
The collection does not use standalone names, as is done in animate.css, since it is a bit unacceptable for this project. The shadow of the blocks increases incrementally, with various deviations, and at the expense of a sequence of numbers you can choose the best option for yourself without memorizing individual names. This greatly simplifies the work with the collection.
The collection has a
number of other possibilities , for example, using
hover effects , with smooth switching between shadows.
Additional functions
The project site is visually simple, but it has enough functions to fully customize and select the necessary classes and styles. A website has been written in English, but for those who are not yet fluent in this language, there is a switch to Russian.
Shadow selection
The site has a preview function, in which you can specify the background color and container of your site, for further selection of shadows. Shadows and classes are selected by selecting options or hovering over blocks. The result is displayed as a shadow of the main site container.
Min.css file generator
The site also has a
generator box-shadows.min.css file with an instruction that allows the user to create his own file, consisting only of the classes he chooses. This will help reduce the load on the site if your project uses less than two or three shadows.
Css box-shadow 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 part of the collection. You can copy the received styles and paste into the root css or the box-shadows file created on the site.
min.css .
Try experimenting. This is a really interesting job.
Now the development is at the stage of development and a set of 200 stars on GitHub, to get a link to cdnjs. I wish you a pleasant enjoyment and creative success. If you have any suggestions, comments or suggestions for improving the project, write in the comments.
GitHub ยท
Website