Famous Logos in CSS3 Volkswagen Tangled in Design — Volkswagen Safari

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

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 has a deep passion for music and an extremely varied taste, as is by his last.fm profile.

He also likes swearing and that talking in third is cool as ….

Want to more? Tweet me. I’m

Slide Back

Famous in CSS3 – Volkswagen

June 17, Tweet

We’re advancing a little this week by the Volkswagen logo. The logos re-created so far have focused on flat shapes, whereas the VW has much more depth, several gradients and shadows.

going to be focusing on the CSS3 property in this post, the code and explaining the syntax. also be touching on the box-shadow and having a brief re-cap on

For a more in-depth look at take a look at my CSS3 logo .

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

Browser Support

Since we using the :before and :after to minimise the markup, we’re to see a bit of a pattern. Firefox 4, Chrome 11 and 5 have had very good rates, Opera has coped slightly less well, and IE9 fell off the wagon at that

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.

Vw vh css3

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

We’ve also made use of the box-shadow property by using the value to position the shadow the element.

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

The are pretty much the same as with the first pixel denoting the horizontal position of the then the vertical position and the blur.

As you see in the image above, I the inset value on the main blue circle in the top left in order to create the illusion the shadow is being cast by the silver circle.


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

I get the feeling this is others with more CSS3 knowledge could up with a much better than using extra to patch things up! And if you do know a way, I’d love to see it in the comment below!

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!

Stephen Greig

Stephen is a 23 year old Freelance Web Designer/Front-end guy . from a year in New Zealand and living in Penarth, South Stephen is also the author of Pushing the Limits. a book on CSS3. You should follow him on where he talks about the sports, music, travel and a lot. Stephen’s also on if that’s more your

Vw vh css3
Vw vh css3
Vw vh css3

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.