CSS: Reclame banner

Voorbeeld 1:

Kopie script

Select & Copy Code #1

<a href="https://dikkelol.nl/" class="dl-banner">
 
 
 
 
 
 
 
 DIKKE LOL
 Klik hier voor meer informatie
 
 
</a>
<style>
/* ===============================
 DIKKE LOL BANNER
 =============================== */
.dl-banner {
 position: relative;
 width: 100%;
 max-width: 728px;
 height: 90px;
 margin: 0 auto;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
 box-sizing: border-box;
 text-decoration: none;
 border-radius: 12px;
 border: 2px solid #650083;
 background:
 radial-gradient(circle at 20% 20%, #d61cff 0, transparent 28%),
 radial-gradient(circle at 80% 80%, #650096 0, transparent 32%),
 linear-gradient(135deg, #8e00bf, #c000ec 50%, #7900a7);
 box-shadow:
 inset 0 0 20px rgba(255,255,255,.18),
 inset 0 -10px 25px rgba(55,0,75,.25),
 0 4px 9px rgba(0,0,0,.35);
 transition: .25s ease;
}
/* ===============================
 TITEL
 =============================== */
.dl-content {
 position: relative;
 z-index: 10;
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
}
.dl-title {
 font-family: "Arial Black", "Trebuchet MS", sans-serif;
 font-size: clamp(28px, 6vw, 44px);
 font-weight: 900;
 line-height: .95;
 letter-spacing: 8px;
 color: #ef9eff;
 -webkit-text-stroke: 2px #27002e;
 text-shadow:
 0 2px 0 #c658db,
 0 4px 0 #720087,
 3px 6px 5px rgba(0,0,0,.45);
 transform: rotate(-1deg);
 transition: .25s ease;
}
/* subtitel */
.dl-sub {
 margin-top: 8px;
 padding: 3px 14px;
 font-family: Arial, sans-serif;
 font-size: clamp(11px, 2vw, 14px);
 font-weight: 700;
 letter-spacing: 1.2px;
 color: #fffbd0;
 background: rgba(55,0,70,.35);
 border-radius: 20px;
 text-shadow: 1px 1px 2px #3c004c;
}
/* ===============================
 BLOBS
 =============================== */
.dl-blob {
 position: absolute;
 width: 31px;
 height: 31px;
 border-radius:
 55% 45% 60% 40% /
 45% 60% 40% 55%;
 background:
 radial-gradient(
 circle at 35% 28%,
 #ffffc2 0%,
 #fff838 18%,
 #e6ed00 40%,
 #a3c500 62%,
 #668300 78%
 );
 box-shadow:
 inset -4px -5px 5px rgba(60,80,0,.45),
 inset 3px 3px 4px rgba(255,255,255,.75),
 0 0 9px #eeff00,
 2px 4px 5px rgba(0,0,0,.35);
 opacity: .95;
 animation: dlFloat 5s ease-in-out infinite;
}
.b1 {
 left: 4%;
 top: -12px;
 transform: scale(1.15);
}
.b2 {
 left: 18%;
 bottom: -13px;
 animation-delay: -1s;
}
.b3 {
 left: 39%;
 top: -16px;
 transform: scale(.85);
 animation-delay: -2s;
}
.b4 {
 right: 30%;
 bottom: -17px;
 transform: scale(1.25);
 animation-delay: -3s;
}
.b5 {
 right: 12%;
 top: -10px;
 transform: scale(.8);
 animation-delay: -1.5s;
}
.b6 {
 right: 2%;
 bottom: 6px;
 transform: scale(1.1);
 animation-delay: -4s;
}
/* blobs bewegen heel licht */
@keyframes dlFloat {
 0%, 100% {
 margin-top: 0;
 }
 50% {
 margin-top: 5px;
 }
}
/* ===============================
 GLANS
 =============================== */
.dl-shine {
 position: absolute;
 top: -80px;
 left: -100px;
 width: 65px;
 height: 250px;
 background: rgba(255,255,255,.13);
 transform: rotate(25deg);
 filter: blur(4px);
 animation: dlShine 6s infinite;
}
@keyframes dlShine {
 0%, 72% {
 left: -120px;
 }
 100% {
 left: 850px;
 }
}
/* ===============================
 HOVER
 =============================== */
.dl-banner:hover {
 transform: translateY(-2px) scale(1.01);
 filter: saturate(1.15) brightness(1.08);
 box-shadow:
 inset 0 0 25px rgba(255,255,255,.25),
 0 7px 15px rgba(0,0,0,.4);
}
.dl-banner:hover .dl-title {
 transform: rotate(1deg) scale(1.04);
 color: #ffc4ff;
}
/* ===============================
 MOBIEL
 =============================== */
@media (max-width: 500px) {
 .dl-banner {
 height: 82px;
 border-radius: 9px;
 }
 .dl-title {
 font-size: clamp(25px, 9vw, 37px);
 letter-spacing: 4px;
 -webkit-text-stroke: 1.5px #27002e;
 }
 .dl-sub {
 font-size: 11px;
 margin-top: 7px;
 padding: 3px 10px;
 }
 .dl-blob {
 width: 25px;
 height: 25px;
 }
}
/* Voor mensen die animaties uit hebben staan */
@media (prefers-reduced-motion: reduce) {
 .dl-blob,
 .dl-shine {
 animation: none;
 }
}
</style>

Select & Copy Code #2

<a href="https://dikkelol.nl" class="dikkelol-banner">
 
 
 
 
 
 
 DIKKE LOL
 Klik hier voor meer informatie
 
</a>
<style>
.dikkelol-banner {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 max-width: 728px;
 min-height: 90px;
 margin: 0 auto;
 padding: 8px 20px;
 box-sizing: border-box;
 overflow: hidden;
 text-decoration: none;
 background:
 linear-gradient(
 135deg,
 #8d00c8 0%,
 #b500e6 45%,
 #7200a5 100%
 );
 border-radius: 8px;
 box-shadow:
 inset 0 0 20px rgba(255,255,255,.15),
 0 3px 8px rgba(0,0,0,.30);
 transition:
 transform .2s ease,
 box-shadow .2s ease,
 filter .2s ease;
}
/* =========================
 TEKST
 ========================= */
.dikkelol-inhoud {
 position: relative;
 z-index: 5;
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 line-height: 1;
}
.dikkelol-titel {
 font-family: "Arial Black", "Trebuchet MS", sans-serif;
 font-size: clamp(28px, 6vw, 45px);
 font-weight: 900;
 letter-spacing: 7px;
 color: #ef9cff;
 -webkit-text-stroke: 2px #24002e;
 text-shadow:
 2px 3px 0 #50006c,
 4px 5px 5px rgba(0,0,0,.45);
}
.dikkelol-subtitel {
 margin-top: 7px;
 font-family: Arial, sans-serif;
 font-size: clamp(11px, 2vw, 15px);
 font-weight: bold;
 letter-spacing: 1px;
 color: #fff6a8;
 text-shadow:
 1px 1px 2px #350044;
}
/* =========================
 GELE / GROENE VLEKKEN
 ========================= */
.dikkelol-vlek {
 position: absolute;
 width: 34px;
 height: 34px;
 border-radius: 50%;
 background:
 radial-gradient(
 circle at 35% 35%,
 #ffff79 0%,
 #fff92a 30%,
 #c4e900 55%,
 #749900 75%,
 transparent 78%
 );
 filter: blur(2px);
 opacity: .95;
 box-shadow:
 0 0 10px #eaff00,
 0 0 18px rgba(255,255,0,.45);
}
/* posities */
.vlek1 {
 left: 5%;
 top: -13px;
 transform: scale(1.2);
}
.vlek2 {
 left: 24%;
 bottom: -17px;
 transform: scale(.9);
}
.vlek3 {
 left: 48%;
 top: -18px;
 transform: scale(1.1);
}
.vlek4 {
 right: 19%;
 bottom: -13px;
 transform: scale(1.25);
}
.vlek5 {
 right: 3%;
 top: 17px;
 transform: scale(.8);
}
/* =========================
 HOVER
 ========================= */
.dikkelol-banner:hover {
 transform: scale(1.015);
 filter: brightness(1.1);
 box-shadow:
 inset 0 0 25px rgba(255,255,255,.20),
 0 5px 14px rgba(0,0,0,.40);
}
.dikkelol-banner:hover .dikkelol-titel {
 color: #ffc2ff;
}
/* =========================
 MOBIEL
 ========================= */
@media (max-width: 500px) {
 .dikkelol-banner {
 min-height: 80px;
 padding: 8px 10px;
 }
 .dikkelol-titel {
 letter-spacing: 4px;
 -webkit-text-stroke: 1.5px #24002e;
 }
 .dikkelol-subtitel {
 margin-top: 6px;
 }
}
</style>

Kopie script

Geef een reactie Reactie annuleren