10 CSS3 tulajdonság, amit ismerned kell

() translation by (you can also view the original English article)

Már ismertettük azt a harminc CSS szelektort, amit mindenkinek ismernie kellene; de mi a helyzet az új CSS3 tulajdonságokkal? Bár többségükhöz böngészőfüggő prefix kell, de ettől még használhatod őket a projektjeidben. Valójában ez nagyon is ösztönöző!

A lényeg, hogy eldöntsd, megfelel-e neked egy böngészőnként enyhén különböző kinézet. Nem gond, ha például az IE 90 fokos sarkokat mutat a lekerekítettek helyett? Ez a te döntésed. Ugyanakkor mindig emlékezz rá, hogy a weboldalaknak nem kell teljesen azonosan kinéznie minden böngészőn. A cikk végén meg fogunk csinálni egy jópofa projektet.

1. border-radius

Ez a legnépszerűbb CSS3 tulajdonság a kupacban, a border-radius a CSS3 tulajdonságok zászlóshajója. Bár sok dizájner még mindig elszörnyed az elképzeléstől, hogy egy elrendezés másképp jelenhet meg böngészőnként, egy apró lépés, mint például a lekerekített sarkok, könnyen meggyőzheti őket!

Az irónia az az egészben, hogy ugyanakkor mindannyiunknak tökéletesen megfelel az az elképzelés, hogy alternatív megjelenítési élményt biztosítunk a mobil böngészőknek. De különös módon néhányan nem érzik ugyanezt, amikor asztali böngészőkre kerül sor.

1	-webkit-border-radius: 4px;
2	-moz-border-radius: 4px;
3	border-radius: 4px;

Kérjük figyelj rá, hogy a Safari 5 és az IE9 a hivatalos 'border-radius' szintaxist implementálta.

Körök

Néhány olvasó számára talán nem derült ki ebből, hogy ezzel a tulajdonsággal köröket is létre tudunk hozni.

1	-moz-border-radius: 50px;
2	-webkit-border-radius: 50px;
3	border-radius: 50px;

...És ha szeretnénk egy kicsit szórakozni, akkor kiélvezhetjük a Flexibilis doboz modell (a #8-ban van részletezve) előnyeit, hogy függőlegesen és vízszintesen a kör közepére igazítsuk a szöveget. Egy kis kódolás kell hozzá, de csak azért, hogy kompenzáljuk a különböző böngészőket.

display: -moz-box;
display: -webkit-box;
display: box;

-moz-box-orient: horizontal; /* the default, so not really necessary here */
-webkit-box-orient: horizontal;
box-orient: horizontal;

-moz-box-pack: center;
-moz-box-align: center;

-webkit-box-pack: center;
-webkit-box-align: center;

box-pack: center;
box-align: center;

2. box-shadow

A következő a hétköznapi box-shadow, ami lehetővé teszi, hogy mélységet adj az elemeidnek. Csak ne ess túlzásba az értékek beállításánál!

1	-webkit-box-shadow: 1px 1px 3px #292929;
2	-moz-box-shadow: 1px 1px 3px #292929;
3	box-shadow: 1px 1px 3px #292929;

A box-shadow négy paramétert fogad el:

x-offszet
y-offszet
elmosás mértéke
az árnyék színe

Amit sokan nem vesznek észre, hogy egyszerre több box-shadow-ot is lehet alkalmazni. Ez néhány nagyon érdekes effektushoz vezethet. A következő screenshoton kék és zöld árnyékot használtam, hogy kiemeljem az árnyékokat.

1	-webkit-box-shadow: 1px 1px 3px green, -1px -1px blue;
2	-moz-box-shadow: 1px 1px 3px green,-1px -1px blue;
3	box-shadow: 1px 1px 3px green, -1px -1px blue;

Okos árnyékok

Árnyékok hozzáadásával a ::before és ::after pszeudo-osztályokhoz létrehozhatunk néhány valóban érdekes perspektívát. Mutatok egyet kezdésképp:

A HTML

1	<div class="box">
2	<img src="tuts.jpg" alt="Tuts" />
3	</div>

A CSS

.box:after {
   content: '';
   position: absolute;

   z-index: -1; /* hide shadow behind image */

   /* The Shadow */
   -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
   -box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);                

   width: 70%; 
   left: 15%; /* one half of the remaining 30% (see width above) */

   height: 100px;
   bottom:  0;
}

