CSS - Test Your CSS Skills Number 12 :

[Paul O'B]

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


Have fun .

Paul

PS. : In case you missed the other tests you can find them here:
test 1: http://www.sitepoint.com/forums/showthread.php?t=168555
test 2: http://www.sitepoint.com/forums/showthread.php?t=169710
test 3: http://www.sitepoint.com/forums/showthread.php?t=170190
test 4: http://www.sitepoint.com/forums/showthread.php?t=171221
test 5: http://www.sitepoint.com/forums/showthread.php?t=172472
test 6: http://www.sitepoint.com/forums/show...est+css+skills
test 7:http://www.sitepoint.com/forums/show...44#post3216244
test 8:http://www.sitepoint.com/forums/show...64#post3235664
test9:http://www.sitepoint.com/forums/show...45#post4108145
test10:http://www.sitepoint.com/forums/show...63#post4119063
test11:http://www.sitepoint.com/forums/showthread.php?t=595943