CSS Quick Reference

Unplugged's picture


CSS Quick Reference 2.0


A collection of CSS snippets for quick access.

Please remember to always put your css ! under the cut !
CSS not working? Make sure the Input Format is set to BBCode.

Looking for Free CSS and more? Check the Link Collection and WhenDeerAttack's "TEF Coding and You" guide.






Base Templates



Free to use and alter! No need for credit.
White 1 Black 1
<center><a href="http://endlessforest.org/community/">home</a> × <a href="http://endlessforest.org/community/tracker">recent</a> × <a href="http://endlessforest.org/community/current-map-forest">map</a></center>

Lorem Ipsum

<style>.preview{background:none;border:none} #header-region, #header img, .sidebar, .breadcrumb,#squeeze h2,.comment .clear-block .content .clear-block, div.status{display:none} #wrapper #container #center .right-corner .left-corner{position:relative;margin:auto;padding:0px}#wrapper #container #center{float:none;position:absolute;top:0px}body.sidebar-left #center, body.sidebar-left #squeeze{margin-left:0px} .comment .content{margin-left:20px} .node .picture, .node .submitted{display:none} .node{border-bottom:none} #tabs-wrapper{border-bottom:none} tbody{border-top:none} #wrapper #container #center{position:absolute;top:0px} .comment{margin:20px 0px;padding:10px 20px} .node .links, .comment .links{text-align:center} ul.primary{position:absolute;top:0px;left:0px} #forum, #comments{margin:0px} .node .content{margin:0px} table{width:auto;margin:0;} tbody{border:none}</style>

<style>/*
BLOG WIDTH + BLOG BG COLOR
*/#wrapper #container #center .right-corner .left-corner{width:700px;background:#F7F7F7}/*
MAIN BG COLOR
*/body{background:#ffffff; font:10px verdana}/*
COMMENT BG COLOR
*/.comment.odd,tr.odd,.comment.even,tr.even{background:#ededed}/*
COMMENT BORDER
*/.comment{border:none}/*
TEXT COLOR
*/body{color:#333333}/*
LINK COLOR
*/a:link, a:visited, ul.pager a{color:#666666}/*
LINK HOVER COLOR
*/a:link:hover, a:visited:hover, ul.pager a:hover{color:#999999; text-decoration:none}/*
NEW COLOR
*/.new{color:#999999}/*
EDIT + REPLY BACKGROUND
*/.comment div.links{background:none}/*
TIME & DATE STYLING
*/span.submitted{color:#999999}/*
COMMENT PICTURES
*/.comment .picture{opacity:0.3; transition:all 0.6s; -moz-transition:all 0.6s; -webkit-transition:all 0.6s} .comment .picture:hover{opacity:1}/*
*/</style>
<center><a href="http://endlessforest.org/community/">home</a> × <a href="http://endlessforest.org/community/tracker">recent</a> × <a href="http://endlessforest.org/community/current-map-forest">map</a></center>

Lorem Ipsum

<style>.preview{background:none;border:none} #header-region, #header img, .sidebar, .breadcrumb,#squeeze h2,.comment .clear-block .content .clear-block, div.status{display:none} #wrapper #container #center .right-corner .left-corner{position:relative;margin:auto;padding:0px}#wrapper #container #center{float:none;position:absolute;top:0px}body.sidebar-left #center, body.sidebar-left #squeeze{margin-left:0px} .comment .content{margin-left:20px} .node .picture, .node .submitted{display:none} .node{border-bottom:none} #tabs-wrapper{border-bottom:none} tbody{border-top:none} #wrapper #container #center{position:absolute;top:0px} .comment{margin:20px 0px;padding:10px 20px} .node .links, .comment .links{text-align:center} ul.primary{position:absolute;top:0px;left:0px} #forum, #comments{margin:0px} .node .content{margin:0px} table{width:auto;margin:0;} tbody{border:none}</style>

<style>/*
BLOG WIDTH + BLOG BG COLOR
*/#wrapper #container #center .right-corner .left-corner{width:700px;background:#0C0C0C}/*
MAIN BG COLOR
*/body{background:#000000; font:10px verdana}/*
COMMENT BG COLOR
*/.comment.odd,tr.odd,.comment.even,tr.even{background:#111111}/*
COMMENT BORDER
*/.comment{border:none}/*
TEXT COLOR
*/body{color:#555555}/*
LINK COLOR
*/a:link, a:visited, ul.pager a{color:#333333}/*
LINK HOVER COLOR
*/a:link:hover, a:visited:hover, ul.pager a:hover{color:#666666; text-decoration:none}/*
NEW COLOR
*/.new{color:#212121}/*
EDIT + REPLY BACKGROUND
*/.comment div.links{background:none}/*
TIME & DATE STYLING
*/span.submitted{color:#212121}/*
COMMENT PICTURES
*/.comment .picture{opacity:0.3; transition:all 0.6s; -moz-transition:all 0.6s; -webkit-transition:all 0.6s} .comment .picture:hover{opacity:1}/*
*/</style>
White 2 Black 2
<center><a href="http://endlessforest.org/community/">home</a> × <a href="http://endlessforest.org/community/tracker">recent</a> × <a href="http://endlessforest.org/community/current-map-forest">map</a></center>

Lorem Ipsum

<style>.preview{background:none;border:none} #header-region, #header img, .sidebar, .breadcrumb,#squeeze h2,.comment .clear-block .content .clear-block, div.status{display:none} #wrapper #container #center .right-corner .left-corner{position:relative;margin:auto;padding:0px;background:none}#wrapper #container #center{float:none;position:absolute;top:0px;}body.sidebar-left #center, body.sidebar-left #squeeze{margin-left:0px} .comment .content{margin-left:20px} .node .picture, .node .submitted{display:none} .node{border-bottom:none} #tabs-wrapper{border-bottom:none} tbody{border-top:none} #wrapper #container #center{position:absolute;top:0px} .comment{margin:20px 0px;padding:10px 20px} .node .links, .comment .links{text-align:center} ul.primary{position:absolute;top:0px;left:0px} #forum, #comments{margin:0px} .node .content{margin:0px} table{width:auto;margin:0;} tbody{border:none}</style>

<style>/*
BLOG WIDTH + BLOG BG COLOR
*/#wrapper #container #center .right-corner .left-corner{width:700px} .node{background:#ededed}/*
MAIN BG COLOR
*/body{background:#ffffff; font:10px verdana}/*
COMMENT BG COLOR
*/.comment.odd,tr.odd,.comment.even,tr.even{background:#ededed}/*
COMMENT BORDER
*/.comment{border:none}/*
TEXT COLOR
*/body{color:#333333}/*
LINK COLOR
*/a:link, a:visited, ul.pager a{color:#666666}/*
LINK HOVER COLOR
*/a:link:hover, a:visited:hover, ul.pager a:hover{color:#999999; text-decoration:none}/*
NEW COLOR
*/.new{color:#999999}/*
EDIT + REPLY BACKGROUND
*/.comment div.links{background:none}/*
TIME & DATE STYLING
*/span.submitted{color:#999999}/*
COMMENT PICTURES
*/.comment .picture{opacity:0.3; transition:all 0.6s; -moz-transition:all 0.6s; -webkit-transition:all 0.6s} .comment .picture:hover{opacity:1}/*
*/</style>
<center><a href="http://endlessforest.org/community/">home</a> × <a href="http://endlessforest.org/community/tracker">recent</a> × <a href="http://endlessforest.org/community/current-map-forest">map</a></center>

Lorem Ipsum

<style>.preview{background:none;border:none} #header-region, #header img, .sidebar, .breadcrumb,#squeeze h2,.comment .clear-block .content .clear-block, div.status{display:none} #wrapper #container #center .right-corner .left-corner{position:relative;margin:auto;padding:0px;background:none}#wrapper #container #center{float:none;position:absolute;top:0px;}body.sidebar-left #center, body.sidebar-left #squeeze{margin-left:0px} .comment .content{margin-left:20px} .node .picture, .node .submitted{display:none} .node{border-bottom:none} #tabs-wrapper{border-bottom:none} tbody{border-top:none} #wrapper #container #center{position:absolute;top:0px} .comment{margin:20px 0px;padding:10px 20px} .node .links, .comment .links{text-align:center} ul.primary{position:absolute;top:0px;left:0px} #forum, #comments{margin:0px} .node .content{margin:0px} table{width:auto;margin:0;} tbody{border:none}</style>

<style>/*
BLOG WIDTH + BLOG BG COLOR
*/#wrapper #container #center .right-corner .left-corner{width:700px} .node{background:#0C0C0C}/*
MAIN BG COLOR
*/body{background:#000000; font:10px verdana}/*
COMMENT BG COLOR
*/.comment.odd,tr.odd,.comment.even,tr.even{background:#111111}/*
COMMENT BORDER
*/.comment{border:none}/*
TEXT COLOR
*/body{color:#555555}/*
LINK COLOR
*/a:link, a:visited, ul.pager a{color:#333333}/*
LINK HOVER COLOR
*/a:link:hover, a:visited:hover, ul.pager a:hover{color:#666666; text-decoration:none}/*
NEW COLOR
*/.new{color:#212121}/*
EDIT + REPLY BACKGROUND
*/.comment div.links{background:none}/*
TIME & DATE STYLING
*/span.submitted{color:#212121}/*
COMMENT PICTURES
*/.comment .picture{opacity:0.3; transition:all 0.6s; -moz-transition:all 0.6s; -webkit-transition:all 0.6s} .comment .picture:hover{opacity:1}/*
*/</style>

Blank Slate Base


WhiteBlack
<center>

text

</center>



<style>.preview{background:none;border:none} #header-region, #header img, .sidebar, .breadcrumb,#squeeze h2,.comment .clear-block .content .clear-block, div.status{display:none} #wrapper #container #center .right-corner .left-corner{position:relative;margin:auto;padding:0px;background:none}#wrapper #container #center{float:none;position:absolute;top:0px;}body.sidebar-left #center, body.sidebar-left #squeeze{margin-left:0px; padding:0px} .comment .content{margin-left:20px} .node .picture, .node .submitted{display:none} .node{border-bottom:none} #tabs-wrapper{border-bottom:none; padding:0} tbody{border-top:none} #wrapper #container #center{position:absolute;top:0px} .comment{margin:20px 0px;padding:10px 20px} .node .links, .comment .links{text-align:center} ul.primary{position:absolute;top:0px;left:0px} .node .content{margin:0px} table{width:auto;margin:0;} tbody{border:none}#wrapper #container #center .right-corner .left-corner{width:100%;} .node{background:none; margin:0; padding:0} body{overflow-x:hidden}</style>

<style> body{background:#fff;} .comment.odd,tr.odd,.comment.even,tr.even{background:#ebebeb} .comment{border:none} body{color: #999; font:10px verdana} a:link, a:visited, ul.pager a{color:#666; transition:all 1s;} a:link:hover, a:visited:hover, ul.pager a:hover{color:#888; text-decoration:none} .new{color:#999} .comment div.links{background:none} span.submitted{color:#999}</style>
<center>

text

</center>



<style>.preview{background:none;border:none} #header-region, #header img, .sidebar, .breadcrumb,#squeeze h2,.comment .clear-block .content .clear-block, div.status{display:none} #wrapper #container #center .right-corner .left-corner{position:relative;margin:auto;padding:0px;background:none}#wrapper #container #center{float:none;position:absolute;top:0px;}body.sidebar-left #center, body.sidebar-left #squeeze{margin-left:0px; padding:0px} .comment .content{margin-left:20px} .node .picture, .node .submitted{display:none} .node{border-bottom:none} #tabs-wrapper{border-bottom:none; padding:0} tbody{border-top:none} #wrapper #container #center{position:absolute;top:0px} .comment{margin:20px 0px;padding:10px 20px} .node .links, .comment .links{text-align:center} ul.primary{position:absolute;top:0px;left:0px} .node .content{margin:0px} table{width:auto;margin:0;} tbody{border:none}#wrapper #container #center .right-corner .left-corner{width:100%;} .node{background:none; margin:0; padding:0} body{overflow-x:hidden}</style>

<style> body{background:#000;} .comment.odd,tr.odd,.comment.even,tr.even{background:#111} .comment{border:none} body{color: #333; font:10px verdana} a:link, a:visited, ul.pager a{color:#666; transition:all 1s;} a:link:hover, a:visited:hover, ul.pager a:hover{color:#888; text-decoration:none} .new{color:#333} .comment div.links{background:none} span.submitted{color:#000}</style>






Lorem Ipsum Texts


But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.

No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.

Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure.

To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it?

But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.

Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.

To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words. If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages. The new common language will be more simple and regular than the existing European languages. It will be as simple as Occidental; in fact, it will be Occidental.

To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is. The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.

To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words. If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages. The new common language will be more simple and regular than the existing European languages. It will be as simple as Occidental; in fact, it will be Occidental.

To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is. The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words. If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages. The new common language will be more simple and regular than the existing European languages. It will be as simple as

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.

When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.

The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country. But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again. And if she hasn’t been rewritten, then they are still using her.

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline





Div Base


<div style="width:250px;height:250px;overflow:auto;text-align:left;color:#ffffff;border:1px solid #000000;border-radius:10px;padding:20px;">

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam <a href="#">nonumy</a> eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>


Hidden Scrollbars



All edits should be made in the "overflow:hidden" div. Leave the "overflow:auto" div untouched.

<div style="width:250px;height:250px;overflow:hidden;text-align:left;color:#ffffff;border:1px solid #000000;border-radius:10px;padding:20px;"><div style="width:100%;height:100%;overflow:auto;padding-right:100px;">

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam <a href="#">nonumy</a> eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div></div>






Div Effects



Rounded Corners
Detailed information: W3Schools Article
Property:
border-radius: 25px



Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.


<div style="width:250px;height:250px;overflow:auto;text-align:left;color:#ffffff;border:1px solid #000000;border-radius:25px;padding:20px;">

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam <a href="#">nonumy</a> eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>


border-radius:25px 50px 10px 5px
top left > top right > bottom right > bottom left


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.


<div style="width:250px;height:250px;overflow:auto;text-align:left;color:#ffffff;border:1px solid #000000;border-radius:25px 50px 10px 5px;padding:20px;">

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam <a href="#">nonumy</a> eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>


Box-Shadow
Detailed information: W3Schools Article
First number: horizontal offset
Second number: vertical offset
Third number: blur amount (optional)
Fourth number: shadow spread (optional)
box-shadow: 0 0 10px
Text here


<div style="width:250px;height:150px;overflow:auto;text-align:left;color:#ffffff;border:1px solid #000000;border-radius:25px 50px 10px 5px;padding:20px; box-shadow:0 0 10px #000000">Text here</div>


Inset Shadow
box-shadow: 0 0 10px inset
Text here


<div style="width:250px;height:150px;overflow:auto;text-align:left;color:#ffffff;border:1px solid #000000;border-radius:25px 50px 10px 5px;padding:20px; box-shadow:0 0 10px #000000 inset">Text here</div>


Multiple box-shadows
Multiple shadows are separated by commas.
box-shadow: 0 0 10px #000000 inset, 0 0 10px #000000, 0 0 20px #ff0000
Text here


<div style="width:250px;height:150px;overflow:auto;text-align:left;color:#ffffff;border:1px solid #000000;border-radius:25px 50px 10px 5px;padding:20px; box-shadow:0 0 10px #000000 inset, 0 0 10px #000000, 0 0 20px #ff0000">Text here</div>


Shapes
More shapes here

Circle

<div style="width:100px;height:100px; border-radius:100px; overflow:hidden;background:#000000"></div>






Navigation Links



tracker
<a href="http://endlessforest.org/community/tracker">tracker</a>


home × recent × map
<a href="http://endlessforest.org/community/">home</a> × <a href="http://endlessforest.org/community/tracker">recent</a> × <a href="http://endlessforest.org/community/current-map-forest">map</a>


H
R
M

<a href="http://endlessforest.org/community/">H</a>
<a href="http://endlessforest.org/community/tracker">R</a>
<a href="http://endlessforest.org/community/current-map-forest">M</a>


home × recent × map

HTML Part:
<span class="rotate"><a href="http://endlessforest.org/community/">home</a> × <a href="http://endlessforest.org/community/tracker">recent</a> × <a href="http://endlessforest.org/community/current-map-forest">map</a></span>

CSS Part:
<style>.rotate{position:relative;display:inline-block;transform:rotate(-90deg); -moz-transform:rotate(-90deg);-webkit-transform:rotate(-90deg)}</style>






Tooltips



HoverHere is the tooltip text.



HTML Part:
<div id="tooltips">Hover<span class="tooltiptext">Here is the tooltip text.</span></div>

CSS Part:
<style>#tooltips{display:inline-block; position:relative; border-bottom: 1px dotted;} #tooltips .tooltiptext{width:250px; position:absolute; padding:5px; z-index:25; top: 100%; left:50%; margin-left: -130px; background: rgba(0,0,0,0.5); color: #ffffff; opacity:0; transition: all 0.2s; text-align: center; visibility:hidden} #tooltips:hover .tooltiptext{opacity: 1; visibility:visible}</style>


PPhysical
|
MMental
|
EEmotional
|
NThis is a longer text. This is a longer text. This is



HTML Part:
<div id="status">P<span class="statustext">Physical</span></div> | <div id="status">M<span class="statustext">Mental</span></div> | <div id="status">E<span class="statustext">Emotional</span></div> | <div id="status">N<span class="statustext">This is a longer text. This is a longer text. This is</span></div>

CSS Part:
<style>#status{display:inline-block; position:relative; color: #ffffff} #status .statustext{width:150px; position:absolute; padding:5px; z-index:25; top: 100%; left:50%; margin-left: -80px; background: rgba(0,0,0,0.5); color: #ffffff; opacity:0; transition: all 0.2s; text-align: center; border-radius:5px;visibility:hidden} #status:hover .statustext{opacity: 1;visibility:visible}</style>


Status Bars









Disclaimers



Version 1: Display on Hover

HoverHere is the tooltip text.



HTML Part:
<div id="dischover">Hover<span class="dischovertext">Here is the tooltip text.</span></div>

CSS Part:
<style>#dischover{display:inline-block; position:relative; border-bottom: 1px dotted;} #dischover .dischovertext{width:250px; position:absolute; padding:5px; z-index:25; top: 100%; left:50%; margin-left: -130px; background: rgba(0,0,0,0.5); color: #ffffff; opacity:0; transition: all 0.2s; text-align: center; visibility:hidden} #dischover:hover .dischovertext{opacity: 1; visibility:visible}</style>



Version 2: Display Toggle
disclaimer


HTML Part:
<a href="javascript:;" onmousedown="if(document.getElementById('disclaimer').style.display == 'none') { document.getElementById('disclaimer').style.display = 'block'; } else { document.getElementById('disclaimer').style.display = 'none'; }">disclaimer</a>
<div id="disclaimer" style="display:none">disclaimer text goes here</div>

CSS Part:
<style> #disclaimer{width:250px; text-align:left; padding:20px; background: rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.5); border-radius:10px; font-size:10px; transition:all 1s} </style>


Version 3: Display Toggle (animated opacity)

disclaimer
disclaimer text goes here



HTML Part:
<a href="javascript:;" onmousedown="if(document.getElementById('disclaimer2').style.opacity == '0') { document.getElementById('disclaimer2'). style.opacity = '1'; } else { document.getElementById('disclaimer2'). style.opacity = '0'; }">disclaimer</a>
<div id="disclaimer2" style="opacity:0">disclaimer text goes here</div> 

CSS Part:
<style> #disclaimer2{width:250px; text-align:left; padding:20px; background: rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.5); border-radius:10px; font-size:10px; transition:all 1s} </style>


Version 4:Display Toggle (animated height)
"style.height = '60px';" must be the same height as #disclaimer3 height for accurate transitions!

disclaimer
disclaimer text goes here



HTML Part:
<a href="javascript:;" onmousedown="if(document.getElementById('discwrapper'). style.height == '0px') { document.getElementById('discwrapper'). style.height = '60px'; } else { document.getElementById('discwrapper'). style.height = '0px'; }">disclaimer</a>
<div id="discwrapper" style="height:0px;overflow:hidden;"><div id="disclaimer3" style="display:block">disclaimer text goes here</div></div> 

CSS Part:
<style> #disclaimer3{width:250px; text-align:left; padding:20px; background: rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.5); border-radius:10px; font-size:10px; transition:all 1s} #discwrapper{transition:height 2s}</style>






Overlapping Images


Position the image using top, left, right, bottom properties.
If using position:relative, use margin-bottom/margin-top to negate whitespace left from the positioning.
<img src="IMG1" style="position:relative; pointer-events:none; top:-100px; left:450px; margin-bottom:-100px;">


Image Transitions


IMG1 = first image
IMG2 = second image
either change "width:100px; height:100px" to the width and height of your images or you can leave them out altogether.
position:relative can be changed to absolute or fixed if needed, but should not be removed completely.

HTML part:
<div class="transition"><img src="IMG1"><img src="IMG2"></div>

CSS Part:
<style>.transition{position:relative;width:100px;height:100px} .transition img{position:absolute;top:0;left:0} .transition img:first-child{opacity:1; transition:all 1s} .transition img:last-child{opacity:0; transition: all 1s} .transition:hover img:first-child{opacity:0} .transition:hover img:last-child{opacity:1}</style>





There are many different methods to do tabs, each of them having their advantages and disadvantages. Which method you go along with largely depends on preference. For information on usage, please refer to the respective OPs.

Regular Tabs



Hraeth Method (OP)
<a href="javascript:;" onmousedown="if(document.getElementById('tab1').style.display == 'none') { document.getElementById('tab1').style.display = 'block'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none'; document.getElementById('tab4').style.display = 'none';  document.getElementById('tab5').style.display = 'none'; }"><!--
 
--> TAB 1 <!--
 
--> </a> | <a href="javascript:;" onmousedown="if(document.getElementById('tab2').style.display == 'none') { document.getElementById('tab2').style.display = 'block'; document.getElementById('tab1').style.display = 'none'; document.getElementById('tab3').style.display = 'none'; document.getElementById('tab4').style.display = 'none';  document.getElementById('tab5').style.display = 'none'; }"><!--
 
--> TAB 2 <!--
 
--> </a> | <a href="javascript:;" onmousedown="if(document.getElementById('tab3').style.display == 'none') { document.getElementById('tab3').style.display = 'block'; document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab4').style.display = 'none';  document.getElementById('tab5').style.display = 'none'; }"><!--
 
--> TAB 3 <!--
 
--> </a> | <a href="javascript:;" onmousedown="if(document.getElementById('tab4').style.display == 'none') { document.getElementById('tab4').style.display = 'block'; document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none';  document.getElementById('tab5').style.display = 'none'; }"><!--
 
--> TAB 4 <!--
 
--> </a> | <a href="javascript:;" onmousedown="if(document.getElementById('tab5').style.display == 'none') { document.getElementById('tab5').style.display = 'block'; document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none';  document.getElementById('tab4').style.display = 'none'; }"> <!--
 
--> TAB 5 <!--
 
--> </a>

<div id="tab1" style="display:block; width:250px; height:100px; overflow:auto; text-align:left; color:#ffffff; border:1px solid #000000; border-radius:10px; padding:20px">TAB 1</div> <!--
 
--> <div id="tab2" style="display:none; width:250px; height:100px; overflow:auto; text-align:left; color:#ffffff; border:1px solid #000000; border-radius:10px; padding:20px">TAB 2</div> <!--
 
--> <div id="tab3" style="display:none; width:250px; height:100px; overflow:auto; text-align:left; color:#ffffff; border:1px solid #000000; border-radius:10px; padding:20px">TAB 3</div> <!--
 
--> <div id="tab4" style="display:none; width:250px; height:100px; overflow:auto; text-align:left; color:#ffffff; border:1px solid #000000; border-radius:10px; padding:20px">TAB 4</div> <!--
 
--> <div id="tab5" style="display:none; width:250px; height:100px; overflow:auto; text-align:left; color:#ffffff; border:1px solid #000000; border-radius:10px; padding:20px">TAB 5</div>


AlisonRobin Method (OP)
<a href="javascript:;" onmousedown="for(var ii=0;ii<5;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('one').style.display='inline';">Show One</a> / <a href="javascript:;" onmousedown="for(var ii=0;ii<5;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('two').style.display='inline';">Show Two</a> / <a href="javascript:;" onmousedown="for(var ii=0;ii<5;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('three').style.display='inline';">Show Three</a> / <a href="javascript:;" onmousedown="for(var ii=0;ii<5;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('four').style.display='inline';">Show Four</a> / <a href="javascript:;" onmousedown="for(var ii=0;ii<5;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('five').style.display='inline';">Show Five</a>

<span id="one" class="tab" style="display:inline;">One</span><span id="two" class="tab" style="display:none;">Two</span><span id="three"class="tab" style="display:none;">Three</span><span id="four"class="tab" style="display:none;">Four</span><span id="five"class="tab" style="display:none;">Five</span>



Scrolling Tabs


(OP)
Horizontal Scroll
<style>:root{--tab-width: 500px; --tab-height:300px; --tab-padding:20px; --tab-margin:20px} .tab{display:inline-block; box-sizing:border-box;background:#000000; padding: var(--tab-padding); width:var(--tab-width); height: var(--tab-height); margin-right:var(--tab-margin); position:relative} #tabswrapper{width:var(--tab-width); height: var(--tab-height); overflow:hidden; position:relative} #tabmover{width:9999px;position:relative; left:0px; transition: all 2s}</style>

<a href="javascript:;" onclick="document.getElementById('tabmover').style.left = '0px' ">One</a> <a href="javascript:;" onclick = "document.getElementById('tabmover').style.left = 'calc( 0px - var(--tab-width) - var(--tab-margin))'">Two</a> <a href="javascript:;" onclick="document.getElementById('tabmover').style.left = 'calc( 0px - 2* var(--tab-width) - 2*var(--tab-margin))'">Three</a> <a href="javascript:;" onclick="document.getElementById('tabmover').style.left = 'calc( 0px - 3*var(--tab-width)  - 3*var(--tab-margin))'">Four</a>  <a href="javascript:;" onclick="document.getElementById('tabmover').style.left = 'calc( 0px - 4*var(--tab-width)  - 4*var(--tab-margin))'">Five</a> 


<div id="tabswrapper"><div id="tabmover"><div class="tab">Uno</div><div class="tab">Dos</div><div class="tab">Tres</div><div class="tab">AYYYYY</div><div class="tab">Five</div></div></div>


Vertical Scroll
<style>:root{--tab-width: 500px; --tab-height:300px; --tab-padding:20px; --tab-margin:20px} .tab{display:block;box-sizing:border-box;background:#000000; padding: var(--tab-padding); width:var(--tab-width); height: var(--tab-height); margin-bottom:var(--tab-margin); position:relative} #tabswrapper{width:var(--tab-width); height: var(--tab-height); overflow:hidden; position:relative} #tabmover{height:9999px;position:relative; top:0px; transition: all 2s}</style>

<a href="javascript:;" onclick="document.getElementById('tabmover').style.top = '0px' ">One</a> <a href="javascript:;" onclick = "document.getElementById('tabmover').style.top = 'calc( 0px - var(--tab-height) - var(--tab-margin))'">Two</a> <a href="javascript:;" onclick="document.getElementById('tabmover').style.top = 'calc( 0px - 2* var(--tab-height) - 2*var(--tab-margin))'">Three</a> <a href="javascript:;" onclick="document.getElementById('tabmover').style.top = 'calc( 0px - 3*var(--tab-height)  - 3*var(--tab-margin))'">Four</a>  <a href="javascript:;" onclick="document.getElementById('tabmover').style.top = 'calc( 0px - 4*var(--tab-height)  - 4*var(--tab-margin))'">Five</a> 


<div id="tabswrapper"><div id="tabmover"><div class="tab">Uno</div><div class="tab">Dos</div><div class="tab">Tres</div><div class="tab">AYYYYY</div><div class="tab">Five</div></div></div>


Fading Tabs


(OP)
<style>.hidden{display: none;} #links a {display: inline; color: #2a93ff;/*your link color here*/} #box{background-color: #c5e0ff; /*your bg color here*/ border: 1px solid #141421; /*your border color here*/ color: #141421; /*your text color here*/ height: 240px; width: 290px; padding: 10px;}/*css3 animations*/@keyframes fadeout{0%{opacity:1;}100%{opacity:0;}} @keyframes fadein{0%{opacity:0;}100%{opacity:1;}} </style>

<div id="maincontainer"><div id="links"><a href="javascript:;" onmousedown="setTimeout(function(){document.getElementById('textcon').style.animation='fadeout 0.5s ease'; setTimeout(function () {document.getElementById('section0').innerHTML=document.getElementById('section1').innerHTML;document.getElementById('textcon').style.animation='fadein 0.5s ease';}, 500);}, 500);">Tab 1</a> <a href="javascript:;" onmousedown="setTimeout(function(){document.getElementById('textcon').style.animation='fadeout 0.5s ease'; setTimeout(function () {document.getElementById('section0').innerHTML=document.getElementById('section2').innerHTML;document.getElementById('textcon').style.animation='fadein 0.5s ease';}, 500);}, 500);">Tab 2</a> <a href="javascript:;" onmousedown="setTimeout(function(){document.getElementById('textcon').style.animation='fadeout 0.5s ease'; setTimeout(function () {document.getElementById('section0').innerHTML=document.getElementById('section3').innerHTML;document.getElementById('textcon').style.animation='fadein 0.5s ease';}, 500);}, 500);" >Tab 3</a> <a href="javascript:;" onmousedown="setTimeout(function(){document.getElementById('textcon').style.animation='fadeout 0.5s ease'; setTimeout(function () {document.getElementById('section0').innerHTML=document.getElementById('section4').innerHTML;document.getElementById('textcon').style.animation='fadein 0.5s ease';}, 500);}, 500);">Tab 4</a> <a href="javascript:;" onmousedown="setTimeout(function(){document.getElementById('textcon').style.animation='fadeout 0.5s ease'; setTimeout(function () {document.getElementById('section0').innerHTML=document.getElementById('section5').innerHTML;document.getElementById('textcon').style.animation='fadein 0.5s ease';}, 500);}, 500);">Tab 5</a></div><div id="box"><div id="textcon"><!--this box is what causes the text to fade in and out. Anything pasted into the sections below (headers, paragraphs, etc) will fade in and out along with it.--><div id="section0"><p>This is the default text that will show up.</p></div></div><div id="section1" class="hidden"><p>This is the first text that will show up. Could be the same as default, could be different. That's up to you.</p></div><div id="section2" class="hidden"><p>This is the second text that will show up.</p></div><div id="section3" class="hidden"><p>This is the third text that will show up.</p></div><div class="hidden" id="section4"><p>This is the fourth text that will show up.</p></div><div class="hidden"  id="section5"><p>This is the fifth text that will show up.</p></div></div></div>



Other Tabs


TBA






Accordions, Flipcards and Other Stuff



Accordion

<div id="accordion"><div class="tab"> <input id="tab-one" type="radio" name="tabs"> <label for="tab-one">Label One</label> <div class="tab-content"> <div class="inviscroll">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</div></div></div><!--


--><div class="tab"> <input id="tab-two" type="radio" name="tabs"> <label for="tab-two">Label Two</label> <div class="tab-content"> <div class="inviscroll">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</div></div></div><!--


--><div class="tab"> <input id="tab-three" type="radio" name="tabs"> <label for="tab-three">Label Three</label> <div class="tab-content"> <div class="inviscroll">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</div></div></div></div>


<style>/* --- MAINFRAME -- */ .tab,#accordion label{position:relative}#accordion label,#accordion label::after{display:block;line-height:3}.tab{width:100%;overflow:hidden}#accordion input{position:absolute;opacity:0;z-index:-1}#accordion label{padding:0 0 0 1em;cursor:pointer}.tab-content{max-height:0;overflow:hidden;-webkit-transition:max-height .5s;-o-transition:max-height .5s;transition:max-height .5s}.tab-content p{margin:1em}#accordion label::after{position:absolute;right:0;top:0;width:3em;height:3em;text-align:center;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s} .inviscroll{width:100%;overflow:auto;}/*

--- MAIN STYLING ---
*/ #accordion{width:600px} #accordion input:checked~.tab-content{max-height:15em} #accordion label{background:#000; color: #fff; font-weight:700;} .tab-content{background:#fff; color:#000;} .inviscroll{width:560px; max-height:10em; padding:20px; padding-right:100px}/*

--- ARROW STYLING ---
*/input[type=radio]+label::after{content:"\25BC"}input[type=radio]:checked+label::after{transform:rotateX(180deg)}</style>


Flipcards

<div class="flip-container" ontouchstart="this.classList.toggle('hover');"><div class="flipper"><div class="front" style="background: url('https://c1.staticflickr.com/3/2939/14175802163_c2ebbaae54_b.jpg') top left"><div class="ftext"><center><h4 style="color: #866">title 1</h4></center></div></div><div class="back"  style="overflow:hidden"><div class="btext" style="overflow:auto; padding-right: 100px; width: 260px; height: 400px">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
</div></div></div></div>


<style> .flip-container { perspective: 1000px; } .flip-container:hover .flipper, .flip-container.hover .flipper { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); } .flip-container, .front, .back { width: 280px;height: 480px;} .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } .front, .back { backface-visibility: hidden; -webkit-backface-visibility: hidden; position: absolute; top: 0; left: 0; border-radius:20px; border: 2px solid #000} .front { z-index: 2; transform: rotateY(0deg); background: #000000;} .back { transform: rotateY(180deg); background: #111111; overflow:auto} tbody{border:none} table{width:auto;} .preview{background:none} .ftext, .btext{padding:20px; font: 10px verdana; color: #fff} h4{font-size: 42px; color: #fff}</style>






Google Fonts



https://fonts.google.com/
How To:
Image Tutorial
* Pick the fonts you like using the + button next to the font
* Use the Standard or @import link provided and copy the code

<link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans" rel="stylesheet">

<span style="font:40px Lato">It was going to be a lonely trip back.</span>


Custom Fonts


Credit to C!ssy

http://www.dafont.com/
https://www.fontsquirrel.com/tools/webfont-generator
How To:
Image Tutorial
* Find a font you like and download it
* Upload the font to FontSquirrel's Webfont generator
* Upload the .woff, .woff2 etc files you receive to a file host of your choice, e.g. dropbox.
* Add the following code, replace the URL placeholders with your fonts and 'customFont' with the font name of your choice.

<span style="font:40px 'customFont'">It was going to be a lonely trip back.</span>

<style> @font-face {font-family: 'customFont';src: url('FONTURL.woff2') format('woff2'),url('FONTURL.woff') format('woff');font-weight: normal;font-style: normal;} </style>


Fonts with Background Images


Credit to C!ssy

It was going to be a lonely trip back.

<div style="font:24px Pacifico;background:url('https://68.media.tumblr.com/c4c1e5843e0af3523cb497469f2c95de/tumblr_ooxeme3G7O1uno395o1_540.gif'); background-size:cover background-clip:text; -webkit-background-clip:text; color:transparent">It was going to be a lonely trip back.</div>


Other Text Effects



Glowing Text
Text here
<span style="font:24px Georgia;font-style:italics;color:#ffffff;text-shadow:0 0 5px #ffffff">Text here</span>


Blurry Text
Text here
<span style="font:24px Georgia;font-style:italics;color:transparent;text-shadow:0 0 2px #ffffff">Text here</span>


Outlined Text
Text here
<span style="font:24px Georgia;font-style:italics;color:#ffffff;text-shadow:1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000">Text here</span>






Music Players




How to:
Simply upload the mp3 file to a host such as dropbox or kiwi6 and replace the URL.
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="100" height="20"> <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" /> <param name="bgcolor" value="#000000" /> <param name="wmode" value="transparent"><param name="FlashVars" value="mp3=URLHERE" /></object>






Transitions


Transitions create smooth animations between two states of an element. Not every property is animatable, but using "all" generates a catch-all to transition any property that changes.
More detailed information on W3Schools.
General
<style>.something{transition:all 2s}</style>


Link transitions
<style>a:link, a:visited{color:#000000;transition:all 1s;} a:hover{color:#ffffff}</style>


Working with Keyframes
While too big of a topic to cover on here, keyframes are a very powerful tool for creating custom animations. Learn more about animations on W3Schools. animate.css makes use of keyframes. see below.

Gradients
Gradients can get very complex but are very useful even in their more simple application. I recommend looking into the Colorzilla Gradient Generator.
Check out UIGradients and Webgradients for beautiful and convenient premades.
Example: Radial body gradient
<style>body{background: rgb(56,33,20);
background: -moz-radial-gradient(center, ellipse cover, rgba(56,33,20,1) 0%, rgba(20,6,12,1) 100%); background: -webkit-radial-gradient(center, ellipse cover, rgba(56,33,20,1) 0%,rgba(20,6,12,1) 100%); background: radial-gradient(ellipse at center, rgba(56,33,20,1) 0%,rgba(20,6,12,1) 100%);}</style>


animate.css
Using animate.css, one can easily implement more sophisticated animations.
Website
Usage
Link the stylesheet using the code below.
Add the class animated to the element you want to animate as well as the class name of the animation you want. (see website) If you want an infinite animation, also add the class infinite to it.
e.g. <h1 class="animated infinite bounce">Example</h1>

Example


<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">






Quality Of Life



CSS & HTML Comments
Comments are used for text that is displayed in the source code, but not in the browser. This can be especially useful if you have larger amounts of content that you want to separate, but would be influenced by line breaks.

HTML
<!-- In HTML, comments are defined using these arrows. They can be single or multi-line. -->

CSS
Comments in CSS are often used to separate blocks of code. Since you cannot use line breaks in CSS on TEFc, they can immensely improve readability.

/* IN CSS, comments are written between a forward slash and asterisk. They can be single or multi-line. */

External CSS
External CSS has multiple advantages over inline CSS, one of them being that you're getting rid of a huge wall of text inside your own blog. The other big advantage is that you can format your CSS however you like, it doesn't all have to be written in one line, which majorly improves readability.
For a more detailed explanation on its usage, check out AlisonRobin's guide on external CSS and the W3 Article.

<link rel="stylesheet" type="text/css" href="URL">






Individual Codes


This section is unaltered from the first CSS Reference.

No top navigation bar



No TEFc Logo



No Sidebar



Centered blog
(only works in conjunction with blog width)



Blog width



Blog top to bottom 'flush'



No comment background



No comment borders



'spaced' comments



scrolling comments



centered comments



No Blog Title



No Signatures



No User images (comments)



No User images + date (blog)



Centered 'Add new comment' links



Details



No 'Preview' styling



No Title leaf



No "breadcrumb" link



No reads + no "username's blog"



No sidebar bullet points



'Edit' and 'Reply' styling



No blue line



No black line



No white line with tables



Textarea styling



Update box styling



Text



General text



Comment text



All links



All links on hover



Blog links



Blog links on hover



Sidebar links



Sidebar links on hover



Page number links + hover



"New" text



Blog Title



Sidebar Titles #1



Sidebar Titles #2







Laiia's picture

Track. Thank you !

Track. Thank you !

Avatar & signature by Shimmyshimmy. ♥
Thais's picture

this helps a lot, thank you!!

this helps a lot, thank you!!
Display pic by crabbycrown ♥
Eltera's picture

Awww. Track. Thank you!

Awww. Track.
Thank you!

LOOLOOLOOLOOLOOOOO~ /track

LOOLOOLOOLOOLOOOOO~
/track
Poppyflower's picture

&hearts;

~Poppy~
Profile picture by ahimsa ♥


Pixel Wis by squeegie~

Must track! Thank you so

Must track! Thank you so much! ^^

I'm sorry, Unplugged, if i

I'm sorry, Unplugged, if i missed this somewhere, but that about page numbers links? I want to change the color of it
Unplugged's picture

ul.pager a{color:#000} I

ul.pager a{color:#000}

I will add this code to the list. Smiling

Thank you so much, dear :>

Thank you so much, dear :>
Foodog's picture

Gonna place a track here..

Gonna place a track here..
Unplugged's picture

Updates - added new section

Updates
- added new section for music: mp3 player and youtube player
- added "Image Change on hover" in Layout section !
- added "Pagination links + pagination hover" in Text section
Flatsoda's picture

I LOVE YOU

I LOVE YOU

ZakuroToshino's picture

I wanted to use code for

I wanted to use code for hidden scrollbar, but I can't center the frame, only text... :c
.Ru.'s picture

Unplugged, Is it possible to

Unplugged,

Is it possible to create a hidden scrollbar div + shadow box as one?
I know some things about code and css, but not this. Could there be a code for it?
I've tried to make one myself with no luck - guess I don't know what I'm doing... heheh




"If your eyes could speak, what would they say?" -Max

Profile art by me
mismatched's picture

Why am I not tracking this?

Why am I not tracking this?

You genius, you.

You genius, you.

Thank you, Tuo and Kohva!

Unplugged's picture

Oh gosh sorry Ru, I never

Oh gosh sorry Ru, I never answered your question! Do you still need help?
.Ru.'s picture

Yes, please, sir. Do you

Yes, please, sir. Do you know if there is a code for those two I mentioned in the previous comment?

"If your eyes could speak, what would they say?" -Max

Profile art by me
Unplugged's picture

Sure. Take the code for the

Sure. Take the code for the hidden scrollbar div and add the box-shadow property to it. Adjust the colors to your needs.

<div style="width:320px;height:320px;overflow:hidden;border:1px solid #000; box-shadow:0px 0px 15px #ff0000;"><div style="width:300px;height:280px;padding:20px;overflow:auto;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>

Preview:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

.Ru.'s picture

Ohmygoodness thank you!! It's

Ohmygoodness thank you!! It's perfect =D

I forgot to ask: How do I get the rounded edges for the box (like the ones you made in the node), but keep everything else?

"If your eyes could speak, what would they say?" -Max

Profile art by me
Unplugged's picture

Add "border-radius:10px;"

Add "border-radius:10px;" after "box-shadow:0px 0px 15px #ff0000;" Smiling the higher the number, the rounder the corner.
.Ru.'s picture

Wow thank you

Wow thank you Smiling

"If your eyes could speak, what would they say?" -Max

Profile art by me
mismatched's picture

Hey, so I'm trying to use the

Hey, so I'm trying to use the image change on hover code, and it seems to be working, but the 'image 1' isn't showing up?

Here's a link to the blog (the image is in the updates box if you hover): http://endlessforest.org/community/node/89805/

It would be huge if you could help me out! xD
Thanks.
Unplugged's picture

Hey there. Pretty sure it's

Hey there. Pretty sure it's because of the custom positioning you put on the picture. Smiling
Remove this from the picture and add it to the "hov" div instead:
style="position:relative;top:-250px;left:250px;margin-bottom:-300px;margin-left:-200px;"

The reason this happens is because 'image 1' is a background image while 'image 2' is a "real" image. ((basically what this code does is making the 2nd image appear over the background image)) If you change the positioning of image 2 it will affect only the 'real' picture, but not the background image. So you have to put your positioning parameters on the div which holds both img1 and img2.
mismatched's picture

OHH! Okay, that makes so much

OHH! Okay, that makes so much more sense! Thank you!

[e] okay, so, the image is showing up, but now the "style=" thing isn't working. I know I must not be writing it out correctly within the <*style><*/style> tags or something...
Rouda's picture

So much yes. &hearts;

So much yes. ♥
wake's picture

-plops in-

-plops in-
-SH's picture

I love this! So

I love this! So useful♥

Also, just wondering, Unplugged, is there a way to make all images on a blog into greyscale?

Ahh, I'm actually really

Ahh, I'm actually really happy that I could somehow put it in my track in the past. It gives me tiny, yet useful and needed help with my CSS stuff! <3
Unplugged's picture

SH-- I've looked into that

SH-- I've looked into that previously. Afaik, no, not without javascript. I think I've seen a method over on tumblr that could work on the TEFc though. I'll take another look.

mismatched-- Sorry for taking so long to reply, but I think you already solved it? It works alright for me at least. The way you did it is correct.
-SH's picture

Ah, I thought that might be

Ah, I thought that might be the case - I did have a search around, but when all I could find was javascript I thought I'd ask to see if there was easier way. Thanks for having another look though (:
Unplugged's picture

SH - Surprise! This code will

SH - Surprise! This code will make all images (except backgrounds) grayscale.

<style>img{filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}</style>


This code will make the whole page + images (minus background) grayscale. It lags the page pretty bad though. I highly advise against using it. Really, don't. Use regular CSS instead to change colors.

<style>body, img{filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}</style>
-SH's picture

Oh my god, Unplugged, you are

Oh my god, Unplugged, you are awesome! Thank you so much :')
Unplugged's picture

It's what I do. You can

It's what I do. Sticking out tongue

You can also make the images appear in color on hover if you add this:
<style>img:hover{filter:none;-webkit-filter:none}</style>

You could probably also add a transition in there somewhere but it likely won't work for all browsers.

[e]: Alright, the whole thing. Transitions and color on hover, the whole shabang. Transitions don't work in Firefox but should work everywhere else.

<style>img{filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */-webkit-transition:all 0.6s; -webkit-backface-visibility: hidden;}img:hover{filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");filter:none;-webkit-filter:grayscale(0%)}</style>
-SH's picture

Thank you again, so much, it

Thank you again, so much, it works brilliantly ^^
DeerUniverse's picture

Yay! This is so helpful!! Do

Yay! This is so helpful!! Do you know the code for really big text that you can change the color and font of? I am making two bios for my fawns. Smiling
"Common sense is not so common." -Voltaire
Unplugged's picture

Sorry again for the slow

Sorry again for the slow reply.. I get distracted. D:

One way of doing it would be with this:
<font style="font:70px Verdana; color:#000000">Text here</font>

"font:70px Verdana;" determines the font size and the font type.
"color:#000000" determines the text color.
DeerUniverse's picture

0.0 thank you so much,

0.0 thank you so much, Unplugged!
Bump this... Smiling
"Common sense is not so common." -Voltaire
Elzire's picture

This is uber thoughtful of

This is uber thoughtful of you to post these here for everyone! Thank you Unplugged Smiling
Would love to meet your deer, too
How do you describe both the beginning and the end? We should have known better, but we didn't. What does it matter what we think we know? In the end, there's no denying the truth. - Left Behind --[Art by Aquilo]
Silversnow200's picture

Tracking

Tracking
_lioness_'s picture

how is it still difficult(

how is it still difficult(
Mest
Shelby

Useful thing! I'll have to

Useful thing! I'll have to try!
DeerUniverse's picture

I'm sorry to bother you,

I'm sorry to bother you, Unplugged, but would you know how to change the background of the sidebar?
._. yes, I know, I'm terribly ignorant with that sort of css...
"Common sense is not so common." -Voltaire
_lioness_'s picture

I can not get the code for

I can not get the code for the music (
Mest
Shelby
REDESAR's picture

.

.
Skype: le_maska
Peverel's picture

Thank you!

Thank you!
kikinkacze's picture

thx its so easy

thx Laughing out loud its so easy
gif by Hautakumpu
Hum's picture

If I'm asking in the wrong

If I'm asking in the wrong place, just kick me and I'll shoo. <o>

Alright, so, I love to have my "edit" function on my posts and, as many know, when a comment has a "reply" made off of it, the "edit" function is lost.

Therefore, I'm interested in some CSS that will do one of two things:

1. Remove the "reply" option from every comment on the page entirely.
2. Replace the "reply" option with the "Add new comment" option at the top of the comments section.

I've never actually seen either done, so I'm not sure how difficult it would be/if it's possible, but if you (Unplugged or whomever you are, reader) know how to do either, I'd love to mooch.

Thank you in advance! ♥
Unplugged's picture

This is a good place to ask I

This is a good place to ask I think. Smiling

I'm not sure if it's possible to do #2, but #1 should be easily done with this:
li.comment_reply{display:none !important}

I'll look into #2. I think I have a faint idea of how it might be possible to achieve.
Hum's picture

Oh, bless your soul. Works

Oh, bless your soul. Works like a charm. You're the best!

Yeah, I was thinking like... Anything that added a new link down there in the place of "reply" somehow and just directed to the comment page. Like putting in "Add new comment" down there. Somehow.

Or something that edited the normal "reply" function and put that in its place. I'm not sure if it'd be easier to create something new there somehow, or to modify the existing thing. I didn't know a single thing about CSS 72 hours ago, so I'm probably off my rocker.

Regardless, thank you so much. @u@ ♥