Posted in CSS3, Featured, Inspiration, Tutorials

Like this post? Share It :
  • Print
  • email
  • PDF
  • Google Bookmarks
  • Facebook
  • Twitter
  • MySpace
  • Yahoo! Buzz
  • del.icio.us
  • Digg
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Reddit
  • Technorati
  • Design Float
  • RSS

Recreating the IBM Lotusphere logo in CSS3

A while ago, I visited the IBM Lotusphere 2012 conference page. One thing that I noticed immediately, was their beautiful logo on the background. Although it’s design is very minimal and simple, the logo just looks very good.

I wanted to recreate this logo using only HTML and CSS3. The main key to this effect is using the border-radius and overflow:hidden properties. I’ve created two versions: One that uses extra HTML elements, the second one uses CSS3 pseudo elements.

IBM Lotusphere logo in CSS3

Check out the demo to see how the logo looks like in your browser. Keep in mind, no images are used at all. Feel free to dig in the source code as well and maybe learn a couple of things.

Demo IBM Lotusphere logo in CSS3
Download IBM Lotusphere logo in CSS3

Let’s take a look under the hood to see how you can create something like this yourself. It’s actually easier that it might look!

Read more…

Marcofolio.net ()

Like this post? Share It :
  • Print
  • email
  • PDF
  • Google Bookmarks
  • Facebook
  • Twitter
  • MySpace
  • Yahoo! Buzz
  • del.icio.us
  • Digg
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Reddit
  • Technorati
  • Design Float
  • RSS

Related posts:

  1. 10+ Free HTML5-CSS3 Website Templates
  2. 40 Fresh Logo Examples for Logo Design Inspiration
  3. Use CSS3 Media Queries To Create Mobile Version of Website
  4. Animate a Custom Dialog Box with CSS3 and jQuery
  5. 30 Examples of Simple Yet Creative Medical Logo

Comments are closed.