Defining Custom Properties

Key variables of the CSS library can be set using Custom Properties either globally or inline within a single or selected number of elements.

Defining custom properties globally

The following example shows how custom properties can be defined globally across your project. Ensure that such CSS is loaded after the library CSS.

.c4-izmir {
  --primary-color: #F6CD14;
  --secondary-color: #D0206E;
  --transition-duration: 500ms;
  --border-width: 6px;
  --overlay-opacity: .5;
}

Defining custom properties inline

This example shows how custom properties can be defined inline within a single element. These can be defined inline within the <figure or to a containing div if you wish to define properties to a group elements.

<figure class="c4-izmir c4-border-center c4-gradient-top-left" style="--primary-color: #000046; --secondary-color: #1CB5E0; --border-width: 10px;">
  <img src="https://source.unsplash.com/1t8go-nyVyE/400x300" alt="Sample Image">
  <figcaption>
    <h3>
      Sample Text
    </h3>
  </figcaption>
</figure>

–text-color

• Type: Color
• Default: #ffffff

Defines the text color within the figcaption area.

–primary-color

• Type: Color
• Default: #00B4DB

Defines the primary color as used on the hover image overlay.

–secondary-color

• Type: Color
• Default: #0083B0

Defines the secondary color as used as the to value on overlay gradients.

–padding

• Type: Length
• Default: 1em

Defines the padding of the figcaption area.

–border-radius

• Type: Length
• Default: 3px

Defines the outside border radius of the image.

–transition-duration

• Type: Time
• Default: 600ms

Defines the duration of the animation on hover.

–border-margin

• Type: Length
• Default: 15px

Defines the distance between the animated border on hover and the outside edge of the element.

–border-width

• Type: Length
• Default: 3px

Defines the width (thickness) of the animated border on hover.

–border-color

• Type: Color
• Default: #ffffff

Defines the color of the animated border on hover.

–image-opacity

• Type: Number
• Default: .25

Defines the opacity of the image on hover.