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
CSS3 border-style
- 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%.
CSS3 broder-radius
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*/
CSS3 border-radius top/bottom példák
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 http://html5.ugyesen.com.
