HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
menü MENÜ    

CSS3 stíluslapok készítése

CSS3 szegélyek


    A szegélyek segítségével kiemelhetők a weboldal fontosabb részletei, ami révén áttekinthetővé, könnyen olvashatóvá válik a tartalmuk.                         

Programozott tananyag:


A szegélystílusok
A szegély stílusa a border-style tulajdonság segítségével állítható be.

Szegélystílus megadása oldalanként
A szegély stílusa oldalanként eltérő lehet.

Szegélystílus megadása oldalanként 2
Egyetlen stílusdeklarációban is lehetőségünk nyílik valamennyi oldalhoz külön stílust rendelni, ha a 4 értéket szóközzel elválasztva felsoroljuk.

Szegélyszín
A szegélyek színét a border-color tulajdonság segítségével állíthatjuk be.

Szegélyszín oldalanként
A szegély színe egy HTML elem mind a négy oldalán eltérő lehet.

Szegélyszín oldalanként 2
Egyetlen stílusdeklarációban is lehetőségünk nyílik valamennyi oldalhoz külön színt rendelni, ha a 4 színt szóközzel elválasztva felsoroljuk.

A szegély szélessége
A szegélyek szélességét a border-width tulajdonság segítségével állíthatjuk be.

A szegély szélessége oldalanként
A szegélyek szélességét mind a 4 oldalra külön-külön is beállíthatjuk.

A szegély szélessége oldalanként 2
A szegély szélessége beállítható a HTML elem mind a négy oldalán egy stílusdeklarációval.

A szegély jellemzői oldalak szerint
Minden oldalra összevontan is megadhatók a szegélyek jellemzői.

A szegély jellemzői gyorsírással
Minden oldalra összevontan is megadhatók a szegélyek jellemzői.

A szegélyek lekerekítése
A szegélyek sarkai a border-radius tulajdonság segítségével lekerekíthető. Paraméterként a szegély külső szélének sugarát kell megadni.

A lekerekítés százalékos értékkel
Ha egy négyzet esetén a kerekítés sugarát százalékban adjuk meg, akkor a 100% megegyezik a négyzet egy oldalának hosszával. 50% beállítása esetén kör alakú lesz a szegély.

A szegélyek lekerekítése sarkonként
A szegélyek lekerekítésének mértéke sarkonként is megadhatóak.

A szegélyek lekerekítése sarkonként 2
A bal felső saroktól, az óramutató járásával egyező irányba haladva adhatjuk megy egymás után az egyes sarkok sugarát.

Szegély kerekítése ellipszissel
Már a százalékos értékadás esetén is, ha az elem magassága vagy szélessége különbözött, akkor két különböző sugár által meghatározott ellipszisek alkották a sarkokat.

Szegély kerekítése ellipszissel 2
A sarkok sugarainak beállítása (vízszintes/függőleges)

Alakzatok készítése szegélyekkel
A szegélyek segítségével lehetőség nyílik szabályos és szabálytalan geometriai alakzatok készítésére csupán css stílusdeklarációk felhasználásával.

A doboz árnyéka
A szövegekhez hasonlóan a dobozokhoz is rendelhetünk egy vagy több árnyékot.

Több árnyék létrehozása
Vesszővel elválasztva több árnyék jellemzői is megadhatók.

Képes szegély
A szegélyek egy-egy kép felhasználásával is megvalósíthatók.