Blog Archives

Tooltip by pure CSS

tooltipbycss

::after and ::before are very useful notation in CSS for showing content or supporting layout. We can set some content for “content” property in css for ::after or ::before notation,  for example:

Is there any way to set dynamic

Tagged with:
Posted in CSS3

Style your content into clear and easy for reading

book

  How to make the content to be read easily and comfortable is very important. In order to do this, you have to think about several essentials like line height, color, font, font size and typography. In this article, we create

Tagged with: ,
Posted in CSS3, HTML5

Gallery thumb fan spin effect with CSS and jQuery

Gallery thumb fan spin effect with CSS and jQuery

Use CSS animation and javascript we can create a fancy fan spin effect for showing gallery thumb items.

Tagged with: , ,
Posted in CSS3, Javascript

Gallery thumb item hover effect with css

Gallery thumb item hover effect with css

It’s easy to do a beautiful hover effect for gallery thumb list by using pure css code.

Tagged with:
Posted in CSS3

How to do a swing lantern with pure css

lantern

Use very simple html code with pure css, we can create a Chinese style lantern with swing animation.

Tagged with:
Posted in CSS3

Some cool css techniques with demo

SwatchBook

SWATCH BOOK WITH CSS3 AND JQUERY A tutorial about how to create a swatch book like component that let’s you open and rotate the single swatches revealing some details. We will be using CSS transforms and transitions and create a

Tagged with: , ,
Posted in CSS3

Create beautiful input box by css, no background image

beautifulinput

Css is enough powerful to do decoration for input box, and we don’t need any background image any more.

Tagged with:
Posted in CSS3

Create Web 2.0 Button without background image

web2.0button

To create web 2.0 button with pure css code instead of background image

Tagged with:
Posted in CSS3

Rendering a Christmas Tree by one DIV

flynax-xmas-tree

Christmas is coming, how about rendering a Christmas tree by only ONE div with CSS?

Tagged with: ,
Posted in CSS3

Paint flash neon light in dark by CSS3 & jQuery

csslight

box-shadow in CSS3 is a very useful feature, can do some very nice UI effect for webpage. In this demo that I did user can click anywhere to create a flashing neon light, more and more neon lights in the dark like bustling street in camera lens which lost focus.

Tagged with: , ,
Posted in CSS3, Javascript