Famous Logos in CSS3 Volkswagen Tangled in Design — Volkswagen Safari

15 Июн 2015 | Author: | Комментарии к записи Famous Logos in CSS3 Volkswagen Tangled in Design — Volkswagen Safari отключены
Volkswagen Safari

Tangled in Design is the work of Greig, currently a Freelance Web guy in Penarth, South Wales.

more about Stephen

I a book on advanced CSS3, by John Wiley Sons. You totally buy it

Tangled in Design is the of Stephen Greig, currently a Web Designer/Front-end guy in Penarth, South

Stephen specialises in design and development . notably HTML5 scalable CSS, along particular expertise in the experimental, edge CSS3 modules.

been in the industry as a full-time for 4 years . during which he has with a First Class BA degree, written a 380 page on advanced CSS3 and progressed to Designer Developer at a web agency in New Zealand.

He has since moved to his first home in South where he now works as a Freelance Web guy .

Stephen loves sports and is a follower of Hereford United Club as well as the Welsh Union and Football teams.

He also has a deep passion for and boasts an extremely varied as is evident by his last.fm profile.

He likes swearing and thinks talking in third person is as fuck.

Want to know Tweet me. I’m nice.


Famous Logos in – Volkswagen

June 17, 2011

We’re advancing things a this week by tackling the logo. The logos we’ve so far have focused on manipulating shapes, whereas the VW logo has more depth, with gradients and shadows.

We’re to be focusing on the CSS3 gradient in this post, dissecting the and explaining the syntax. We’ll be touching on the box-shadow property and a brief re-cap on pseudo-selectors.

For a in-depth look at pseudo-selectors, a look at my CSS3 Batman .

Anyway, I guess you want to see the logo? Well here it is


Since we started the :before and :after pseudo-selectors to the markup, we’re starting to see a bit of a Firefox 4, Chrome 11 and Safari 5 had very good success Opera has coped only less well, and IE9 completely off the wagon at that point.

So – again, Firefox and Chrome with flying colours, but we an unexpected failure from Well, I’m being a bit harsh Safari could render it if I used the old webkit syntax for the gradients, but I decided to just use the new which is exactly the same as the and -o- syntax. The old syntax is much and less convenient.

Opera it a good effort, but it failed on the gradient used on the main background area – you can see that is just a solid colour. though.

Obviously we had already that IE9 can’t recognise CSS properties when using the namely border-radius and transform – and it support CSS3 gradients at

On a final note regarding support, I love that it of looks like IE8 has tried to the VW logo into a transformer. creative IE.

How close is it to the real thing?

I keep saying every on its own it looks the real deal. when placed alongside the logo can you start to notice differences, the main of which to be the shadow on the V and W as it appears much on the actual logo.

The Code

the pseduo-selectors, I managed to get the HTML down to 8 divs.

The background were easy enough to using the border-radius property and were then brought to using the linear-gradient and box-shadow properties.

CSS3 Gradients

is the line of code to produce the CSS for the very outer silver in the VW logo.

background-image: -moz-linear-gradient( top #e0dcd9 0%, #b7b9b4 63%, 92%);

Now lets break it and take a look at the syntax.

Volkswagen Safari

enough, right? You start the vendor specific prefix, so either -moz-. -webkit- or Then within the brackets we the start angle of the gradient left in this case), we state the colours and their points in percentages; with colour being seperated by a

CSS3 Box Shadow

We very touched upon the box-shadow last week. so this we’re going to expand on a bit.

Lets start the easiest bit. The main, silver circle of the VW logo a shadow to the bottom left of element. To create this we simply do:

box-shadow:5px 5px 5px #150f31;

The value is the horizontal position of the For example, as its value is 5px, it 5px to the right of the element; if it were it would spread 5px to the left of the The next value is the vertical with the same rules Then we have the blur of the 0 is the hardest value and the blur along with the value. we have the colour which is

Using the inset keyword

also made further use of the property by using the inset to position the shadow within the

box-shadow:inset 5px 4px 5px #2c3447;

The rules are much the same as before, the first pixel value the horizontal position of the shadow, the vertical position and finally the

As you see in the image above, I used the value on the main inner circle in the top left area in to create the illusion that the is being cast by the main circle.

Final Bits

The V and the W the trickiest bits of the logo and is where it got a bit messy. When you the logo without any gradients, you can see I’ve had to patch things up a

I get the feeling this is where with more advanced knowledge could come up a much better solution using extra pseudo-elements to things up! And if you do know a better I’d love to see it in the comment section

That just about this weeks CSS3 up. If you enjoyed this experimental please share it on Twitter, or give it a thumbs up on StumbleUpon!

About Stephen Greig

Greig is a 23 year old Freelance Web guy . fresh from a year in New and currently living in Penarth, Wales. Stephen is also the of CSS3 Pushing the Limits. a on advanced CSS3. You should him on Twitter where he talks the web, sports, music, and swears a lot. Stephen’s on Google+ if that’s more bag.

Volkswagen Safari
Volkswagen Safari
Volkswagen Safari

Interesting Articles

Tagged as:

Other articles of the category "Safari":

Our partners
Follow us
Contact us
Our contacts


Born in the USSR

About this site

For all questions about advertising, please contact listed on the site.

Volkswagen all cars catalog with specifications, pictures, ratings, reviews and discusssions about cars Volkswagen.