Maak op een simpele en snelle manier unieke banners voor jouw project!

We hebben leuk nieuws voor alle creatievelingen! De ToolJunkie Banner Generator is hier en klaar om jou te helpen fantastische banners te ontwerpen die echt opvallen.

Of je nu een promotieactie, een evenement of gewoon iets leuks wilt maken, onze generator biedt alle tools die je nodig hebt. Met gebruiksvriendelijke opties en de mogelijkheid om je banner te exporteren in HTML of als PNG, heeft het nooit eerder zo’n creatieve vrijheid gehad.

Ga aan de slag en laat je creativiteit de vrije loop! Klik hier voor onze Banner Generator v2!

Voorbeeld 1:

<a href="https://dikkelol.nl/" class="dl-banner">
    <span class="dl-blob b1"></span>
    <span class="dl-blob b2"></span>
    <span class="dl-blob b3"></span>
    <span class="dl-blob b4"></span>
    <span class="dl-blob b5"></span>
    <span class="dl-blob b6"></span>
    <span class="dl-content">
        <span class="dl-title">DIKKE LOL</span>
        <span class="dl-sub">Klik hier voor meer informatie</span>
    </span>
    <span class="dl-shine"></span>
</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>

<a href="https://dikkelol.nl" class="dikkelol-banner">
    <span class="dikkelol-vlek vlek1"></span>
    <span class="dikkelol-vlek vlek2"></span>
    <span class="dikkelol-vlek vlek3"></span>
    <span class="dikkelol-vlek vlek4"></span>
    <span class="dikkelol-vlek vlek5"></span>
    <span class="dikkelol-inhoud">
        <span class="dikkelol-titel">DIKKE LOL</span>
        <span class="dikkelol-subtitel">Klik hier voor meer informatie</span>
    </span>
</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>

CSS: Reclame banner

Geef een reactie Reactie annuleren