~>&#

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);}

Szlj hozz te is!
Nv:
E-mail cm:
Amennyiben megadod az email-cmedet, az elrhet lesz az oldalon a hozzszlsodnl.
Hozzszls:
Azrt, hogy ellenrzhessk a hozzszlsok valdisgt, krjk rd be az albbi kpen lthat szt. Ha nem tudod elolvasni, a frissts ikonra kattintva krhetsz msik kpet.
rd be a fenti szt: j CAPTCHA krse
 
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
 

Hímes tojás, nyuszipár, téged vár a Mesetár! Kukkants be hozzánk!    *****    Dryvit, hõszigetelés! Vállaljuk családi házak, nyaralók és egyéb épületek homlokzati szigetelését! 0630/583-3168    *****    Nagyon ütõs volt a Nintendo Switch 2 Direct! Elemzést a látottakról pedig itt olvashatsz!    *****    Elkészítem születési horoszkópod és ajándék 3 éves elõrejelzésed. Utána szóban minden kérdésedet megbeszéljük! Kattints    *****    Könyves oldal - egy jó könyv, elrepít bárhová - Könyves oldal    *****    20 éve jelent meg a Nintendo DS! Emlékezzünk meg ról, hisz olyan sok szép perccel ajándékozott meg minket a játékaival!    *****    Ha érdekelnek az animék,mangák,videojátékok, japán és holland nyelv és kultúra, akkor látogass el a személyes oldalamra.    *****    Dryvit, hõszigetelés! Vállaljuk családi házak, nyaralók és egyéb épületek homlokzati szigetelését! 0630/583-3168 Hívjon!    *****    Könyves oldal - Ágica Könyvtára - ahol megnézheted milyen könyveim vannak, miket olvasok, mik a terveim...    *****    Megtörtént Bûnügyekkel foglalkozó oldal - magyar és külföldi esetek.    *****    Why do all the monsters come out at night? - Rose Harbor, a város, ahol nem a természetfeletti a legfõbb titok - 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    *****    Mindig tudnod kell, melyik kiköt&#245; felé tartasz. - ROSE HARBOR, a mi városunk - FRPG    *****    Akad mindannyijukban valami közös, valami ide vezette õket, a delaware-i aprócska kikötõvárosba... - FRPG    *****    boroszkány, vérfarkas, alakváltó, démon és angyal... szavak, amik mind jelentenek valamit - csatlakozz közénk - FRPG    *****    Why do all the monsters come out at night? - Rose Harbor, a város, ahol nem a természetfeletti a legfõbb titok - FRPG    *****    why do all monsters come out at night - FRPG - Csatlakozz közénk! - Írj, és éld át a kalandokat!    *****    CRIMECASESNIGHT - Igazi Bûntényekkel foglalkozó oldal    *****    Figyelem, figyelem! A második vágányra karácsonyi mese érkezett! Mesés karácsonyt kíván mindenkinek: a Mesetáros