multiple tabs functions

LIVE DEMO:

See the Pen multiple tabs functions by clark fortuna (@graydirt) on CodePen.

generate bar chart

LIVE DEMO:

See the Pen Dynamic Counting of Numbers by clark fortuna (@graydirt) on CodePen.

editable content with arrows

LIVE DEMO:

See the Pen editable content with arrows by clark fortuna (@graydirt) on CodePen.

Dynamic Javascript Content

JSON format.

my basic dynamic content.

LIVE DEMO:

See the Pen xml-code by clark fortuna (@graydirt) on CodePen.

CSS3 Transitions

transition

css3 transition properties

css3 transition show that we can add effects via css or jquery and it has 4 properties see below, but i used the shorthand of it.
.mytransition {
     transition-property transition-duration transition-timing-function transition-delay
}

CSS:
.mytransition {
     background:blue;
     width:200px;
     padding:10px;
     height:150px;
     transition: all .5s linear;
     color:white;
}

.mytransition:hover {
     background:yellow;
     color:red;
}

HTML:

<div class="mytransition">your content here...</div>

LIVE DEMO:

See the Pen css3 transition by clark fortuna (@graydirt) on CodePen.

LIVE DEMO 2:advanced css3 transition

See the Pen advance css3 transition by clark fortuna (@graydirt) on CodePen.

:nth-child and :nth-of-type

:nth-child{}

CSS:
.div1 p:nth-child(2){
   color:#ff0000;
}

:nth-child(2) = select a color for every p element that is the second child of its parent class .div1

HTML:
<div class="div1">
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
</div>

OUTPUT:

now if we insert <h2> tag above the the first paragraph:
<div class="div1">
  <h2>heading</h2>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
</div>

OUTPUT:

> because the :nth-child selector apply in the second element of the class .div1

:nth-of-type{}

CSS:
.div1 p:nth-of-type(2){  
  color:#ff0000;
}

:nth-of-type(2) = select the second paragraph child of a parent.

HTML:
<div class="div1">
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
</div>

OUTPUT:

now insert again <h2> tag above the the first paragraph:
<div class="div1">
  <h2>heading</h2>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
</div>

OUTPUT:

> because the :nth-of-type strictly target the second element in your css declaration unlike the nth-child.

for me its ok to use :nth-of-type instead of :nth-child because its less conditional. 

You can also use :nth-child and :nth-of-type via jquery.

CSS Pseudo-elements for :before and :after

The ":before" pseudo-element can be used to insert some content before the content of an element.
The ":after" pseudo-element can be used to insert some content after the content of an element.

:before and :after

CSS:
.main:before {
    color:#ff0000;
    font-size:24px;
    content:"before"
}
.main:after {
    color:#ff0000;
    font-size:24px;
    content:"after"
}

HTML:
<div class="main">
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
</div>

OUTPUT:
 before Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text. after