CSS - Test Your CSS Skills Number 18 :
CSS - Test Your CSS Skills Number 18 : Quiz ended - solution posted in post #45
This week we have 2 fun quizzes that are more a puzzle than valid layouts although the techniques used will come in handy elsewhere.
Quiz A is supplied by me (but suggested by MarkBrown4) and Quiz B has been supplied by RoObear.
In my quiz we are going to invent a new CSS property called "float:center". Just like float:left and float right it allows text to wrap but in this case the element is floated in the centre of some text and the text will part and wrap on both sides of the element.
This means that the text can still be read from left to right all the way across the whole width.
Have a look at the screenshot called float-center.png to see what I mean.
The screenshot shows the (percentage width) element at a smaller width and at a larger width to show that it works across a reasonable range.
In my example the layout breaks at larger widths so just make sure it works for the range specified in my screenshot.
Obviously this is not a perfect solution as some letters are cut in half and I'm hoping you can come up with something better.
The rules are pretty flexible and you can just test in the browser of your choice but no scripting is allowed. You can add to (or remove) the html and css as much as you like and use any properties you wish (no images allowed either).
My examples uses valid CSS/html and works in most browsers.
The main point is that you can open and close the window across a reasonable range and the effect is still maintained. Therefore you can't just absolutely place little bits of text on either side to give the effect.
Lastly you are not allowed to use the "clip" property because we did that in another quiz.
Here is some html which you can use if you like.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<p>This is some text that will flow around both sides of the image. The text can stil be read from left to right across the whole of the container and still make sense apart from the odd letter that gets split on either side of the image. This would be a useful effect if perhaps we invented a new "float:center" property that allows the text to flow around both sides of the image but would of course look much neater if there was some margin around the image. See if you can come up with something better than this that still makes sense as the window is resized bigger or smaller within a reasonable range. The css is relatively simple but of course not very semantic due to the way that it is constructed. However it makes for a useful and interesting effect but I'm sure someone can come up with something much better!</p>
Any questions just ask and I will clarify.
Quiz B supplied by Roobear will put a smile on your face :)
Have a look at the attachment called quiz18b-face.png.
You simple have to copy that effect using -moz-border-radius (or border-radius or webkit equivalent). No images are required.
As you move your mouse around the face you will see that the eyes folllow the cursor around.
So the idea is that the face looks at your cursor when you move it around. It then looks excited when you put the cursor over the face and just smiles and looks at you when the cursor is too far away.
Check the screenshot to see all the states in action.
For extra bonus points you could try and make the face scalable when the window is resized which shows how the corners will work better than images.
For extra extra bonus points make the display also work in other browsers that dont support the round corners where they would just get square blocks instead.
You can use your own html and CSS and it only needs to work perfectly in Firefox.
As usual no scripting or images are allowed.
Any questions just ask and remember this is just for fun :)
Solutions to both quizzes will be posted later in the week (or longer) depending on how it goes :)
Have fun .
PS. : In case you missed the other tests you can find them here:
test 1: test 2: test 3: test 4: test 5: test 6: test 7: test 8: test9: test10: test11: test12:
test13: test 14: test 15: test 16: test 17: