A következő címkéjű bejegyzések mutatása: kép effekt. Összes bejegyzés megjelenítése
A következő címkéjű bejegyzések mutatása: kép effekt. Összes bejegyzés megjelenítése

2015. február 11.

Kép effekt - Hogyan?

Sziasztok! :)

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ő:

<style type="text/css"></style>

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.

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! :)


2015. február 7.

Kép effekt kódok

Sziasztok! :)

Hoztam nektek néhány (6) darab kép effekt kódot így estére. Remélem, hasznát veszitek majd! :)

(Csak a CSS kódot írtam meg.)

Pöttyös keret a képnek:

border: 1px dotted #000000;
background-color: #64afc5;
padding: 6px;
Szaggatott keret a képnek: 

border: 1px dashed #000000;
background-color: #fbceb1;
padding: 6px;
Sima keret a képnek:

border: 1px solid #000000;
background-color: #fbceb1;
padding: 6px;
Árnyék a képnek:
box-shadow: -6px -6px 10px #b0b0b0;
-webkit-box-shadow: -6px -6px 10px #b0b0b0;
-moz-box-shadow: -6px -6px 10px #b0b0b0;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#561A0B, offX=-6, offY=-6, positive=true);
Dupla keret a képnek 1.:

a:hover img {
border: 5px double #000000;
}
Dupla keret a képnek 2.: 

a:link img, a:visited img {
background-color: #fbceb1;
padding: 10px;
border: 10px solid #D93033;
}
a:hover img {
ha ráviszed az egeret kódrész jön ide
}