HTML/CSS fun
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I would like to share some simple html snips that can add a bit of dimension to your pages. Everything I post will be verified to be working with the current default tinymce valid elements.I will add more as time goes on, if there is interest.
Enjoy!
HTML:
<div style="margin: 50px 15% 50px 15%; background-color: #ccc;">
<div style="position: relative; top: -20px; left: -20px; padding: 20px; background: #fff; border: 2px solid #ccc;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec rutrum neque. Suspendisse pretium turpis leo, nec fermentum tortor egestas at. Duis aliquet, ante ac faucibus interdum, felis tortor rutrum ante, aliquet vestibulum metus ipsum eu lectus. Vestibulum interdum quis tortor non vulputate. Donec consequat facilisis ante at condimentum. Morbi tincidunt tincidunt ligula. Nulla semper nec felis vitae imperdiet. Suspendisse non blandit dolor.</p>
<p> </p>
<p>Quisque consectetur erat nec posuere facilisis. Donec ut tristique sapien, id pulvinar risus. Sed a odio lectus. Proin mollis lorem purus, vel porttitor turpis malesuada feugiat. Proin vehicula risus a diam tincidunt molestie. Mauris enim velit, semper in pharetra et, sodales eget nulla. Phasellus vulputate lectus at sem tempus, id pellentesque turpis tempus. Nam ornare purus a ligula posuere tempus. Integer ut tempus mauris. Mauris non ipsum urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam in ex sem. Ut tincidunt leo et tellus gravida, eu interdum metus dignissim. Phasellus scelerisque aliquam justo ac egestas.</p>
<p> </p>
</div>
</div>
RESULT:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec rutrum neque. Suspendisse pretium turpis leo, nec fermentum tortor egestas at. Duis aliquet, ante ac faucibus interdum, felis tortor rutrum ante, aliquet vestibulum metus ipsum eu lectus. Vestibulum interdum quis tortor non vulputate. Donec consequat facilisis ante at condimentum. Morbi tincidunt tincidunt ligula. Nulla semper nec felis vitae imperdiet. Suspendisse non blandit dolor.
Quisque consectetur erat nec posuere facilisis. Donec ut tristique sapien, id pulvinar risus. Sed a odio lectus. Proin mollis lorem purus, vel porttitor turpis malesuada feugiat. Proin vehicula risus a diam tincidunt molestie. Mauris enim velit, semper in pharetra et, sodales eget nulla. Phasellus vulputate lectus at sem tempus, id pellentesque turpis tempus. Nam ornare purus a ligula posuere tempus. Integer ut tempus mauris. Mauris non ipsum urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam in ex sem. Ut tincidunt leo et tellus gravida, eu interdum metus dignissim. Phasellus scelerisque aliquam justo ac egestas.
