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

Szegély fajták

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

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;

Background-origin példa itt.

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 border radius

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*/
border radius top-bottom

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 https://html5.ugyesen.com.

You may also like...