Typography

Base Typography

This is an H1 Heading

<h1>This is an H1 Heading</h1>

This is an H2 Heading

<h2>This is an H2 Heading</h2>

This is an H3 Heading

<h3>This is an H3 Heading</h3>

This is an H4 Heading

<h4>This is an H4 Heading</h4>
This is an H5 Heading
<h5>This is an H5 Heading</h5>
D

ropcap Styling for article intros and much more. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nunc lorem, eleifend vel, rhoncus sed, congue quis, leo. Aliquam dignissim dui quis purus. Phasellus vehicula, ante eu mollis pharetra, enim felis iaculis lacus, congue ullamcorper lorem eros at libero.

<div class=”dropcap”>D</div>ropcap Styling

This is the Example Quote Class this can be used to create quotes in article pages by using the code below

<blockquote class=”opensmall”>This is the Example Quote Class</blockquote>



Example LG Quote Class

<blockquote class=”openlarge”>This is the Example Quote Class</blockquote>
This is the code div class. Curabitur bibendum metus porta dui sagittis sagittis. Suspendisse placerat orci eget massa. Donec vitae nisi. Sed tincidunt adipiscing mauris. In lorem. Maecenas dapibus commodo sapien.



<div class=”code”>This is the code div class</div>
This is the highlight div class. Curabitur bibendum metus porta dui sagittis sagittis. Suspendisse placerat orci eget massa. Donec vitae nisi. Sed tincidunt adipiscing mauris. In lorem. Maecenas dapibus commodo sapien. Nam nulla.



<div class=”highlight”>This is the highlight div class</div>

Blog Div Styles

This is Blog Red


<div class=”blog-red”>blog-red</div>


This is Blog Blue


<div class=”>blog-blue”>blog-blue</div>


This is Blog Green


<div class=”blog-green”>blog-green</div>


This is Blog Cyan


<div class=”blog-cyan”>blog-cyan</div>
This is Blog Tan


<div class=”blog-tan”>blog-tan</div>


This is Blog Yellow


<div class=”blog-yellow”>blog-yellow</div>


This is Blog Grey


<div class=”blog-grey”>blog-grey</div>


This is Blog Pink


<div class=”blog-pink”>blog-pink</div>

Note Style

This the note style. Curabitur bibendum metus porta dui sagittis sagittis. Suspendisse placerat orci eget massa. Donec vitae nisi. Sed tincidunt adipiscing mauris. In lorem. Maecenas dapibus commodo sapien. Nam nulla.
<div class=”note”>This is note style</div>

CSS3 Button Styles

Grey Button

<a class=”greybutton”>Grey Button</a>



Blue Button

<a class=”bluebutton”>Blue Button</a>



Orange Button

<a class=”orangebutton”>Orange Button</a>



Red Button

<a class=”redbutton”>Red Button</a>



Pink Button

<a class=”pinkbutton”>Pink Button</a>



Cyan Button

<a class=”cyanbutton”>Cyan Button</a>



Green Button

<a class=”greenbutton”>Green Button</a>



Dark Grey

<a class=”darkgreybutton”>Dark Grey Button</a>



Brown Button

<a class=”brownbutton”>Brown Button</a>



Tan Button

<a class=”tanbutton”>Tan Button</a>
Light Grey Pill

<a class=”lightgreypill”>Light Grey Pill</a>



Blue Pill Button

<a class=”bluepillbutton”>Blue Pill</a>



Orange Pill Button

<a class=”orangepillbutton”>Orange Pill</a>



Red Pill Button

<a class=”redpillbutton”>Red Pill</a>



Pink Pill Button

<a class=”pinkpillbutton”>Pink Pill</a>



Cyan Pill Button

<a class=”cyanpillbutton”>Cyan Pill</a>



Green Pill Button

<a class=”greenpillbutton”>Green Pill</a>



Dark Grey Pill Button

<a class=”darkgreypillbutton”>Dark Grey Pill</a>



Brown Pill Button

<a class=”brownpillbutton”>Brown Pill</a>



Tan Pill Button

<a class=”tanpillbutton”>Tan Pill</a>

Flat Button Styles



<button class=”blue”>Blue Button</button>





<button class=”cyan”>Cyan Button</button>





<button class=”red”>Red Button</button>





<button class=”tan”>Tan Button</button>





<button class=”yellow”>Yellow Button</button>





<button class=”grey”>Grey Button</button>





<button class=”pink”>Pink Button</button>


<button class=”blue-pill”>Blue Pill</button>





<button class=”cyan-pill”>Cyan Pill</button>





<button class=”red-pill”>Red Pill</button>





<button class=”tan-pill”>Tan Pill</button>





<button class=”yellow-pill”>Yellow Pill</button>





<button class=”grey-pill”>Grey Pill</button>





<button class=”pink-pill”>Pink Pill</button>

UL List Styles

Check List

  • This is an
  • example of a
  • checlist ul

Article List

  • This is an
  • example of an
  • article list

Star List

  • This is an
  • example of a
  • star list

Arrow List

  • This is an
  • example of an
  • arrow list

Remove List

  • This is an
  • example of a
  • remove list

Bookmark List

  • This is an
  • example of a
  • bookmark list

Comment List

  • This is an
  • example of a
  • comment list

Marker List

  • This is an
  • example of a
  • marker list

Play List

  • This is an
  • example of a
  • play list

Asterisk List

  • This is an
  • example of a
  • asteric list

Notice List

  • This is an
  • example of a
  • notice list

Favorites List

  • This is an
  • example of a
  • favotites list

P Styles

‘Error style

‘Ideas style

Message style

Astrix style

