As a front-end engineer, CSS is the basic introductory lesson, can you make it?

CSS in the eyes of many programmers it's just tricks,

In fact, CSS3 has grown so strong today that it's beyond your wildest imagination,

Of course, for low-end browser users, it was the same as before--embarrassing

Sometimes it takes a lot of imagination to do CSS development, and the following set of pure CSS3 effects is enough to describe this

The following content is reproduced from "http://design.yesky.com/show/466/11497966_3.shtml"

Design appreciation: pure css3"Drawing" graphic icon

IE logo

Author: Andreas Jacob

Display the best on Firefox 3.6+ and Safari 5. Uses attributes such as rounded corners, gradients, shadows, and so on.

Nintendo game icons

Author: Drew

Some Nintendo game icons are implemented using pure CSS.

Film "Back to the Future" film name

Author: Lucas Garron

Strikingly similar to the original, it shows the best in the browser of the Webkit engine.

CSS Raindrops

Author: Sean Martell

The right side is the original image, the left side is the CSS generated effect

Bahamas CSS Flags

Author: forestmist

Bahamas Is. logo, the right side is the original diagram, the left side is the CSS effect.

Alien logo on Reddit website

Author: Matthew James Taylor

Use o o _ () () o o o/–o o o o o o o O? () () "Several letters and text effects.

Pure CSS social Media Network logo

Author: insicdesigns

Another set of CSS3 social network media logo.

CSS3 implementation of IPhone pictures

Author: Jeff Batterton

It's crazy.

Twitter Pictures

Author: Jeff Batterton

Pretty awesome CSS graphics effects. See the Twiiter drawing of pure CSS3

The "lost" film name animation of the American drama

Author: Marcos Esperon

Displays the best in the browser of the Webkit engine.

Olympic symbol

Author: Doug Neiner

Based on the pure CSS, in the EM unit, you can dynamically resize the browser to support Border-radius properties, currently supported browsers include Chrome, Safari, Firefox and IE9.

JQuery Flag

Author: Doug Neiner

This is one of the most beloved JavaScript framework jQuery flags, using CSS3 's Border-radius property.

JQuery UI Flag

Author: Doug Neiner

This is the flag of the JQuery UI Library, again, based on the CSS3 Border-radius property.

CCS logo one case

Author: Justin Sepulveda

All based on pure CSS3 Border-radius, gradient, transform properties.

Opera logo

Author: David Desandro

Very beautiful, a lot of use of the Border-radius, gradient properties, but in different browsers display less consistent, especially in IE.

IOS icons

Author: Louis Harboe

Very great work, using the advanced features of the CSS3.

Author: Zander Martineau

This work can teach you how to use CSS to implement a triangle, such as RSS icons, heart charts, triangles, such as simple graphics.

Super Marie 3D animated icon based on pure CSS

Author: Andreas Jacob

Based on the CSS3 and CSS 4D frames, the animation section is wonderful, but currently only supports Safari 5.

Pure CSS Icon one case

Author: Andrew Kelly

Uses the CSS3 gradient, the shadow, the rounded angle and so on the property, the effect is outstanding.

CSS3 implementation of Photoshop logo

Author: Radu Chelariu

Completely based on CSS3, without any graphics.

10 Amazing CSS social media network logos

Author: Nicolas Gallagher

All based on simple, semantic HTML tags, no empty, superfluous objects, no JavaScript, no pictures.

A set of CSS icons

Author: Lucian Marin

A set of CSS-based icons, very delicate.

Twitter icon based on pure CSS3

Author: Giacomo Bartoli

It is shown that @font-face and a small number of shadows and fillets are used.

Canada Go Transit Company logo

Author: Collin Henderson

CSS3-based Border-radius properties

The above article is reproduced from "http://design.yesky.com/show/466/11497966_3.shtml"

Of course, as a front-end development engineer, this kind of distorted drawing method in the actual project does not have much practical effect,

1, the PC project, the use of CSS Spirte technology to deal with the image of broadband popularization today, in fact, not what, sometimes the words vigorously CSS3 production image is not as efficient as the flat one icon, and CSS3 support for IE9 only less than 80%,IE8/IE7/6 support basic 0

2, mobile phone project, although the traffic seems so precious, but the CPU performance of the phone is not strong enough, especially the variety of Android phones, even if the CPU run the division can be strong and CSS3 rendering performance is not enough situation

So these pictures in the current network era still can only play a small "dazzle rich" role--embarrassing