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:
CSS3 menu – Black&White
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:
CSS3 animated menu
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
