Cikkajánló
Hoztam 15 darab Dakota Johnson .png képet, ha már a Szürke 50 árnyalatában Ő a főszereplőnő és a film ekkora siker lett. Igaz a filmet még nem láttam, de
Ahogy ígértem hoztam a legújabb rendelés előnézeti képét és pár .png képet is, ami összegyűlt mostanában. Nem sok, de inkább feltettem őket most, mint, hogy elmaradjanak. A rendelt designt
  DIV kód A kép szélessége itt most 316 pixel. A kódban a perjelek helyére mennek a link címek.   <div class="project"> <big>Projekt címe</big> <img align="middle" src="IDE JÖN A
Sosugary Gallery | Jennifer Lawrence téma Szövegdoboz | Kattintásra kijelöli és másolja a szöveget Ingyenes téma | Coppermine Gallery free theme Prémium téma | Sophie Turner WordPress theme WordPress | Letöltés számláló
Blogra bemutatkozó szövegdoboz 2.
Welcome

 

 

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tortor purus, ullamcorper quis dui nec, iaculis blandit nunc. Suspendisse metus est, molestie in auctor ut, tristique vitae sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempus interdum ipsum sit amet imperdiet. Sed dolor nulla, placerat at molestie sed, maximus id mi. Donec aliquet lorem ipsum, sit amet sagittis purus sagittis vitae. Fusce massa urna, lacinia in posuere sit amet, laoreet vitae lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris scelerisque iaculis nunc. Duis porta velit et orci gravida cursus. Suspendisse sollicitudin eget sapien ut elementum. Quisque tempus auctor ligula ac fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis eu elit nec lobortis.

 

 

Szövegdoboz kódja
 

<div align="center">
<div class="blogbox">
<div class="img">
<div>
<div class="headtext">
Welcome</div>
</div>
</div>
<div class="headbox">
 &nbsp;</div>
<div class="blogtext">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tortor purus, ullamcorper quis dui nec, iaculis blandit nunc. Suspendisse metus est, molestie in auctor ut, tristique vitae sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempus interdum ipsum sit amet imperdiet. Sed dolor nulla, placerat at molestie sed, maximus id mi. Donec aliquet lorem ipsum, sit amet sagittis purus sagittis vitae. Fusce massa urna, lacinia in posuere sit amet, laoreet vitae lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris scelerisque iaculis nunc. Duis porta velit et orci gravida cursus. Suspendisse sollicitudin eget sapien ut elementum. Quisque tempus auctor ligula ac fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis eu elit nec lobortis.</div>
</div>
</div>


CSS kód
 

<style type="text/css">
.headbox { /* fejléc sávja */
width: 100%;
height: 100px; /* a sáv magassága */
background-color: #59B1F9;
border-bottom: 15px solid #AEA603;
position: relative;
opacity: 0;
transition-duration: .6s;
-webkit-transition-duration: .6s;
-moz-transition-duration: .6s;
-ms-transition-duration: .6s;
-o-transition-duration: .6s;
}
.headtext { /* kép közepén a szöveg */
width: 200px;
font-size: 12px;
letter-spacing: 2px;
color: #ffffff;
text-align: center;
line-height: 100%;
background-color: #000000;
font-family: Trebuchet MS;
padding: 5px 0px 4px 0px;
position: absolute;
top: 87px; /* a körben a sáv helyzete fentről */
opacity: 0;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transition-duration: .6s;
-webkit-transition-duration: .6s;
-moz-transition-duration: .6s;
-ms-transition-duration: .6s;
-o-transition-duration: .6s;
}
.blogbox { /* az egész doboz */
width: 100%;
height: 400px;
background-color: #000000;
position: relative;
overflow: hidden;
}
.img { /* a háttérképed a körben */
width: 200px;
height: 200px;
background-image: url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1402151189_19.jpg);
position: absolute;
top: 100px;
left: 32%;
border-radius: 100%;
transition-duration: .6s;
-webkit-transition-duration: .6s;
-moz-transition-duration: .6s;
-ms-transition-duration: .6s;
-o-transition-duration: .6s;
z-index: 9;
}
.blogbox:hover .img {
top: 10px;
z-index: 9;
}
.blogbox:hover .headbox {
opacity: .99;
}
.blogtext { /* szöveg */
width: 100%;
height: 150px; /* szöveg helyzete lentről */
letter-spacing: 1px;
font-family: Trebuchet MS;
font-size: 12px;
line-height: 18px;
text-align: justify;
text-transform: lowercase;
color: #7F7F7F;
padding: 0px 10px 0px 10px;
position: absolute;
bottom: -250px;
transition-duration: .6s;
-webkit-transition-duration: .6s;
-moz-transition-duration: .6s;
-ms-transition-duration: .6s;
-o-transition-duration: .6s;
overflow: auto;
}
.blogtext a {
transition-duration: .6s;
-webkit-transition-duration: .6s;
-moz-transition-duration: .6s;
-ms-transition-duration: .6s;
-o-transition-duration: .6s;
}
.blogbox:hover .blogtext {
bottom: 25px;
}
.blogbox:hover .headtext {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transition-duration: .6s;
-webkit-transition-duration: .6s;
-moz-transition-duration: .6s;
-ms-transition-duration: .6s;
-o-transition-duration: .6s;
opacity: .99;
}
</style>

lindadesign Hozzászólások
2 175 megtekintés

Hozzászólások