This is com

This is mod

This is plug

This is lang

This is RSS

Bar Graph One

10
20
30
40
50
60
70
80
90
100
Create custom Bar Graphs using the Div Class bargraphv barone – barten. Bargraphv generates the css code for the graph and barone gives it a 10% height, bartwo creates 20% and so on. To give it a circle tag at the bottom use a DIV class of cloud_tag1.

<div class=”bargraphv bartone”></div>
<div class=”cloud_tag1″>10</div>

CSS3 Animations

Shake Words or Images

Pulse Words or Images

Make Your Content Spin

All Icons by Category

Web Application Icons

  • icon-adjust
  • icon-asterisk
  • icon-ban-circle
  • icon-bar-chart
  • icon-barcode
  • icon-beaker
  • icon-bell
  • icon-bolt
  • icon-book
  • icon-bookmark
  • icon-bookmark-empty
  • icon-briefcase
  • icon-bullhorn
  • icon-calendar
  • icon-camera
  • icon-camera-retro
  • icon-certificate
  • icon-check
  • icon-check-empty
  • icon-cloud
  • icon-cog
  • icon-cogs
  • icon-comment
  • icon-comment-alt
  • icon-comments
  • icon-comments-alt
  • icon-credit-card
  • icon-dashboard
  • icon-download
  • icon-download-alt
  • icon-edit
  • icon-envelope
  • icon-envelope-alt
  • icon-exclamation-sign
  • icon-external-link
  • icon-eye-close
  • icon-eye-open
  • icon-facetime-video
  • icon-film
  • icon-filter
  • icon-fire
  • icon-flag
  • icon-folder-close
  • icon-folder-open
  • icon-gift
  • icon-glass
  • icon-globe
  • icon-group
  • icon-hdd
  • icon-headphones
  • icon-heart
  • icon-heart-empty
  • icon-home
  • icon-inbox
  • icon-info-sign
  • icon-key
  • icon-leaf
  • icon-legal
  • icon-lemon
  • icon-lock
  • icon-unlock
  • icon-magic
  • icon-magnet
  • icon-map-marker
  • icon-minus
  • icon-minus-sign
  • icon-money
  • icon-move
  • icon-music
  • icon-off
  • icon-ok
  • icon-ok-circle
  • icon-ok-sign
  • icon-pencil
  • icon-picture
  • icon-plane
  • icon-plus
  • icon-plus-sign
  • icon-print
  • icon-pushpin
  • icon-qrcode
  • icon-question-sign
  • icon-random
  • icon-refresh
  • icon-remove
  • icon-remove-circle
  • icon-remove-sign
  • icon-reorder
  • icon-resize-horizontal
  • icon-resize-vertical
  • icon-retweet
  • icon-road
  • icon-rss
  • icon-screenshot
  • icon-search
  • icon-share
  • icon-share-alt
  • icon-shopping-cart
  • icon-signal
  • icon-signin
  • icon-signout
  • icon-sitemap
  • icon-sort
  • icon-sort-down
  • icon-sort-up
  • icon-star
  • icon-star-empty
  • icon-star-half
  • icon-tag
  • icon-tags
  • icon-tasks
  • icon-thumbs-down
  • icon-thumbs-up
  • icon-time
  • icon-tint
  • icon-trash
  • icon-trophy
  • icon-truck
  • icon-umbrella
  • icon-upload
  • icon-upload-alt
  • icon-user
  • icon-user-md
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-warning-sign
  • icon-wrench
  • icon-zoom-in
  • icon-zoom-out

Text Editor Icons

  • icon-file
  • icon-cut
  • icon-copy
  • icon-paste
  • icon-save
  • icon-undo
  • icon-repeat
  • icon-paper-clip
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-indent-left
  • icon-indent-right
  • icon-font
  • icon-bold
  • icon-italic
  • icon-strikethrough
  • icon-underline
  • icon-link
  • icon-columns
  • icon-table
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-list
  • icon-list-ol
  • icon-list-ul
  • icon-list-alt

Directional Icons

  • icon-arrow-down
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-chevron-down
  • icon-circle-arrow-down
  • icon-circle-arrow-left
  • icon-circle-arrow-right
  • icon-circle-arrow-up
  • icon-chevron-left
  • icon-caret-down
  • icon-caret-left
  • icon-caret-right
  • icon-caret-up
  • icon-chevron-right
  • icon-hand-down
  • icon-hand-left
  • icon-hand-right
  • icon-hand-up
  • icon-chevron-up

Video Player Icons

  • icon-play-circle
  • icon-play
  • icon-pause
  • icon-stop
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-fullscreen
  • icon-resize-full
  • icon-resize-small

Social Icons

  • icon-phone
  • icon-phone-sign
  • icon-facebook
  • icon-facebook-sign
  • icon-twitter
  • icon-twitter-sign
  • icon-github
  • icon-github-sign
  • icon-linkedin
  • icon-linkedin-sign
  • icon-pinterest
  • icon-pinterest-sign
  • icon-google-plus
  • icon-google-plus-sign
  • icon-sign-blank

Site Disclaimer


All programming tips, code and snippet is provided without any explicit or implicit warranty.
Any copyrights are of their original authors.

Contact Us

You can contact us via our Contact Page. If you'd prefer to give us a ring you can always call us at: +1 (520) 463-4040

  G70 Block B, TBSK, Jalan Trus, Johor Bahru 80000, Malaysia
  +1 (520) 463-4040
  info@teacii.com

Get Social


TeaCii's Personal Blog
(C) 2014 TeaCii.com. All Rights Reserved.
Disclaimer: All images and content (C) the original authors.