Css nyalánkságok 1.

szamocaEgy olyan menüt szerettem volna készíteni, ahol a menü elemeit egy szakács sapkáján lévő szamócák jelzik, melettük a menü szövege. Azt is szerettem volna ha a user az egérrel rámutat a menüre akkor a szamóca elfordul.

Valahogy így:

Grafikai előkészítés

Szükség lesz a html-en és a css-en kívül egy grafikai programra (Gimp, Photoshop) amivel a grafikai elemeket el tudjuk készíteni. Kerestem a neten egy mosolygós szakács / cukrász arcot, aki szembe néz és van a fején sapka. Az egész menü kialakításában – figyelembe véve a css és html kódolást és a Gimppel való munkát is – ez tartott a legtovább. Aztán fogtam és körbevágtam a fejet sapkástól. Elmentettem egy átlátszó hátterű gif képként. Aztán szépen három darabba vágtam. Az első szelet a sapka teteje volt, a második a sapka középső része, ami ismétlődni fog, a harmadik szelet pedig a fej. Erre azért van szükség, mert akár egy elem van a menüben, akár tíz a sapka teteje és az arc ugyanúgy néz ki. Az egyetlen dolog ami változik az a sapka közepe (magassága). Ezen felül el kellett készítenem egy animált gif-et, ami a szamócát forgatja el. Persze biztosan pár flash párti olvasó felháborodik ezen az eljáráson, de vannak akik nem szeretik a flasht. Például én sem. Meg ehhez a megoldáshoz nem kell egy jogtiszta flash gyártó program ;-).

Az alap html kód

<!DOCTYPE html public "-//w3c//dtd html 4.01 transitional//en"><br /><br />
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-2">
    <title>CSS nyalánkságok</title>
  </head>

  <body>
    <div class="menualap">
      <div><img src="sapkacsucs.gif" width="143" height="27" border="0"></div>
      <ul class="menu">
        <li class="menuitem"><a href="edesseg.html"> Édességek</a></li>
      </ul>
    <div><img src="pofa.gif" width="143" height="167" border="0"></div>
  </div>

</body>
</html>

A menüalap div fogja össze a menünket, a div a sapkacsucs.gif-fel adja a menünk tetejét, ami a szakács sapkájának a teteje, a következő ul adja meg a menü elemeit, ahol egyenlőre egyetlen elemünk van, és végül az utolsó div adja a menünk alját, ami a szakács arca lesz.

Itt egyből beleütközünk az Internet Explorer hiányosságaiba, ugyanis ha a forráskódunkban a div és a /div elem nincs egy sorban az img elemmel, akkor ez a böngésző betesz egy felesleges soremelést a kép elé, ami miatt a képünk szétesne. Ennyit arról, hogy az alap html kód hogyan befolyásolja a css-sel design-osított oldalunkat… Persze plusz css definíciókkal biztosan ki lehetne ezt küszöbölni, de ez esetben egyszerűbb a html kód módosítása.

CSS definíciók

A menualap megadja, hogy milyen széles legyen maga a fő div-ünk. Azért pont 143 px-re álítottam, mert a felszeletelt gif képem ilyen széles volt.

.menualap {width: 143px;}

A menu margin és padding értékek 0-ra állításával megakadályozza, hogy az ul és li elemünk behúzza magát. A háttérképként használt kép a sapkaalap.gif a sapka törzsét adja. Ezt úgy kell elkészíteni, hogy varratok nélkül tudjon ismétlődni, ahogy újabb és újabb menü elemeket adunk majd a listához. Szélességét örökli a menualap-tól, tehát amiatt nem kell aggódnunk, hogy széltébe elkezdené ismételni a háttérképet. Lefelé meg fogja ismételni, de pont ez az amit akarunk.

.menu {background-image: url('sapkaalap.gif');
  color: #f00;
  margin: 0 0 0 0;
  padding: 0 0 0 0;}

