Pure CSS Icons

Pure CSS Cup of Coffee

Aaron — Mon, 23 Aug 2010 20:59:07 +0000

Ahmed El Gabri has created a very elegant cup of coffee with pure css on his blog. It is based off of this tutorial at PSDTUTS which teaches you how to make the cup of coffee using mostly just gradients.

Gabri went a step further than most and actually provided a RAR file to download this.

LIVE DEMO (~~the “back to article” link doesn’t work for me, so you can use the article link below~~)

Website/Blog: http://gabri.me/
Article: http://gabri.me/htmlcss/2010/css3-gradients-coffee-cup/
Live Demo: http://gabri.me/demo/Coffee%20with%20CSS3%20Gradients/
Author/contact: Ahmed El Gabri

Pure CSS Opera Logo

Aaron — Sun, 22 Aug 2010 20:54:23 +0000

David DeSandro has created an amazing Opera Logo using new css3 techniques. There are a few others out there who have created the same thing, but I find his to be the best.

Live demo is on the same page as the article.

Website/Blog: http://desandro.com/
Article: http://desandro.com/articles/opera-logo-css/
Author/contact: David DeSandro

Pure CSS Internet Explorer Logo

Aaron — Sun, 22 Aug 2010 20:44:18 +0000

Andreas Jacob has created a pure css Internet Explorer logo in the same vain as David DeSandro’s Opera logo. It has incredible use of css3 gradients and opacity.

LIVE DEMO

Website/Blog: http://cordobo.com/
Article: http://cordobo.com/1630-internet-explorer-pure-css-logo/
Live Demo: http://cordobo.com/wp-content/uploads/ie-pure-css-logo/
Author/contact: Andreas Jacob

Pure CSS Font – Curtis CSS Typeface

Aaron — Sun, 22 Aug 2010 20:32:25 +0000

I find this particular css3 experiment to be incredibly innovative. David DeSandro has created an entire font using the css3 canvas. The short article and demo are on the same page so just use that link. I don’t know what else to say besides that this is amazing work.

Website/Blog: http://desandro.com/
Article: http://desandro.com/resources/curtis-css-typeface/
Author/contact: David DeSandro

Pure CSS Social Media Icons 1

Aaron — Sun, 22 Aug 2010 20:18:08 +0000

Insic over at Insidesigns has created a ridiculously good set of pure css social media icons in all the traditional sizes. He gives an example snippet of code on the article page and then you can easily view the source of the live demo.

LIVE DEMO

Website/Blog: http://blog.insicdesigns.com/
Article: http://blog.insicdesigns.com/2010/03/create-social-media-icons-in-pure-css/
Live Demo: http://insicdesigns.com/demo/css3/exp3/index.html
Author/contact: insic

Pure CSS Nintendo Icons

Aaron — Sun, 15 Aug 2010 19:08:45 +0000

Being a Nintendo nerd myself I can appreciate these icons! Drew over at his website www.legendofdrew.com has created a Triforce, Pokeball, Toad Mushroom, and Kirby out of pure css. The kirby icon is by far the most complex, however the mushroom is my favorite.

The great part is that Drew provided all the code in his article so it is easy to see how he made them.

Website/Blog: http://www.legendofdrew.com
Article: http://www.legendofdrew.com/css-shape-creations/
Live Demo: http://www.legendofdrew.com/wp-content/uploads/css-shapes.html
Author/contact: Drew

Pure CSS Audio Player Controls Icons

Aaron — Sat, 31 Jul 2010 20:40:33 +0000

This is a work in progress for me. I hope to create a library of very basic audio player controls via pure css/html. These could come in handy for mobile apps as well as anyone wanting to create a lightweight audio player for the web using just the basic web stack (html/css/js). I will be working on reducing the overall code /# of classes and using some new html5/css3 elements to make it more semantically correct.

Feel free to take what I have at any point in the process and do what you want with it. If you create some great icons with my base I would love to see them!

View the live demo here.

Suggestions and general feedback appreciated!

Note: The code below is the same code from the demo page, minus the heading text, thus the br tags.

HTML

CSS

.fastforward-rewind-shuffle-box{
	display:block;
	width:64px;
	height:32px;
	position:relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}

