MelangeCSS Reference

Current Version: 1.0.0-RC4

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

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

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