Ebben a bemutatóban szeretném megmutatni, hogyan tudsz feldíszíteni egy egyszerű kereső űrlapot. Nem csinálunk semmi őrültséget, ehelyett négy különböző módon tárunk fel arra, hogy hogyan tudod feldobni a keresőmezőt a CSS átmenetek segítségével.

Már rendelkezel egy alap keresődobozzal

A HTML fájlodban létre kell hoznod egy keresőmezőt az elkezdéshez. Ha vetsz egy pillantást az alábbi kódra, négy különböző dolgot fogsz észrevenni: egy .box divet, egy .container-1 divet, egy .icon-t és magát a keresőmezőt.

<div class="box">
  <div class="container-1">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="Search..." />
  </div>
</div>

Mind a négy példánkban van egy keresődoboz – természetesen –, valamint egy nagyító ikon. Mind a négy példánk egy konténeren belül lesz, így függetlenül tudjuk manipulálni a keresőmezőt. Végül a box div a felelős a konténer középen tartásáért.

Font Awesome hozzáadása

A Font Awesome egy ikonkönyvtár. Többet is megtudhatsz a projektről a Font Awesome saját weboldalán.

<i class="fa fa-search"></i>

A fenti kódrészlet egy példa arra, hogyan tudsz egy ikont belevenni a kódodba. Ugyanakkor annak érdekében, hogy az ikon megjelenjen, be kell linkelned a Font Awesome könyvtárat, ahogy az az alábbi kódrészletben látható. Ezt a linket vedd bele a dokumentumod fejrészébe.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Alapvető stilizálás

Most néhány stílust fogunk hozzáadni egy különálló stíluslapon (amit szintén be kell linkelned a dokumentum fejrészébe).

body{
  background: #343d46;
}

.box{
  margin: 100px auto;
  width: 300px;
  height: 50px;
}

A fenti CSS kódrészletben hozzáadtunk néhány alap stílust az oldalhoz. A keresődoboz stílusa navy színű lesz, így a body háttere nem lesz vakító fehér. A box osztály is az oldal közepére van igazítva a bemutató kedvéért.

Keresődoboz díszítése

Ez a bemutató arról szól, hogy megtanuld, hogyan tudod feldíszíteni a keresődobozokat. Ebben az első példában részletesen elmagyarázom, mi fog történni; azt szeretném, hogy tudd, pontosan mit is csinálunk. A többi három példában egyszerűen csak megmutatom, hogyan tudsz különféle átmeneteket elérni.

#1. Háttér halványítása

Az első példánkban azzal fogunk foglalkozni, hogy hogyan változtassuk meg a keresőmező hátterét, ha rávisszük az egeret. Átmenetet is adunk hozzá, így az átmenet nem lesz olyan hirtelen történő.

A HTML

Már láttad az alap HTML-ünket. Ez a kódrészlet ugyanaz lesz mindegyik példában.

<div class="box">
  <div class="container-1">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="Search..." />
  </div>
</div>

A CSS

A stilizálás érdekében meg kell határozni magának a keresődoboznak a CSS stílusát. Adjuk hozzá egyesével a különböző CSS szabályokat, hogy tudjuk, pontosan mi is történik.

.container-1{
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}

Először a container osztályt szeretnénk stilizálni. A legfontosabb tulajdonság vitathatatlanul a position: relative. Ez direkt azért van benne, hogy az ikon a beviteli mező elejére kerüljön, ahogy azt hamarosan látni is fogod.

.container-1 input#search{
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #63717f;
  padding-left: 45px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Bevitel

Ezután a tényleges beviteli mezőt szeretnénk stílussal ellátni. Ezen felül minden pusztán esztétikai céllal van, mivel a szegély sugara és a háttérszín nincs hatással a beviteli funkciókra. Vedd észre a bal oldali térköz tulajdonságot. Ez azért van ott, hogy helyet csináljunk az ikonnak, mert így az nem a szövegre fog kerülni a beviteli mezőben.

Alább négy különféle szabályunk van, ami átszínezi a helyőrző szöveget, ami a mi példánkban a Search. A szabályokat sajnos külön kell választani egyedi prefixekkel, és nem határozhatóak meg shorthand szabályokkal. Ez egy kicsit idegesítő, és látni fogod, hogy meg kell ismételni mindegyik példában!

.container-1 input#search::-webkit-input-placeholder {
   color: #65737e;
}

.container-1 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}

.container-1 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}

.container-1 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

Ikon

