Update

Restructuring and visibility classes

This section contains a variety of styles related to the restructuring stage of elements within a webpage. The code is divided into three main sections: "BACKGROUND", "OPACITY" and "FILTER".

Classes

• Restructuring Classes

  • Background

  • Opacity

  • Filter

Under the "Background" module, there are several classes related to background properties. These classes include:

• /* DEBUG */
  ._ddr{background: red}._ddg{background: green}._ddb{background: blue}
  /* COLOR */
  .bg-trans {background: transparent}
  .bg-red-25{background: #ff000044}.bg-green-25{background: #00FF0044}.bg-blue-25{background: #0000ff44}
  .bg-red-50{background: #ff000077}.bg-green-50{background: #00FF0077}.bg-blue-50{background: #0000ff77}
  . . .
  /* GLASS-MORPHISM */
  .bg-glass-1 {backdrop-filter: blur(1px);-webkit-backdrop-filter: blur(1px)}
  .bg-glass-2 {backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px)}
  . . .

Additionally, there are several classes related to opacity and hover states. These classes include:

• .opaci-0 {opacity: 0 }.opaci-5 {opacity: 0.05}.opaci-10 {opacity: 0.10}
  .opaci-20 {opacity: 0.2 }
  .opaci-15 {opacity: 0.15}.opaci-25 {opacity: 0.25}.opaci-50 {opacity: 0.5}
  . . .

Finally, there are several classes related to filter and transform properties. These classes include:

• .invert{filter: invert(1)}.bright-1000{filter: brightness(10)}
  .blur-1 {filter: blur(1px)}.blur-2 {filter: blur(2px)}.blur-3 {filter: blur(3px)}.blur-4 {filter: blur(4px)}
  .blur-5 {filter: blur(5px)}.blur-6 {filter: blur(6px)}.blur-7 {filter: blur(7px)}.blur-8 {filter: blur(8px)}
  . . .
  .rot-250{transform: rotate(250)}
  .rot-270{transform: rotate(270)}