flag
X logo
Menu
Home Icons Contact
Docs
Typography
Responsive
Containers Grid Align Display
Navigation
Topnav Sidenav Slide down nav Verticale nav Fullscreen nav Buttons Pagination
Pictures
Images Animation Parallax Sliteshow Thumbnail
Helpers
Helpers Padding Margin
More
Accordion Borders Cards Colors Form List Popup modal Table Tooltips

Colors


Introductie

CSS Framework heeft 18 kleurenschema's, 18 hover kleurenschema's en een class voor transparantie.
Je kunt ook de bijgeleverde 29 kleurenthema's gebruiken.
Er zijn ook 7 border kleuren, 7 border hover kleuren, 8 tekst kleuren en 8 tekst hover kleuren.


Basis en hover kleuren

Klik op de Class naam om deze te kopiëren.

Kleuren

c-black
c-white
c-gray
c-blue
c-red
c-green
c-yellow
c-orange
c-brown
c-purple
c-pink
c-violet
c-teal
c-olive
c-pale-blue
c-pale-green
c-pale-red
c-pale-yellow
c-transparent

Hover

h-black
h-white
h-gray
h-blue
h-red
h-green
h-yellow
h-orange
h-brown
h-purple
h-pink
h-violet
h-teal
h-olive
h-pale-blue
h-pale-green
h-pale-red
h-pale-yellow

Voorbeeldcode:

<div class="container c-blue">
  <p class="lorum-sm"></p>
</div>

<button class="button c-black h-pink">Button</button>

Tekst kleuren en tekst hover kleuren

Klik op de Class naam om deze te kopiëren.

Tekst

text-c-whiteText Color

text-c-blackText Color

text-c-grayText Color

text-c-blueText Color

text-c-redText Color

text-c-greenText Color

text-c-yellowText Color

Hover

text-h-whiteHover Color

text-h-blackHover Color

text-h-grayHover Color

text-h-blueHover Color

text-h-redHover Color

text-h-greenHover Color

text-h-yellowHover Color


Voorbeeldcode:

<div class="container">
	<p class="text-c-green lorum-sm"></p>
</div>

<a class="text-c-red text-h-blue" href="#">Link</a>

Border kleuren en border hover kleuren

Klik op de Class naam om deze te kopiëren.

Border kleuren

border border-c-black

border border-c-white

border border-c-blue

border border-c-gray

border border-c-green

border border-c-red

border border-c-yellow

Hover

border border-h-black

border border-h-white

border border-h-blue

border border-h-gray

border border-h-green

border border-h-red

border border-h-yellow


Voorbeeldcode:

<div class="container margin-bottom border border-c-gray border-thick">
  <p>border border-c-gray</p>
</div>

<div class="container margin-bottom border border-h-yellow border-thick">
  <p>border border-h-yellow</p>
</div>

Kleuren Themas

Voorbeeldcode:

<head>
  ...
  <link rel="stylesheet" href="color-themes/airy-blue.css" />
  ...
</head>
<body>
  ...
  <button class="button color-theme-d5 color-hover-theme">Color Button</button>
  ...
</body>


© Copyright by Web Henkie
All right reserved
Webmaster