~>&ˇ#

Babablogom

 

 
Beszélgessünk
 
Bejelentkezés
Felhasználónév:

Jelszó:
SúgóSúgó
Regisztráció
Elfelejtettem a jelszót
 
Eddig
Indulás: 2015-04-09
 
Kódok

Képeffektek 2.

2015.04.29. 11:34, Enma22
Ezt muszáj ketté szednem

Ide azon "effektek" kerülnek, melyek igazából csak formázások, de jól mutatnak egy-egy képnél.

Ilyen ugye a lekerekített kép, keretes kép, összemegy vagy nagyobb lesz a kép, és az áttetsző kép is ilyen. Talán arról még nem írtam.

Az alap kép marad a baba megint.

1. Lekerekített képek:

img {

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

2. Keretes képek:

Itt lehet ugye sima keret, vagy külső keret, arról még nem írtam, ezután fogok.

img {

border: 3px solid #000000;}

img {

outline: 3px dotted #ededed;}

  

3. Összemegy a kép:

Itt linkként is meg lehet oldani, vagyis egy üres linknek adunk class funkciót háttérrel, és egyéb okossággal.

<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, amíg átvált egyik méretről a másikra. A transition-timing-funktion a sebességre utal, szerintem elhagyható, nem kívánok vele foglalkozni, mivel én sem értem 100%-osan, a négy szám egy-egy intervallumot jelent, de sima szöveggel is meg lehet adni az értéket. Nem térek ki rá, nem igazán kell sehová.

A képek méretéhez a képed eredeti méreteit add meg, vagy amekkorára szeretnéd, ha egy nagyobb képet szúrnál be. Ugyanis egy 400x500-as képnek is adhatsz más méreteket itt, mint ahogy akkor is, ha képként szúrod be az editorral. A hover részben elég a % is, annyival fogja összehúzni a képet. Ugyan ez működik élő linkekkel is, tehát ha elit cserét linkelsz rá mondjuk. Arra figyeljetek, hogy ha váltotok CKeditor és kódnézet között, akkor az üres link eltűnik, és újra be kell írni kódnézetben, forráskód nem jó, hacsak nem abban mentesz.

 

4. Nagyobb lesz a kép:

<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 kép vagy nagyobb lesz:

Egyszerű DIV konténeres megoldás 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 kép vagy fordítva:

img {

opacity: 0.7;

filter: alpha (opacity=70);}

Szólj hozzá te is!
Név:
E-mail cím:
Amennyiben megadod az email-címedet, az elérhető lesz az oldalon a hozzászólásodnál.
Hozzászólás:
Azért, hogy ellenőrízhessük a hozzászólások valódiságát, kérjük írd be az alábbi képen látható szót. Ha nem tudod elolvasni, a frissítés ikonra kattintva kérhetsz másik képet.
Írd be a fenti szót: új CAPTCHA kérése
 
Még nincs hozzászólás.
 
Friss
Friss bejegyzések
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 hozzászólások
 

Nyakunkon a Karácsony, ajándékozz születési horoszkópot barátaidnak, ismerõseidnek.Nagyon szép ajándék! Várlak, kattints    *****    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!    *****    A legfrissebb hírek a Super Mario világából és a legteljesebb adatbázis a Mario játékokról.Folyamatosan bõvülõ tartalom.    *****    Gigágá! Márton napján is gyertek a Mesetárba! Nemcsak libát, de kacsát is kaptok! Játsszatok velünk!    *****    A Nintendo a Nintendo Music-kal megint valami kiváló dolgot hozott létre! Alaposan nagyító alá vettem, az eredmény itt.    *****    Leanderek, Parfümök, Olajok, és Szépségápolási termékek! Használd a LEVI10 kupont és kapj 10% kedvezményt!Megnyitottunk    *****    Megjelent a Nintendo saját gyártású órája, a Nintendo Sound Clock Alarmo! Ha kíváncsi vagy, mit tud, itt olvashatsz róla    *****    Megnyílt a webáruházunk! Parfümök, Szépségápolási termékek, Olajok mind egy helyen! Nyitási akciók, siess mert limitált!    *****    Az általam legjobbnak vélt sportanimék listája itt olvasható. Top 10 Sportanime az Anime Odyssey-n!    *****    Pont ITT Pont MOST! Pont NEKED! Már fejlesztés alatt is szebbnél szebb képek! Ha gondolod gyere less be!    *****    Megnyílt a webáruházunk! NYITÁSI AKCIÓK! Tusfürdõ+Fogkrém+Sampon+Izzadásgátló+multifunkcionális balzsam most csak 4.490!    *****    Új mese a Mesetárban! Téged is vár, gyere bátran!    *****    Veterán anime rajongók egyik kedvence a Vadmacska kommandó. Retrospektív cikket olvashatsz róla az Anime Odyssey blogban    *****    Parfümök, Olajok, Párologtatók mind egy weboldalon! Siess mert nyitási AKCIÓNK nem sokáig tart! Nagy kedvezmények várnak    *****    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!    *****    Aki érdeklõdik a horoszkópja után, az nem kíváncsi, hanem intelligens. Rendeld meg most és én segítek az értelmezésben!    *****    A Múzsa, egy gruppi élményei a színfalak mögött + napi agymenések és bölcseletek    *****    KARATE OKTATÁS *** kicsiknek és nagyoknak *** Budapest I. II. XII.kerületekben +36 70 779-55-77    *****    Augusztus 26-án Kutyák Világnapja! Gyertek a Mesetárba, és ünnepeljétek kutyás színezõkkel! Vau-vau!    *****    A horoszkóp elemzésed utáni érdeklõdés, nem kíváncsiság hanem intelligencia. Rendeld meg és nem fogod megbánni. Katt!!!