CSS3 borders – Keretezzünk
Egy kis szünet után egy újabb összefoglaló cikket hoztam nektek a CSS3 border (szegély,keret kinek melyik tetszik jobban) frontról. Természetesen ezek egy része már a korábbi verziókban is megtalálható volt, de próbálok hangsúlyt fektetni az újdonságok kiemelésére, azok bemutatására. A szegélyeket számtalan területen tudjuk hasznosítani és jelentősen fel tudják dobni egy-egy oldal kinézetét. Érdemes velük komolyabban foglalkozni. Nézzük, hogy a CSS3 segítségével hogy tudunk szegélyeket definiálni, illetve, azoknak milyen típusai vannak.
1. Szegélyek
Maga az utasítás egy rövidítés, ami az alábbi al-tulajdonságokat hordozza, illetve definiálható a segítségével.
border: [ border-style|border-width ||color|transparent || inherit]
Használatára egy példa:
border:solid 5px #000;
Nézzük az egyes tulajdonságokat egyesével
- border-width – Segítségével tudjuk megadni a szegély vastagságának értékét.
- border-style – A szegély típusát definiáljuk vele, ami az alábbi lehet:
inherit | Örökölt a “szülőtől”. |
none | Nincs szegély. |
hidden | Nincs szegély, de a szegély vastagság bele számít a doboz méretbe. |
dotted | Pontok sorozatából álló szegély. |
dashed | Szaggatott vonalak sorozatából álló szegély. |
solid | Folytonos vonalból álló szegély. |
groove | 3D süllyesztett hatású szegély. |
ridge | 3D domború hatást keltő szegély. |
inset | 3D beékelt hatást keltő szegély. |
outset | 3D kiemelt hatást keltő szegély. |
double | Dupla folytonos vonalú szegély. |
Egy egyszerű példa az összes border-style -ra
- Color | transparent – A szegély színét / átlátszóságát állíthatjuk be.
2. Background-clip és color
Szintén egy érdekes lehetőség, ami picit a szegélyekhez tartozik és picit sehova. Azért gondoltam hogy érdemes megnézni, mert szintén egy jó lehetőséget ad az oldal megjelenéséhez. Gyakorlatilag a háttér szín dobozon történő átfolyását, vagy annak lehetőségét határozhatjuk meg vele. Használata:
background-color:color; background-clip: border-box|padding-box|content-box;
Ahogy látható, 3 fajta background-clip áll a rendelkezésünkre, az egyes fajtákat itt meg tudjátok tekinteni, talán szemléletesebb így. A szegélyen való átfolyást és a padding-ot figyeljétek.
2. Background-origin
A Background-origin segítségével a tartalmat a kerettől függően pozicionálhatjuk. Gyakorlatilag a background-position -t támogathatjuk meg vele. Egy egyszerű képpel mutatom be a background-origin használatát. A kép helyzetét figyeljétek az egyes típusoknál.
background-origin: padding-box|border-box|content-box;
3. Border-radius – Lekerekített sarkok
Most nézzük talán (a számomra egyik legkedvesebb rész) a lekerekített sarkok problematikáját. Régen ezt mindenféle trükkökkel tudtuk csak megoldani, de szerencsére a CSS3 egy remek lehetőséget és eszközt ad a kezünkbe, hogy dobozaink sarkait picit át tudjuk alakítani. Lássuk hogy.
A legtöbb megjelent írás, csak azzal foglalkozik, hogy tudunk négy sarkot lekerekíteni, engedjétek meg, hogy kicsit kitérjek a többi lehetőségre is, ami ebben a technikában rejlik. Maga az utasítás a következő:
border-radius: érték;
Az érték helyére írhatunk: Pl. 25px vagy %-os értéket, pl.: 50%.
Nézzünk rá egy egyszerű példát.
<!DOCTYPE HTML> <html> <head> <title>CSS3 rounded corner</title> <style> #egy /*border radius példa*/ { text-align: center; border:2px solid #2d2d2d; /*szegély és beállításai*/ background:#dddddd; width:300px; border-radius:25px; /*border-radius*/ -moz-border-radius:25px; } #ketto { text-align: center; border:2px solid #2d2d2d; background:#dddddd; width:300px; border-radius:50%; -moz-border-radius:50%; } </style> </head> <body> <div id="egy">Ez bizony le van kerekítve!</div> <br /> <br /> <div id="ketto">Ez is kerek</div> </body> </html>
A border-radius forráskód itt elérhető, megtekinthető.
Bonyolítsuk egy picit. Csináljunk egy olyat, hogy a felső és az alsó sarkok eltérő kerekítéssel vannak megáldva. Amúgy nagyon jó kis alakzatokat lehet belőlük csinálni. Lássuk melyek ezek az utasítások:
border-bottom-left-radius: 40px; /*bal alsó sarok*/ border-bottom-right-radius: 40px; /*jobb alsó sarok*/ border-top-left-radius: 10px; /*bal felső sarok*/ border-top-right-radius: 10px; /*jobb felső sarok*/
Nézzük a példa forrását:
<!DOCTYPE HTML> <html> <head> <title>CSS3 border-radius top-bottom</title> <style> #egy { text-align: center; border:solid 2px #2d2d2d; /*szegély típusa*/ background:#dddddd; width:300px; border-bottom-left-radius: 40px; /*border radius alsó és felső sarkok definiálása, a bal és jobb oldalakon.*/ border-bottom-right-radius: 40px; border-top-left-radius: 10px; border-top-right-radius: 10px; } #ketto { text-align: center; border:solid 2px #2d2d2d; background:#dddddd; width:300px; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; } #harom { text-align: center; border: solid 2px #2d2d2d; background:#dddddd; width:300px; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; border-top-left-radius: 15px; border-top-right-radius: 15px; } #negy { text-align: center; border:solid 2px #2d2d2d; background:#dddddd; width:300px; border-radius: 140px 30px; } </style> </head> <body> <center> <div id="egy">Jópofa kerekítési lehetőségek</div> <br /> <br /> <div id="ketto">Jópofa kerekítési lehetőségek</div> <br /> <br /> <div id="harom">Jópofa kerekítési lehetőségek</div> <br /> <br /> <div id="negy">Jópofa kerekítési lehetőségek</div> </center> </body> </html>
A border-radius példa forrását itt eléritek.
UPDATE hamarosan! (border-image)
Forrás:
http://www.w3.org/TR/css3-background/
CSS3 borders – Keretezzünk a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.
Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.