Szeretnél még több király effektet? Nézd meg ezt a bemutatót a Nettuts+-on.

3. text-shadow

A text-shadow azon kevés CSS tulajdonságok egyike, amelyiknél kihagyhatjuk a böngésző-prefixek használatát. Eléggé hasonlít a box-shadowhoz, a szövegre kell alkalmazni, és ugyanazt a négy paramétert kapja:

x-offszet
y-offszet
elmosás
az árnyék színe

1	h1 {
2	text-shadow: 0 1px 0 white;
3	color: #292929;
4	}

Szöveg körvonal

A testvéréhez, a box-shadowhoz hasonlóan több árnyékot is hozzárendelhetünk vesszőkkel elválasztva. Például tegyük fel, hogy szeretnénk egy körvonal hatást létrehozni a szövegen. Bár a webkit rendelkezik a stroke effekttel, el tudjuk érni, hogy több böngészőn is használjuk ezt a következő módszerrel (noha ez nem olyan szép):

body { background: white; }

h1 {
   text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;
   color: white;
}

4. Text-Stroke

Légy óvatos ezzel a módszerrel. Csak a webkit támogatja, az is csak pár éve (Safari, Chrome, iPhone). Valójában – de lehet, hogy tévedek – 'text-stroke' még nem része a CSS3 specifikációnak Ebben az esetben, fehér szöveggel a Firefox egy látszólag üres oldalt fog mutatni. Használhatod vagy a JavaScript funkció érzékelőjét ennek megkerülésére, vagy gondoskodhatsz arról, hogy az alapértelmezett szövegszín ne ugyanaz legyen, mint a body háttere.

1	h1 {
2	-webkit-text-stroke: 3px black;
3	color: white;
4	}

Funkció érzékelés

Hogyan adhatunk meg egy csapat stilizálást mondjuk a Firefox számára, és egy másikat a Safari vagy Chrome számára? Az egyik megoldás a funkció érzékelés használata.

A funkció érzékelésnél használhatjuk a JavaScriptet annak tesztelésére, hogy egy adott tulajdonság elérhető-e. Ha nem, akkor készítünk egy tartalék megoldást.

Hadd utaljunk vissza a text-stroke problémára. Állítsunk be egy tartalék fekete színt a böngészők számára, amik nem támogatják ezt a tulajdonságot (jelenleg a webkit kivételével mindegyiknek).

var h1 = document.createElement('h1');
if ( !( 'webkitTextStroke' in h1.style ) ) {
   var heading = document.getElementsByTagName('h1')[0];
   heading.style.color = 'black';
}

Először készítünk egy egyszerű h1 elemet. Azután végrehajtunk egy teljes körű keresést, hogy meghatározzuk, a -webkit-text-stroke tulajdonság elérhető-e az elemre a style attribútumon keresztül. Ha ez not lesz, akkor fogjuk a Hello Readers fejlécet, és a színét fehérről feketére állítjuk.

Vedd figyelembe, hogy itt általánosságban beszéltünk. Amennyiben több h1 taget kell lecserélned az oldalon, akkor a while parancsot kell használnod arra, hogy szűrd az egyes fejléceket és frissítsd a megfelelőek stilizálását vagy osztály nevét.

Ezt mi csak webkitre teszteltük, de lehetséges, hogy valójában más böngészők is támogatják a text-stroke tulajdonságot. Tartsd ezt észben.

Ha egy sokkal konkrétabb funkció-érzékelő megoldást keresnél, nézd meg a Modernizr-t.

5. Többszörös háttér

A background tulajdonságot átdolgozták, így engedi a többszörös hátteret a CSS3-ban.

Hozzunk létre egy egyszerű példát a szemléltetésére. Megfelelő képek hiányában én két bemutató képét használom hátterünkként. Természetesen egy valódi alkalmazásnál esetleg egy textúrát szeretnél használni, és talán egy átmenetet a háttereidhez.

1	.box {
2	background: url(image/path.jpg) 0 0 no-repeat,
3	url(image2/path.jpg) 100% 0 no-repeat;
4	}

Fentebb vesszővel elválasztva két külön háttérre referáltunk. Figyeld meg, hogy az első esetben a bal felső pozícióba (0 0) helyeztük, míg a másodikban a jobb felsőbe (100% 0).

