Gyönyörű elrendezés címkék hely bónusz
Csodálatos tervező Orman Clark egyszer bemutatták az olvasót egy nagyon szép design tag felhő. Már használt egyetlen oldalamon. Megmondom, hogyan lehet megjelölni ezeket a címkéket a webhelyen.
Először is meg kell főzni régóta ismert tag egy kép, ami biztonságos választás címkék különböző hosszúságú. Tettem itt:
Ha figyelembe vesszük során az elrendezés elavul Internet Explorer 7, akkor azt kell, hogy további beágyazott tag:
Azonban IE7, akkor nem kell figyelembe venni, így jön a támogatás az ál-: miután.
Utalni kell a blokk egy sorban, távolítsa el az aláhúzás, tiltsák szövegtöréshez egy új vonal, adjunk hozzá egy árnyék szépség, padding a bal és a jobb és adja meg a címke háttér (ahogy mi használjuk a tulajdonság kijelző :. inline-block akkor a blokk hossza címkével hosszával megegyező szöveg, plusz árrés a bal és a jobb, illetve a jobb oldali részén a háttér nem lesz látható):
Ez ad nekünk a következő kép:
Most adjuk hozzá a jobb oldalán a háttérben. Tesszük ezt a segítségével ál-: miután. amely lehetővé teszi számunkra, hogy feladja a lehetőséget tag. Helymeghatározás feltétlenül a jobb oldalon a tag az ő teljes magasságában, és adja meg a jobb oldalán a kép:
És azt az eredményt kapjuk van szükség:
Már csak azt, hogy adjunk egy hatás, ha lebeg a linkre:
Bonus - tesszük fel a gyönyörű címke tiszta CSS
A modern technológiák lehetővé teszik, hogy alkalmaznak ilyen tag teljes egészében a CSS használata nélkül egyetlen képet.
Teljesen úgy fog kinézni a következő böngészők: Opera, Google Chrome, Firefox és a Safari. Az Internet Explorer 9, a címke nélkül maradnak gradiens, de a megjelenése még elfogadható. De IE8 alatt és a címke ehhez már nem megfelelő.
Kezdjük a jobb oldalán a téglalap. Adja meg a gradiens háttér, meg a határokat a színét, adjunk hozzá hatásokat külső és belső szemhéjfesték box és árnyék a szöveg, a külső és belső béléssel (külső padding 10px A közvetlenül annak érdekében, hogy hagyjon helyet a szomszédos tag háromszög):
Most segítségével ál: mielőtt létre a bal háromszög. Kezdetben egy négyzet (azonos gradiens, csak 45 ° szöggel elforgatjuk, és az árnyék határok), amelyet tovább alakíthatjuk egy háromszög:
Érdemes megjegyezni, hogy felhívja a WebKit színátmenetek az ellenkező irányba, így neki adott negatív érték: -45deg. Ezen felül, akkor előfordulhat, hogy meghatározott besprefiksnom gradiens tulajdonság nem 45 és 135 fok. Nem értem ezt a logikát (valószínűleg valami nem tudom), de ez kell, hogy így a megfelelő kijelző.
Ahhoz, hogy a tér a háromszög, használjuk a transzformációs ingatlan értékének forgatás (45 °). Ez azonban nem elegendő - az is szükséges, hogy egy tompa szög. Ezt a célt úgy érjük el, méretezés az Y tengely a skála értékek a transzformáció:
Az eredmény majdnem kész címke design:
Volt az utolsó érintés -, hogy egy lyuk a címkét. Ez segít nekünk, hogy még egy ál -: miután. Egyszerűen hozzon létre egy kis négyzet, ami kerekíti le a sarkokat, hogy kiderül egy kört. Nos, hogy hozzon létre térhatású effektek árnyék:
Hurrá! Ennek eredménye egy lényegében azonos design a címke, amit a rajzon az első képet, hogy ezt a bejegyzést:
Végül, mint abban az esetben, egy képet, felveheti a hatása a szöveg megváltoztatása az egérmutató alatt.