CSS - Test Your CSS Skills Number 12 :

**Paul O'B** · Jan 30, 2009, 13:04

CSS - Test Your CSS Skills Number 12 :Quiz ended - solutions posted in Post #76

This week we have not one but 2 little quizzes to keep amused for the week.

The first quiz is the more difficult but the second quiz is for “newbies” (or anyone else) and is just about manipulating basic CSS.

This first quiz was suggested by Simon (zcorpan) and should keep you amused for a while.

Quiz 12 A - Sitepoint Logo quiz : (Medium to advanced Quiz)

This one is quite straightforward and some of you should be able to do this straightaway but you should still look at innovative ways of completing the task.

Look at the attachment called logo.png and you will see some screenshots of the Sitepoint logo that Erik and I have produced just using CSS. You may think that it is quite easy but no images have been used to create this and as you can see from the screenshots the text size can be bumped up and down and the logo sized accordingly along with the text.

Your mission (should you accept) is to duplicate the effect you see (logo and text) paying attention to the fact that the logo can be on any coloured background without having to change the CSS every time a new background is required. This means that the logo must be transparent to allow the background to show through in the gaps. (The screenshots are from IE6 and Firefox so that you see it can be done.)

The main rules are that you must not use images to make the logo. You can use your own html and css and choose the level of difficulty you want to apply from below.

1) Basic pixel design that doesn’t resize and is not transparent.
2) Use ems to make it all scalable.
3) Allow it to sit on coloured backgrounds (i.e must be transparent in the gaps)
4) Allow it so sit on coloured backgrounds in IE6
5) Same as 2,3 & 4 but make it work in all modern browsers using the same html and css, with no hacks.

Obviously number 5 is the one to strive for but I’ve allowed easier levels so that anyone can have a go. Remember that it must look as close to the real logo as possible and as you can see from the screenshot it is a good likeness.

If you have no idea how to do this then have a look at some recent Sitepoint articles for a clue.

Finally:

6) If you find the above easy then why not come up with an example using advanced CSS (e.g. CSS3) in any browser of your choice.

The winners will be decided on a number of criteria which means we may have a number of winners based on the following:

1) First correct answer received
2) Best Solution
3) Most innovative Solution

General Rules:

No javascript or scripting of any kind
No images or background images.
No expression,conditional comments, behaviours etc.

As usual there are no prizes other than the self-satisfaction of completing this. If you have a valid layout then post a message here but PM me the solution so that other people can still have a go. I will decide on the best layout this time rather than the first one I receive.

Quiz 12 - B (for newbies)

This is a quiz suggested by Luki be and if you look at the attached file called boxes.png you will see a layout constructed with CSS. Just replicate that layout using css and html and make it work in modern browsers.

There is a lot of repetition in the design so try and minimise your code as much as possible. This layout must work in IE6 at the very least but should work in all browsers. Pay special attention to the different coloured shade effect on the boxes,

As with the other tests these aren't meant to be suggestions for layout but more an exercise in using css to achieve something different and having fun at the same time.

Answers will be given later next week depending on how it goes

**ornette** · Jan 30, 2009, 13:29

If you have no idea how to do this then have a look at some recent Sitepoint articles for a clue.

Hello Paul,
What do you suggest I put into the search at the top of the page?

When I put "without" or "no" with "images" those words get rejected as too long, short or too popular to be any use!!!! "imageless" gets no result at all.
I'm sure I'm not the only one that could do with a clue as to where to look.

Thanks. Looking forward to sorting something out.

**RyanReese** · Jan 30, 2009, 13:57

I'm in. I'm aiming for 4

**Paul O'B** · Jan 30, 2009, 14:15

Originally Posted by ornette

Hello Paul,
What do you suggest I put into the search at the top of the page?

When I put "without" or "no" with "images" those words get rejected as too long, short or too popular to be any use!!!! "imageless" gets no result at all.
I'm sure I'm not the only one that could do with a clue as to where to look.

Thanks. Looking forward to sorting something out.

Have a look here:

**Paul O'B** · Jan 30, 2009, 16:30

I have an entry from Ro0bear already which qualifies as the quickest correct entry I have received so congratulations.

It qualifies under the Number 3 in my options above as it doesn't have IE6 compatibility so there's still room for others to be first in those other categories (4 and 5).

**Force Flow** · Jan 30, 2009, 17:09

I thought I'd be clever and go old school and try using map and area tags, since you can make irregular shapes as links. Apparently, that's about all you can do. background-color doesn't appear to work with area tags. Oh well

**Stormrider** · Jan 30, 2009, 17:32

OK, well I tried, but I have just been able to test it on IE6 and it utterly fails :P

More thinking required I think... works in FF, Opera, IE7/8 & Safari!

**funktifyknow** · Jan 30, 2009, 18:26

haha I'm right there with you stormrider. It have a solution but it fails miserably in IE. I am going to keep chopping it up until I have a #5 solution.

**PicnicTutorials** · Jan 30, 2009, 20:40

1) Basic pixel design that doesn’t resize and is not transparent.

Submitted mine...

Alright - 1st place for level #1!

Works and looks perfect in all browsers. I'm not even going to try for the other levels.

**Centauri** · Jan 30, 2009, 20:49

Got mine in that fits condition 5.

**PicnicTutorials** · Jan 30, 2009, 21:16

The shapes I can do, the positioning I can do, the transparency I can do, the mesurements in ems I "could" do if I wasn't being lazy, but the transparency with the shapes, not a clue!

**PicnicTutorials** · Jan 30, 2009, 22:08

Originally Posted by EricWatson

