CSS kódok

Szia! Örülök, hogy itt vagy ツ

A tartalomjegyzékből kiválaszthatod a kért stíílus kódot, kattintással a megfelelő elemhez kerülsz.

Akkor kezdhetünk is dolgozni.

Tartalomjegyzék

Főcím, szöveg kiemelése egy adott színnel
Szöveg aláhúzása egy adott színnel
Ragyogás effekt a főcímben
Pulzáló szöveg
Mozgó gradiens színek alkalmazása szövegeken
Kép animálás
Színátmenet hozzáadása egy gombhoz

Lebegő gomb egér ráhúzáskor
Gradiens fedvény hozzáadása a szakaszokhoz
Képek animációja görgetéskor

#1. Szöveg kiemelése egy adott színnel

Ha egy szövegrészt szeretnél kiemelni egy adott színnel, csak jelöld ki a szövegből azokat a szavakat amelyeket kiemelnél( U̲) és használd a következő kódot a szövegelemre:

<style>

#Id u {

text-decoration: none !important;

background-color: #000000;

}

</style>

Cseréld le a vastaggal szedett elemeket a sajátodra (szövegelem ID és a háttérszín)

Szöveg kiemelése háttérszínnel

Vissza a tartalomjegyzékre

#2. Szöveg aláhúzása egy adott színnel

Ha egy szövegrészt szeretnél aláhúzni egy adott színnel, csak jelöld ki a szöveget ( U̲)

és használd a következő kódot a szövegelemre:

<style>

#headline-d28a072a u {

text-decoration-color: #50E3C2 !important;

}

</style>

A text headline ID-ja mindenkinél és minden elemnél más és más, ezért fontos, hogy lecseréld a sajátodra.

Húzz a text elem fölé egy html elemet

Az “edit code”-ra kattintva tedd be a kimásolt kódot.

#headline-d28a072a cseréld le a saját szövegelem azonosítódra és a text-decoration-color: #........... ide a te színkódodat illeszd be és íme:

Szöveg aláhúzás más színnel

Vissza a tartalomjegyzékre

#3. Ragyogás effekt a címben

Formázd meg a szöveged, méret és betűtípus majd húzz egy HTML elemet a szöveg fölé és illeszd be a következő kódot:

<style>

/* Glowing Effect to Text */

#elementID {

text-shadow: 0 0 5px #5DABB8, 0 0 10px #5DABB8, 0 0 15px #5DABB8, 0 0 20px #ff00ff;

}

/* Additional styling to ensure the glow is visible */

#elementID {

color: #fff; /* Text color */

font-weight: bold;

font-size: 24px; /* Adjust as needed */

}

</style>

A feketével jelölt elemek tetszőleges színre, méretre állíthatóak.

Large Call to Action Headline

Vissza a tartalomjegyzékre

#4. Pulzáló szöveg

Húzz egy html elemet a szöveg fölé és illeszd be a következő kódot

<style>

@keyframes blink {

0% { opacity: 1; }

50% { opacity: 0; }

100% { opacity: 1; }

}

#ID{

animation: blink 2s infinite;

color: #ff0000;

}

</style>

A szöveg ID-t és a színt ne feledd kicserélni a sajátodra.

A color: lehet szövegesen mint, red, yellow, blue stb. vagy a megfelelő #HEX vagy RGB kód.

Nyugodtan próbáld ki elrontani nem tudod ☺

Pulzáló szöveg

Vissza a tartalomjegyzékre

#5. Mozgó gradiens színek alkalmazása szövegeken

Húzz a szöveg fölé egy html elelmet és illeszd be a következő kódot:

<style>

#ID {

background: linear-gradient(90deg, #ffff00, #0000ff) ;

background-clip: text !important;

-webkit-background-clip: text !important;

-webkit-text-fill-color: transparent !important;

animation: slide 4s linear infinite;

background-size: 200% auto;

}

