Complianz Privacy Suite

CSS Lesson #2: Adding Box-Shadow to your Cookie Notice

Aert Hulsebos

Aert Hulsebos

Categories

Popular articles

Creating the Legal Hub

Have you seen our new Legal Hub? If not, have a look before reading this instruction article. We created the legal hub to centralize our

Read More

Placeholders for iFrames

From 4.6.11 onwards, you can also use consent shortcode wrappers. An instruction can be found here. You’re able to block iFrames with Complianz with the

Read More
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

The standard templates and the Custom CSS possibilities makes it possible to design your Cookie Notice to suit the style of your website. We will start a weekly lesson how to add design elements to your Cookie Notice using Custom CSS. You want to try yourself? Visit https://www.w3schools.com/cssref/ for an extensive overview of CSS properties.

You can add Custom CSS in our editor, in your theme’s Custom CSS editor or any plugin that provides CSS control. Because every WordPress website is different we will work with the addition of !important to override any CSS currently loaded on your webpage.

Lesson#2: Adding Box-Shadow to your Cookie Notice

The box-shadow is a great way to put depth on your cookie banner. Complianz comes with a minimal template which adds the box-shadow by default, but if you want to change or add it to another template you will need the following CSS properties:

For below banner we used the following CSS properties:

.cc-window { to add shadow to the entire window (box) }

Copy/Paste below code and try it yourself!

/* adding box shadow to the cookie banner*/
.cc-window
{
box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.75);
}

The box-shadow property has the following options:

0px 0px 15px -5px rgba(0,0,0,0.75);

Horizontal position: 20px is to the right. -20px is to the left.

0px 0px 15px -5px rgba(0,0,0,0.75);

Vertical position: 20px is to the down. -20px is up.

0px 0px 15px -5px rgba(0,0,0,0.75);

Blur radius: 0px is no blur. Everything above increases blur.

0px 0px 15px -5px rgba(0,0,0,0.75);

Spread: Below 0px is less than the width of the box.

0px 0px 15px -5px rgba(0,0,0,0.75);

rgbAlpha will add opacity and color to your shadow.  0.75 is the opacity.

Adding smoother box shadow with layered shadows

/* adding layered box shadow to the cookie banner*/
.cc-window
{
 box-shadow: 0 1px 2px rgba(0,0,0,0.07), 
                0 2px 4px rgba(0,0,0,0.07), 
                0 4px 8px rgba(0,0,0,0.07), 
                0 8px 16px rgba(0,0,0,0.07),
                0 16px 32px rgba(0,0,0,0.07), 
                0 32px 64px rgba(0,0,0,0.07);
}

Recent articles

Subscribe