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
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>
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.
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.
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.
<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
<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>
<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>
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
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
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>
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.
Until now, I was too shy to come out and say that your posts are really helpful. I hope this isn't too awkward, but... thank you so much for this post !!(and the link collection aswell)
I was searching the directory when I came across this page you made, its helped me [understand] a bunch so far!! thanks a lot ^^
I want to ask 2 things, if, thats okay with you..
1) Im working on this: http://endlessforest.org/community/node/96495 and theres been 2 issues with the..code or something. the first is the (spirit) rectangle below the (elements) rectangle - its over to the left more than I would like it to be. I don't know whats wrong, and Ive tried to < center > it, but that doesnt seem to click
2) the second thing is the comments section.. how could I reduce the length of the comments to fit the size of my blog?
if you know what to fix Id be so grateful. but if you can't, I'll understand
From StalwartKey
I fooled around with the code for long enough to actually fix the issues, but when I returned to my comment for edit, it wasn't an option . nevermind my questions, please. Im sorry to bother you Unplugged
—
"Don't judge me until you know me, don't underestimate me until you challenge me and don't talk about me until you've talked to me."
Hey there! I apologize for the late reply. I was away for a while and then got distracted and stuff. If there's still something you need help with please let me know!
Help me xD I'm trying to do - Image Change on hover. But I'm confused with the codes and I got that when you hover over the empty place, then you receive the picture, but how to make so that when you hover over the picture appeared in the same place another picture..will you help me with this problem?
(after the words "..Hello!" there is a blank area, there is a problem )
Hello all! I have gone over the quick reference and done a major rework! The old reference had been basically unaltered since 2013 so it really was time for an update.
What's new?
Some of the major features include:
Improved Hidden Scrollbars - The old code was confusing, unintuitive and frankly, kind of a mess. This version is basically 100% reliable and requires much less fiddling. Image Transitions - This one I think is especially awesome because unlike the previous transition code, this one allows you to transition between two semi-transparent images without having them overlay. While I did test this, please let me know if you do run into any trouble with it. Tabs - The tabs include a 5 Tab version of Hraeth's JS Tabs and AlisonRobin's JS Tabs, WhenDeerAttack's Fading Tabs, and my scrolling tabs. The Scrolling Tab code has been completely reworked to require much less maintenance and it should be super easy to edit now. More details on this I will add to the original blog soon. Custom Fonts - Include image tutorials for both Google fonts and Custom fonts.
There's much more I haven't mentioned, but these things I think are especially important.
There's a few things I still need to edit. The following will also be added in due time:
Status Bars
Alternate Tabs
About CSS Variables
quick question!
In the 'preview', the hover boxes don't seem to work properly. The preview displays the text that's supposed to be visible only when hovering over the enabled text. Is that normal, and will it fix itself when the blog is posted?
Yes : (
I've tried rearranging my div boxes, thinking there was other coding interrupting the hover-feature, and opening a new blog entry to see if it was the page timing out in one way or another.
oh I need this.
Until now, I was too shy to
thank you so much for this post !!(and the link collection aswell)
>hugs<
Veryy useful, thanks! How
so before:
and after:
NuclearSilence, thanks! I'm
Mercury., try this perhaps:
<div class="hoverbox">text</div> <style>.hoverbox{background:#000;width:500px;height:100px;overflow:auto;transition:height 0.6s; -moz-transition:height 0.6s; -webkit-transition:height 0.6s; -o-transition:height 0.6s;} .hoverbox:hover{height:400px}</style>The "0.6s" value is the speed of the transition. You can change that value to whatever suits your needs.
Otherwise, you may be looking for this.
(No subject)
. For some reason this blog
For some reason this blog keeps disappearing on your account page. Wonder if it's a site hiccup or something else.
All in all, glad for the help this gave me when I got confused on a couple of things. ♥
I simply cannot describe how
I need to track this ^^
Art by Aihnna & pixel by Mary13~
Oh God, thank you.
Character Hub
Why am I such a idiot for
♥ ♥
♥
vala would you like a simple
btw unplugged is it possible to make scrolling comments with an invisible scroll bar?
Unplugged, Hi I was
I was searching the directory when I came across this page you made, its helped me [understand] a bunch so far!! thanks a lot ^^
I want to ask 2 things, if, thats okay with you..
1) Im working on this: http://endlessforest.org/community/node/96495 and theres been 2 issues with the..code or something. the first is the (spirit) rectangle below the (elements) rectangle - its over to the left more than I would like it to be. I don't know whats wrong, and Ive tried to < center > it, but that doesnt seem to click
2) the second thing is the comments section.. how could I reduce the length of the comments to fit the size of my blog?
if you know what to fix Id be so grateful. but if you can't, I'll understand
From StalwartKey
I fooled around with the code
"Don't judge me until you know me, don't underestimate me until you challenge me and don't talk about me until you've talked to me."
Profile pic art by General Zoi
Hey there! I apologize for
Added the code for No reads +
Also Page number links + hover under "Text"
Track
Finally updated the base
Help me xD I'm trying to do -
(after the words "..Hello!" there is a blank area, there is a problem )
Wow, great collection! o:
Also track.
perfect. ~
Tracking.
Think I'm gonna try this.
And thank you for posting this
even though you posted it a long time agoLOOK OUT CSS, HERE I COME
LORDY, thank you! This is
need this
Track (\_/) (o o) (_ _)
(\_/)
(o o)
(_ _)
not sure if I tracked this or
late track bc this saved me
A boop for this helpful bit
A boop for this helpful bit of awesomeness.
.
Yiss, I'll need
Amazingly helpful post, thank you Unplugged!
This is so awesome! Thank you
A little silly, but can you
I hope this helps!
hey neat, I was looking for
gosh this place is handy lol
CSS Quick Reference v2 is
Hello all! I have gone over the quick reference and done a major rework! The old reference had been basically unaltered since 2013 so it really was time for an update.
What's new?
Some of the major features include:
Improved Hidden Scrollbars - The old code was confusing, unintuitive and frankly, kind of a mess. This version is basically 100% reliable and requires much less fiddling.
Image Transitions - This one I think is especially awesome because unlike the previous transition code, this one allows you to transition between two semi-transparent images without having them overlay. While I did test this, please let me know if you do run into any trouble with it.
Tabs - The tabs include a 5 Tab version of Hraeth's JS Tabs and AlisonRobin's JS Tabs, WhenDeerAttack's Fading Tabs, and my scrolling tabs. The Scrolling Tab code has been completely reworked to require much less maintenance and it should be super easy to edit now. More details on this I will add to the original blog soon.
Custom Fonts - Include image tutorials for both Google fonts and Custom fonts.
There's much more I haven't mentioned, but these things I think are especially important.
There's a few things I still need to edit. The following will also be added in due time:
Status Bars
Alternate Tabs
About CSS Variables
Oh, very good update! Here
this is the best you are an
Tracked ~ So helpful!!!
Signature by Wildflowerdeer and Profile by Sybilline
Personal/Character Hub
quick question! In the
In the 'preview', the hover boxes don't seem to work properly. The preview displays the text that's supposed to be visible only when hovering over the enabled text. Is that normal, and will it fix itself when the blog is posted?
Have you changed your input
Yes : ( I've tried
I've tried rearranging my div boxes, thinking there was other coding interrupting the hover-feature, and opening a new blog entry to see if it was the page timing out in one way or another.
EDIT: Resolved, I'm just a big ole silly willy
saving for later
tracking this!