Győződj meg róla, hogy gondoskodtál tartalék megoldásról azon böngészők számára, amik nem támogatják a többszörös hátteret. Azok az egész tulajdonságot át fogják ugorni, a hátteredet fehéren hagyva.

Régi böngészők kompenzálása

Egyszerű háttérkép megadásához a régebbi böngészőknek, mint az IE7, a background tulajdonságot kétszer deklaráljuk: először a régi böngészőknek, másodszor pedig felülírásként. Alternatívaként ismét használhatod a Modernizr-t.

.box {
/* fallback */
background: url(image/path.jpg) no-repeat;

/* modern browsers */
background: url(image/path.jpg) 0 0 no-repeat,
 url(image2/path.jpg) 100% 0 no-repeat;
}

6. background-size

Egészen mostanáig arra kényszerültünk, hogy trükkös technikákkal méretezzük át a háttérképeinket.

1	background: url(path/to/image.jpg) no-repeat;
2	background-size: 100% 100%;

A fenti kód közvetlenül arra utasítja a háttérképet, hogy töltse ki az összes szabad helyet. Például mi van akkor, ha azt szeretnénk, hogy egy bizonyos képp elfoglalja a body elem teljes hátterét, függetlenül a böngésző ablakának méretétől?

body, html { height: 100%; }

body {
 background: url(path/to/image.jpg) no-repeat;
 background-size: 100% 100%;
}

Csak ennyi kell hozzá. A background-size tulajdonság két paramétert fog elfogadni: az x és y szélességet.

Bár a Chrome és Safary legújabb verziói natívan támogatják a background-size-t, de továbbra is használnunk kell böngészőfüggő előtagokat a régebbi böngészőkhöz.

body {
 background: url(path/to/image.jpg) no-repeat;
 -moz-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
 background-size: 100% 100%;
}

Demó megtekintése

7. text-overflow

Az eredetileg az Internet Explorer által kifejlesztett text-overflow tulajdonság két értéket fogad el:

levágás
ellipszis

Ez a tulajdonság használható arra, hogy levágja a szöveget, ha az túllóg a tartalmazó elemén, miközben egy kis visszajelzést ad a felhasználónak, például egy ellipszist.

Tudtad? Az Internet Explorer az IE6 óta támogatja ezt a tulajdonságot! Ők találták ki!

.box {
   -o-text-overflow: ellipsis;
   text-overflow:ellipsis;

   overflow:hidden;
   white-space:nowrap;

   border: 1px solid black;
   width: 400px;
   padding: 20px;

   cursor: pointer;
}

Ezen a ponton megfontolandó, hogy esetleg megmutasd a teljes szöveget, ha a felhasználó a box fölé viszi az egeret.

#box:hover {
  white-space: normal;
  color: rgba(0,0,0,1);
  background: #e3e3e3;
  border: 1px solid #666;
}

Egy kicsit furcsa számomra (hacsak nem tévedek), hogy úgy tűnik, nincs mód a text-overflow tulajdonság visszaállítására vagy "kikapcsolására". Ennek a "ki" funkciónak az utánzására a :hover esetén visszaállíthatjuk a white-space tulajdonságot normalra. Ez azért fog működni, mert a text-overflow ennek a funkciónak a helyes működésétől függ.

Tudtad? Meghatározhatsz egy saját karakterláncot is, ami az ellipszis helyére kerülhet. Ily módon a karakterlánc a levágott szöveget fogja mutatni.

8. Rugalmas doboz modell

Végezetül a Rugalmas doboz modell, ami lehetővé teszi számunkra, hogy megszabaduljunk azoktól az idegesítő floats-októl. Bár beletelik egy kis időbe, amíg megszokod az új tulajdonságokat, de amint megtetted, minden tökéletesen értelmet fog nyerni.

Készítsünk egy gyors demót, és hozzunk létre egy egyszerű, kétoszlopos felületet.

<div id="container">

 <div id="main"> Main content here </div>
 <aside> Aside content here </aside>

</div>

Most nézzük a CSS-t: először is utasítani kell a container-t, hogy egy box-ként legyen kezelve. Hozzárendelek egy általános szélességet és magasságot is, mivel nincs semmilyen aktuális tartalmunk.

 #container {
    width: 960px;
    height: 500px; /* just for demo */

    background: #e3e3e3;
    margin: auto;

    display: -moz-box;
    display: -webkit-box;
    display: box;

Ezután a demó kedvéért rendeljünk egyedi háttérszíneket a #main div-hez és aside-hoz.

