-
While messing around with the different shapes you can create in CSS3, I thought I'd take a stab at creating different company logos. I'm not sure what practical use it has though. Maybe in fluid layouts? Display different size logos to different devices without the use of imagery? If you have other ideas for logos that could be created, I'm all ears.
http://robustnessiskey.com/csslogos
Note: They look best in Safari/Chrome.
-
Very nice, good work Justin! :)
-
Awesome work Justin. How long did this take you to do?
-
I love BMW logo!Very nice.
I know that is off-topic but what is the best method betwen makeing a header in Photoshop or inserting it with a suuper font with font-face?
Sorry for my bad eng. -
Thanks guys! I was learning the new features of CSS3 as I did these and didn't pay too much attention to the time. I assume anywhere between 15 minutes (univision) to 4 hours (bmw).
-
@Utwo: Using @font-face with this method was something I had thought of doing, however I don't know all the legal issues that come with using licensed fonts. If you have the rights and own the font, then I say use the @font-face method.
-
@Justin those are pretty awesome designs! Totally amazing. I need to try to build one!
-
Thank you @Justin!
-
Those are awesome, and since I have no knowledge of CSS3 whatsoever, I'm very impressed! Great job!
-
Have you tried making the olympic rings? That's a pretty universal symbol everybody should recognize. Or maybe the apple logo. But these do look amazing!
BTW Carlsbad as in 20 minutes from San Diego? If so, have you been to "El Norte?" Cause my friend works there and it's got some badass Mexican food.
-
The Olympic Rings, while easy shapes to create, would definitely be a z-indexing challenge. I'll give it a shot though. I've actually been toying with the Apple logo and I'm getting pretty close. It ended up being more difficult then I originally thought.
Yep, I live in the Village right by El Norte. It's a favorite. Good to see other San Diegans in the forum!
-
Have you guys played with canvas for this kind of thing? I wonder when we'll start seeing canvas and SVG used on mainstream websites.
-
So I was bit by the bug, and the challenge to create the Olympic Rings. I realize it was rather simple, but it was fun to work with and solve the z-index issues!
So, without further ado, I give you CSS Olympic Rings. Like Justin's logos you will need a modern browser capable of displaying
border-radiusproperly. -
@Marc, I used Canvas on Enterprise jQuery to draw (the ultra simple) repeating image on the horizontal navigation bar that appears at the top and bottom of the site. It was more of an experiment than anything, but it works rather well!
-
Well done sir! You are a z-indexing border creating master. Only suggestion I have is to make it em based so you can simply change a font-size to make it bigger or smaller.
-
@Justin, awesome suggestion! I updated the logo to use
emand just to show it off, I added a jQuery UI slider to live update the size so you can see it scale! -
The rings look great! It's great to see CSS3 capabilities.
-
-
Awesome job Doug! I do agree, it's very relaxing to do little experiments like these.
Here's some that I experimented with as well.
http://designinformer.com/css-posters/ -
Wow Jad, those are amazing. I remember seeing one of them a while ago, but I obviously missed some of the others. My favorite is the blue one with the background-clip. Absolutely awesome!
-
Doug's jQuery Zoom Slider deal for scaling his logos got me thinking about the CSS3 solution. I updated my page so you can click and hold any logo to zoom in. This uses -webkit-transition and -webkit-transform.
Check it out: http://robustnessiskey.com/csslogos
-
@Justin, that is totally rad! Love it! One thing I would change is move the transition rules to the non :active rule. That way it will ease out after you let go of the mouse. Awesome idea dude! +1
-
Thanks Doug! Took your suggestion. Much smoother now.
-
Brilliant work, you guys. There are more uses than I can count, Justin — imagine being able to do a corporate site and using CSS3 to render the logo. No longer being a slave to image sprites, colour changes, or even sizing? That's incredible.
You're all three just incredible, and you've inspired me to try with my own logo (a fun thing I did with the lowercase letters 'bf') once I've taught myself the language... I suspect it would be somewhat challenging.
Keep up the great work.
-
The Dribbble Logo(Ball) in CSS is now up. Please view in Safari/Chrome.
-
Just added the Forrst Logo too. Time to stop staring at the computer now.
Reply
You must log in to post.