Comments on: Creating Fancy Checkmark Icons with Pure CSS3

By: Bryan Salva

Bryan Salva — Fri, 19 Aug 2011 16:20:55 +0000

Neither these icons or Gallagher’s social icons are practical yet (except possibly in some mobile applications) thanks to browser differences. That being said they look great, are coded well and make for an awesome concept. Good work!

By: CSS3 Tutorial and Resources | Avazio

CSS3 Tutorial and Resources | Avazio — Wed, 17 Aug 2011 14:58:00 +0000

[...] UI – avoid recutting UI graphics for mobile • Flexible mobile first layouts with CSS3 • Creating fancy bullet points with pure CSS3 • Get the best out of CSS3 • CSS3 – to infinity and beyond • Push your web design [...]

By: Luke

Luke — Mon, 15 Aug 2011 20:11:32 +0000

Amazing what can be done with css now ie has stopped holding back web development.

By: 109 interesantes tutoriales y recursos CSS3 | Digisolnet Blog

109 interesantes tutoriales y recursos CSS3 | Digisolnet Blog — Sat, 30 Jul 2011 11:47:42 +0000

[...] Creación de puntos de fantasía con CSS3 [...]

By: designarti

designarti — Mon, 25 Jul 2011 05:22:24 +0000

So many characters to use and get wonderful effects with the rotate option…
Excellent technique!

By: Creating List Icons with Pure CSS3 | Cory Dorning

Creating List Icons with Pure CSS3 | Cory Dorning — Mon, 09 May 2011 19:42:16 +0000

[...] waking up this morning, I came across a wonderful article about Creating Fancy Checkmark Icons with Pure CSS3, and wanted to extend the functionality beyond just checkmarks. After all, what if I want to show [...]

By: Lance

Lance — Sun, 08 May 2011 18:06:03 +0000

The ✗ ✖ ✕ ✓ or ✔ Jaap suggests is more elegant. Another step would be to attach a custom font containing just the few bullet characters. In that case you could even redefine x and y as ✗ and ✓. The extra file weight would be minimal especially in you used the technique for other icons.

body:nth-of-type(1) ul li:before{
content:”x”;
font-family: “MyIcons”;
display: block;
border: solid 9px #000;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
height: 0;
width: 0;
position: absolute;
left: 7px;
top: 40%;
margin-top: -8px;
}

By: Raju

Raju — Mon, 02 May 2011 12:36:31 +0000

Really super posting…

By: Faraz

Faraz — Sun, 20 Mar 2011 09:07:03 +0000

I like the way of explaining in this tutorial,very resourceful and useful post for css beginners and even experts.

By: Aufzählungen & Listen – Webdesign liegt im Detail « Blog « Advitum Webdesign

Tue, 01 Feb 2011 20:12:58 +0000

[...] Creating Fancy Checkmark Icons with Pure CSS3 [...]