Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. HTML & CSS
Code

10 CSS3 tulajdonság, amit ismerned kell

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called CSS3 Mastery.
The 30 CSS Selectors You Must Memorize

Hungarian (Magyar) translation by Szabó Péter (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

Border-radius

Demó megtekintése

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.

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.

Circles

Demó megtekintése

...É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.

2. box-shadow

Box-Shadow

Demó megtekintése

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!

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.

Multiple box shadows

Demó megtekintése

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

A CSS

Cool Shadows

Demó megtekintése

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

3. text-shadow

Text-shadow

Demó megtekintése

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

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):

Text Outline
Demó megtekintése

4. Text-Stroke

Text-Stroke

Demó megtekintése

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.

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).

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

Multiple Background Images

Demó megtekintése

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.

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.

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.

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?

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.

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.

Text-Overflow

Demó megtekintése

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

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

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.

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.

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

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

Flexible Box Model

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.

Flexbox Example 2

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.

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.

Example 3 of Flexible Box Model

Demó megtekintése

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.

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.

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
Resize

Demó megtekintése

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

A CSS

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.

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.

centered

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

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

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).

styling the box

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.

effective shadows

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.

styling the children divs

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.

fixing the front-side

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.

rotating the card

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.

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

Final product

A végső hatás megtekintése (a legjobb Webkit böngészőkön megnézni).

Konklúzió

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.