2014. március 15.

Képeffetek

A következőkben leírok pár dolgot a képek díszítéséről, így a továbbiakban mindenki magának állíthatja össze amit akar. De az egyszerűség kedvéért van pár elkészített is a bejegyzés végén :) A képeknél is gyakorlatilag ugyanaz a helyzet mint a linkeknél.  Nyissatok meg egy html/javascriptet, majd ezt illesszétek be. 
  <style type="text/css"> ...ide írd ami kell... </style>

A pontok közé fognak jönni a különböző elemek.
img{ ...ide jön majd a lényeg... } --- ez az alap kép
img:hover{...ide jön majd a lényeg...} --- ez pedig mikor rávisszük a képre az egeret.


Na és itt jön az a bizonyos "lényeg"  a pontok közé számtalan dolgot írhatunk keret, lekerekítettség, átlátszóság...

-moz-border-radius: 20em; --- ettől lesz lekerekített a kép
-webkit-border-radius: 20em; --- ettől lesz lekerekített a kép

box-shadow: 3px 3px 10px #555;--- ez ad a képnek árnyékot
-webkit-box-shadow: 3px 3px 10px #555; --- ez ad a képnek árnyékot

-moz-box-shadow: 3px 3px 10px #555;--- ez ad a képnek árnyékot

border: 1px solid #555; --- ez ad a képnek a keretet

border: 1px dashed #555; --- ez ad a képnek szaggatott keretet

border: 1px dotted #555; --- ez ad a képnek pöttyös keretet 

Innentől kezdve nincs más dolgotok mint variálni az elemeket... persze szín és minden egyéb átírható.


És itt van néhány alap kód, kérlek ne tedd ki őket sajátodként más design blogra :)

A kép elhalványodik, ha ráviszed az egeret:


A kép szélei lekerekítettek lesznek:


Árnyék a képnek:


A kép eltűnik ha ráviszed az egeret:


Képnek szaggatott kerete lesz:


A kép szélei lekerekítettek lesznek, ha ráviszed az egeret:

30 megjegyzés:

  1. Vittem az elsőt
    http://fizzytomlinson.blogspot.hu/

    VálaszTörlés
  2. Szia, vittem az elsőt és az utolsót! :)

    VálaszTörlés
  3. Üdv,vittem az elsőt,köszönöm ^^

    VálaszTörlés
  4. Szia!Azt szeretném megkérdezni, hogy van-e olyan, hogy a kép megdől, ha rá viszed az egeret?

    VálaszTörlés
  5. Vittem az elsőt és a 3.kat:)

    VálaszTörlés
  6. Ezt a megjegyzést eltávolította a szerző.

    VálaszTörlés
  7. Szia :) Vittem a kép árnyékosat és egy kurzort is. Köszi szépen. Fantasztikusak :)

    VálaszTörlés
  8. Szia, vittem az elsőt, köszönöm szépen!

    VálaszTörlés
  9. Az elsőt elvittem, köszönöm szépem! :) Meg vagy jelölve forráskén! ;) :)

    VálaszTörlés
  10. Az elsőt vittem és forrásként megemlítettem a blogod! :) Köszönöm! :)

    VálaszTörlés
  11. Megtudná valaki mondani, hogy a képet hova kell beilleszteni a kódba, hogy működjön? :) és milyen formában, köszönöm :)

    VálaszTörlés
  12. Ezt a megjegyzést eltávolította a szerző.

    VálaszTörlés
  13. Szia! Vittem a 3.-at, viszont alakítottam rajta. Köszi! :)

    VálaszTörlés
  14. Szia! :) Az elsőt vittem! Köszönöm! :)

    VálaszTörlés
  15. Ezt a megjegyzést eltávolította a szerző.

    VálaszTörlés
  16. Szia! :) Vittem az utolsót! :) Köszönöm! :)

    VálaszTörlés
  17. Hali! Vittem az elsőt és az utolsót!:) Köszi!

    VálaszTörlés
  18. Annyeong!
    Vittem az első kódot, köszönöm szépen! :)
    ~Chu ♥

    VálaszTörlés
  19. Szia! :) Elvittem az elsőt, köszi! :)

    VálaszTörlés