YDMC [Blog Design]: HTML kódok/ Betty

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>

------------------------------------------------------------------------------------------------------------

.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 />

<li>

</div>

<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>

</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:

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.:

HTML kódok: LOPÁSGÁTLÓ (SZÖVEGGEL)

//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Ű)

uppercase;}

</style>

Forrás: If you can Dream it you can do it!

Szövegdobozok:

html kód:

</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>

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:

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>

YDMC [Blog Design]

2015. február 23., hétfő

HTML kódok/ Betty

Nincsenek megjegyzések:

Megjegyzés küldése