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.

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>

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>

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>

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>

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>

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>

Button element

Try to create your own buttons.

Mail Me

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">

---

---

---

---

---

We also Bob Ross’ Color Palette in CSS