#main { 
   background: yellow;
}   

aside {
   background: red;
}

Ezen a ponton még nem mutat túl sokat.

Ugyanakkor érdemes odafigyelni egy dologra, mégpedig arra, hogy amikor beállítjuk a display: box módot, a gyermek elemek a függőleges tér egészét ki fogják tölteni; ilyenkor az alapértelmezett box-align érték a stretch.

Nézd meg mi történik, amikor kifejezetten a #main tartalmi részhez állítunk be szélességet.

1	#main {
2	background: yellow;
3	width: 800px;
4	}

Nos, ez már jobb egy kicsit, de még mindig problémánk van ott, ahol az aside nem foglalja el teljesen a fennmaradó teret. Ezt kijavíthatjuk az új box-flex tulajdonsággal.

A box-flex utasítja az elemet, hogy foglalja el az összes szabad részt.

 aside { 
    display: block; /* cause is HTML5 element */
    background: red;

   /* take up all available space */
    -moz-box-flex: 1; 
    -webkit-box-flex: 1;
    box-flex: 1; 
 }

Ezzel a tulajdonsággal – függetlenül a #main tartalmi rész szélességétől — az aside minden szabad területet le fog foglalni. Ami még jobb, hogy nem kell aggódnod az olyan bosszantó float problémák miatt, mint amikor az elemek a fő tartalmi rész alá esnek.

Még mindig csak a felszínt karcolgattuk itt. További információkért olvasd át Paul Irish kiváló cikkjét. Ezenkívül légy óvatos ennek a módszernek a használatával, mivel nem teljes mértékben támogatott a régebbi böngészők által. Ezekben az esetekben használhatsz funkció érzékelést vagy a Modernizr-t a támogatás ellenőrzésére, és ha szükséges, biztosíthatsz pótmegoldást.

9. Átméretezés

A csak Firefox 4 és Safari 3 számára elérhető resize tulajdonság – a CSS3 UI moduljának része – lehetővé teszi, hogy meghatározd, miként méreteződjön át egy textarea.

1	<textarea name="elem" id="elem" rows="5" cols="50"></textarea>

Figyelj rá, hogy alapértelmezésben a webkit böngészők és a Firefox 4 engedi a textarea-k vízszintes és függőleges átméretezését.

textarea {
   -moz-resize: vertical;
   -webkit-resize: vertical;
   resize: vertical;
}

Lehetséges értékek

both: vízszintes és függőleges átméretezés
horizontal: csak vízszintes méretezés
vertical: csak függőleges méretezés
none: átméretezés kikapcsolása

10. Átmenet

Talán a legizgalmasabb kiegészítő a CSS3-hoz az a képesség, hogy az elemekhez JavaScript használata nélkül rendelünk animációkat.

Bár úgy látszik, hogy az az átkozott IE9 nem fogja támogatni a CSS átmeneteket, de ez még nem azt jelenti, hogy nem kellene használnod őket. A kulcs a kiterjesztés.

Ezért most utánozzuk azt a hétköznapi effektust, amikor ráviszed az egeret az oldalsáv egy linkjére, és egy szöveg úszik be oldalról.

A HTML

1	<ul>
2	<li>
3	<a href="#"> Hover Over Me </a>
4	</li>
5	<li>
6	<a href="#"> Hover Over Me </a>
7	</li>
8	<li>
9	<a href="#"> Hover Over Me </a>
10	</li>
11	<li>
12	<a href="#"> Hover Over Me </a>
13	</li>
14	</ul>

A CSS

 ul a {
    -webkit-transition: padding .4s; 
    -moz-transition: padding .4s;
    -o-transition: padding .4s;
    transition: padding .4s;
 }

 a:hover { 
    padding-left: 6px;  
 }

A transition három paramétert fogad el:

a tulajdonságot az átmenethez. (Állitsd ezt az értéket all-ra, ha szükséges)
az időtartamot
az egyszerűsítés típusát

Azért ne alkalmazzuk közvetlenül a transitiont a horgony tag hover állapotára, mert ha megtesszük, akkor az animáció csak mouseover esetén fog megjelenni. Ha elvisszük onnan az egeret, az elem azonnal visszatér a kezdőállapotába.

Demó megtekintése

Mivel csak kibővítettük az effektust, abszolúte semmi kárt nem okoztunk a régebbi böngészők számára.

Végső projekt

