Cube.CSS
This repository provides information regarding a mini CSS framework aimed to display isometric cubes.
Getting Started
🍟
Copy the link tag given below and paste it in the <head> section
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ShimilSAbraham/[email protected]/cube.css">
Copy the html code given below and paste it in the <body> section
<div class="cube">
<div class="front grey-l"></div>
<div class="side grey-d"></div>
<div class="top grey"></div>
</div>
Colors
💫
:
- purple
- pink
- blue
- red
- green
- orange
- indigo
- grey
- pacha
- yellow
Contributions
✨
:
Contributed by VRT36
- cyan
- teal
- steelblue
- grad1
- grad2
- grad3
- grad4
- grad5
- grad6
Color Usage
⛏
:
The default that I used was:
- 'color' class along with 'top'
- 'color-l' class along with 'front'
- 'color-d' class along with 'side'
use '-l' along with color name to get its lighter shade and '-d' for darker shade
Code:
<div class="cube">
<div class="front blue-l"></div>
<div class="side blue-d"></div>
<div class="top blue"></div>
</div>
Result:
that doesn't mean you have to stick on with this... let your mind do the work
Hover Effects
🧚♂️
:
There are two effects right now:
- fly
- open
to make it fly, add these classes t-fly, f-fly, s-fly to open it up, add these classes t-open, f-open, s-open
Code-1:
<div class="cube">
<div class="top red t-fly"></div>
<div class="front red-l f-fly"></div>
<div class="side red-d s-fly"></div>
</div>
Result-1:
Code-2:
<div class="cube">
<div class="top orange t-open"></div>
<div class="front orange-l f-open"></div>
<div class="side orange-d s-open"></div>
</div>
Result-2:
you can even make your own custom hover by interchanging these hover classes to the div's that u desire
Code-3:
<div class="cube">
<div class="front grey-l f-open"></div>
<div class="side grey-d s-fly"></div>
<div class="top grey t-fly"></div>
</div>
Result-3:
Code-4:
<div class="cube">
<div class="front pacha-l f-fly"></div>
<div class="side pacha-d s-open"></div>
<div class="top pacha t-fly"></div>
</div>
Result-4:
Code-5:
<div class="cube">
<div class="front purple-l s-fly"></div>
<div class="side purple-d f-fly"></div>
<div class="top purple t-open"></div>
</div>
Result-5:
Code-6:
<div class="cube">
<div class="front pink-l s-fly"></div>
<div class="side pink-d t-fly"></div>
<div class="top pink f-open"></div>
</div>
Result-6:
What can you do with this?
This is a simple site which uses cube.css to make it feel good