The shapes I can do, the positioning I can do, the transparency I can do, the mesurements in ems I "could" do if I wasn't being lazy, but the transparency with the shapes, not a clue!

That last post of mine rang a bell! I immediately ran home to implement it. Mine is now transparent (works on different color backgrounds) with a solid color for IE6! Maybe tomorrow morning I'll work on the em's. So that would put me on level #5 as well "if" I can get the em's to play. We'll see.. I have to/get to go play with my kids now...

**markbrown4** · Jan 30, 2009, 22:46

Originally Posted by EricWatson

That last post of mine rang a bell! I immediately ran home to implement it. Mine is now transparent (works on different color backgrounds) with a solid color for IE6! Maybe tomorrow morning I'll work on the em's. So that would put me on level #5 as well "if" I can get the em's to play. We'll see.. I have to/get to go play with my kids now...

paying attention to the fact that the logo can be on any coloured background without having to change the CSS every time a new background is required.

Did you manage to get the logo transparent without having to use different css for each background color?
It's the transparency in IE6 that's got me stumped, i'll keep trying.

**PicnicTutorials** · Jan 30, 2009, 23:06

Originally Posted by markbrown4

Did you manage to get the logo transparent without having to use different css for each background color?
It's the transparency in IE6 that's got me stumped, i'll keep trying.

Hi,

Yes of course, that's the rules! They also state that you only have to give IE6 a solid color. I found a few hacks for IE6 but they don't seem to work? But those would be against the rules anyways.

**Centauri** · Jan 30, 2009, 23:18

Originally Posted by EricWatson

They also state that you only have to give IE6 a solid color.

What do you mean by that? - shouldn't matter what the background is, solid colour or image.

**PicnicTutorials** · Jan 30, 2009, 23:26

Originally Posted by Centauri

What do you mean by that? - shouldn't matter what the background is, solid colour or image.

#4 says: "Allows it to sit on a coloured background for IE6."

So I guess that would forseably put me at level #4 then actually. Given that I do the em's...

Edit: this is getting silly! re-reading it yet again, oops, I mean level #3.

**Vim.F** · Jan 31, 2009, 03:17

Another submission for 5.

**Paul O'B** · Jan 31, 2009, 03:52

Wow - you lot are pretty good at this.

Some Comments on the entries so far.

RoObear - Quickest entry and second version works in ie6 albeit using a slightly unorthodox method - level 5

Mark-brown4 - doesn't scale and doesn't work in IE6 -level 3 (almost)

Stormrider - faint line across logo - doesn't work in IE6 - does scale -level 3

Eric Watson -Not transparent in IE6 but works - doesn't scale - level 3

Centauri -works everywhere - level 5

Vim.F - works everywhere - level 5

Well done everybody so far

**PicnicTutorials** · Jan 31, 2009, 10:39

I couldn't stay away...

Finally! I now have transparency in IE6 using the same CSS! And I also have a second version that's scalable, but unfortunately breaks in IE.

**RyanReese** · Jan 31, 2009, 11:27

Yay CSS3 isn't working on FF3....th...

**YuriKolovsky** · Jan 31, 2009, 13:56

ah, darn it, only NOW did i notice the quiz.

(and i actually knew it was on Wednesday, i just completely forgot about it, overworked on a current project...)

text-resize? i always hated that.
transparency in ie6? getting interesting.
ill see if i can mix up something.

edit:
12A
k, so now ive done the thing, it resizes in ie6, and works in ie6, ie7, ie8, opera, firefox, chrome and safari.
now this is my first attempt, so i don't really know what paul will say.

edit: hehe, this is my first try, considering that this morning i wouldn't have thought this was possible, and now i'm aiming at level 5.
edit: here is a lazy persons favorito tool for things that have to do with px and ems.

12B
will see what i can do tomorrow, haven't tried it yet.

the cool effect of 12A, is exactly what i needed for the website i'm making... so awesome.

Q:
will sitepoint incorporate this onto their website?
it is smaller in size, it works everywhere and loads faster in the visitors browser.

p.s. talk about shameless promotion of sitepoint, that logo has been burned on to the back of my brain now.

**kikykuang** · Feb 1, 2009, 19:38

Why use different CSS to control IE6. IE7 and firefox
Hope only use the same CSS can transparency more browser

**RyanReese** · Feb 1, 2009, 19:42

Hi

You use different CSS for IE6/7 becuase some properties aren't supported in those versions and it is often required to have some sort of work around. Either that, or you have CSS behaving differently/different spots on the screen in which you need a hack for IE which you don't need for FF.

IE6 doesn't support alpha transparency on pngs' but that shouldn't be the case in this quiz

Cheers.

**Paul O'B** · Feb 2, 2009, 04:51

Hi,

Thanks for all the entries so far and some more comments on other entries received.

Eric Watson - Nearly level 5 - just need to make it scale now
Funkitifyknow - Level 5 all ok
Yurikolovsky - Level 5 all ok
Coothead - scales ok but not transparent in Ie6
Zcorpan - Works only in Opera but has the smallest html footprint so far.

Ornette - Quiz 12 b - Works in Firefox but not right in IE6

Thanks for all the entries so far - Keep them coming in

**Paul O'B** · Feb 2, 2009, 06:36

Yurikolovsky has a new entry that works in firefox, opera 9.5, chrome, safari that has a much reduced html. (Not quite as small as zcorpans html but it foes fare better in the browsers I just mentioned).

Good work

The SitePoint Forums have moved.

User Tag List

Thread: CSS - Test Your CSS Skills Number 12 :

Thread Tools

Display

CSS - Test Your CSS Skills Number 12 :

Bookmarks

Bookmarks

Posting Permissions