@keyframes slide {

100% {

background-position: -200% center;

}

</style>

Az #ID elemet cseréld a saját szöveg elemedre és a színeket tetszés szerint alakítatod

Large Call to Action Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias, numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt, recusandae.

Vissza a tartalomjegyzékre

#6. Kép animálás

Húzz a képe elem fölé egy html elemet és illeszd be a következő kódot:

<style>

#image-f8f8f515 {

animation: morph 8s ease-in-out infinite 1s;

}

@keyframes morph {

0% {

border-radius: 60% 40% 30% 70%/60% 30% 70% 40%

}

50% {

border-radius: 30% 60% 70% 40%/50% 60% 30% 60%

}

100% {

border-radius: 60% 40% 30% 70%/60% 30% 70% 40%

}

</style>

Large Call to Action Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias, numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt, recusandae.

Vissza a tartalomjegyzékre

#7. Ragyogó blokk árnyék

Ha egy blokkot szeretnél árnyékolni, akkor ezt a kódot illeszd be a blokk elem főlé html segítségével.

<style>

#row-94c3c7e7 {

box-shadow: 0 4px 8px #00ffff, 0 6px 20px #00ffff;

}

/* colored shadow */

#row-94c3c7e7 {

box-shadow: 0 4px 8px #00ffff, 0 6px 20px #00ffff; /* red shadow with hex code and alpha for transparency */

}

/* padding and background to ensure the shadow is visible */

#row-94c3c7e7{

padding: 20px;

background-color: #990011;

margin: 20px 0;

}

</style>

A #row-94c3c7e7 ID-t cseréld a sajátodra, a 00ffff szín az árnyék színe. és a 990011 szín pedig a doboz belső színe.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias, numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt, recusandae.

Ugyanez sárga ányékkal, az árnyék szín: #F2EA02 és a doboz szín fehér

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias, numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt, recusandae.

Vissza a tartalomjegyzékre

#8. Színátmenet hozzáadása egy gombhoz

Készítsd el a gombod, írd be a szöveget, az URL-t és utánna egy html elemet húzz a gomb fölé, és tedd be ezt a kódot:

<style>

#ID {

background: rgb(76,58,180);

background: linear-gradient(90deg, rgba(76,58,180,1) 0%, rgba(96,53,215,1) 25%, rgba(29,199,253,1) 50%, rgba(50,227,192,1) 75%, rgba(69,252,130,1) 100%);

}

</style>

A cssgradient.io oldalon el tudod készíteni a színátmeneted, csak ki kell másolnod és beillesztened a kódsorba.

Gyakorlatilag a két background sort kell lecserélned a sajátodra, az elem ID-val egyetemben.

Ez a színátmenetes gomb

Vissza a tartalomjegyzékre

#9. Lebegő gomb egér ráhúzáskor

<style>

#BUTTON-ID {

transition: 0.5s;

background-size: 200% auto;

display: block;

}

#BUTTON-ID:hover {

background-position: right center; /* change the direction of the change here */

text-decoration: none;

transform: translateY(-10px);

}

</style>

Ha minden gomb elemhez szeretnéd alkalmazni, akkor így tedd be a gomb változót.:

[id^="button-"].

Elég az oldalon egy helyen elhelyezni.

Most húzd az egeret a gomb fölé és nézd meg mi történik:

Vissza a tartalomjegyzékre

#10. Gradiens fedvény hozzáadása a szakaszokhoz

HTML/CSS

Használd a következő CSS-kódot

Itt megtalálhatod a tökéletes színátmenetet a CSS Gradient segítségével

Kattints ide, hogy az oldalra juss:

https://cssgradient.io/

Add hozzá a HTML/CSS elemet az oldaladhoz, és add hozzá a következő kódot:

<style>

#SECTIONID {

background-image:

linear-gradient(GRADIENTHERE),

url('URLHERE');

width: 100%;

text-align: center;

}

</style>

Cseréld le a FEKETE szöveget a kért elemekkel

#SECTIONID: Az a szakasz, amelyhez hozzá szeretnéd adni a fedvényt.

GRADIENTHERE: A CSSGradient.io webhelyről kapott gradiens kód

