Css nyalánkságok 2.

lepkeValahol az interneten bandukolva láttam egy oldalt ahol a keresésre, vagy a user beléptetésére szolgáló input mező a fejlécként szolgáló képre volt rátéve. Rendkívül helytakarékos és praktikus ötletnek látszott, de kíváncsi voltam, hogy egy ilyen input elemet bele lehet-e ágyazni a designba.

Az ötlet

Rövid gondolkodás után arra jutottam, hogy legegyszerűbben ezt úgy lehetne megoldani, hogy a képre ráhelyezem az input mezőt, aminek beállítom háttérképként az eredeti képem egy részletét. Ezután már csak arról kell gondoskodnom, hogy az input mezőm pontosan oda kerüljön ahová a képrészlet tartozik, mert így vizuálisan azt a hatást fogja kelteni mintha átlátszana.

Grafikai előkészítés

Indulásként elővettem a gimpet és fogtam egy lepkéről készült képet. Ráböktem a lepke egyik szárnyán egy pontra és kijelöltem rajta egy kis téglalpot találomra. Ide szántam az input mezőt. Elmentettem egy jpg képként a lepkét magát (a téglalap nélkül 250px*250px), és külön a téglalapon belüli képrészletet (input-bg-lepke-100.jpg 142px*30px), ami majd az input mezőm háttereként fog szereplni.

Alapozás

Létrehoztan egy kiindulásként szolgáló html filet.

<form action="index.html" method="get">
<div id="rrd">
  <input type="text" />
</div>
</form>

És hozzá megcsináltam a szükséges css definíciókat.

#rrd{background-image:url('./lepke.jpg');
  height:250px;
  width:250px;}
#rrd input{height:30px;
  width:142px;
  margin:0 0 0 0;
  padding:0 0 0 0;
  position:relative;
  top:197px;
  left:85px;
  border:1px solid gray;
  color:red;
  font-weight:bold;}

Az #rrd magassága és szélessége a lepke.jpg kép méretével egyezik meg, az input mezőnké pedig a a kis képrészletünk, az input-bg-lepke-100.jpg méretével. Az input boxunkat relatívan kell pozícionálni, hogy ne a kép bal felső sarkára kerüljön rá, hanem a megadott top:197px, left:85px pontra. Erre a pontra kell az input mezőnk bal felső sarkának esnie, hogy az input háttereként szolgáló kép szépen beleolvadjon a lepke képébe. Ezeket a koordinátákat még a gimpbben olvastam le, itt volt a téglalapom bal felső sarka. Szerettem volna ha az input boxunk észrevehető a képen, ezért adtam meg neki a boder értékeket, és beállítottam, hogy a beírt szó vastag, piros betűkkel jelenjen meg. Ha a border értékét none-ra állítjuk, akkor az inputunk teljesen beleolvad a képbe, a gyanútlan user meg se fogja találni, hogy hova kell bepötyögnie a bepötyögnivalóját.

Finomítás

Most ugrik a majom a vízbe! Be kell állítani az input hátterét és rögtön látni fogjuk, hogy jól vagdostunk a gimpben és jól állítgattuk a css-t vagy nem, vagyis bepasszol a kép vagy nem. Mivel rugalmasabb beállítást tesz lehetővé megadtam egy stílust az input boxunknak.

<input type="text" class="szaz" />

Aztán ehhez beállítottam a kívánt háttérképet.

#rrd input.szaz{background-image:url('./input-bg-lepke-100.jpg');

Az eredmény már meg is van és úgy is néz ki, mint ahogy akartam!

Kinézetre már nem rossz a kis inputunk, de használhatóságát tekintve még hagy némi kívánnivalót maga után. Kellene elé valami felirat, amiből a user be tudja azonosítani, hogy mit is kéne oda bepötyörésznie. Ehhez ki kellett egészítenem a html kódot az alábbiak szerint.

<form action="index.html" method="get">
<div class="keres">Keresés:</div>
<div id="rrd">
  <input type="text" />
</div>
</form>

Erre azért volt szükség, mert a “Keresés” szövegünket is pozícionálni kell, hogy az input mezőnk elé kerüljön. Ezt a következő css definíciókkal érhetjük el.

.keres{position:relative;
  top:220px;
  left:15px;
  font-weight:bold;
  color:red;}

Itt megmondom őszintén, hogy a top és left koordinátákat, a szemrevételezés és próbálgatás módszerével állítottam be. Érdemes kipróbálni, hogy mi történik ha a user 1-2 betűméretet növel a böngészőjével, és aszerint belőni a feliratunk helyzetét. Aztán, hogy a felirat illeszkedjen az inputba begépelt szöveg stílusához, ezt is pirosra és boldra állítottam.

Keresés:

