MelangeCSS Reference

Current Version: 1.0.0-RC4

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

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

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