URLHERE: A háttérként használni kívánt kép URL- je

Large Call to Action Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias, numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt, recusandae.

Vissza a tartalomjegyzékre

#11. Képek animációja görgetéskor

Követendő lépések

Add hozzá a következő kódot az oldalbeállításokban a fejlécedhez

Az oldalon jobb oldalt fent a Popups mellett: Setting->"Edit header code"

Le kell görgess bal oldali panelen az oldal aljára és oda illeszd be ezt a kódot:

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

A következő kódot az oldal láblécébe kell beillesztened

Ugyanúgy oldalbeállítások: Setting->"Edit footer code"

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>

<script>

AOS.init({

// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:

offset: 120, // offset (in px) from the original trigger point
delay: 0, // values from 0 to 3000, with step 50ms
duration: 400, // values from 0 to 3000, with step 50ms
easing: 'ease', // default easing for AOS animations
anchorPlacement: 'top-bottom',
});

</script>

Add hozzá a HTML/CSS Systeme.io elemet, ahol az animációt szeretnéd használni.

<img data-aos="ANIMATION" width="100%" src="ImageLinkHere">

A fekete elemeket le kell cseréld.

Az ANIMATION helyére tedd be a kódba az animáció nevét (pl. flip-left)

ImageLinkHere helyére a kép URL-jét illeszd be. (Pl: https://d1yei2z3i6k35z.cloudfront.net/5541462/65632147efc84_41.webp)

A HTML elemet húzd közvetlen a kép felé és oda illeszd a már kész kódod.

Valami ilyesminek kell kinéznie:

A képeid URL-jét két módon is eléred:

1. amikor feltöltöd a képet és kiválasztod azt a feltöltési ablakban a jobb gombra kattintva válaszd ki a "képhivatkozás másolása" így a vágólapra került a kép URL-je csak illeszd a megfelelő helyre.

2. az előnézeti módban a képed fölé vidd az egeret, itt is a jobb gombot lenyomva válaszd a "képhivatkozás, vagy képcím" másolása lehetőséget. Ugyanúgy vágólapra másoltad.

Fade Animations

fade
fade-up
fade-down
fade-left
fade-right
fade-up-right
fade-up-left
fade-down-right
fade-down-left

Flip Animations

flip-up
flip-down
flip-left
flip-right

Zoom Animations

zoom-in
zoom-in-up
zoom-in-down
zoom-in-left
zoom-in-right
zoom-out
zoom-out-up
zoom-out-down
zoom-out-left
zoom-out-right

fade-down

flip-left

Egész doboz színváltás egér ráhúzásakor

Az elem kódja:
<style>
#row-662a2f79 {
background-color: #ffffff;
-webkit-transition: background-color 0.4s linear;
-moz-transition: background-color 0.4s linear;
-o-transition: background-color 0.4s linear;
-ms-transition: background-color 0.4s linear;
transition: background-color 0.4s linear;
}
#row-662a2f79:hover {
background-color: #30E4F7;
}
</style>
#row-662a2f79: Ez az elem azonosítója (ID-je), a te dobozodra mutat.
:hover: Ez a CSS azt jelenti, hogy az elemre rámutat az egér.
background-color: #30E4F7;:
Ez adja meg az új háttérszínt akkor, amikor az egér az elem fölé kerül.

Tehát, amikor az egér az adott #row-662a2f79 doboz fölé mozdul, a CSS működésbe lép, és a háttérszín fehérből (#ffffff) élénk ciánkékre (#30E4F7) vált.

Cseréld le a saját elemeiddel

Miért érdemes megvenned?

Rakéta sebességgel megtalálod amit keresel

Nem kell órákat, napokat töltened a kereséssel

Garantálom, hogy lesz közben egy csomó ötleted

Tűzd ki a könyvjelződbe, mindig meg fogod taláni

Doboz színváltás

Változtatsd meg a dobozok háttérszínét egér ráhúzáskor:

Hűzz be egy 3 szakasos elrendezést és a 3 szakaszba tegyél be mindegyikbe külön - külön egy egy szakaszt. Ezen szakaszok ID-át fogjuk használni.

