MelangeCSS Reference

Current Version: 1.0.0-RC4

Visuals ( Large Width )†

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-l 
.shadow-1-l {
  box-shadow: rgb(135, 135, 135) 1px 1px 4px 0px;
}
shadow-1-l
shadow-2-l 
.shadow-2-l {
  box-shadow: rgb(135, 135, 135) 1px 1px 10.64px 0px;
}
shadow-2-l
shadow-3-l 
.shadow-3-l {
  box-shadow: rgb(135, 135, 135) 1px 1px 15.022px 0px;
}
shadow-3-l
shadow-4-l 
.shadow-4-l {
  box-shadow: rgb(135, 135, 135) 1px 1px 22.297px 0px;
}
shadow-4-l
shadow-5-l 
.shadow-5-l {
  box-shadow: rgb(135, 135, 135) 1px 1px 34.373px 0px;
}
shadow-5-l
shadow-6-l 
.shadow-6-l {
  box-shadow: rgb(135, 135, 135) 1px 1px 54.419px 0px;
}
shadow-6-l
shadow-none-l 
.shadow-none-l {
  box-shadow: none;
}
shadow-none-l
Cursors

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

cursor-default-l
Cursors Default
 
.cursor-default-l {
  cursor: default;
}
The spice must flow!
pointer-l
Cursors Pointer
 
.pointer-l {
  cursor: pointer;
}
The spice must flow!
cursor-pointer-l
Cursors Pointer
 
.cursor-pointer-l {
  cursor: pointer;
}
The spice must flow!
cursor-progress-l
Cursors Progress
 
.cursor-progress-l {
  cursor: progress;
}
The spice must flow!
cursor-move-l
Cursors Move
 
.cursor-move-l {
  cursor: move;
}
The spice must flow!
cursor-grab-l
Cursors Grab
 
.cursor-grab-l {
  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-l 
.inset-shadow-1-l {
  box-shadow: rgb(106, 106, 106) 1px 1px 4px -1px inset;
}
inset-shadow-1-l
inset-shadow-2-l 
.inset-shadow-2-l {
  box-shadow: rgb(106, 106, 106) 1px 1px 5.52px -1.043px inset;
}
inset-shadow-2-l
inset-shadow-3-l 
.inset-shadow-3-l {
  box-shadow: rgb(106, 106, 106) 1px 1px 8.195px -1.193px inset;
}
inset-shadow-3-l
inset-shadow-4-l 
.inset-shadow-4-l {
  box-shadow: rgb(106, 106, 106) 1px 1px 12.903px -1.485px inset;
}
inset-shadow-4-l
inset-shadow-5-l 
.inset-shadow-5-l {
  box-shadow: rgb(106, 106, 106) 1px 1px 21.190px -1.986px inset;
}
inset-shadow-5-l
inset-shadow-6-l 
.inset-shadow-6-l {
  box-shadow: rgb(106, 106, 106) 1px 1px 35.774px -2.802px inset;
}
inset-shadow-6-l
inset-shadow-none-l 
.inset-shadow-none-l {
  box-shadow: none;
}
inset-shadow-none-l
Opacity
o*
Percentages
o-10-l 
.o-10-l {
  opacity: 10%;
}
.o-10-l
o-20-l 
.o-20-l {
  opacity: 20%;
}
.o-20-l
o-25-l 
.o-25-l {
  opacity: 25%;
}
.o-25-l
o-30-l 
.o-30-l {
  opacity: 30%;
}
.o-30-l
o-40-l 
.o-40-l {
  opacity: 40%;
}
.o-40-l
o-50-l 
.o-50-l {
  opacity: 50%;
}
.o-50-l
o-60-l 
.o-60-l {
  opacity: 60%;
}
.o-60-l
o-70-l 
.o-70-l {
  opacity: 70%;
}
.o-70-l
o-75-l 
.o-75-l {
  opacity: 75%;
}
.o-75-l
o-80-l 
.o-80-l {
  opacity: 80%;
}
.o-80-l
o-90-l 
.o-90-l {
  opacity: 90%;
}
.o-90-l
o-100-l 
.o-100-l {
  opacity: 100%;
}
.o-100-l
o-third-l 
.o-third-l {
  opacity: calc(100% / 3);
}
.o-third-l
o-two-thirds-l 
.o-two-thirds-l {
  opacity: calc(100% / 1.5);
}
.o-two-thirds-l
Z Index
z*
z-l 
.z-l {
  z-index: 0;
}
z-1-l 
.z-1-l {
  z-index: 1;
}
z-2-l 
.z-2-l {
  z-index: 2;
}
z-3-l 
.z-3-l {
  z-index: 3;
}
z-4-l 
.z-4-l {
  z-index: 4;
}
z-5-l 
.z-5-l {
  z-index: 5;
}
z-9999-l 
.z-9999-l {
  z-index: 9999;
}
z-auto-l 
.z-auto-l {
  z-index: auto;
}