Még mindig ráfér az inputunkra egy kis csinosítás. Legalábbis szerintem eléggé csúnyácska, hogy a begépelt szöveg teljesen ráragad az input szélére. Mi sem egyszerűbb ennél, adjunk meg az inputunknak felső és bal oldali paddingot és a szövegünk máris elegánsabb helyre kerül. Mielőtt ennek nekiugranánk tudnunk kell két dolgot.

  • az Opera (8.5) felülbírálja az inputon belüli pozícionálási kísérleteinket. Függőlegesen automatikusan középre igazítja, ami nagyon kedves tőle, de ha fejre állunk akkor is hozzá fogja ragasztani a begépelt szöveget az input széléhez
  • az Internet Explorer (6) padwid bugja (ezt majd leírom részletesen egy másik cikkben)

Na akkor lássuk, hogy mit kell a css-en ehhez módosítani. Adjuk hozzá az eddigekhez a következő definíciókat.

#rrd input.szaz{padding-left:20px;
  padding-top:5px;}
#rrd input.szaz[type=text]{width:104px;
  height:25px;}

A padding tulajdonságok biztosítják, hogy a begépelt szöveg kicsit beljebb és lejebb legyen az input széleitől. A input.szaz[type=text]{width:104px;height:25px;} definíció biztosítja, hogy a design ne essen szét a padding bevezetése miatt. A padding értékek állítgatásánál nem szabad elfelejtkeznünk a pontos igazítást igénylő designoknál (mint a jelenlegi inputunk), hogy hatással lesz a width értéken keresztül a pozícióra. Magyarul ha bevezetünk egy padding-left definíciót, akkor ugyanennyivel csökkentenünk kell az elem width-jét ahhoz, hogy az elem ugyanott maradjon. Az IE padwid bugja miatt viszont ahhoz, hogy ő is megfelelően tudja megjeleníteni nem szabadna változtatni a width értéken. Ezt az ellentmondást úgy oldjuk fel, hogy kihasználjuk az IE notype bugját, ami miatt az IE nem fogja figyelmbe venni a [type=text] típusú szelektort.

Csinosításunk eredményét már meg is csodálhatjuk.

Keresés:

Variációk egy témára

Gondoltam jobban nézne ki, ha az inputunk háttere inkább áttetsző lenne mint átlátszó. Ehhez fogtam az eredeti háttérként szolgáló képemet (input-bg-lepke-100.jpg) és 40%-osan átlátszóvá tettem. Elmentetten input-bg-lepke-60.jpg néven és a css-ben kicseréltem a háttérképre való hivatkozást erre.

Keresés:

Készítettem egy másik verziót is. Ebben az inputom lekerekítettnek néz ki. Ehhez az előbbi átlátszóssá tevő módszert annyiban módosítottam, hogy nem a teljes téglalapot halványítottam el, hanem csak azon belül egy lekerekített sarkú részt. Ez lett az input-bg-lepke-kerek.jpg. Persze itt az input mezőmnek a css-ben be kellett állítani egy border: none; értéket.

Keresés:

Az IE a nohoveranim bugja miatt az utolsó verziót ugyan nem játsza le, de reménykedve abban, hogy az hamarosan – lehet, hogy már az Internet Explorer 123-as verziójában – kijavítják ezt a bugot, illetve bízva abban, hogy egyre növekszik azoknak a száma akik valami más programmal böngésznek, leírom ezt is.

Lehetőség van arra, hogy háttérképként egy animált gifet tegyünk be. Arra gondoltam, hogy ha ezt a hover esemény háttérképeként definiáljuk, akkor ezzel egy kis izgalmat viszünk a dologba. Készítettem egy (rettenetesen egyszerű, de a példa kedvéért elegendő) animációt és elneveztem input-bg-lepke-60-anim.gif-nek. A css fileba beillesztettem még a következő definíciót, és már készen is voltam.

#rrd input.szaz:hover{background-image:
  url('./input-bg-lepke-60-anim.gif');
  border:none;
  padding-left:20px;
  padding-top:5px;}

Keresés:

Bugok

  • Az Opera (8.5) nem veszi figyelembe az inputra vonatkozó padding értékeket, ezért Operában a beírt szöveg az input széléhez ragad
  • A hover eseményre vonatkozó animált gif-es hátteret az IE (6) egyáltalán nem játsza le
  • A Firefox (1.5 előtti verziók), Galeon (1.3.19) és a Mozzila (1.7.3) a hover eseményre vonatkozó háttérképet csak egyetlen alkalommal játsza le, ha további alkalmakkor az egérrel fölé megyünk, akkor csak ráugrik az animáció utolsó kockájára. Mivel ezek a böngészők mind a Mozzila családhoz tartoznak és a Firefox 1.5-ben ez a bug már javítva van, gondolom előbb utóbb a többiben is fog működni.

Tesztelve

  • Internet Explorer 6 (Windows)
  • Firefox 1.0.7 (Windows)
  • Firefox 1.5.0 (Windows és Linux)
  • Opera 8.5 (Windows és Linux)
  • Galeon 1.3.19 (Linux)
  • Mozzila 1.7.3 (Linux)

2 thoughts on “Css nyalánkságok 2.

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.