Itt a kód:

<style>

#row-56cb4b52,

#row-633cdd7c,

#row-33e95d09 {

background-color: #990011 !important;

color: #000000 !important;

transition: background-color 0.4s linear, color 0.4s linear;

}

#row-56cb4b52:hover,

#row-633cdd7c:hover,

#row-33e95d09:hover {

background-color: #000000 !important;

color: #990011 !important;

}

</style>

Menj be a Page Builderbe.
Húzz be egy Custom HTML blokkot (vagy használd a meglévőt).
Másold be a fenti teljes kódrészt – csak ezt.
Mentsd el (Save), majd Publish az oldaladat.
Frissítsd a publikált oldalt, és teszteld, hogy az adott három elem (azonosítóik: #row-56cb4b52, #row-633cdd7c, #row-33e95d09) valóban fehér hátterűvé és piros szövegűvé változik-e hover alatt.

🔧 Mi történik

Első szabály beállítja, hogy alapban piros (#990011) a doboz és fehér a szöveg.
transition gondoskodik arról, hogy a színváltás sima legyen (0.4 másodperc lineáris animációval).
Második szabály hatályba lép, amikor az egér fölé kerül: fehér háttér, fekete szöveg.

Large Call to Action Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias, numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt, recusandae.

Large Call to Action Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias, numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt, recusandae.

Large Call to Action Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias, numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt, recusandae.

Large Call to Action Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias, numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt, recusandae.

Large Call to Action Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias, numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt, recusandae.

Large Call to Action Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias, numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt, recusandae.

Több képes csúszka

<!DOCTYPE html>

<title>Running Image</title>

<style>

.carousel-container {

overflow: hidden;

width: 100%;

}

.carousel {

display: flex;

will-change: transform;

}

.carousel img {

width: 100px;

height: 100px;

margin-right: 10px;

flex-shrink: 0;

}

@media (max-width: 768px) {

.carousel img {

width: 300px !important;

height: 300px !important;

}

</style>

</div>

let speed = 40;

let direction = 'left';

let animationFrameId;

function startCarousel() {

cancelAnimationFrame(animationFrameId);

const carousel = document.getElementById('carousel');

const totalWidth = carousel.scrollWidth;

let scrollAmount = 0;

function step() {

const images = carousel.getElementsByTagName('img');

const imageWidth = images[0].offsetWidth + parseInt(getComputedStyle(images[0]).marginRight);

scrollAmount += direction === 'left' ? -speed / 60 : speed / 60;

if (direction === 'left' && Math.abs(scrollAmount) >= imageWidth) {

carousel.appendChild(carousel.firstElementChild);

scrollAmount += imageWidth;

} else if (direction === 'right' && Math.abs(scrollAmount) >= imageWidth) {

carousel.insertBefore(carousel.lastElementChild, carousel.firstElementChild);

scrollAmount -= imageWidth;

}

carousel.style.transform = `translateX(${scrollAmount}px)`;

animationFrameId = requestAnimationFrame(step);

}

animationFrameId = requestAnimationFrame(step);

}

document.addEventListener('DOMContentLoaded', function () {

startCarousel();

});

</script>

</body>

</html>

Running Image

Egyszerű változat

<style>

#rawhtml-8f1cdf20 {

overflow: hidden;

width: 100%;

}

#rawhtml-8f1cdf20 .carousel-track {

display: flex;

gap: 20px;

animation: scroll 12s linear infinite;

}

#rawhtml-8f1cdf20 .carousel-track img {

width: 150px;

height: 150px;

margin-right: 4px;

object-fit: cover;

}

@keyframes scroll {

0% { transform: translateX(0); }

100% { transform: translateX(-50%); }

}

@media (max-width: 768px) {

#rawhtml-8f1cdf20 .carousel-track img {

width: 300px;

height: 300px;

}

</style>

</div>

🌀 Működés

