SitePoint Sponsor

User Tag List

Page 1 of 4 1234 LastLast
Results 1 to 25 of 89
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 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=595943
    Attached Images Attached Images

  2. #2
    SitePoint Addict ornette's Avatar
    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.
    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.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I'm in. I'm aiming for 4
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ornette View Post
    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:

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 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).

  6. #6
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    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

  7. #7
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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!

  8. #8
    SitePoint Zealot
    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.

  9. #9
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    SitePoint Wizard bronze trophy Centauri's Avatar
    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.

  11. #11
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    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!

  12. #12
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    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...

  13. #13
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by EricWatson View Post
    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.

  14. #14
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    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.

  15. #15
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    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.

  16. #16
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    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.

  17. #17
    SitePoint Member Vim.F's Avatar
    Join Date
    Aug 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another submission for 5.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 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

  19. #19
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    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.

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yay CSS3 isn't working on FF3....th...
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  21. #21
    Hibernator YuriKolovsky's Avatar
    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.

  22. #22
    SitePoint Zealot
    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

  23. #23
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 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

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •