Nos, újra itt vagyok pár nap kihagyás után. Ez nem volt szándékos, csupán úgy jött. Ebből próbálok majd minél többet készíteni, de magamból kiindulva még jó pár ilyen kisebb leállásra számíthattok.
Múltkor hoztam nektek néhány darab kép effektet, most pedig azt szeretném bemutatni, hogyan is kell ezeket összeállítani tulajdonképpen. Kezdjük is el!
(Aki nem látta volna az előző bejegyzésemet: ITT VAN)
A legfontosabb dolog, hogy a bejegyzésünk HTML módban legyen. Ezt itt található:
Rámész erre, majd beírod a kódot. Amit hamarosan meg is találhatsz itt, a bejegyzésben!
A kód alap felépítése nem más, mint a következő:
A két kacsacsőr közé kell majd a szöveg és a kódrészletek.
img{ ...ide jön majd a lényeg... } - Ez a sima kép.
img:hover{...ide jön majd a lényeg...} - Ez pedig amikor rávisszük az egeret.
img{ ...ide jön majd a lényeg... } - Ez a sima kép.
img:hover{...ide jön majd a lényeg...} - Ez pedig amikor rávisszük az egeret.
Néhány alap kódrészlet:
-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
Remélem érthető voltam. Persze innen már a ti döntésetek, hogy variáljátok-e a kódokat avagy sem. Lehet itten kísérletezni, de csak csínyján! Sok sikert, ki lehet hozni szép dolgokat ám! :) ;)
Nos, mára ennyi lett volna ez a bejegyzés, remélem tetszett nektek! Én Letty voltam, sziasztok! :)
Nincsenek megjegyzések:
Megjegyzés küldése