A .carousel-track folyamatosan balra mozog a scroll kulcssframes hatására.
A képek duplázása biztosítja a zökkenőmentes végtelen hurkot.
A @keyframes scroll 100% -50% eltolásával egyszerre mozog az egész sor.
A 12 másodperces animációt tetszőlegesen gyorsíthatod (pl. 8s‑re).

🎯 További testreszabás

Sebesség: módosítsd a scroll 12s értékét.
Képméret: állítsd át az img szélességet és magasságot.
Távolság: változtathatod a margin-right: 4px értéket.
Képek száma: ha több képet szeretnél használni, egyszerűen illeszd be az URL-eket, majd ismételd őket a duplázáshoz.

⚠️ Mi történik, ha nem egységes méretű képeket használunk?

Elmozdulás / ugrálás – Az eltérő méretű képek miatt a .carousel-track animáció közben eltolódik, ami ugráló hatást ad
Esztétikai és UX problémák – A kisebb és nagyobb képek közötti váltások vizuálisan zavaróak lehetnek, különösen egy végtelen görgetésnél.

✅ Három megoldás:

1. Egységesített képméretek előkészítése

Előre szerkeszd a képeket, hogy mind azonos szélességű és arányú legyen (pl. 150×150 vagy 300×300). Ezzel biztonságosan elkerülöd az eltolásokat és a hibás animációkat.

A modern böngészők támogatják a gap használatát

Ez biztosítja, hogy minden képszélesség között pontosan 20px távolság legyen.

A csúszka irányának megváltoztatásához egyszerűen módosítani kell a CSS @keyframes animációját, illetve a translateX értékeket felcserélni. Ezzel a csúszka jobbról balra helyett balról jobbra fog futni. 0%-nál balra helyezkedik (kezdet), 100%-nál vissza 0-ra – így jobbról balra helyett balról jobbra irányú mozgást kapunk.

<style>

#rawhtml-8f1cdf20 .carousel {

overflow: hidden;

width: 100%;

}

#rawhtml-8f1cdf20 .carousel-track {

display: flex;

gap: 20px; /* képek közti távolság */

animation: scroll-reverse 12s linear infinite;

}

#rawhtml-8f1cdf20 .carousel-track img {

width: 150px;

height: 150px;

object-fit: cover;

}

@keyframes scroll-reverse {

0% { transform: translateX(-50%); }

100% { transform: translateX(0); }

}

@media (max-width: 768px) {

#rawhtml-8f1cdf20 .carousel-track img {

width: 300px;

height: 300px;

}

</style>

</div>

Vissza a tetejére gomb

Nyisd meg az oldal szerkesztőjét a Systeme.io-ban.
A jobb oldali vagy alsó panelról válaszd ki a „Raw HTML”/„Custom HTML” blokkot,

A megjelenő szerkesztőablakba írd be:

html

MásolásSzerkesztés

ére">↑</button>

Head be azt illeszd be

<style>

#scrollTopBtn {

display: none;

position: fixed;

bottom: 20px;

right: 20px;

z-index: 9999;

background-color: #000;

color: #fff;

border: none;

border-radius: 50%;

padding: 12px;

cursor: pointer;

font-size: 18px;

box-shadow: 0 2px 6px rgba(0,0,0,0.3);

transition: opacity 0.3s, transform 0.3s;

}

#scrollTopBtn:hover {

background-color: #258CB2;

}

</style>

A footerbe meg ezt:

