2018. 05. 12.Videó | Kép élénkítése Photoshop-ban
2018. 05. 05.ColorCop színlopó program
2018. 04. 30.Coppermine | Kép és fájlméret megadása az indexképek alatt
2018. 04. 24.Coppermine | Thumbnails képek méretének változtatása egyszerűen
2018. 04. 18.Videó | PNG készítése Photoshop-ban
Coppermine Gallery themes

Coppermine Gallery themes
284 napja
701 néző

WordPress themes

WordPress themes
285 napja
198 néző

G-Portál themes

G-Portál themes
285 napja
112 néző

Tumblr themes

Tumblr themes
285 napja
162 néző

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>


2 464 megtekintés

Hozzászólások