Device creator
I want to draw your attention to a small development — Box-shadows Device # bSd. This is a tool that resembles a constructor or editor. In it you can create devices for every taste and purse.
I do not think he has many fans, but I hope you like it.
About the project
Box-shadows Device is a tool that allows you to create simple, yet beautiful devices. By experimenting with buttons, you can use the tool to create, for example, the smartphone of your dreams. Toggle buttons, merge, change the size of the display, the color of the panel, etc. Do you dream of a pink apple? Please =)
Entertainment can be endless. However, the main purpose of creating a tool is to use it on websites. Change a heavy image of a laptop or smartphone to several lines of code — this is a very big difference. And if the site-portfolio, where there are many such images? Many people are faced with the fact that the site has been downloaded for a very long time because of this … In addition, you can at any time make changes to the code.
Many people will say, “Wow, Fu, it’s easier to created himself” and in some ways it will be right. But I ask you not to judge strictly, the project is not positioned as a kind of super development. This a just fun and little support for the encoder) Now I’ll tell you everything.
You can use the created devices to demonstrate your code, templates, pictures, design created for mobile devices, placing html5-banners in it and much more. Ways of applying are just your imagination.
Interface of the site
When you enter the site, you will see a small display around which actions will unfold. On the left and right side of the site there are buttons that change and add various parameters.
Device
These are the main buttons, by the name of which it is not difficult to guess what type of device will be created. Currently, there are 5 types and device elements that are great for publishing on your site.
- phone-small
- phone-big
- flatbed portrait
- landscape tablets
- Place bet
Background
Here are the buttons that change the color of the panel of your device. The default color of the panel is white, which can be changed to black or removed altogether. Below is the button for creating your own color.
- click on the circle next to the word ← Select
- create your own color or enter code in an improved field
- press “Enter” to close the window.
You can set the color values yourself. When the code is received, the values are reflected in the RGB format. If you need a hexadecimal representation, your HEX code will appear on the button next to the circle. Click on the button and copy the code.
Box Shadow
The buttons of this block add shadows to your device, which makes it more realistic.
There are 4 types + Shadow Removal button:
- bSd_light
- bSd_small
- bSd_big
- bSd_classic
- bSd_none
Display
This is not so important block, but if you want to create, for example, an empty panel for a smartphone, you can turn off the display by pressing the desired button. Likewise, if you are tired of starting text on the display, in the same block you can either stop it or completely turn it off.
Create your own style
This is a special field in which you can enter any attribute and its value. To save multiple attributes, separate them with a semicolon.
Important! When you edit this field, all previously created settings will be reset! Therefore, if you want to set, for example, your own sizes, you first need to enter them in this field, and then work with the buttons.
Get code
When your work on creating the device is completed, click the “Get code” button, which is located below. In the window that appears, you will see the code of your device. Copy the code to the clipboard by clicking the “Copy Code” button and set it to the desired location on your site. After that, you can easily change and add new styles to your device.
Position
This block is not so important, but it can come in handy when you get the code. It presets the positioning parameter that you need to place on the site. I recommend using the buttons at the very last moment, ie, after all the work on setting up your device.
About buttons
When creating a device, you can experiment. Press the buttons one by one, turn them off or combine to create a suitable interface.
Currently, the styles of the interface buttons are not displayed when you receive the code, but they are already in the plans for the near future.
The note
The tool is not completed, so any suggestions for improvement or comments are accepted. Perhaps together we can create something more useful)
I await your criticism and comments. Any opinions are welcome.
Enjoy your experiments.