A menuitem adja maguknak a menüpontoknak a definícióját. Kirakjuk a szamóca képét a bal szélre háttérképként, letiltjuk az ismétlődést, a list-style-type-ot none-ra állítjuk, hogy ne rajzoljanak ki semmit a böngészők, és a padding-ot úgy állítjuk be, hogy a menü szövege ne lógjon rá a szamócára, és kb a szamóca magasságának a közepénél legyen. Mivel a szamoca.gif 35 px magas megadjuk ezt az értéket magasságnak, segítve ezzel az Internet Explorert, hogy meg tudja jeleníteni a menünket kb úgy ahogy mi szeretnénk.

.menuitem {background-image: url('szamoca.gif');
  background-repeat: no-repeat;
  background-position: top left;
  font-size: 14px;
  font-weight: bold;
  padding: 18px 0 0 50px;
  list-style-type: none;
  height: 35px;}

Ezután arról kell gondoskodnunk, hogy úgy nézzen ki a link ahogy mi szeretnénk, vagyis ne legyen aláhúzva, piros és small-caps legyen.

.menuitem a {text-decoration: none;
  color: #f00;
  font-variant: small-caps;}

Végezetül pedig megadjuk, hogy hover esemény bekövetkezésekor (vagyis ha az egérmutató a menü fölé kerül) akkor az álló szamóca forduljon el. Ezt úgy érjük el, hogy a háttérképet lecseréljük egy animált gif képre. Ennél az animációt úgy állítottam be, hogy csak egyszer játsza le.

.menuitem:hover {background-image: url('szamoca-anim.gif');
  background-repeat: no-repeat;
  background-position: top left;
  text-decoration: underline;}

Egész jól állunk, de ha kipróbáljuk rájövünk, hogy az Internet Explorer egyenlőre nem tud megbírkózni a feladattal, míg a többi böngésző már igen. Bevezetjük ezért a iedebilseg definíciót. Hiába adtuk meg, hogy a menuitem 35 px magas, az Explorert ez egyáltalán nem hatotta meg, ami azért baj, mert e nélkül levágja a szamócánk alját. Módosítanunk kell tehát a html kódot és létre kell hoznunk az új css class-t.

A html-t így módosítjuk:

<li class="menuitem"><span class="iedebilseg"><a href="edesseg.html">Édességek</a></span></li>

A css-t meg így:

.iedebilseg {height: 35px;
  margin: 0;
  padding: 0;}/*IE debilség*/

Kész is vagyunk. Ezután kipróbálhatjuk, hogy hogyan néz ki a menünk amikor több mint egy elem van benne.

Bugok

  • A Windowsos Firefoxban a menü szamócái csak egyetlen alkalommal animálódnak, a többi alkalommal csak átkattannak a végállapotba. A Linuxos Firefox nem csinálja ezt a hibát.
  • Macintosh alatt Firefoxban a linkre mutatáskor felvillan valamivel jobbrább a szamóca. ez a hiba szintén nem megfigyelhető másik oprendszerekben.
  • Az IE lejátsza a háttérben lévő animált gifeket, de ha hover eseménynél cserélni kell a képet, akkor már nem játsza le. Sajnos ezért IE alatt a szamócák egyáltalán nem mozdulnak meg.
  • A menü megnevezésének elég rövidnek (vagy kisebb betűméretűnek) kell lennie, hogy ne lógjon le a sapkáról

One thought on “Css nyalánkságok 1.

  1. Ez csak egy ötlet. Nem próbáltam ki de lehet, működik. A lényeg az, hogy hovernél ne kelljen képet cserélni. A lényeg, hogy egy képben legyen a sima és az animált háttér. Kell csinálni egy olyan gif-t ami kétszeres magasságú.A a felső része az álló szamóca az alsó az animált. Így gondolom: http://www.techproba.extra.hu/szamoca-anim2.gif
    Ezután nem kell más mint h a css-ben a kép magaságának felét adjuk meg. Hovernél pedig egyszerűen feljebb csúsztatjuk. Nagyjából így:
    (nálam 100px magas let a kép)
    .szamoca a {
    background: url(szamoca-anim.gif) no-repeat;
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    overflow: hidden;
    }
    .szamoca a:hover {
    background-position: 0 -50px;
    }
    Így nem kell képcsere, mert ugyan azt a képet használja.
    Szerinted? Nekem most nincs kedvem kipróbálni.Álmos vagyok.
    Amúgy az ötlet innen:
    http://www.tutorial.hu/node/62

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.