.fastforward-rewind-shuffle-box span {
	font-family:Verdana, Geneva, sans-serif;
	font-size:48px;
	font-size-adjust:
	margin:0 0 0 0;
	padding: 0 0 0 0;
	position:absolute;
	top:-14px;
	left:12px;
}
.play {
	display:block;
	width:0;
	height:0;
	border-style:solid;
	border-width: 16px 0px 16px 32px;
	border-color:transparent transparent transparent #000;
}
.stop{
	display:block;
	width:32px;
	height:32px;
	background-color:#000;
}
.pause{
	display:block;
	width:32px;
	height:32px;
	border-left:32px double #000;
}
.repeat-circle{
  width:27px;
  height:27px;
  border:3px solid #000;
  -moz-border-radius:27px;
  -webkit-border-radius:27px;
  border-radius:27px;
  position:relative;
}
.repeat-arrow{
	position:absolute;
	top:-9px;
	left:10px;
}
.small-arrow{
	display:block;
	width:0;
	height:0;
	border-style:solid;
	border-width: 8px;
	border-color:transparent transparent transparent #000;
}
.shuffle{
	display:block;
	width:16px;
	height:29px;
	border-top:3px solid #000;
	border-bottom:3px solid #000;
}
.arrow-right{
	position:absolute;
	top:0;
	right:0;
}
.forward{
	display:block;
	width:32px;
	height:32px;
	position:relative;
	border-right:5px solid #000;
}
.backward-play{
	display:block;
	width:0;
	height:0;
	border-style:solid;
	border-width: 16px 32px 16px 0px;
	border-color: transparent #000 transparent transparent;
}
.backward{
	display:block;
	width:32px;
	height:32px;
	position:relative;
	border-left:5px solid #000;
}

.shuffle-rightside {
	position:absolute;
	top:0;
	right:8px;
}
.top-shuffle-arrow {
	position:absolute;
	top:-6px;
	right:-8px;
}
.bottom-shuffle-arrow {
	position:absolute;
	bottom:-9px;
	right:-8px;
}

Pure CSS Heart Icon

Aaron — Tue, 27 Jul 2010 21:18:23 +0000

Here is a very simple heart icon made with pure css. In order to resize this you need to use the ratios I have commented in the code. If you view the live demo there are two hearts to show an example of the ratios in action, just view the source to see exactly how it works.

Please comment or ask questions if you have any!

HTML

CSS Ratios Comment

/*-----------------------------------------------
|	Ratios:										|
|.heart w/h = 1.1								|
|halves w/h = .666								|
|												|
|heart-width/half-width = 1.72					|
|heart-height/half-height = 1.04				|
|												|
|	Note: 										|
|top, left, and right values will need to be	|
|adjusted depening on the size, I'm not sure	|
|where/what the ratio would be.	Use the border	|
|around the .heart element to help adjusting.	|
-----------------------------------------------*/

CSS

.heart {
	display:block;
/* width/height = 1.1 */
	height:234px;
	width:258px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	position:relative;
/*	border:1ps solid black; -remove comment to resize */
}
.left-half {
	display:block;
/* width/height = .666 or 2/3rds */
	width:150px;
	height:225px;
	background-color:red;
	-moz-border-radius-topleft:100px;
	-moz-border-radius-topright:100px;
	-webkit-border-radius-topleft:100px;
	-webkit-border-radius-topright:100px;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	position:absolute;
	top:-11px;
	left:27px;
	}
.right-half {
	display:block;
/* width/height = .666 or 2/3rds */
	width:150px;
	height:225px;
	background-color:red;
	-moz-border-radius-topleft:100px;
	-moz-border-radius-topright:100px;
	-webkit-border-radius-topleft:100px;
	-webkit-border-radius-topright:100px;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	position:absolute;
	top:-11px;
	right:27px;
}

View the live demo here.

Pure CSS Icons @RatherSplendid

Aaron — Thu, 22 Jul 2010 18:35:09 +0000

Zander Martineau has created a random assortment of pure css icons over at his blog RatherSplendid.net. The icons range from an RSS Icon to a heart and even an eye. The vast majority of the icons are achieved using the border-radius element and its moz/webkit counterparts, much like the pure css android icon tutorial we have on this site.

His icons appear to work in Chrome, Safari, Firefox 3.6+, and IE7. However, he attempted to view them on his iPhone and found out that they don’t render correctly, hmmm…

View the link below for the live demo.

Website/Blog: http://www.rathersplendid.net
Article: http://rathersplendid.net/home/pure-css-icons
Live Demo: http://rathersplendid.net/cssicons/
Author/contact: Zander Martineau

CSS3 Speech Bubbles @nicolasgallagher

Aaron — Mon, 19 Jul 2010 20:37:06 +0000

Nicolas Gallagher has created some incredibly useful pure css speech bubbles over at his site www.nicolasgallagher.com. While speech bubbles have been do-able with pure css for quite awhile, he has enhanced the normal concept with some new CSS3 elements. Not only do these look sharp in his presentation, but they are also very useful in common web design and are not hard to achieve.

He has a snippet of example code in his article as well as a live demo where you could easily View Source and compare the html to the linked stylesheet.

Expect a speech bubble tutorial here soon!

Website/Blog: http://nicolasgallagher.com/
Article: http://nicolasgallagher.com/progressive-enhancement-pure-css-speech-bubbles/
Live Demo: http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html
Author/contact: Nicolas Gallagher – scroll to the bottom for his resume and contact info