Ромбики с всплывающим сообщением
Источник
Демо:
[html]
<style>
.SHOV {
margin:auto;
width:495px;
height:250px;
line-height:normal;
color:white;
}
.msgSHOV {
position:absolute;
z-index:2;
margin-top:-125px;
width:495px;
height:0px;
overflow:hidden;
visibility:hidden;
box-shadow:inset 0 0 35px rgba(0,0,0,0.1);
font-size:11px;
line-height:14px;
text-align:justify;
transform:scale(0.25);
-webkit-transform:scale(0.25);
transition:all 1s ease-in;
-webkit-transition:all 1s ease-in;
transition-delay:0.1s;
-webkit-transition-delay:0.1s;
}
.SHOV:hover .msgSHOV {
visibility:visible; margin-top:-250px;
width:475px; height:230px; padding:10px; overflow-y:auto;
transform:scale(1); -webkit-transform:scale(1); transition-delay:1.1s; -webkit-transition-delay:1.1s;
}
.tleSHOV {
position:absolute; z-index:1; margin-left:195px; margin-top:90px; width:100px;
text-align:center; font-size:12px; font-family:Raleway; text-transform:uppercase; text-shadow:1px 1px 0 rgba(0,0,0,0.1);
transition:all 0.75s ease-in-out; -webkit-transition:all 0.75s ease-in-out;
}
.tleSHOV span {
display:inline-block; vertical-align:middle;
}
.tleSHOV span:nth-of-type(1) {
height:70px;
}
.SHOV:hover .tleSHOV{
opacity:0; transform:scale(0); -webkit-transform:scale(0);
}
.decoSHOV {
position:relative; margin:0;
width:475px; height:250px; padding-left:10px;
font-size:342px; line-height:212px; font-family:Arial; text-align:center; text-shadow:0 1px 0 rgba(0,0,0,0.3);
transition:all 1s ease-in-out; -webkit-transition:all 1s ease-in-out;
}
.SHOV:hover .decoSHOV {
transform:scale(0); -webkit-transform:scale(0);
}
.decoIISHOV, .decoIIISHOV, .decoIVSHOV {
width:275px; height:190px; padding:0;
font-size:152px; line-height:196px; font-family:Arial; text-align:center; text-shadow:0 1px 0 rgba(0,0,0,0.3);
transition:all 1s ease-in-out; -webkit-transition:all 1s ease-in-out;
}
.decoIISHOV {
position:absolute; margin-top:-40px;
transition-delay:0.2s; -webkit-transition-delay:0.2s;
}
.SHOV:hover .decoIISHOV {
transform:scale(0); -webkit-transform:scale(0);
}
.decoIIISHOV {
position:absolute; margin-top:20px; margin-left:-50px;
transition-delay:0.4s; -webkit-transition-delay:0.4s;
}
.SHOV:hover .decoIIISHOV {
transform:scale(0); -webkit-transform:scale(0);
}
.decoIVSHOV {
position:absolute; margin-top:80px;
transition-delay:0.5s; -webkit-transition-delay:0.5s;
}
.SHOV:hover .decoIVSHOV {
transform:scale(0); -webkit-transform:scale(0);
}
.decoVSHOV, .decoVISHOV, .decoVIISHOV {
width:275px; height:190px; padding:0;
font-size:152px; line-height:196px; font-family:Arial; text-align:center; text-shadow:0 1px 0 rgba(0,0,0,0.3);
transition:all 1s ease-in-out; -webkit-transition:all 1s ease-in-out;
}
.decoVSHOV {
position:absolute; margin-top:-290px; margin-left:220px;
transition-delay:0.5s; -webkit-transition-delay:0.5s;
}
.SHOV:hover .decoVSHOV {
transform:scale(0); -webkit-transform:scale(0);
}
.decoVISHOV {
position:absolute; margin-top:-230px; margin-left:270px;
transition-delay:0.2s; -webkit-transition-delay:0.2s;
}
.SHOV:hover .decoVISHOV {
transform:scale(0); -webkit-transform:scale(0);
}
.decoVIISHOV {
position:absolute; margin-top:-170px; margin-left:220px;
}
.SHOV:hover .decoVIISHOV {
transform:scale(0); -webkit-transform:scale(0);
}
.cdtSHOV {
position:absolute; z-index:5; margin-left:175px; margin-top:105px;
transform:scale(0); -webkit-transform:scale(0);
transition:all 1s ease-in; -webkit-transition:all 1s ease-in;
transition-delay:0.1s; -webkit-transition-delay:0.1s;
}
.cdtSHOV img {
width:20px;
}
.SHOV:hover .cdtSHOV{
margin-left:-10px; transform:scale(1); -webkit-transform:scale(1);
transition:transform 1s ease-in; -webkit-transition:-webkit-transform 1s ease-in;
transition-delay:2s; -webkit-transition-delay:2s;
}
</style>
<!-- COULEURS & POLICE PERSONNALISABLES -->
<div class="SHOV">
<!-- CREDIT -->
<a class="cdtSHOV" href="http://crushcrushcrush.actifforum.com" target="_blank"><img src="http://www.aht.li/2456212/PUF.png" /></a>
<!-- BLOC TITRE -->
<div class="tleSHOV">
<!-- ALIGNEMENT -->
<span></span>
<!-- TITRE --><span>Заголовок</span>
</div>
<!-- TRIANGLES GAUCHE - HAUT --><div class="decoIISHOV" style="color:#81383F;">♦</div>
<!-- MILIEU --><div class="decoIIISHOV" style="color:#81383F;">♦</div>
<!-- BAS --><div class="decoIVSHOV" style="color:#81383F;">♦</div>
<!-- TRIANGLE CENTRAL --><div class="decoSHOV" style="color:#81383F;">♦</div>
<!-- TRIANGLES DROITE - HAUT --><div class="decoVSHOV" style="color:#81383F;">♦</div>
<!-- MILIEU --><div class="decoVISHOV" style="color:#81383F;">♦</div>
<!-- BAS --><div class="decoVIISHOV" style="color:#81383F;">♦</div>
<!-- MESSAGE -->
<div class="msgSHOV" style="background:#81383F; color:white; font-family:Arial;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut nunc vestibulum, auctor nisi id, sagittis velit. Duis velit nisl, aliquam sed fermentum ac, ullamcorper dapibus felis. Mauris porttitor hendrerit nulla. Vestibulum commodo augue quis sapien fermentum, sed cursus odio lobortis. Vestibulum pellentesque, orci vitae cursus viverra, odio odio rutrum turpis, sed cursus odio erat ac tortor. Vivamus suscipit convallis bibendum. Praesent et rutrum velit, a malesuada magna. Integer at dui fringilla, accumsan velit nec, tincidunt purus. Cras in rutrum sapien. Nam finibus, turpis quis dictum auctor, est quam bibendum lacus, eget tempus risus arcu vel odio. Nunc quis sagittis nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus.<br>
<br>
Vivamus quis fringilla urna. Vestibulum bibendum vitae lorem id fringilla. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum eu diam lectus. Proin pharetra orci a pretium aliquam. Suspendisse fermentum nibh in tincidunt volutpat. In ac ipsum consectetur nisi rhoncus consequat ac accumsan neque.<br>
<br>
Aenean vel purus tellus. Nunc risus nulla, vulputate vel neque venenatis, elementum accumsan nulla. Cras nec scelerisque orci, eget dictum sapien. Vestibulum ornare nisi aliquet imperdiet euismod. Suspendisse id nunc lacus. Suspendisse quis nunc vel enim consectetur sagittis eu ut libero. Vivamus molestie lorem vitae est tristique gravida. Nam porta eu justo sed vulputate.<br>
<br>
Nullam convallis eros ut arcu congue porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel dui suscipit, eleifend justo ullamcorper, accumsan nulla. Nunc a pretium dolor. Praesent non iaculis lacus. Nullam at elit eleifend, faucibus mi non, vehicula mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin convallis lectus id placerat volutpat.<br>
<br>
Praesent tristique risus nec placerat porttitor. Donec euismod malesuada massa laoreet sagittis. Etiam id mollis enim. Sed eget magna posuere sem fermentum tristique et et odio. Phasellus eget enim consectetur, scelerisque neque eget, congue sapien. Nulla auctor finibus neque ac tristique. Curabitur hendrerit sem orci, id feugiat ante ultricies id. Phasellus sodales arcu turpis. Duis ut rhoncus nisi. Sed eget leo sapien. Aliquam bibendum sem non massa dictum viverra. Pellentesque tristique velit a metus venenatis, quis tempus sem feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer cursus odio in magna porttitor pharetra. Curabitur a quam accumsan, imperdiet nisi ut, tristique quam. In nec ante dictum, fringilla dolor ut, mollis velit.
</div>
</div>[/html]
HTML
CSS
