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.

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.

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.

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.

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;}

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)