Sziasztok! Mivel, már régen voltak ilyen kódos valamik, ezért most hoztam nektek párat. Ezeket különböző helyekről szedtem le. Ha mondjuk, valakinek a forrását nem írtam ki, az írjon!
(Bocsi, hogy képek nincsenek!)
A kép mögött megjelenő szövegdoboz
<style type="text/css">
.ch-item {width: 100%;height: 100%;border-radius: 50%;position: relative;box-shadow: 0 1px 2px rgba(0,0,0,0.1);
cursor: default;}
.ch-info-wrap{
position: absolute;
width: 280px;
height: 280px;
border-radius: 50%;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
top: 20px;
left: 20px;
background: #ccc;
box-shadow:
0 0 0 20px rgba(255,255,255,0.2),
inset 0 0 3px rgba(115,114, 23, 0.8);}
.ch-info{
position: absolute;
width: 280px;
height: 280px;
border-radius: 50%;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;}
.ch-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;}
.ch-info .ch-info-back {
-webkit-transform: rotate3d(0,1,0,180deg);
-moz-transform: rotate3d(0,1,0,180deg);
-o-transform: rotate3d(0,1,0,180deg);
-ms-transform: rotate3d(0,1,0,180deg);
transform: rotate3d(0,1,0,180deg);
background: #fff; }
.ch-img-1 { background-image: url(http://www.popularphotographybiz.com/wp-content/uploads/2014/02/vintage-photography-tumblr-themesshare-your-smile-with-everyone-t8jln1ti.jpg);background-size:510px;}
.ch-item:hover .ch-info-wrap {
box-shadow:
0 0 0 0 rgba(255,255,255,0.8),
inset 0 0 3px rgba(115,114, 23, 0.8);}
.ch-item:hover .ch-info {
-webkit-transform: rotate3d(0,1,0,-180deg);
-moz-transform: rotate3d(0,1,0,-180deg);
-o-transform: rotate3d(0,1,0,-180deg);
-ms-transform: rotate3d(0,1,0,-180deg);
transform: rotate3d(0,1,0,-180deg);}
.ch-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;}
.ch-grid:after,
.ch-item:before {
content: '';
display: table;}
.ch-grid:after {
clear: both;}
.ch-grid li {
width: 320px;
height: 320px;
display: inline-block;
margin: 20px;}
</style>
<br />
<center>
<ul class="ch-grid">
<li><div class="ch-item ch-img-1">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1">
</div>
<div class="ch-info-back">
<br />
<br />
Üdvözöllek a kawaii blog design oldalán!<br />
Remélem kedvedet leled az oldalamban, és hasznos lesz számodra az itt található tartalom. <br />
Érezd jól magad és ha kérdésed lenne bátran fordulj hozzám! <br />
xoxo Crystal
<br />
<a href="http://link.com/" target="_blank">Linket </a> is elhelyezhetsz, ha szeretnél.
</div>
</div>
</div>
</div>
</li>
</ul>
</center>
------------------------------------------------------------------------------------------------------------
<style type="text/css">
.cg-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.cg-info-wrap,
.cg-info{
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
}
.cg-info-wrap {
top: 20px;
left: 20px;
background: #fff;
box-shadow:
0 0 0 20px rgba(255,255,255,0.2),
inset 0 0 3px rgba(115,114, 23, 0.8);
}
.cg-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
-webkit-backface-visibility: hidden; /*Just for webkit to have a smooth font*/
}
.cg-info .cg-info-front {
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.cg-info .cg-info-back {
opacity: 0;
background: #f1d5cd;
pointer-events: none;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: all 0.4s ease-in-out 0.2s;
-moz-transition: all 0.4s ease-in-out 0.2s;
-o-transition: all 0.4s ease-in-out 0.2s;
-ms-transition: all 0.4s ease-in-out 0.2s;
transition: all 0.4s ease-in-out 0.2s;
}
.cg-img-1 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9PK6Luxo48Z6_IKsA5DZ0aKCA-5oum5PVyoySiey3KK4hkE-gd_JGMLvrP2fUid7bPzGSeSBjKnHVBsqc0JSAJv5NcmCrlRu6mQ9GxUnQzRKB1W3ZfnKWBkKx1Dl4bwXZhWcNouGpv2c/s1000/tumblr_m0pdlnQJ4U1r93c7do1_500.jpg);
}
.cg-info h3 {
color: #fff;
letter-spacing: 1px;
font-size: 18px;
margin: 0 15px;
padding: 40px 0 0 0;
height: 80px;
font-family: Arial;
text-shadow:
0 0 1px #000,
0 1px 2px rgba(0,0,0,0.3);
}
.cg-info p {
color: #fff;
padding: 10px 5px 0;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.cg-info p a {
display: block;
color: #000;
font-style: normal;
font-weight: 700;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.cg-info p a:hover {
color: #fff;
}
.cg-item:hover .cg-info-front {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 0;
}
.cg-item:hover .cg-info-back {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
pointer-events: auto;
}
.cg-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.cg-grid:after,
.cg-item:before {
content: '';
display: table;
}
.cg-grid:after {
clear: both;
}
.cg-grid li {
width: 220px;
height: 220px;
display: inline-block;
margin: 20px;
}
</style>
<br />
<ul class="cg-grid">
<li>
<div class="cg-item cg-img-1">
<div class="cg-info-wrap">
<div class="cg-info">
<div class="cg-info-front cg-img-1">
</div>
<div class="cg-info-back">
<br />
<br />
<br />
<br />
Üdvözöllek a kawaii blog design oldalán!<br />
Remélem kedvedet leled az oldalamban, és hasznos lesz számodra az itt található tartalom. <br />
Érezd jól magad és ha kérdésed lenne bátran fordulj hozzám! <br />
xoxo Crystal
<br />
<a href="http://link.com/" target="_blank">Linket </a> is elhelyezhetsz, ha szeretnél.
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
------------------------------------------------------------------------------------------------------------
<center>
<img height="142" src="http://data3.whicdn.com/images/50316961/large.jpg" width="230" /><br>
<div id="ck">
<br>
Üdvözöllek a blogomon. Érezd jól magad és hagyj nyomot magad után :)
</center>
</div>
</div>
<br>
<style type="text/css">
#ck{
background:#f0eeeb;
color:#000;
width:230px;
height:142px;
margin-top:-147px;
padding-left:0.5px;
padding-right:0.5px;
padding-bottom:0.5px;
padding-top:5px;
opacity:.1;
-webkit-transition:all .5s ease-in-out;-moz-border-radius: 1em; -webkit-border-radius: 1em; }
#ck:hover{opacity:.7}
</style>
Link effekt + Hogyan kell?
A linkeket kedvünk szerint variálhatjuk. A bejegyzés végén vannak kész kódok is, de ti is összeállíthattok egyedi nektek tetsző linkeket! c: Nyissatok meg egy html/javascriptet és kezdetben ezt illesszétek be. Későbbikekben a pontok közé írjátok a többi kódot.
<script type="text/css"> .... </script>
Itt van néhány lehetőség, hogy miképp lehet megváltoztatni a szöveg kinézetét: text-shadow: 1px 1px 10px #666; -->
árnyék kerül a szöveg mögé. letter-spacing: 1px;-->
A betűk közti távolság mérete. 4px-él ne állítsd nagyobbra, mert csúnya lesz. text-transform:uppercase;---> folytonos nagybetű text-transform:lowercase; ---->
folytonos kisbetű border-bottom:#666 dotted 2px; -->
pontozott vonal lesz a szöveg alatt. border-bottom:#666 dashed 2px; --> s
zaggatott vonal lesz a szöveg alatt. border-bottom:#666 double; -->
kettős vonal lesz a szöveg alatt. font-family:verdana;-->
A szöveg betűtípusa. font-size: 10px; -->
A szöveg mérete. background-color:#666;-->
Háttér szín, itt a szöveg hátterénél lehet majd használni.
Így néz ki a link: A:link, A:visited, A:active{...}-->
Ez az alap, ezen ne változtass. A pontozott rész helyére írd majd amit szeretnél átalakítani.
Ha ráviszed az egeret: A:hover { ...}--->
A pontozott rész helyére írd amit akkor szeretnél, ha ráviszed az egeret. Tehát valahogy így kell kinéznie a végeredménynek:
<script type="text/css">
A:link, A:visited, A:active {text-shadow: 1px 1px 4px #666;}
A:hover { text-shadow: 1px 1px 10px #666;}
</script>
Árnyék lesz a link mögött.:
<script type="text/css">
A:link, A:visited, A:active {text-shadow: 0px 0px 0px #666;}
A:hover { text-shadow: 1px 1px 10px #666;}
</script>
Nagybetűs az összes link.:
<script type="text/css">
A:link, A:visited, A:active {text-transform:uppercase;}
</script>
Kis betűs linkből nagy betűs lesz, ha ráviszed az egeret.:
<script type="text/css">
A:link, A:visited, A:active {text-transform:lowercase;}
A:hover { text-transform:uppercase;}
</script>
Nagy betűs linből kis betűs lesz, ha ráviszed az egeret.:
<script type="text/css">
A:link, A:visited, A:active {text-transform:uppercase;}
A:hover {text-transform:lowercase;}
</script>
Pontozott fonal lesz a link alatt.:
<script type="text/css">
A:link, A:visited, A:active {border-bottom:#666 dotted 2px;}
A:hover { border-bottom:#666 dotted 2px;}
</script>
Pontozott vonal lesz a link alatt, ha ráviszed az egeret.:
<script type="text/css">
A:link, A:visited, A:active {border-bottom:#666 dotted 0px;}
A:hover { border-bottom:#666 dotted 2px;}
</script>
Megnő a link betűtípusa, ha ráviszed az egeret.:
<script type="text/css">
A:link, A:visited, A:active {font-size: 12px;}
A:hover { font-size: 16px;}
</script>
Forrás: Kawaii
HTML kódok: LOPÁSGÁTLÓ (SZÖVEGGEL)
<script language=JavaScript> <!--
//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com
var message="IDE ÍRD AZT, HOGYHA A JOBB KLIKKET MEGNYOMJÁK MILYEN SZÖVEG JELENJEN MEG. PL: NE LOPJ";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4; }
document.oncontextmenu=new Function("alert(message);return false")
// --> </script>
LINKEFFEKT (NYOMTATOTT BETŰ)
<style type="text/css"> a:link, a:active, a:visited {color: #000000; font-size: 8pt; text-decoration: none;} a:hover {color: #000000; font-size: 8pt; text-decoration: none; text-transform:
uppercase;}
</style>
Forrás: If you can Dream it you can do it!
Szövegdobozok:
html kód:
<center>
<div style="background: #FEFEFE; border: 10px solid #EFEFEF; padding: 10px; width: 180px;">
<div style="font: 10px/95% arial;" id="skdjhfasdfbr">
<div class="sdjfkh24jkhrv"> <img src="http://37.media.tumblr.com/abd3e88c01de56a221451966a24408bb/tumblr_n986r2DXMb1qap2x6o8_250.gif" width="180" />
</div> <div class="iurth54i3ufne">
blah blah.blah blah.blah blah. blah blah.blah blah.blah blah. blah blah.blah blah.blah blah. blah blah.blah blah.blah blah. blah blah.blah blah.blah blah. blah blah.blah blah.blah blah. blah blah.blah blah.blah blah. blah blah.blah blah.blah blah. blah blah.blah blah.blah.blah blah.blah blah.blah blah.blah blah.blah blahblah.blah blah. blah blah.blah blah.blah blah. blah blahblah.blah blah.blah blah.blah blah.blah blah.blah blahblah.blah blah.blah blah. blah blah.blah blah.blah
</div>
<div class="djkfhaksf2346"><hr /><b>Üdvözöllek a blogomon!</b></div> </div>
</div>
<a href="http://z10.invisionfree.com/CAUTIONTOTHEWIND/index.php?showuser=5382"
style="display: block; font: 6px arial; letter-spacing: 1px; line-height: 90%; text-align: right; text-
decoration: none; text-transform: uppercase; width: 180px;"></a></center>
<style type="text/css">
pwnmu { color: #a42626; font-weight: bold; }
#skdjhfasdfbr .djkfhaksf2346 { margin-top: 130px; }
#skdjhfasdfbr { height: 147px; overflow: hidden; position: relative; }
#skdjhfasdfbr .sdjfkh24jkhrv { left: 0px; position: absolute; top: 0px; -ms-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s;
transition-duration: 1s; -webkit-transition-duration: 1s; } #skdjhfasdfbr:hover .sdjfkh24jkhrv { left: -250px; -ms-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-duration: 1s; }
#skdjhfasdfbr .iurth54i3ufne { border: 10px solid #FEFEFE; height: 105px; left: 180px; overflow: auto; padding-right: 3px; position: absolute; text-align: justify; top: 0px; width: 230px; -ms-transition-duration:
1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-duration: 1s; }
#skdjhfasdfbr:hover .iurth54i3ufne { left: 0px; -ms-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-duration: 1s; } .iurth54i3ufne::-webkit-scrollbar { width: 6px; }
.iurth54i3ufne::-webkit-scrollbar-thumb { background: #a42626; }
</style>
html kód:
<style type="text/css">.mainie { width: 250x; height: 250px; background-color: #f8f8f8; border: 25px
solid #f8f8f8; box-shadow: 0px 0px 2px #ccc; overflow: hidden;
}.mainie1 { width: 250px; height: 250px;
background-image:url(http://placehold.it/250x250);
overflow: hidden; }.mainie .iconie {width: 150px; height: 150px; border-radius: 50%;margin-top: 50px; background-image:url(http://placehold.it/150x150);
box-shadow: 1px 1px 12px; #ccc;
transition:width 1s, height 1s, transform 1s; -webkit-transition:width 1s, height 1s, -webkit-transform 1s;
}.mainie:hover .iconie {width: 0px;height: 0px;transform:rotate(360deg);-webkit-
transform:rotate(360deg);
}.mainie .boxy1 { margin-left: -250px; margin-top: -20px;position: relative; width: 150px; border: 20px solid #f8f8f8;padding: 5px; height: 140px; background-color: #f8f8f8; opacity: 0;box-shadow: 1px 1px 2px #ccc; text-align: justify; line-height: 125%; overflow: auto;letter-spacing: 1px;font-family: helvetica; font-size: 9px; color: #333;-webkit-transition:width 1s, height 1s, -webkit-transform 1s; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}.mainie:hover .boxy1 { margin-left: 0px;margin-top: -20px;opacity: 1; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}.boxy1 b {color: #6C86A2; }.boxy1 i {color: #6C86A2; }.boxy1 s {color: #6C86A2; }.boxy1::-webkit-scrollbar { width: 3px; height: 5px; }.boxy1::-webkit-scrollbar-track { background-color: #f8f8f8; -webkit-border-radius: 0px; border-radius: 0px; }.boxy1::-webkit-scrollbar-thumb { -webkit-border-radius: 0px; border-radius: 0px; background-color: #6C86A2; }</style><center><div class="mainie"> <div class="mainie1"><div class="iconie"></div><div class="boxy1">
IDE JÖN A SZÖVEG!IDE JÖN A SZÖVEG!IDE JÖN A SZÖVEG!IDE JÖN A SZÖVEG!IDE JÖN A SZÖVEG!IDE JÖN A SZÖVEG!IDE JÖN A SZÖVEG!IDE JÖN A SZÖVEG!IDE JÖN A SZÖVEG!IDE JÖN A SZÖVEG!IDE JÖN A SZÖVEG!IDE JÖN A SZÖVEG!IDE JÖN A SZÖVEG!IDE JÖN A SZÖVEG!IDE JÖN A SZÖVEG!IDE JÖN A SZÖVEG!IDE JÖN A SZÖVEG!IDE JÖN A SZÖVEG!IDE JÖN A SZÖVEG!IDE JÖN A SZÖVEG!IDE JÖN A SZÖVEG!IDE JÖN A SZÖVEG!IDE JÖN A SZÖVEG!IDE JÖN A SZÖVEG!IDE JÖN A SZÖVEG! </div></div></div><a href="http://shine.b1.jcink.com/index.php?showuser=7361"><div style="float: right: font-family: helvetica; font-size: 8px; text-transform: uppercase;"></div></a>
</center>
