MelangeCSS Reference

Current Version: 1.0.0-RC4

Visuals ( High Contrast )†

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

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

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