SitePoint Sponsor |
|
User Tag List
Results 1 to 25 of 89
-
Jan 30, 2009, 13:04 #1
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
CSS - Test Your CSS Skills Number 12 :
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=595943Last edited by Paul O'B; Feb 6, 2009 at 08:40.
-
Jan 30, 2009, 13:29 #2
- Join Date
- Mar 2005
- Location
- Tenerife, Canary Isles
- Posts
- 175
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
If you have no idea how to do this then have a look at some recent Sitepoint articles for a clue.
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.
-
Jan 30, 2009, 13:57 #3
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
I'm in. I'm aiming for 4
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Jan 30, 2009, 14:15 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Have a look here:
-
Jan 30, 2009, 16:30 #5
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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).
-
Jan 30, 2009, 17:09 #6
- Join Date
- Jul 2003
- Location
- Northeastern USA
- Posts
- 4,617
- Mentioned
- 56 Post(s)
- Tagged
- 1 Thread(s)
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
-
Jan 30, 2009, 17:32 #7
-
Jan 30, 2009, 18:26 #8
- Join Date
- Apr 2007
- Location
- New London, CT
- Posts
- 172
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Jan 30, 2009, 20:40 #9
- Join Date
- Dec 2007
- Location
- Carlsbad, California, United States
- Posts
- 3,658
- Mentioned
- 15 Post(s)
- Tagged
- 0 Thread(s)
1) Basic pixel design that doesn’t resize and is not transparent.
Alright - 1st place for level #1!Works and looks perfect in all browsers. I'm not even going to try for the other levels.
-
Jan 30, 2009, 20:49 #10
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Got mine in that fits condition 5.
-
Jan 30, 2009, 21:16 #11
- Join Date
- Dec 2007
- Location
- Carlsbad, California, United States
- Posts
- 3,658
- Mentioned
- 15 Post(s)
- Tagged
- 0 Thread(s)
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!
-
Jan 30, 2009, 22:08 #12
- Join Date
- Dec 2007
- Location
- Carlsbad, California, United States
- Posts
- 3,658
- Mentioned
- 15 Post(s)
- Tagged
- 0 Thread(s)
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...
-
Jan 30, 2009, 22:46 #13
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
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.
It's the transparency in IE6 that's got me stumped, i'll keep trying.
-
Jan 30, 2009, 23:06 #14
- Join Date
- Dec 2007
- Location
- Carlsbad, California, United States
- Posts
- 3,658
- Mentioned
- 15 Post(s)
- Tagged
- 0 Thread(s)
-
Jan 30, 2009, 23:18 #15
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Jan 30, 2009, 23:26 #16
- Join Date
- Dec 2007
- Location
- Carlsbad, California, United States
- Posts
- 3,658
- Mentioned
- 15 Post(s)
- Tagged
- 0 Thread(s)
-
Jan 31, 2009, 03:17 #17
Another submission for 5.
-
Jan 31, 2009, 03:52 #18
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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
-
Jan 31, 2009, 10:39 #19
- Join Date
- Dec 2007
- Location
- Carlsbad, California, United States
- Posts
- 3,658
- Mentioned
- 15 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Jan 31, 2009, 11:27 #20
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
Yay CSS3 isn't working on FF3....th...
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Jan 31, 2009, 13:56 #21
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
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.Last edited by YuriKolovsky; Jan 31, 2009 at 17:27.
-
Feb 1, 2009, 19:38 #22
- Join Date
- Oct 2008
- Posts
- 175
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Why use different CSS to control IE6. IE7 and firefox
Hope only use the same CSS can transparency more browser
-
Feb 1, 2009, 19:42 #23
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
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.Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Feb 2, 2009, 04:51 #24
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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
-
Feb 2, 2009, 06:36 #25
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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
Bookmarks