document.addEventListener("DOMContentLoaded", () => {

const btn = document.getElementById("scrollTopBtn");

if (!btn) return;

window.addEventListener("scroll", () => {

btn.style.display = window.scrollY > 200 ? "block" : "none";

});

btn.addEventListener("click", () => {

window.scrollTo({ top: 0, behavior: "smooth" });

});

</script>

Íme, hogyan módosíthatod egyszerűen a gomb hátterét, a nyíl színét, a méretét és egyéb stílusait — közvetlenül a CSS-ben, amit a Page Settings → Head részbe illesztesz

👇

<style>

#scrollTopBtn {

/* ✅ Háttérszín módosítása */

background-color: #000; /* → változtasd #000 helyett pl. #FF0000, #30E4F7, stb. */

/* ✅ Nyíl (szöveg) színének beállítása */

color: #fff; /* → legyen pl. #000, #30E4F7, stb. */

/* ✅ Méret, forma és pozíció */

width: 50px; /* → szélesség */

height: 50px; /* → magasság */

padding: 0; /* opcionális belső margó, ha fix méret van */

font-size: 24px; /* nyíl mérete */

border-radius: 8px; /* sarkok lekerekítése, 50% kerek gombhoz */

position: fixed;

bottom: 25px;

right: 25px;

}

#scrollTopBtn:hover {

/* Hover állapot finomhangolása */

background-color: #222; /* sötétebb árnyalat */

opacity: 0.9;

transform: scale(1.1); /* kicsit „nagyobbodik” hoverkor */

}

</style>

Tulajdonság

background-color

color

width + height

font-size

border-radius

padding

bottom, right

transform: scale()

Mit változtat

Gomb háttere

A nyíl színe

Gomb mérete (négyzet vagy téglalap)

Nyíl mérete és olvashatósága

Sarkok íve, ha 50% → kerek lesz a gomb

Belső tér – ha fix méret, ezt nullára érdemes

Távolság a képernyő széleitől

Nagyítás hoverkor, hogy „liftes” legyen

A szöveg színe és háttere változik

<style>

#text-e8bb7907{

background: #30e4f7;

color: #990011;

}

::-moz-selection {

background: #30e4f7;

color: #990011;

}

</style>

Keretek átméretezése

Más más keretet adhastz a képeidnek, használd ezeket a kódokat:

<style>

#image ID { clip-path: megfelelő kódot keresd meg; !important; }

</style>

Húzz be egy HTML elemet a képed alá, add meg a kép ID -át és illeszd utána a clip-path kódot, ahogy itt látod.

Jobbra mutat

<style>

#image-5a03fe67 { clip-path: polygon(0 0,86% 0,100% 50%,86% 100%,0 100%) !important; }

</style>

Háromszög alakzat

<style>

#image-15793ce5 { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); !important; }

</style>

Háromszög:

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

trapéz:

clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);

paralelogramma

clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);

rombusz

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

ötszög:

clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

Hatszög

clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

hétszög

clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);

Nyolcszög:

clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);

Kilencszög

clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);

tízszög:

clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);

Fazetta

clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);

robbet

clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);

left arrow

clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);

right arrow

clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);

left point

clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);

rihgt point

clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);

left Chevron

clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);

right chevron

clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);

csillag

clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

kereszt

clip-path: polygon(10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%);

üzenet

clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);

keret

clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);

inset

clip-path: inset(5% 20% 15% 10% round 5% 20% 0 10%);

kör

clip-path: circle(50% at 50% 50%);

ellipszis álló

clip-path: ellipse(25% 40% at 50% 50%);

ellipszis fekvő

clip-path: ellipse(50% 25%) !important;

gyémánt

clip-path: polygon(0% 50%, 50% 100%, 100% 50%, 50% 0%)

felfelé nyíl

clip-path: polygon(0 15%,50% 0,100% 15%,100% 100%,0 100%)

lefelé nyíl

clip-path: polygon(0 0,100% 0,100% 85%,50% 100%,0 85%)

balra paralelogramma

clip-path: polygon(0 0,90% 0,100% 100%,10% 100%)

jobbra paralelogramma

clip-path: polygon(10% 0,100% 0,90% 100%,0 100%)

3D jobbra

clip-path: polygon(0 0,100% 0,100% 80%,0 100%)

3 D balra

clip-path: polygon(0 0,100% 0,100% 100%,0 80%)

slant right

clip-path: polygon(0 0,100% 0,80% 100%,0 100%)

slant left

clip-path: polygon(20% 0,100% 0,100% 100%,0 100%)

Kenéz Gabriella I • Adatvédelmi irányelvek • ÁSZF

Cookie adatok kezelése