Author: | 0xbsec |
---|---|
Views Total: | 484 views |
Official Page: | Go to website |
Last Update: | December 6, 2019 |
License: | MIT |
Preview:

Description:
cyberstyle.css is a lightweight CSS UI framework to create futuristic UI elements inspired by Tesla Cybertruck official website.
UI elements included:
- Checkbox
- Radio input
- Action button
- <hr> element
- Input field
How to use it:
1. Import the minified version of the cyberstyle.css library into the document.
<link href="./dist/cyberstyle.css" rel="stylesheet" />
2. Insert UI elements into the document.
<div id="demo"> <h1 id="title">CyberStyle demo</h1> <fieldset id="checkbox" align="left"> <legend><code>checkbox</code></legend> <div id="checkbox-unchecked" class="demo-item"> <input class="cybr-checkbox" id="cybr-checkbox2" type="checkbox"> <label class="cybr-label" for="cybr-checkbox2">Checkbox</label> </div> <div id="checkbox-checked" class="demo-item"> <input class="cybr-checkbox" id="cybr-checkbox1" type="checkbox" checked> <label class="cybr-label" for="cybr-checkbox1">Checked</label> </div> <div id="checkbox-disabled" class="demo-item"> <input class="cybr-checkbox" id="cybr-checkbox3" type="checkbox" disabled> <label class="cybr-label" for="cybr-checkbox3">Disabled</label> </div> </fieldset> <fieldset id="radio" align="left"> <legend><code>radio button</code></legend> <div id="radio-unchecked" class="demo-item"> <input class="cybr-radio" id="cybr-radio2" name="radio-group" type="radio"> <label class="cybr-label" for="cybr-radio2">Radio</label> </div> <div id="radio-cheched" class="demo-item"> <input class="cybr-radio" id="cybr-radio1" name="radio-group" type="radio" checked> <label class="cybr-label" for="cybr-radio1">Selected</label> </div> <div id="radio-disabled" class="demo-item"> <input class="cybr-radio" id="cybr-radio3" name="radio-group" type="radio" disabled> <label class="cybr-label" for="cybr-radio3">Disabled</label> </div> </fieldset> <fieldset id="button" align="left"> <legend><code>button</code></legend> <div id="button-normal" class="demo-item"> <button class="cybr-btn">Button</button> </div> <div id="button-disabled" class="demo-item"> <button class="cybr-btn" disabled>Disabled</button> </div> </fieldset> <fieldset id="hr" align="left"> <legend><code>hr</code></legend> <div id="hr" class="demo-item"> <hr class="cybr-hr"> </div> </fieldset> <fieldset id="input" align="left"> <legend><code>input</code></legend> <div id="input-normal" class="demo-item"> <label class="cybr-label cybr-bm">Input</label> <br><br> <div class="cybr-input-wrapper"> <input type="string" name="Test" class="cybr-input"> </div> </div> <div id="input-error" class="demo-item"> <label class="cybr-label cybr-bm">Error</label> <br><br> <div class="cybr-input-wrapper cybr-input-error"> <input type="string" name="Test" class="cybr-input"> </div> </div> <div id="input-disabled" class="demo-item"> <label class="cybr-label cybr-bm">Disabled</label> <br><br> <div class="cybr-input-disabled cybr-input-wrapper"> <input type="string" name="Test" class="cybr-input" disabled> </div> </div> </fieldset> </div>