3D beach ball. CSS3 - 3D Beach Ball 17th March 2012 Safari, Chrome and Firefox copyright © stu nicholls - CSS play.
Pure CSS GUI icons (experimental) An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML.
Shared as an exercise in creative problem solving and working within constraints. This is not a “production ready” CSS icon set. Demo: Pure CSS GUI icons Known support: Firefox 3.5+, Safari 5+, Chrome 5+, Opera 10.6+. An exercise in constraint Several months ago I was experimenting with the creation of common GUI icons with CSS. Pseudo-elements provide many possibilities to developers interested in writing semantic HTML. Example code The technique behind this experiment is an expansion of the basic shape-creation that was used to make Pure CSS speech bubbles.
The HTML is a basic unordered list of links. <ul><li class="power"><a href="#non">Power</a></li><li class="play"><a href="#non">Play</a></li><li class="stop"><a href="#non">Stop</a></li><li class="pause"><a href="#non">Pause</a></li></ul> Each icon uses its own set of styles.
Solar System with Pure CSS. Create Spinning Rays with CSS3: Revisited. CSS Triangles Example. iOS Icons in Pure CSS. Pure CSS social media icons (experimental) This is an experiment that creates social media icons using CSS and semantic HTML.
It uses progressive enhancement to turn an unordered list of text links into a set of icons without the use of images or JavaScript. Demo: Pure CSS social media icons Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+. The image below shows you the final appearance in modern browsers. This experiment starts with a simple list of links, with each link using meaningful text, and then progressively styles each link to take on the appearance of the relevant social media icon. I’ve also included basic text in the title attribute of each link to provide information for users who may not be familiar with what service a specific icon represents. This is an experiment that uses CSS 2.1 and CSS3 that is not supported by Internet Explorer 6 and 7, therefore, you shouldn’t expect it to work in those browsers.
Example code The technique I’ve used is much the same as the one used for the Pure CSS speech bubbles. How to make icons using only CSS - Javier Tordable. November 24, 2012 A few days ago I had the chance to watch a talk by Steve Souders, who is one of the world's top experts on website performance.
I started thinking about how to apply some of the techniques that he mentions to my site, and I decided to replace the icons that appear at the top. These are links to subscribe to blog updates, the RSS feed, the feedburner email subscription, and links to twitter and Google+, which I update when there are new blog posts. I decided to replace these image icons with icons made using only CSS. This has several advantages: 4 HTTP calls less. So here is how I did it. The twitter icon is probably the easiest one, I simply took a t in an appropriate font, and gave it a reasonable size and position. The Google+ icon is very similar, but with overflow: hidden to make the text out of the box dissappear: The email icon has another twist, it uses a special Unicode character that represents an envelope.
The CSS of the button is basically the same: Font Awesome, the iconic font designed for Bootstrap. CSS typography experiment. This is a quick experiment that reproduces an image from I Love Typography using nothing more than simple semantic HTML, CSS 2.1, and modern browser implementations of a couple of CSS3 properties.
Along the way a few new modern browser bugs and inconsistencies were exposed. I came across an image on I Love Typography that I thought could be reproduced using just semantic HTML and CSS without resorting to ugly solutions that rely on unsemantic and unnecessary elements. The idea was to reproduce the image from realistic markup that may exist “in the wild” and to rely as much as possible on what can be achieved with CSS pseudo-elements. This is the HTML I ended up using. <p>I love <strong>typography</strong><em>a lot</em></p> This is the CSS that controls the presentation of that content.
The final CSS typography experiment approximates the original image in all modern browsers that support the CSS3 properties of border-radius and transform.