2014. szeptember 15., hétfő

Kép megfordul,és szöveg lesz mögötte

Nos,ismét hoztam egy HTML kódot!Ha értetek a HTML kódokhoz,könnyen ki is tudjátok cserélni a képet(nekem most nincs rajta),amit a "CÍM" résznél találtok.Ide nem csak szöveget írhattok,hanem a Cboxotok HTML-jét is beilleszthetitek,és amikor megfordul...woálá!Meg is van a chat!Szerintem ez egy nagyon hasznos kód,de ha nem is szeretnétek használni,próbáljátok ki,mert szerintem tetszeni fog!
Nos,nem is húzom tovább a magyaráznivalóm,íme a kinézete,és kódja!



CÍM
Üdvözöllek a blogon!Ha van akármilyen kérdésed,bátran fordulj hozzánk! Xoxo, WBD TEAM





És a kód:



<br /><center><link href="LINK" rel="stylesheet" type="text/css" /><style type="text/css">

.aflipper { -webkit-perspective:1000; -moz-perspective:1000; -o-perspective:1000; perspective:1000; width:220px; height:340px; } .aflipswitch { -webkit-transition:all 2s ease-in-out; -moz-transition:all 2s ease-in-out; -o-transition:all 2s ease-in-out; transition:all 2s ease-in-out; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -o-transform-style:preserve-3d; transform-style:preserve-3d; width:220px; height:340px; }

.aflipper:hover .aflipswitch { -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -o-transform:rotateY(180deg); transform:rotateY(180deg); } .afront { overflow:hidden; -webkit-transition:all 2s ease-in-out; -moz-transition:all 2s ease-in-out; -o-transition all 2s ease-in-out; transition:all 2s ease-in-out; -moz-backface-visibility:hidden; -webkit-backface-visibility:hidden; -o-backface-visibility:hidden; backface-visibility:hidden; position:absolute; }

.aback { overflow:hidden; -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -o-transform:rotateY(180deg); transform:rotateY(180deg); opacity:0; -webkit-transition:all 2s ease-in-out; -moz-transition:all 2s ease-in-out; -o-transition:all 2s ease-in-out; transition:all 2s ease-in-out; -moz-backface-visibility:hidden; -webkit-backface-visibility:hidden; -o-backface-visibility:hidden; backface-visibility:hidden; position:absolute; width:200px; height:320px; padding:10px; background-color:#átforduló szín; }

.aflipper:hover .aback { -webkit-transition:all 2s ease-in-out; -moz-transition:all 2s ease-in-out; -o-transition:all 2s ease-in-out; transition:all 2s ease-in-out; opacity:1; background-color:#Háttér; }

.adetails { width:170px; height:33px; background-color:transparent; text-align:center; display:table-cell; vertical-align:middle; color:# 87af8e; font-family:Wire One,sans-serif; font-size:25px; letter-spacing:1; line-height:100%; text-transform:uppercase; border-top:1px solid #00BECA; border-bottom:1px solid # 00beca; }

.aapp { width:240px; height:325px; text-align:justify; font-family:calibri; font-size:11px; color:#030813; line-height:95%; padding:5px; letter-spacing:0; word-spacing:0; overflow:auto; }

.aplayer { width:200px; height:30px; background-color:#transparent; text-align:center; display:table-cell; vertical-align:middle; color:#00BECA; font-family:Wire One,sans-serif; font-size:25px; letter-spacing:1; line-height:100%; text-transform:uppercase; }

.ascrolls ::-webkit-scrollbar { width:5px; } .ascrolls ::-webkit-scrollbar-track { background-color:; } .ascrolls ::-webkit-scrollbar-thumb { background-color:#transparent; }

</style><div style="width:220px; height:340px; border:10px inset #transparent;" class="ascrolls"><div class="aflipper"><div class="aflipswitch">

<div class="afront"><div style="background-image:url(HÁTTÉR LINK); width:200px; height:320px; border:10px solid #keretszin;">
<div style="width:180px; padding:150px 0px 0px 0px;"><div style="padding:3px; background-color:#címhátter; border:2px solid #transparent; text-align:center; color:#transparent; font-family: Lucida Calligraphyfont-size:30px; letter-spacing:1; line-height:100%; text-transform:uppercase; font-weight:; text-shadow:1px 1px 2px#6F7073; margin-top: 90px;">
CÍM</div></div></div></div>
<div class="aback">

<div style="height:5px;">
<center>SZÖVEG VAGY CBOX HTML HELYE</center></div></div></div></div></div></center>
</center>
<div style="height:5px;"></div>


<br />

Remélem hasznát veszitek!
Big Kiss:





Nincsenek megjegyzések:

Megjegyzés küldése