Skip to content

Instantly share code, notes, and snippets.

View Lego2012's full-sized avatar

Leo Merkel Lego2012

View GitHub Profile
Please answer the following settings for generating a CSS clamp() value. I will not proceed until you provide all the values (or confirm the defaults):
Clamp() Generation Settings
1. What is the base rem size? (default: 10px)
2. What is the min viewport width? (default: 380px)
3. What is the min size in pixels? (default: 15px)
4. What is the max viewport width? (default: 1600px)
5. What is the max size in pixels? (default: 18px)
________________________________________
📐 Choose a spacing scale ratio (case-insensitive)
Options:
li.has-settings {
background-color: rgba(252,87,120, .5) !important;
}
span.bricks-svg-wrapper::after {
display: none !important;
}
/* https://www.youtube.com/watch?v=hy8W7cBdcaE */
/* Apply this code to the parent element of a card design and ensure you have at least one link applied - typically the heading */
%root% {
position: relative;
}
%root% h3 a::before {
content: '';
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 100%;
/* This CSS is in a custom class of the Card Element */
%root% {
position: relative;
}
%root%:hover {
translate: 0 -.25rem;
}
/* Either pass the code in your Bricks settings -> Custom Code -> CSS, or - if you already have a Code manager active: Set the css to for "logged in users only". */
html {
margin-top: 0px !important;
}
#wpadminbar {
top: 4px;
margin: 0 5px 0 5px;
transition: all ease-in-out .2s;

text-shadow

text-shadow: <offset-x> <offset-y> <blur-radius> <color>;

Text mit Kontur: Beispiel 1

In diesem Beispiel erstelle ich einen weißen Text mit einer schwarzen Kontur von 1px

<!DOCTYPE html>
%root% {
--icon-url: url(/wp-content....svg);
--icon-color: var(--primary);
--icon-offset: 0 .5ex;
--icon-size: 1em;
--icon-gap: .5em;
--icon-display: flex;
--list-indent: 0;
}
/* Make the edited icon bigger */
.bricks-panel-controls .has-setting .indicator {
background-color: currentColor;
background-color: var(--bricks-color-secondary);
border-radius: 0%;
display: inline-block;
height: 20px;
width: 6px;
}