Szerintem...: Szövegdobozok

Sziasztok!

Ma néhány szövegdobozt hoztam, remélem, hasznát veszitek majd. Kizárólag saját használatra vannak, kérlek, ha valamelyiket viszitek, írjátok ki a forrást :)

Az első így néz ki:

ÜDVÖZÖLLEK A BLOGOMON!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices interdum ante ac scelerisque. Cras et urna urna. Phasellus nec orci vel libero vestibulum luctus ut ut leo. Vivamus faucibus lacinia convallis. Donec at justo quis nibh fermentum aliquet quis a purus. Duis nisi urna, varius non est non, convallis condimentum turpis. Phasellus quis placerat urna, at auctor tellus. Cras iaculis consequat turpis in maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris convallis, turpis eget dignissim aliquet, lacus nisl ultrices massa, eu fermentum leo ex vel enim. Nullam at leo metus.
Integer maximus neque est, dictum rutrum libero volutpat at. Nam venenatis sem id nibh cursus, maximus mattis elit convallis. Aliquam felis justo, rhoncus vitae mattis eu, dignissim non elit. Nullam a risus velit.

Lorem ipsum dolor sit amet consecte.

A kód pedig:

<style>

#circlecontainer {

background-color: #eee; background-image:url(http://www.transparenttextures.com/patterns/binding-light.png); width: 400px; height: 200px; overflow: hidden; border: 1px solid #000;}

#circlecontainer:hover #imagecircle2{ margin-right: -280px;}

#circlecontainer:hover #titlecircle2 { margin-left: 30px; color: rgba(255,255,255,0.00);}

#circlecontainer:hover #outerwrap { margin-left: 25px;}

#imagecircle2 {background-image:url(http://kepfeltoltes.hu/160814/tumblr_mg642eZr2U1s1fpkuo4_500_large_www.kepfeltoltes.hu_.jpg); background-position:center;background-color: #080F25; width: 350px; height: 300px; float: right; -webkit-border-radius: 300px; border-radius: 300px;-o-border-radius: 300px;-ms-border-radius: 300px; margin-top: -49px; margin-right: -50px; position: relative; -webkit-transition: 0.7s ease-in-out; transition: 0.7s ease-in-out; -o-transition: 0.7s ease-in-out; -ms-transition: 0.7s ease-in-out; border: 1px dashed #000; box-shadow: -2px 0px 10px #000;}

#titlecircle2 { background-color:#8f4542; float: left; height: 80px; max-width: 80px; margin-top: 85px; -webkit-border-radius: 100px; border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; padding-left:27px; padding-right: 27px; PADDING-BOTTOM: 30px; PADDING-TOP: 20px; position: relative; margin-left: -60px; color: rgba(248,248,248,1.00);font-family: georgia; font-size: 14px; letter-spacing: 2px; -webkit-transition: 0.7s ease-in-out; transition: 0.7s ease-in-out; -ms-transition: 0.7s ease-in-out;-ms-transition: 0.7s ease-in-out; LINE-HEIGHT: 18px; text-align: center; box-shadow: 2px 3px 5px #000; border: 1px dashed #000;}

#titlecircle2:first-letter{font-size: 50px; font-family: Great Vibes}

#outerwrap { float: left; margin-left: -300px; margin-top: 30px; -webkit-transition: 0.7s ease-in-out; transition: 0.7s ease-in-out; -o-transition: 0.7s ease-in-out; -ms-transition: 0.7s ease-in-out;}

#innerwrap {width: 280px; height: 120px; background-color: #d6d79b; border-top: 6px solid #8f4542; margin-top: 3px; }

#circlecontent { width: 250px; height: 100px; overflow: auto; background-color: #d6d79b; text-align: justify; font-family: playfair display; font-size: 11px; line-height: 18px;padding-right: 10px; margin-top: 10px; }

#circlecontent::-webkit-scrollbar { width: 3px; }

#circlecontent::-webkit-scrollbar-track { background-color: #8f4542; }

#circlecontent::-webkit-scrollbar-thumb {background-color: #9a9263;}

date { font-family: abril fatface; font-weight: 900; font-size: 16px; color: #5a4941; text-align: center !important;}

</style>

<date><center>ÜDVÖZÖLLEK A BLOGOMON!</center></br></date> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices interdum ante ac scelerisque. Cras et urna urna. Phasellus nec orci vel libero vestibulum luctus ut ut leo. Vivamus faucibus lacinia convallis. Donec at justo quis nibh fermentum aliquet quis a purus. Duis nisi urna, varius non est non, convallis condimentum turpis. Phasellus quis placerat urna, at auctor tellus.

Cras iaculis consequat turpis in maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris convallis, turpis eget dignissim aliquet, lacus nisl ultrices massa, eu fermentum leo ex vel enim. Nullam at leo metus. </br>Integer maximus neque est, dictum rutrum libero volutpat at. Nam venenatis sem id nibh cursus, maximus mattis elit convallis. Aliquam felis justo, rhoncus vitae mattis eu, dignissim non elit. Nullam a risus velit.</div></div></div><div id="imagecircle2"><div id="titlecircle2">Lorem ipsum dolor sit amet consecte.</div></div></div></center>

Ez lenne a második:

Nullam a mollis lacus, eget cursus lacus. Pellentesque mollis, ante sit amet ullamcorper porttitor, massa diam dignissim magna, euismod maximus lectus nulla eu nunc. Nulla suscipit auctor libero, at mollis lacus tincidunt a. Cras eros ipsum, tempor eu erat id, aliquet efficitur erat. Duis bibendum lobortis ex. Phasellus in dolor velit. Mauris fermentum tristique turpis, sed tincidunt nisi. Etiam venenatis justo a nulla venenatis condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Üdvözöllek!

Kód:

.rose{width: 400px; height: 250px; background-image: url(http://kepfeltoltes.hu/160814/1__39__www.kepfeltoltes.hu_.jpg);}

.whiterose{width: 350px; height: 200px; background-color: rgba(255,255,255,0.5); top: 25px; position: relative;}

.blackrose{width: 145px; height: 155px; overflow: auto; text-align: justify; padding: 3px; top: 10px; left: -85px; position: relative; font-size: 10px;}

.mainrose{font-family: Great Vibes; font-size: 40px; top: 130px; position: absolute; right: 10px; transform: rotate(-15deg);}

.picturerose{position: relative; left: 90px; top: -140px; width: 150px; height: 125px;}

</style>

</div>

<div class="mainrose">Üdvözöllek!</div>

</div></div>

</center>

2016. 08. 14.

Szövegdobozok

Nincsenek megjegyzések:

Megjegyzés küldése