The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

CSS - Test Your CSS Skills Number 12 :

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 IE65) 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.

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.

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.

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

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...

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.

(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.

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

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.

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).