CSS3 menü az IcoMoon segítségével
Egy nagyon érdekes ikon csomagra/app-ra (IcoMoon <- érdemes megnézni) bukkantam, aminek a kezelése könnyű és nagyon ötletes. A lényege, hogy vektoros ikonokat biztosít a számodra, mindezt úgy, hogy létrehoz hozzá egy “font-készletet”, amit használhatsz az oldaladon, így gyakorlatilag nem kell millió képfájlt letöltened különböző méretekben. Másik nagy előnye, hogy tetszőleges felbontáson működik, hiszen vektorgrafikus.
Ennek az ikon-betűtípusnak a használatát szeretném megmutatni nektek néhány példa segítségével. A menük elkészítéséhez csak HTML5 és CSS3 szükséges, semmi mást nem használunk. A példákat Firefox és Chrome alatt teszteltem.
Akkor vágjunk is bele!
A következő menüt szeretném létrehozni:
Első lépésben legenerálom az ikon-betűtípusomat az IcoMoon-on. Aztán jöhet a kódolás, a HTML5 rész nálam így néz ki:
<!doctype html> <div class="contents"> <h1> Menu <em>With pure CSS3</em></h1> <div class="menu"> <ul> <li><a title="" href="#"><span class="icon"><i class="icon-html5finder"> </i></span>Mac </a></li> <li><a title="" href="#"><span class="icon"><i class="icon-html5windows8"> </i></span>Windows8</a></li> <li><a title="" href="#"><span class="icon"><i class="icon-html5exit"> </i></span>Exit</a></li> <li><a title="" href="#"><span class="icon"><i class="icon-html5home"> </i></span>Home</a></li> </ul> </div> </div>
Ahogy láthatjátok is, itt semmi extra sincs, gyakorlatilag készítek egy hagyományos menüsort. Talán annyi érdekesség van benne, hogy egy rejtett részt is teszek bele (i aria-hidden), de ezt látni fogjátok hogy miért.
Nézzük most a CSS3 fájlt, amit teletűzdeltem megjegyzésekkel:
body /*Definiálom a hátteret, a betűméretet és színt*/ { font-size: 14px; min-height: 600px; color: #333333; background-image: url('bg-img.png'); background-size:100% 50%; background-repeat:no-repeat; } .contents /*elrendezés és méret definíciók*/ { width: 800px; margin: 30px auto; text-align: center; } h1 /*Betűméret, szín és árnyék beállítása*/ { font-size: 50px; font-weight: normal; color: rgb(245, 225, 200); text-shadow: rgb(200, 95, 65) 2px 2px 0px, rgb(8, 8, 8) 7px 7px 3px; } em { color: rgb(245, 225, 200); font-style: normal; text-decoration: none; } .menu /*beállítom a menü paramétereit*/ { width: 480px; margin: 80px auto; } .menu ul { padding: 0; list-style: none; font-size: 16px; } .menu li { float: left; width: 120px; text-align: center; } .menu li span { display: block; margin-top: 10px; } .menu a /*beállítom a menüm színét*/ { display: block; color: #ffffff; text-decoration: none; } .menu i /*megadom a menü pizícióját, margóját és a méretét*/ { position: relative; margin: 0 auto; padding: 12px; font-size: 30px; } /* ICOMOON beállítások kezdete */ @font-face { /*a @font-face definícióm még teljesen általános*/ font-family: 'html5-ugyesen-com'; src:url('fonts/html5-ugyesen-com.eot'); src:url('fonts/html5-ugyesen-com?#iefix') format('embedded-opentype'), url('fonts/html5-ugyesen-com.woff') format('woff'), url('fonts/html5-ugyesen-com.ttf') format('truetype'), url('fonts/html5-ugyesen-com.svg#html5-ugyesen-com') format('svg'); font-weight: normal; font-style: normal; } /* Itt történik az érdekes rész, használnom kell a data attributumot, hogy be tudjam illeszteni az ikonokat*/ [data-icon]:before { font-family: 'html5-ugyesen-com'; content: attr(data-icon); font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } /* Mivel én ikononként létrehoztam egy class-t ezért szükségem van az egyes elemek kiemelésére */ .icon-html5finder, .icon-html5windows8, .icon-html5exit, .icon-html5home { font-family: 'html5-ugyesen-com'; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; } /*tartalom megadása - az icomoon által generált állományból tudhatod, hogy mivel tudod az egyes ikonokat meghivatkozni*/ .icon-html5finder:before { content: "\e001"; } .icon-html5windows8:before { content: "\e002"; } .icon-html5exit:before { content: "\e003"; } .icon-html5home:before { content: "\e000"; }
A demót itt meg tudod tekinteni, innen pedig letöltheted a szükséges fájlokat.
A fekete-fehér példa nem rossz, de most dobjuk fel egy-két csicsás effekttel és színezzük meg egy kicsit. 🙂 Valami ilyesmi lesz a végeredmény:
A HTML5 fájlunkon természetesen semmit sem kell változtatnunk.
<!doctype html> </pre> <div class="contents"> <h1> Animated Menu <em>With pure CSS3</em></h1> <div class="menu"> <ul> <li><a title="" href="#"><span class="icon"><i class=" icon-html5finder"> </i></span>Mac </a></li> <li><a title="" href="#"><span class="icon"><i class=" icon-html5windows8"> </i></span>Windows8</a></li> <li><a title="" href="#"><span class="icon"><i class=" icon-html5exit"> </i></span>Exit</a></li> <li><a title="" href="#"><span class="icon"><i class=" icon-html5home"> </i></span>Home</a></li> </ul> </div> </div> <pre>
A CSS3 fájlunkat viszont erősen meg kell túrnunk, hogy minden kívánt effekt összeálljon. Lássuk nálam hogy fest a végeredmény:
body /*Definiálom a hátteret, a betűméretet és színt*/ { font-size: 14px; min-height: 600px; color: #333333; background-image: url('bg-img.png'); background-size:100% 50%; background-repeat:no-repeat; } .contents /*elrendezés és méret definíciók*/ { width: 800px; margin: 30px auto; text-align: center; } h1 /*Betűméret, szín és árnyék beállítása*/ { font-size: 50px; font-weight: normal; color: rgb(245, 225, 200); text-shadow: rgb(200, 95, 65) 2px 2px 0px, rgb(8, 8, 8) 7px 7px 3px; } em { color: rgb(245, 225, 200); font-style: normal; text-decoration: none; } /*Beállítom a menü paramétereit*/ .menu { width: 480px; margin: 80px auto; } .menu ul { padding: 0; list-style: none; font-size: 16px; } .menu li { float: left; width: 120px; text-align: center; } .menu li span { display: block; } .menu a { display: block; color: #ffffff; text-decoration: none; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; } /*beállítom, hogy szép kerek színes háttere legyen az egyes menüknek*/ .menu li:nth-child(1) i { background: rgb(60, 90, 150); box-shadow: 0 0 0 0 rgba(60, 90, 150,0.6); } .menu li:nth-child(2) i { background: rgb(210, 65, 45); box-shadow: 0 0 0 0 rgba(210, 65, 45,0.6); } .menu li:nth-child(3) i { background: rgb(0, 170, 240); box-shadow: 0 0 0 0 rgba(0, 170, 240, 0.6); } .menu li:nth-child(4) i { background: rgb(205, 35, 40); box-shadow: 0 0 0 0 rgba(205, 35, 40, 0.6); } /*jelenjen meg egy karika, ha az ikon fölé viszem az egeret, ami szép átlátszó*/ .menu i { position: relative; display: inline-block; margin: 0 auto; padding: 12px; border-radius: 50%; font-size: 30px; transition: box-shadow .4s ease-in-out; -moz-transition: box-shadow .4s ease-in-out; -webkit-transition: box-shadow .4s ease-in-out; -o-transition: box-shadow .4s ease-in-out; } .menu a:hover i, .menu a:active i { box-shadow: 0 0 0 25px transparent; } /*A szöveg is akkor jelenjen meg, ha fölötte vagyok az egérrel*/ .menu .icon + span { margin-top: 10px; opacity: 0; } .menu a:hover span, .menu a:active span { opacity: 1; } /* ICOMOON beállítások kezdete */ @font-face { /*a @font-face definícióm még teljesen általános*/ font-family: 'html5-ugyesen-com'; src:url('fonts/html5-ugyesen-com.eot'); src:url('fonts/html5-ugyesen-com?#iefix') format('embedded-opentype'), url('fonts/html5-ugyesen-com.woff') format('woff'), url('fonts/html5-ugyesen-com.ttf') format('truetype'), url('fonts/html5-ugyesen-com.svg#html5-ugyesen-com') format('svg'); font-weight: normal; font-style: normal; } /* Itt történik az érdekes rész, használnom kell a data attributumot, hogy be tudjam illeszteni az ikonokat*/ [data-icon]:before { font-family: 'html5-ugyesen-com'; content: attr(data-icon); speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } /* Mivel én ikononként létrehoztam egy class-t ezért szükségem van az egyes elemek kiemelésére */ .icon-html5finder, .icon-html5windows8, .icon-html5exit, .icon-html5home { font-family: 'html5-ugyesen-com'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } /*tartalom megadása - az icomoon által generált állományból tudhatod, hogy mivel tudod az egyes ikonokat meghivatkozni*/ .icon-html5finder:before { content: "\e001"; } .icon-html5windows8:before { content: "\e002"; } .icon-html5exit:before { content: "\e003"; } .icon-html5home:before { content: "\e000"; }
A példát itt tudod kipróbálni, innen pedig le tudod tölteni egyben.
Valami még hiányzik nekem.. a menü felirata túl gyorsan és mindenféle effektet nélkülözően bukkan fel.. Oldjuk ezt meg egy Bézier görbe segítségével. A CSS3 fájlunkban írjuk át a következő részt:
.menu .icon + span { margin-top: 10px; opacity: 0; -webkit-transition: all 450ms cubic-bezier(1.000, 0.000, 1.000, 0.550); -moz-transition: all 450ms cubic-bezier(1.000, 0.000, 1.000, 0.550); -ms-transition: all 450ms cubic-bezier(1.000, 0.000, 1.000, 0.550); -o-transition: all 450ms cubic-bezier(1.000, 0.000, 1.000, 0.550); transition: all 450ms cubic-bezier(1.000, 0.000, 1.000, 0.550); }
A fenti kód kipróbálását, már rátok bízom.
Forrás:
http://www.w3.org/Style/CSS/current-work
http://icomoon.io/#docs