Kombináljuk a cikkből tanult rengeteg technikát, és hozzunk létre egy csinos effektust. Először tekintsük meg a végső effektust (a legjobb Webkites böngészőkön).

1. lépés: A jelölőkód

Egyszerűen csináljuk: a .box konténerünkön belül hozzáadunk két div-et: egyet az elülső méretnek és egy másikat a hátsónak.

<body>

   <div class="box">
      <div>Hello</div>
      <div> World </div>
   </div>

</body>

2. lépés: Vízszintes és függőleges középre igazítás

Ezután szeretném a kártyánkat tökéletesen a képernyő közepére elhelyezni. Ehhez ki kell használnunk a Flexible Box Model előnyét. Csak ne felejts el később Modernizr-t használni pótmegoldásként az IE-hez.

Mivel az oldalunk csak ezt a kártyát tartalmazza, hatékonyan használhatjuk a body elemünket összefogóként.

body, html { height: 100%; width: 100%; } 

body {
  display: -moz-box;
	display: -webkit-box;
	display: box;
	
	-moz-box-orient: horizontal; 
	-webkit-box-orient: horizontal;
	box-orient: horizontal;
	
	-moz-box-pack: center;
	-moz-box-align: center;
	
	-webkit-box-pack: center;
	-webkit-box-align: center;
	
	box-pack: center;
	box-align: center;
}

3. lépés: A box stilizálása

Ezután stilizáljuk a "kártyánkat".

 .box {
    background: #e3e3e3;
    border: 1px dashed #666;
    margin: auto;
    width: 400px;
    height: 200px;
    cursor: pointer;
    position: relative;

    -webkit-transition: all 1s;	
    -moz-transition: all 1s;
    transition: all 1s;	
 }

Vegyük észre, hogy arra is utasítottuk ezt az elemet, hogy figyeljen minden változásra az elem állapotát illetően. Amikor ez megtörténik, megvalósítjuk a változásokat (ha lehetséges) egy másodperc alatt (transition: all 1s).

4. lépés: Egy hatásos árnyék

Ezután – ahogy azt már megtanultuk a cikk elején – hozzárendelünk egy jóféle árnyékot a ::after pszeudo-osztály használatával.

 .box::after {
    content: '';
    position: absolute;

    width: 70%;
    height: 10px;
    bottom: 0;
    left: 15%;

    z-index: -1;

    -webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4);
    -moz-box-shadow: 0 9px 20px rgba(0,0,0,.4);
    box-shadow: 0 9px 20px rgba(0,0,0,.4);
}

5. lépés: A gyermek Div-ek stilizálása

Jelenleg a gyermek div-ek még mindig egymás tetején vannak. Állítsuk a positiont abszolútra, majd utasítsuk őket, hogy foglalják el az összes szabad teret.

 .box > div {
    background: #e3e3e3;
     
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
    

    font: 45px/200px bold helvetica, arial, sans-serif;
    text-align: center;
    
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
 }

6. lépés: Javítsuk ki az "Előlap"-ot

Nézzük meg alaposan a fenti képet; észrevetted, hogy a kártyánk hátoldala hogyan van alapértelmezetten megjelenítve? Ez azért van, mert az elem később jelenik meg a jelölőkódban, és ennek eredményeképp egy magasabb z-indexet kap. Tegyük ezt rendbe.

 /* Make sure we see the front side first */
 .box > div:first-child {
    position: relative;
    z-index: 2;
 }

7. lépés: A kártya megfordítása

Most jön az izgalmas része; amikor a kártya fölé visszük az egeret, meg kellene fordulnia, és megmutatni a kártya "hátlapját" (vagy legalábbis a "hátlap" illúzióját). Ennek eléréséhez a transzformációkat és a rotateY függvényt használjuk.

 .box:hover {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);   	   	
 }

8. lépés. Tükrözött szöveg

Hát nem elképesztően néz ki? De most a szöveg tükrözötten látszódik. Ez természetesen azért van, mert transzformáltuk a containert. Rakjuk ezt is helyre a gyermek div 180 fokos elforgatásával.

/* Hide the front-side when hovered */
 .box:hover > div:first-child {
    opacity: 0;
 }

 .box:hover div:last-child {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
 }

És az utolsó kóddarabbal elértük a csinos hatást!

Konklúzió

Köszönöm, hogy elolvastad, remélem, tanultál valami hasznosat!