HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
menü MENÜ    

CSS3 stíluslapok készítése

CSS3 linkek


    A linkek segítségével navigálunk weboldalaink között, és elérhetővé teszünk külső oldalakat. Stíluslapok felhasználásából egy egyszerű kék szöveg helyett dekoratív nyomógombként jeleníthetjük meg őket.                         

Programozott tananyag:


Linkek állapottól függő megjelenítése
Változtathatjuk egy-egy hivatkozás megjelenítési formáját különböző állapotaiban.

Inline link-gombok
A szövegben elhelyezett linkeket (a elemeket) osztályba sorolva közösen formázhatjuk. Beállíthatjuk a háttérszínt, feliratszínt. Adhatunk hozzá keretet, árnyékolhatjuk és lekerekíthetjük sarkait.

Fájlformátum dinamikus jelölése
A jellemzőérték-vége kijelölő felhasználásával automatikusan a link href tuladonságában megadott fálj típusától függő képet illeszthetünk a linkfelirat elé a :before álelem vagy mögé az :after álelem segítségével.

Linkgomb háttérképekkel
Az :a:link és :a:visited álelem kijelölőhöz egy közös, plusz az :a:hover és az :a:active álelem kijelölőkhöz egy-egy külön háttérképet rendelve egyszerűen készíthetünk linkből nyomógombot.

Linkgomb nyújtható háttérképpel
A link-felirat hosszától függően változó szélességű nyomógombokra lehet szükség. Ekkor nem érdemes a képeket minden méretben elkészíteni. Csak a legnagyobb szélességhez tartozó képeket készítjük el.

CSS3 linkgomb (LinkButton) készítése
Csupán CSS3 stílusdeklarációk felhasználásával is készíthetünk egy linkből nyomógombot.

Linkbe ágyazott kép
Hasznos lehet, ha a látogató egy-egy termék képére kattintva is eljuthat a terméket bemutató oldalra.

Linkben kép és link-felirat
Ha a kép nevét is megjelenítjük, és a felhasználó akár a képre, akár a link-feliratra kattintva eljusson a linkhez tartozó oldalra, akkor az egyik lehetőség az általános tárolóelemek (div-ek) használata.