Learn to create simple yet amazing effects with CSS with our list of 8Amazing Things Made with CSS.

Calculator

Calculator

Simple yet clean. Combined with java script, this calculator will take your calculation more fun and enjoyable calculating experience.

Grid Animation Effect

Grid Animation Effect

We all know that applying some sort of animation is already quite hard enough, let alon the animation to be done via CSS. This grid animation has smooth amazing animation that you might think it wasn’t made via CSS.

Smooth iOS 7 Toogle

Smooth iOS 7 Toogle

Inspired by the iOS7 toogle button, Dan Eden made this smooth animated toogle button with CSS. Try it out and be amazed on how similar it is with the iOS7 toogle button.

Animated Checkmark Button

Animated Checkmark Button

Made by Sascha Michael Trinkaus, this Animated Checkmark Button is surrounded by a gradient color. The particular effect will run when you hover your mouse over the check mark or just click it for continuous animation.

Minion

Minion

An adorable Minion done amazingly in the style of a drawing crafted from pure CSS.

Menu Toogle SVG Animation

Menu Toogle SVG Animation

Enjoy this shape shifting animation made with CSS. Amazing transition as it changes from one shape to another.

Shape Masking

Shape Masking

Another amazing thing made with CSS. Applied with circle, pentagonal, and hexagonal shape to mask an image. On top of that, it expands to a zoom as well.

Loaders Kit

Loaders Kit

Just a few examples of loaders that you can make with CSS. This CSS-based loaders are quite handy if you want you want to reduce the use of bandwidth.

COMMENTS (1)
Reply

عبدالعزيز الزرعونينعم ذلك ممكن.. أضف التالي إلى نهاية الملف:a { -webkit-transition: color 0.5s, font-weight 0.5s; -moz-transition: color 0.5s, font-weight 0.5s; -o-transition: color 0.5s, font-weight 0.5s; transition: color 0.5s, font-weight 0.5s;}a:hover {font-weight: bold;}

Leave a Comment

Comment (required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Name (required)
Email (required)