Végül az ikont fogjuk stilizálni. A legfontosabb, hogy a helyzetét a beviteli mező elejére állítsuk a position: absolute-tal. A margók segítenek pozicionálni az ikont úgy, hogy a felső pozícióját 50%-ra állítjuk.

.container-1 .icon{
  position: absolute;
  top: 50%;
  margin-left: 17px;
  margin-top: 17px;
  z-index: 1;
  color: #4f5b66;
}

Hover effektus hozzáadása

Az ezt követő szabályokkal létrehozzuk, hogy mi történjen akkor, amikor a keresődobozra visszük az egeret. Ebben a példánkban csak a háttérszínt szeretnénk megváltoztatni. Annak érdekében, hogy megszabaduljunk a sárga vagy kék ragyogástól a beviteli mező körül (amit néha a böngészők hozzáadnak), állítsuk be az outline: none-t.

.container-1 input#search:hover, .container-1 input#search:focus, .container-1 input#search:active{
    outline:none;
    background: #ffffff;
  }

Ahogy azt a fenti kódrészletben láthatod, két további állapotot – focus és active – adtunk még hozzá. Ily módon a hatás nem tűnik el, ha már nincs az egér a beviteli mező fölött. Ami még fontosabb, hogy az effektus is észrevehető, amikor a beviteli mező használatban van.

Az áttűnés létrehozása

Annak érdekében, hogy az áttűnés megtörténjen, hozzá kell adnunk pár sor kódot. Menjünk vissza a szabályra, ahol a beviteli mező stílusát meghatároztuk – .container-1 input#search. A zárójel elé adjuk hozzá a következő kódrészletet:

  -webkit-transition: background .55s ease;
  -moz-transition: background .55s ease;
  -ms-transition: background .55s ease;
  -o-transition: background .55s ease;
  transition: background .55s ease;

Shorthanddel könnyen meg lehetne határozni az átmenet tulajdonságait, de ehelyett a három paramétert külön-külön kell megadni. Először is azt mondjuk meg neki, hogy az átmenetnek csak a háttér tulajdonságot kell érintenie. Ezután azt adjuk meg, hogy az átmenet alig tartson tovább fél másodpercnél. Végül meghatározzuk, hogy az átmenet effektus fokozatos legyen. Nem az ease az egyetlen hatás, ami itt használható, lehet helyette például linear vagy ease-in is. Egyszerűen csak egy kicsit másképp fog kinézni. Próbáld ki őket te magad, hogy lásd, melyik tetszik jobban.

A beviteli mező stílusának most valahogy úgy kellene kinéznie, mint a lenti kód.

.container-1 input#search{
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #262626;
  padding-left: 45px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

  
    -webkit-transition: background .55s ease;
  -moz-transition: background .55s ease;
  -ms-transition: background .55s ease;
  -o-transition: background .55s ease;
  transition: background .55s ease;
}

Hogyan működik a CSS átmenet?

Ha nem ismered a CSS átmeneteket, hadd adjak egy rövid áttekintést. Először is az átmenet működéséhez a tulajdonságot alapállapotban kell definiálni, nem pedig hover, active vagy focus módban.

A CSS átmenetek lehetővé teszik a fokozatosan változó effektusokat, és megadhatod a vezérelendő paramétereket, mint például hogy mely tulajdonságra legyen hatással, mennyi legyen az átmenet időtartama és milyen fajta átmenet legyen. Egy elemnek több átmenete is lehet. De ami a legfontosabb, hogy mindig tartalmazniuk kell a prefixeket annak érdekében, hogy a különböző böngészőkön működjön, mivel ennek a tulajdonságnak a támogatása még nem általános.

További információkért nézd meg ezt: CSS3 átmenetek és átalakítások a kezdetektől

#2. Beviteli mező kiterjesztése hoverrel

Ebben a példában a keresés csak egy nagyító ikonként kezdődik. Amikor az ikonra viszed az egeret, akkor a keresőmező megnyúlik és utána begépelheted a kérésedet. A példa kódjának nagy része nagyon hasonló lesz az előző példához.

A HTML

<div class="box">
  <div class="container-2">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="Search..." />
  </div>
</div>

A CSS

.container-2{
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}

A beviteli mező stilizálása ennél az átmenetnél eltérő. A beviteli mező jelentősen kisebb, így az ikon egy négyzet mögött tud megjelenni. A többi tulajdonság, mint például a háttér- vagy a betűszín marad ugyanaz, mivel nem akarjuk teljesen megváltoztatni a keresés stílusát.

.container-2 input#search{
  width: 50px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #262626;
  padding-left: 35px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #fff;

  -webkit-transition: width .55s ease;
  -moz-transition: width .55s ease;
  -ms-transition: width .55s ease;
  -o-transition: width .55s ease;
  transition: width .55s ease;
}

Ahogy láthatod, az átmenet tulajdonságát is újradefiniáltuk, hogy csak a szélességre legyen hatással. Az időt ugyanannyira állítottam, mert ez elég gyors ahhoz, hogy ne idegesítse a felhasználókat, de mégis elég hosszú ahhoz, hogy egy szép effektust hozzon létre.

Alább található a kód a helymegőrző szöveg átszínezésére.

.container-2 input#search::-webkit-input-placeholder {
   color: #65737e;
}

.container-2 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}

.container-2 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}

.container-2 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

És ismét itt az ikonunk a CSS stílussal. Ennek ugyanolyannak kell lennie, mint az előző példában.

.container-2 .icon{
  position: absolute;
  top: 50%;
  margin-left: 17px;
  margin-top: 17px;
  z-index: 1;
  color: #4f5b66;
}

A Hover effektus hozzáadása

A legutolsó dolog, amit meg kell tennünk, hogy meghatározzuk, hogyan nézzen ki a keresés, amikor rávisszük az egeret. Az alábbi kódrészletben az első szabály gondoskodik róla, hogy az űrlapnak ne legyen a böngésző által megadott ragyogása, és amikor a beviteli mezőt használod – amikor gépelsz bele – a keresőmező megnyújtott marad. A középső szabály megnyújtja a beviteli mezőt a teljes szélességére, amikor rávisszük az egeret.

.container-2 input#search:focus, .container-2 input#search:active{
  outline:none;
  width: 300px;
}

.container-2:hover input#search{
width: 300px;
}

.container-2:hover .icon{
  color: #93a2ad;
}

Az utolsó dolog, ami a fenti kódban történik az, hogy amikor rávisszük az egeret, az ikon színt változtat. Ez csak egy apró részlet, ami gyorsan megmutatja egy felhasználónak, hogy a keresődoboz aktív és működik, és nem pedig csak egy sima beviteli mező. A változtatást nem az átmenet végzi.

#3. Ikonméret növelése az egér rávitelekor

A négy példa közül ez a legkifinomultabb, a kódot és a vizuális hatást tekintve. Ebben az esetben a nagyító ikon enyhén megmozdul és megnő a mérete.

A HTML

Az ikon és a keresődoboz HTML kódja ismét ugyanaz, mint az előző két példában. A kivétel természetesen az, hogy itt .container-3 van.

<div class="box">
  <div class="container-3">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="Search..." />
  </div>
</div>

A CSS

Ennek a példának a CSS-ében nincs semmi speciális. Legnagyobb részében nagyon hasonlóan kezdődik, mint az első példa, ahol az alapértelmezett állapot semmiben sem különbözik. Alább található a container és a beviteli mező kódja. Figyeld meg, hogy most nincs átmenet az input mezőn.

.container-3{
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}

.container-3 input#search{
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #262626;
  padding-left: 45px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
}

Ismét megvannak a helymegőrzők szabályai.

.container-3 input#search::-webkit-input-placeholder {
   color: #65737e;
}

.container-3 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}

.container-3 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}

.container-3 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

Most kinézetre ennek a példának az ikonja is ugyanaz. Ugyanaz a szín, ugyanaz a pozíció és így tovább. Ugyanakkor hozzáadtam egy átmenetet. Ezek az átmenetek minden tulajdonságra vonatkoznak, ami leegyszerűsíti a dolgot, mert így nem kell őket egyesével megadni.

.container-3 .icon{
  position: absolute;
  top: 50%;
  margin-left: 17px;
  margin-top: 17px;
  z-index: 1;
  color: #4f5b66;

   -webkit-transition: all .55s ease;
  -moz-transition: all .55s ease;
  -ms-transition: all .55s ease;
  -o-transition: all .55s ease;
  transition: all .55s ease;
}

A Hover effektus hozzáadása

.container-3 input#search:focus, .container-3 input#search:active{
    outline:none; 
}

.container-3:hover .icon{
  margin-top: 16px;
  color: #93a2ad;

  -webkit-transform:scale(1.5); /* Safari and Chrome */
  -moz-transform:scale(1.5); /* Firefox */
  -ms-transform:scale(1.5); /* IE 9 */
  -o-transform:scale(1.5); /* Opera */
   transform:scale(1.5);
  }

