Recreating the Developer Drive logo with just CSS, no Javascript or Images

I quite like the developer drive logo animation. I remember seeing it a when I first found the site and thought it was simple, yet effective. I also wondered if it would be possible to replicate it using just CSS.

In this snippet we’ll cover CSS3 transitions and using @font-face to import some custom fonts.

The first thing we need to do is import out fonts, I wasn’t sure what the current ‘d’ font is so I have a similar font. The best place to go is www.fontsquirrel.com, you can pick from a wide selection of fonts or upload your own if you have a valid license. Once you’ve picked your font, in this case Alex Brush simply click on “Webfont Kit” and “Download @font-face kit”. You’ll be served a zip file containing the required font files, a sample css and html file. Extract them to your html folder and add the css @font-face to your own css file.

I also used Entypo for the house icon (which renders differently per browser for some reason)

Now we can start on the CSS properly. First up, let’s use our fonts! In the HTML above you can see I wrapped each character in it’s own <span> tag, that means I can apply the two separate fonts as I need. I’ll need to remove and text decoration from the <a> tag, I’ve also added a margin-right to space out the two characters.

Now that’s done, I’ll have to show only one character at a time. I’ll do that by specifying a width and height on the <a> tag and then hiding it’s overflow. I’m also going to force it’s position property to relative, as I’ll be positioning the wrapper div absolutely in a minute.

As you can see the ‘d’ is not in the right position, so I’m going to force it’s parent <div> (wrapper) to be positioned absolute and set it’s top and left values. I’m also going to add our CSS3 transition here.

*note I’ve added the transform property here as a fix, as some users where reporting an artifact issue on the animation. This seems to have fixed the problem for them.

Now I need to provide a CSS selector, to start the animation on hover and move the ‘d’ to the left and bring the house into focus.

div.logo a:hover div.wrapper {
top: -2px;
left: -65px;
}

So now I have the sliding animation I need, but the Developer Drive logo is a circle with a light grey border. Once again it’s CSS to the rescue! By adding a border-radius and setting the border values I can turn the <a> tag in to a circle, all I need to do then is change it’s display value to block.

A battle hardened software developer with a mixed and colorful background, who can't come up with a decent author bio
More articles by Jonathan Schnittger

Gy

It is spelled, “quite” not “quiet”

Jonny Schnittger

Thanks, for catching that 🙂 Damn typos

Jonny Schnittger

Thanks, for catching that 🙂 Damn typos

Zach Bentley

Kind of unrelated to the post, but how do you get the colored blocks on the top of Developer Drive to slide down?

Jonny Schnittger

I included a link in my 1st response so it’s awaiting approval.. to summarize the site uses jQuery/JavaScript to create the animation, this could be achieved using CSS as well. The 1st tutorial I did on here was an introduction to HTML5 and CSS transitions, so you could start with that if you wanted to give it a go.

Zach Bentley

The tutorial helped me out a lot. Thanks. 🙂

Jonny Schnittger

Glad to hear it 🙂 Is there anything you would like to see covered in a future tutorial?

Jonny Schnittger

It’s one of the fonts available on fontsquirrel, I then used the following html code ⌂ to show the house.

When you originally set out to create a web design portfolio site for your business, it was most likely with the intent to use those work samples to impress prospective clients and generate more revenue. But a WordPress website is a powerful, revenue-generating tool in and of itself. You’ve invested a lot of time in creating it, so don’t let it go to waste. Your main source of revenue right now likely comes from the development projects you work on. As a web design professional, that may present some...

Evan Campbell recently wrote an informative article for employers at WebdesignerDepot titled "How to Find the Perfect Web Developer". In this article, we will share a few tips with you to help you ensure that you’re the kind of developer that Evan and his readers would want to hire. 1) Avoid becoming a “specialist” ... Trends on the Web move quickly. If you spend five years exclusively fine-tuning your knowledge of Drupal only to find that suddenly overnight everyone wants a Wordpress site (or...

In this tutorial we’re going to show you how to use the JavaScript Battery API to improve the user experience for people in desperate need of a charger. We’ll look at the Battery API itself, as well as some techniques for getting the most out of every drop of the most precious of resources! Some browsers lack support for the Battery API (you guessed it; Safari and IE), so a quick support check can go a long way in terms of debugging: if(navigator.getBattery){ // Battery API available. // Rest of code goes...

The web development industry is one that is always growing because of how we use the web. No longer do we expect the Internet to simply host a digital pamphlet for a business. The expectations nowadays are for a site to be rich with content, provide the means for visitors to interact and be dynamic in every interaction. With the demand at an all time high, freelance web developers may think that there is little they could do to harm their career. Unfortunately, there are many ways that people in this industry...

Usability testing is sometimes one of those things that developers conveniently ‘forget’ about. Why? Well do a search for it. Usability testing, as it is generally practiced, costs money. There are interviews to perform, a variety of tests to create for each and every project, services to pay for… and what if your client’s in another country? Or what if they’re a small business with a small budget, or a brand-new startup? What if the only reason you learned web development in the first...

Social media is an effective way of driving more traffic to a website and reaching a new audience for published content. If you or your clients use WordPress, you probably know there is a myriad of plugins that allow anyone to quickly share every published article across a variety of social media networks. But, sharing is not the only way to integrate social media into WordPress. In fact, there are a few other ways of making a website more social and helping your clients get more eyes on their content. 1....

What you see may be what you get, but it's not necessarily what everyone else gets. I was reminded of this when I bought a gaming monitor. I'd originally intended to get a 4K monitor of some kind, but I decided to go for speed over size. The one I did get can render my games at a brisk 144hz, and my games have never looked better. Well, they looked good after I finally got my color calibration worked out. It took a while, as I was out of practice, but after finding my monitor's ICC profile and eyeballing the calibration...

Since 2010, mobile searches have seen a 400% increase and it is estimated that by 2013, there will be more mobile Internet users than desktop users. A mobile-friendly site can thus help you connect with your customers and drive conversions. Just because your website can be seen on your mobile phone does not however mean that its mobile ready. Mobile sites are designed with mobile users in mind and fit well on small screens. They are supposed to offer simple navigation capabilities and take advantage...

About

DeveloperDrive.com is a blog about web development from the makers of the popular web design blog WebdesignerDepot.com
Founded in 2011, we focus on the latest trends, tutorials, opinion articles as well as tips and tricks to empower our readers to become better web developers.