BlogmyQuery – BMQ

This is an attempt to recreate our solar system using CSS3 features such as border-radius, transforms and animations. The result is surprising and quite interesting.

These past few months I’ve been exploring CSS3, trying to learn some of it’s new features and getting a feel for which browsers support it. A few weeks back I put out my first experiment exploring @font-face and transforms. This time, I set out to experiment with border-radius, and what I thought was going to be a boring little project turned out to be quite interesting.

Our Solar System in Modern Browsers

Take a look for yourself, using only CSS and HTML I managed to create a small simulation of our solar system.

For a better experience please view it on Safari, under chrome the animations lag for some reason.

The Details

Orbits and planets are all created using border-radius, while the animation is done via –webkit animation properties and transform. Below are examples of the code used.

border-radius

ul.solarsystem li.sun {
    width: 40px;
    height: 40px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

Animations & Transforms

ul.solarsystem li {
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:orbit;
}
ul.solarsystem li.earth span {
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:moon;
}
ul.solarsystem li.mercury {-webkit-animation-duration:5s;}
ul.solarsystem li.venus {-webkit-animation-duration:8s;}
ul.solarsystem li.earth {-webkit-animation-duration:12s;}
ul.solarsystem li.earth span {-webkit-animation-duration:2s;}
ul.solarsystem li.mars {-webkit-animation-duration:20s;}
ul.solarsystem li.asteroids_meteorids {-webkit-animation-duration:50s;}
ul.solarsystem li.jupiter {-webkit-animation-duration:30s;}
ul.solarsystem li.saturn {-webkit-animation-duration:60s;}
ul.solarsystem li.uranus {-webkit-animation-duration:70s;}
ul.solarsystem li.neptune {-webkit-animation-duration:100s;}
ul.solarsystem li.pluto {-webkit-animation-duration:120s;}

@-webkit-keyframes orbit { 
from { -webkit-transform:rotate(0deg) } 
to { -webkit-transform:rotate(360deg) } }

Animations and transitions will only work on –webkit browsers, other modern browsers will display a static version of the solar system rendered using border-radius, with the exception of IE of course.

Internet Explorer’s Parallel Flat Universe:

Yep, in the eyes of Internet Explorer our universe is flat and boring.

So there you have it, I think it’s pretty impressive what we can accomplish with a few lines of CSS these days.

Oh, and yes… I kept Pluto ;-)

Like many designers out there I like collecting images of good graphic design, but I have a problem with current image bookmarking services. So I decided to set up my own system.

Who doesn’t love looking at clean, simple, beautiful graphic design? I’m obsessed with discovering great talent and great design. Ever since I can remember wanting to be a designer I’ve collected and/or cataloged bits of designs I find inspiring and useful. Like many of you however, I’ve struggled to find the perfect solution for my image bookmarking needs.

Over the last few years I’ve been using web based services for my design bookmarking, and while there are some good solutions out there, non are perfect for me.

The Problem with Current Solutions

My biggest issue with current image bookmarking services is their lack of simplicity, both from a design perspective and the features they offer. All of these services ffffound, imgspark, vi.sualize, emberapp, while good solutions for most, are just not what I’m looking for.

I want a service that let’s me focus on the images themselves and not it’s related content/metadata. I don’t want to see how many people liked a specific image, or if it has other related images, or how many tags it has etc. I’m there to consume the visuals, the image!.

A Note on Dropular

Dropular is an image bookmarking service that showed promise, it had a simple interface and a very elegant solution for bookmarking images via a simple bookmarklet. I started using the service last year and I finally felt I had found the perfect solution. That is, until they destroyed any confidence I had in them. Not only did they shut down for several months promising a new and improved service, but ended up launching a completely useless website. I respect the people behind dropular, but they really let me down.

After the dropular fiasco, I figured it was time to find my own solution.

Enter Visual Bits

Visual Bits is my own personal image bookmarking website. I had one goal in mind when setting it up, it needed to be simple, it needed to feel simple.

The site is powered by tumblr and it’s using a custom tumblr theme I designed that basically eliminates any other piece of data associated with the image and leaves the image and source intact. No related images, no tags, no followers, no “likes�, etc.

It’s perfect.

I’ve been meaning to give Flavors.me a try for a while and yesterday I finally had a chance to play around with it.

Flavors.me is a service that lets you to create your own personalized webpage, it gathers your content from various social media sites and displays it nicely and neatly in a one-pager. In their own words “Ideal for personal homepages, lifestreaming, splash and microsites, celebrity fan pages, commercial promotion, brand marketing – and everything in between.�

Now this isn’t something new, there are plenty of services out there that offer the same functionality, however, none of them offer a simplistic approach like flavors.me does.

My Flavors.me Page

Within minutes of creating an account I was able to put together my own personal customized webpage. The beautiful thing about is it’s easy of use. Basically everything you need to do to customize your page is accessible via a single panel. Within this panel you can select services you want to connect to, you can add a blurb about yourself, chose a layout you like, upload a background image, set your color scheme and choose the typefaces you prefer.

It’s so simple and yet you have just the right options you need to create something compelling. Kudos to Rob Morris and company for putting together an excellent service.

What are you waiting for? Go give it a try.

This is the first of what I hope are number of experiments I plan on working on over the next few months, all in an effort to get acquainted with some of the new CSS3 features out in the wild that seem to be gaining some traction.

The last few months have been pretty exciting, with all the talk about new CSS3 features and how browsers are adding support for them, it’s a great time to be a designer for the web. It’s a lot easier these days to experiment with different typefaces, layouts and techniques previously not available.

Take a look at the image below:

No, it’s not a poster. It’s a web page completely designed using basic CSS and new CSS3 techniques. Pretty impressive right?

How’s it done?

Pretty easy actually, I used basic CSS positioning and some of the newer CSS3 features to put it together. Below are a few samples of the code so you can get an idea:

@font-face

@font-face {
	font-family: 'ChunkFiveRegular';
	src: url('Chunkfive.eot');
	src: local('ChunkFive'),local('ChunkFive'),
	    url('Chunkfive.woff') format('woff'),
	    url('Chunkfive.ttf') format('truetype'),
	    url('Chunkfive.svg#ChunkFive') format('svg');
}

Transforms

-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-o-transform: rotate(1deg);

Text-Shadows & Box Shadows

text-shadow: 2px 8px #b5c1b8, -1px -1px #fff;
box-shadow: 4px 6px #b5c1b8;

The font used is called Chunk, a nice bold slab serif. The text is an excerpt from the Universal Declaration of Human Rights.

Works in these browsers

• Firefox 3.6
• Safari 4
• Chrome 5
• Opera 10

IE can suck it.

So there it is. Nothing out of this world, however I think it shows the potential of CSS specifically the potential in using new CSS3 features.

In the words of Matt Brett:

“if you showed me that 10 years ago, my head would have exploded!�

Indeed. We’ve come a long way.

Will you be heading to SXSW this year? if so, you should definitely check out Beercamp; I’ll be there with the rest of the nclud team. There will be music, free beer and beer pong.

Should be a damn good time!

On a side note

Make sure you check out the code behind the beercamp site, No images! all HTML5 and CSS3. Created by Dave DeSandro. The dude is mad I tell you, MAD!