Createx utilities

Custom Createx classes with a purpose to reduce the frequency of highly repetitive declarations.

Createx component

Faded background colors

Primary faded background
Secondary background
Info faded background
Success faded background
Warning faded background
Danger faded background
Dark faded background
<!-- Primary faded background -->
<div class="bg-faded-primary">...</div>

<!-- Secondary background -->
<div class="bg-secondary">...</div>

<!-- Info faded background -->
<div class="bg-faded-info">...</div>

<!-- Success faded background -->
<div class="bg-faded-success">...</div>

<!-- Warning faded background -->
<div class="bg-faded-warning">...</div>

<!-- Danger faded background -->
<div class="bg-faded-danger">...</div>

<!-- Dark faded background -->
<div class="bg-faded-dark">...</div>

Gradient background

Gradient background
<!-- Gradient background -->
<div class="bg-gradient">...</div>

Background cover with overlay

Background cover with overlay

<!-- Background cover with overlay -->
<div class="bg-size-cover position-relative py-5" style="background-image: url(path-to-background-image);">
  <span class="bg-overlay opacity-60"></span>
  <div class="bg-overlay-content">
    <!-- Content goes here -->
  </div>
</div>

Background cover with gradient overlay

Background cover with gradient overlay

<!-- Background cover with gradient overlay -->
<div class="bg-size-cover position-relative py-5" style="background-image: url(path-to-background-image);">
  <span class="bg-overlay bg-gradient opacity-60"></span>
  <div class="bg-overlay-content">
    <!-- Content goes here -->
  </div>
</div>

Opacity

Opacity 25%Opacity 50%Opacity 60%Opacity 70%Opacity 75%Opacity 80%Opacity 90%Opacity 100%
<!-- Opacity -->
<div class="opacity-25"></div>
<div class="opacity-50"></div>
<div class="opacity-60"></div>
<div class="opacity-70"></div>
<div class="opacity-75"></div>
<div class="opacity-80"></div>
<div class="opacity-90"></div>
<div class="opacity-100"></div>

Image swap on hover

LogoLogoLogoLogo
<!-- Image swap on hover -->
<a href="#" class="cs-swap-image">
  <img src="path-to-image" class="cs-swap-to" width="176" alt="Alt text">
  <img src="path-to-image" class="cs-swap-from" width="176" alt="Alt text">
</a>
Top