MelangeCSS Reference

Current Version: 1.0.0-RC5

Visuals

A grab bag of classes that adjust more decorative aspects of a page, such as box shadows, opacity, z-index, and cursors.

Properties

Box Shadows

There are infinite possibilities for box shadows. These should provide a few basic options for common needs, however you will likely need to create your own for anything sophisticated. You can design your own scale using Ghola

shadow*
Box Shadows All
shadow-1 
.shadow-1 {
  box-shadow: rgb(135, 135, 135) 1px 1px 4px 0px;
}
shadow-1
shadow-2 
.shadow-2 {
  box-shadow: rgb(135, 135, 135) 1px 1px 10.64px 0px;
}
shadow-2
shadow-3 
.shadow-3 {
  box-shadow: rgb(135, 135, 135) 1px 1px 15.022px 0px;
}
shadow-3
shadow-4 
.shadow-4 {
  box-shadow: rgb(135, 135, 135) 1px 1px 22.297px 0px;
}
shadow-4
shadow-5 
.shadow-5 {
  box-shadow: rgb(135, 135, 135) 1px 1px 34.373px 0px;
}
shadow-5
shadow-6 
.shadow-6 {
  box-shadow: rgb(135, 135, 135) 1px 1px 54.419px 0px;
}
shadow-6
shadow-none 
.shadow-none {
  box-shadow: none;
}
shadow-none
Cursors

There are many possibly cursor values, but for brevity, esoteric ones have been omitted.

cursor-default
Cursors Default
 
.cursor-default {
  cursor: default;
}
The spice must flow!
pointer
Cursors Pointer
 
.pointer {
  cursor: pointer;
}
The spice must flow!
cursor-pointer
Cursors Pointer
 
.cursor-pointer {
  cursor: pointer;
}
The spice must flow!
cursor-progress
Cursors Progress
 
.cursor-progress {
  cursor: progress;
}
The spice must flow!
cursor-move
Cursors Move
 
.cursor-move {
  cursor: move;
}
The spice must flow!
cursor-grab
Cursors Grab
 
.cursor-grab {
  cursor: grab;
}
The spice must flow!
Inset Box Shadows

There are infinite possibilities for inset box shadows. These should provide a few basic options for common needs, however you will likely need to create your own for anything sophisticated. You can design your own scale using Ghola

inset-shadow*
Inset Box Shadows All
inset-shadow-1 
.inset-shadow-1 {
  box-shadow: rgb(106, 106, 106) 1px 1px 4px -1px inset;
}
inset-shadow-1
inset-shadow-2 
.inset-shadow-2 {
  box-shadow: rgb(106, 106, 106) 1px 1px 5.52px -1.043px inset;
}
inset-shadow-2
inset-shadow-3 
.inset-shadow-3 {
  box-shadow: rgb(106, 106, 106) 1px 1px 8.195px -1.193px inset;
}
inset-shadow-3
inset-shadow-4 
.inset-shadow-4 {
  box-shadow: rgb(106, 106, 106) 1px 1px 12.903px -1.485px inset;
}
inset-shadow-4
inset-shadow-5 
.inset-shadow-5 {
  box-shadow: rgb(106, 106, 106) 1px 1px 21.190px -1.986px inset;
}
inset-shadow-5
inset-shadow-6 
.inset-shadow-6 {
  box-shadow: rgb(106, 106, 106) 1px 1px 35.774px -2.802px inset;
}
inset-shadow-6
inset-shadow-none 
.inset-shadow-none {
  box-shadow: none;
}
inset-shadow-none
Opacity
o*
Percentages
o-10 
.o-10 {
  opacity: 10%;
}
.o-10
o-20 
.o-20 {
  opacity: 20%;
}
.o-20
o-25 
.o-25 {
  opacity: 25%;
}
.o-25
o-30 
.o-30 {
  opacity: 30%;
}
.o-30
o-40 
.o-40 {
  opacity: 40%;
}
.o-40
o-50 
.o-50 {
  opacity: 50%;
}
.o-50
o-60 
.o-60 {
  opacity: 60%;
}
.o-60
o-70 
.o-70 {
  opacity: 70%;
}
.o-70
o-75 
.o-75 {
  opacity: 75%;
}
.o-75
o-80 
.o-80 {
  opacity: 80%;
}
.o-80
o-90 
.o-90 {
  opacity: 90%;
}
.o-90
o-100 
.o-100 {
  opacity: 100%;
}
.o-100
o-third 
.o-third {
  opacity: calc(100% / 3);
}
.o-third
o-two-thirds 
.o-two-thirds {
  opacity: calc(100% / 1.5);
}
.o-two-thirds
Z Index
z*
z 
.z {
  z-index: 0;
}
z-1 
.z-1 {
  z-index: 1;
}
z-2 
.z-2 {
  z-index: 2;
}
z-3 
.z-3 {
  z-index: 3;
}
z-4 
.z-4 {
  z-index: 4;
}
z-5 
.z-5 {
  z-index: 5;
}
z-9999 
.z-9999 {
  z-index: 9999;
}
z-auto 
.z-auto {
  z-index: auto;
}