Jó néhány dolog történik a fenti kódban. Először is megváltoztatjuk az ikon színét, ha rávisszük az egeret, és egy kicsit magasabbra mozgatjuk, ezért függőlegesen középre kell igazítani, amikor nagyobbá válik. Másodszor hozzáadunk egy transzformációt az ikon elemhez az egér rávitelekor, így valójában az eredeti méret másfélszeresére fog nőni. Mivel az előzőleg definiált átmenet úgy lett megadva, hogy minden tulajdonságra hatással legyen, úgy fog tűnni, mintha az ikon mérete nőne meg az egér rávitelekor.

Ismét csak azt tudom mondani, hogy vess egy pillantást a CSS3 átmenetek és átalakítások a kezdetektől-re, hogy többet megtudj a transformation tulajdonságról.

#4. Hover gomb

Az előző három példától eltérően ez sokkal bonyolultabb lesz. Az egér rávitelekor egy gomb fog becsúszni a beviteli mezőbe, hogy lehetővé tegye a folytatást – mintha egy Küldés vagy Tovább gomb lenne. A gombban egy nagyító ikon lesz.

A HTML

<div class="box">
  <div class="container-4">
    <input type="search" id="search" placeholder="Search..." />
    <button class="icon"><i class="fa fa-search"></i></button>
  </div>
</div>

Itt a HTML egy kicsit különbözik. A beviteli mező természetesen továbbra is itt van, de az ikon most egy button elembe került, ami a beviteli mező után következik. Fontos, hogy a button a beviteli mező után legyen, mivel függ attól az effektustól, amit CSS-ben fogunk elkészíteni.

A CSS

Ebben a példában a CSS különböző, így figyelj rá! Lentebb látható a konténert stilizáló kódrészlet. Először is a position: relative hiányzik; már nem fontos, mivel az ikonnak nem kell a beviteli mező elején lennie. Ugyanakkor van egy overflow: hiddenünk. Ez gondoskodik róla, hogy a gomb ne jelenjen meg, amikor nem visszük rá az egeret. Technikailag a megjelenő gomb a beviteli mező jobb oldalán van, de az overflow:hidden-nek köszönhetően nem látszik, amikor a konténer szélességén túl nyúlik – a konténer és a beviteli mező ugyanolyan széles.

.container-4{
  overflow: hidden;
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
}

A beviteli mezőnek nincs átmenete, mivel ezúttal nem ezt az elemet érinti.

.container-4 input#search{
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #fff;
  padding-left: 15px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Ezt követi a helymegőrző átszínezésének kódrészlete.

.container-4 input#search::-webkit-input-placeholder {
   color: #65737e;
}

.container-4 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}

.container-4 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}

.container-4 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

Lent található a gomb stílusának kódja, ami akkor lép életbe, ha rávisszük az egeret. A trükk az, hogy becsússzon oldalról a helyére a beviteli mező mögé, és hogy láthatatlanná váljon ha nincs fölötte az egér. A button az az elem, ami megváltozik – mozog –, ezért erre kell az átmenetet meghatározni. A dolgok leegyszerűsítése végett azonosítóval láttam el az átmenetet, hogy minden tulajdonságra hasson.

.container-4 button.icon{
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;

  border: none;
  background: #232833;
  height: 50px;
  width: 50px;
  color: #4f5b66;
  opacity: 0;
  font-size: 10pt;

  -webkit-transition: all .55s ease;
  -moz-transition: all .55s ease;
  -ms-transition: all .55s ease;
  -o-transition: all .55s ease;
  transition: all .55s ease;
}

A Hover effektus hozzáadása

A gomb elhalványítása érdekében a beviteli mező elejére kell azt mozgatni. Ezt a negatív margóval lehet megtenni. Előzőleg a gomb átlátszóságát 0-ra állítottuk, így vissza kell tenni 1-re annak érdekében, hogy a gomb is látszódjon.

Az utolsó szabály csak a gomb hátterét változtatja meg, ha ráviszed az egeret. Hasznos tudatni egy felhasználóval, hogy a gomb aktív és rákattinthat a keresés elküldéséhez; nincs értelme egy inaktív gombnak csak úgy ott lennie.

.container-4:hover button.icon, .container-4:active button.icon, .container-4:focus button.icon{
    outline: none;
    opacity: 1;
    margin-left: -50px;
  }

  .container-4:hover button.icon:hover{
    background: white;
  }

Konklúzió

Nos, végére értünk a CSS kísérleteinknek! Fogtunk egy alap keresési űrlapot és kisebb effektusokkal megváltoztattuk a viselkedését. Te milyen hasonló változtatásokat javasolnál egy keresőmezőhöz? A CSS átmenetek vagy átalakítások milyen más aspektusait alkalmaznád rá? Tudasd velünk a hozzászólásokban!