~>&#

Babablogom

 
Beszlgessnk
 
Bejelentkezs
Felhasznlnv:

Jelsz:
SgSg
Regisztrci
Elfelejtettem a jelszt
 
Eddig
Induls: 2015-04-09
 
Kdok

Kpeffektek 2.

2015.04.29. 11:34, Enma22
Ezt muszj kett szednem

Ide azon "effektek" kerlnek, melyek igazbl csak formzsok, de jl mutatnak egy-egy kpnl.

Ilyen ugye a lekerektett kp, keretes kp, sszemegy vagy nagyobb lesz a kp, s az ttetsz kp is ilyen. Taln arrl mg nem rtam.

Az alap kp marad a baba megint.

1. Lekerektett kpek:

img {

border-radius: 2em 2em 2em 2em;}

2. Keretes kpek:

Itt lehet ugye sima keret, vagy kls keret, arrl mg nem rtam, ezutn fogok.

img {

border: 3px solid #000000;}

img {

outline: 3px dotted #ededed;}

  

3. sszemegy a kp:

Itt linkknt is meg lehet oldani, vagyis egy res linknek adunk class funkcit httrrel, s egyb okossggal.

<a class="ssze"></a>
 
.ssze {
    background-image: url(//babablog.gportal.hu/portal/babablog/image/gallery/tn_1423568347_65.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-clip: border-box;
    transition: background-size 0.2s;
    -webkit-transition: background-size 0.2s;
    transition-timing-function: cubic-bezier(.07,1.41,.82,1.41);
    display: inline-block;
width: 103px; 
height: 120px;
    text-decoration: none;
    cursor: pointer;
}
 
.ssze:hover {
    background-size: 80%;
}
 
A transition az tmenetet jelent, vagyis hogy mennyi ideig tartson, amg tvlt egyik mretrl a msikra. A transition-timing-funktion a sebessgre utal, szerintem elhagyhat, nem kvnok vele foglalkozni, mivel n sem rtem 100%-osan, a ngy szm egy-egy intervallumot jelent, de sima szveggel is meg lehet adni az rtket. Nem trek ki r, nem igazn kell sehov.

A kpek mrethez a kped eredeti mreteit add meg, vagy amekkorra szeretnd, ha egy nagyobb kpet szrnl be. Ugyanis egy 400x500-as kpnek is adhatsz ms mreteket itt, mint ahogy akkor is, ha kpknt szrod be az editorral. A hover rszben elg a % is, annyival fogja sszehzni a kpet. Ugyan ez mkdik l linkekkel is, teht ha elit csert linkelsz r mondjuk. Arra figyeljetek, hogy ha vltotok CKeditor s kdnzet kztt, akkor az res link eltnik, s jra be kell rni kdnzetben, forrskd nem j, hacsak nem abban mentesz.

 

4. Nagyobb lesz a kp:

<a class="nagy"></a>

 
.nagy {
    background-image: url(//babablog.gportal.hu/portal/babablog/image/gallery/tn_1423568347_65.jpg);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-clip: border-box;
    transition: background-size 0.2s;
    -webkit-transition: background-size 0.2s;
    transition-timing-function: cubic-bezier(.07,1.41,.82,1.41);
    display: inline-block;
width: 103px; 
height: 120px;
    text-decoration: none;
    cursor: pointer;
}
 
.nagy:hover {
    background-size: 100%;
}

 

5. ssze megy a kp vagy nagyobb lesz:

Egyszer DIV kontneres megolds lesz ez:

<div class="proba">
<img src="//babablog.gportal.hu/portal/babablog/image/gallery/tn_1423568347_65.jpg" /></div>
 
<style type="text/css">
.proba img {
width: 103px;}
 
.proba img:hover {
width: 200px;}
</style>
 

6. ttetsz lesz a kp vagy fordtva:

img {

opacity: 0.7;

filter: alpha (opacity=70);}

Mg nincs hozzszls.
 
Friss
Friss bejegyzsek
2015.06.10. 11:16
2015.06.09. 18:03
2015.06.09. 17:53
2015.06.09. 13:30
2015.06.09. 12:46
2015.05.27. 15:21
2015.05.19. 16:37
2015.05.19. 15:39
2015.05.19. 15:33
2015.05.13. 10:40
Friss hozzszlsok
 

Mindig tudnod kell, melyik kikötõ felé tartasz. - ROSE HARBOR, a mi városunk - FRPG    *****    A boroszkányok gyorsan megtanulják... Minden mágia megköveteli a maga árát. De vajon mekkora lehet ez az ár? - FRPG    *****    Alkosd meg a saját karaktered, és irányítsd a sorsát! Vajon képes lenne túlélni egy ilyen titkokkal teli helyen? - FRPG    *****    why do all monsters come out at night - FRPG - Csatlakozz közénk! - Írj, és éld át a kalandokat!    *****    Aki szörnyekkel küzd, vigyázzon, nehogy belõle is szörny váljék. S ha hosszasan tekintesz egy örvénybe, az örvény vissza    *****    Rose Harbor, ahol a tenger suttog és a múlt sosem tûnik el teljesen. - FRPG - csatlakozz közénk te is :)    *****    Egy kikötõ, ahol minden hullám egy új kezdetet ígér. Rose Harbor, több mint egy város, egy világ a világ mögött.    *****    Rose Harbor &#8211; kisvárosi báj, nagy titkokkal - légy részese te is ennek a kalandnak :) - FRPG    *****    Óceán, erdõ, csillagfény &#8211; minden ösvény Rose Harborba vezet - aktív FRPG közösség    *****    Itachi Shinden 1. kötet Magyarul elérhetõ a konoha.hu -n. Nézzetek be! *** Itachi Shinden 1. kötet Magyarul elérhetõ!!!    *****    ÁGICAKÖNYVTÁRA - KÖNYVEK, KÖNYVEK, KÖNYVEK - ÁGICAKÖNYVTÁRA    *****    MOVIE-NIGHT -> Filmek, Sorozatok <- MOVIE-NIGHT    *****    Movie-    *****    Játssz a színekkel keress szebbnél szebb képeket, építs, szépítsd a portálod, hogy szebb és színesebb legyen a világod!    *****    Debrecen Huszti Lakóparki napelemes családiház eladó. 06209911123 Debrecen Huszti Lakóparki napelemes családiház eladó.    *****    Pont ITT Pont MOST! Pont NEKED! Már fejlesztés alatt is szebbnél színes szebb képek! Ha gondolod gyere less be!    *****    Kedves Csokoládé kedvelõk! Segítségeteket kérném a kérdõívem kitöltéséhez! Témája a CSOKOLÁDÉ MÁRKÁK! Köszön    *****    Homlokzati hõszigetelés! Vállaljuk családi házak, lakások, nyaralók és egyéb épületek homlokzati hõszigetelését!    *****    * Beugrós munkavállalók éjjel-nappal. * Beugrós munkavállalók éjjel-nappal. * Beugrós munkavállalók éjjel-nappal. *    *****    Elindult a Játék határok nélkül rajongói oldal! Ha te is szeretted a '90-es évek népszerû mûsorát, nézz be ide!