Skip to content

Instantly share code, notes, and snippets.

@jesseflorig

jesseflorig/dabblet.css

Created November 5, 2012 19:54
Show Gist options
  • Save jesseflorig/4019956 to your computer and use it in GitHub Desktop.
Save jesseflorig/4019956 to your computer and use it in GitHub Desktop.
Download ZIP
Fun with drop shadows
Raw
dabblet.css
/**
* Fun with drop shadows
*/
html{
background: rgba(255,0,100,1);
background: linear-gradient(45deg, rgb(0,0,0), rgb(255,255,255));
min-height: 100%;
font-family:sans-serif;
}
/*HEADER*/
header{
position:fixed;
top:1em;
left:1em;
}
header h1{
text-shadow: -4px 4px 4px rgba(0,0,0,0.5);
font-size: 4em;
color:rgba(255,255,255,0.6);
margin:0;
padding:0;
}
header h1:hover{
color:rgba(255,255,255,0.8);
}
/*CONTENT*/
article{
width:50%;
float:right;
padding:10px 20px;
background: linear-gradient(0deg, rgb(70,70,70), rgb(40,40,40));
box-shadow: -2px 2px 2px rgba(0,0,0,0.8), inset -2px 2px 2px rgba(0,0,0,0.2);
color: rgba(120,120,120,1);
font-size:1.3em;
line-height:1.3em;
text-shadow: 0px 1px 0px rgba(255,255,255,.8);
text-align: justify;
}
/*FOOTER*/
footer{
position:fixed;
bottom:1em;
left:1em;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<header>
<h1>Title Name</h1>
<nav>
<a href="#">About</a>
<a href="#">Archive</a>
</nav>
</header>
<section>
<article>
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra lorem sit amet odio egestas sit amet varius metus placerat. Mauris interdum, metus et commodo ullamcorper, est orci pellentesque leo, et fringilla magna erat quis nibh. Sed gravida neque et erat volutpat laoreet. Sed sed augue at sapien dignissim dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet nisl ligula, non pulvinar augue. Quisque consequat iaculis arcu, id pharetra lectus cursus ut.</p>
<ul>
<li>List Item 1</li>
<li>List Item 1</li>
</ul>
<p>Ut non mauris a nunc egestas feugiat. Vestibulum consequat ornare libero. Nullam id justo vitae nisi hendrerit porta. Etiam erat sem, consectetur ut lacinia id, tempor a mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque blandit quam non diam varius eu feugiat mi egestas. Nulla nec metus lectus. Ut cursus, enim vel aliquam pharetra, purus lorem tempus ligula, at accumsan odio nisi quis erat. Phasellus at nisi felis. Etiam porttitor ullamcorper nisi, eu condimentum libero sagittis in.</p>
<blockquote>Somebody else once said this</blockquote>
<p>Excerpt from <cite>Book Title</cite> by Author</p>
<p>Aenean et metus sit amet nibh mollis imperdiet vitae a elit. Mauris et mi nunc. Etiam diam lacus, ornare eget vulputate ut, congue vitae sapien. Praesent leo lectus, dictum ullamcorper ultricies vitae, feugiat id odio. Aliquam erat volutpat. Vivamus id risus ipsum. Vestibulum sed ante quis sapien ornare vehicula eget vitae justo. Aenean blandit dolor sit amet turpis cursus porta. Ut consectetur neque nec tortor condimentum suscipit sed a odio. Sed eget nulla ut tortor malesuada venenatis. Curabitur vulputate commodo euismod. Proin facilisis nunc accumsan ante condimentum ac tempor turpis sollicitudin. Phasellus id dui nisl, id faucibus sem. Donec pellentesque metus ac dolor tincidunt nec tempus orci sodales. Quisque in augue dolor, tincidunt dictum neque. Vestibulum iaculis suscipit urna in elementum. </p>
</article>
<article>
<h2>Another Article Title</h2>
<p><abbr title="Lorem ipsum dolor sit amet">LIDSA</abbr>, consectetur adipiscing elit. Praesent pharetra lorem sit amet odio egestas sit amet varius metus placerat. Mauris interdum, metus et commodo ullamcorper, est orci pellentesque leo, et fringilla magna erat quis nibh. Sed gravida neque et erat volutpat laoreet. Sed sed augue at sapien dignissim dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet nisl ligula, non pulvinar augue. Quisque consequat iaculis arcu, id pharetra lectus cursus ut.</p>
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
<p>Ut non mauris a nunc egestas feugiat. Vestibulum consequat ornare libero. Nullam id justo vitae nisi hendrerit porta. Etiam erat sem, consectetur ut lacinia id, tempor a mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque blandit quam non diam varius eu feugiat mi egestas. Nulla nec metus lectus. Ut cursus, enim vel aliquam pharetra, purus lorem tempus ligula, at accumsan odio nisi quis erat. Phasellus at nisi felis. Etiam porttitor ullamcorper nisi, eu condimentum libero sagittis in.</p>
<blockquote>Somebody else once said this</blockquote>
<p>Aenean et metus sit amet nibh mollis imperdiet vitae a elit. Mauris et mi nunc. Etiam diam lacus, ornare eget vulputate ut, congue vitae sapien. Praesent leo lectus, dictum ullamcorper ultricies vitae, feugiat id odio. Aliquam erat volutpat. Vivamus id risus ipsum. Vestibulum sed ante quis sapien ornare vehicula eget vitae justo. Aenean blandit dolor sit amet turpis cursus porta. Ut consectetur neque nec tortor condimentum suscipit sed a odio. Sed eget nulla ut tortor malesuada venenatis. Curabitur vulputate commodo euismod. Proin facilisis nunc accumsan ante condimentum ac tempor turpis sollicitudin. Phasellus id dui nisl, id faucibus sem. Donec pellentesque metus ac dolor tincidunt nec tempus orci sodales. Quisque in augue dolor, tincidunt dictum neque. Vestibulum iaculis suscipit urna in elementum. </p>
</article>
</section>
<footer>
<address>
<ul>
<li><a href="#">Email@Address.com</li>
<li><a href="#">@TwitterHandle</li>
<li><a href="#">UserName</li>
</ul>
</address>
<small>Author &copy; 2012</small>
</footer>
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment