Posted in CSS3, Featured, Inspiration, Tutorials
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.
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.
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!
Related posts:
