PARTICLES

MADAM MONOROM

Colors, Shadows, Buttons, Hovers

The specifications for the basic color and style definitions for this design and the Templates.

download CSS

Templates

Colors

Four shaeds of grey, dark blue and light blue are used for the design Templates.
Mint and red are reserved for interactions like buttons, form errors, logins, and error communication.

Each color can be applied separately for backgrounds, text and borders.
See below on how to use this file.

Grey 1

HEX: #EEEEEE
RGB: 238, 238, 238

Grey 2

HEX: #DDDDDD
RGB: 221, 221, 221

Grey 3

HEX: #BBBBBB
RGB: 187, 187, 187

Grey 4

HEX: #999999
RGB: 153, 153, 153

Light Blue

HEX: #68A4BF
RGB: 104, 164, 191

Dark Blue

HEX: #17527B
RGB: 23, 82, 123

Mint

HEX: #61CDB3
RGB: 97, 205, 179

Red

HEX: #EF5760
RGB: 239, 87, 96

White

HEX: #fff
RGB: 255, 255, 255

Black

Hex: #000000
RGB: 0, 0, 0

How to use this File

To apply a background color, add the color name as a class to your element.

<div class="grey-2">Element withe class </div>

grey-1

grey-2

grey-3

grey-4

lightBlue

darkBlue

mint

red

white

black

Text and border color usage

To apply a text color, add the color name and -text as a class to your element.

<div class="red-text">Element withe class red-text </div>

To apply a border color, add the color name and -border as a class to your element.

<div class="darkBlue-border">Element withe class darkBlue-border </div>

grey-1-border
grey-1-text

grey-2-border
grey-2-text

grey-3-border
grey-3-text

grey-4-border
grey-4-text

lightBlue-border
lightBlue-text

darkBlue-border
darkBlue-text

mint-border
mint-text

red-border
red-text

Combinations

To apply a background color and a text color, add both, -border and -text classes to your element.
Of course, a third class for the border can be added as well.

<div class="grey-3 grey-1-text black-border">Element withe 3 classes </div>
<div class="mint black-text">Element 2 classes </div>

grey-3
grey-1-text
black-border

mint
black-text

Shadows

Since you can easily overwite or extend all definitions with your own style.css, why not learn how to create your own shadows at intensivstation.ch

To apply a shadow effect, add a class prefixed with shade- and the shade-number to the element. Currently 4 shades are predefined.

<div class="shade-1">Element withe class shade-1 </div>

shade-1

shade-2

shade-3

shade-4

Important The predefined class shade-0 can be used to remove shadows from any element that have shadow by default.

Hover

The hoverable class adds a transition-animation for the box shadow on hover. You can use this class for many elements.

<div class="hoverable">Element withe class hoverable </div>
<h2 class="hoverable">Element withe class hoverable </h2>

HOVER ME NOW

TRY ME!

Buttons

The button definitions can be applied quite flexibly. You can use class btn on various elements.
But be careful since not all possibilities make sense to the user and work well.
See how it works best.

<a class="btn" href=" ">Link as Button</a>
<button>Button Element</button>
<input type="submit"  value="input submit">
<input type="reset"  value="input reset">

You can change the background-color if you add a class for the background-color.

<a class="btn red" href=" ">Link as Button</a>
<button class="mint">Button Element</button>
<input type="submit"  value="input submit" class="darkBlue">
<input type="reset"  value="input reset" class="lightBlue">

Button and Icon Font

You can use a Icon Font with class btn and the button element.
Optionally add class lft to the i-element that contains the icon, if the icon should be placed on the left of the text. Add class rgt to place the icon on the right.

<a class="btn mint"> 
	<i class="fa fa-heart lft"></i> Text…
</a>
Link as button

You can change the background-color if you add class for the background-color.
The hover-class hoverable adds a box-shadow when hovering over the element.

<button class="roseQuartz black-text hoverable">
	<i class="fa fa-anchor rgt black-text"></i>
Button Element</button>

Try to create your own buttons.

Horizontal Ruler

To apply a color to a horizontal ruler hr, add the color name as class to your element.

<hr class="grey-3">
<hr class="red">
<hr class="mint">
<hr class="darkBlue">




HR Design

Here are some more advanced horizontal rulers. To use this style, just copy one of the five elements to your HTML.

<hr class="grad-1">
<hr class="grad-2">
<hr class="grad-3">
<hr class="grad-multi">
<hr class="dash">