|
|||||||||
|
|||||||||
|
|||||||||
 |
|||||||||
| |
||
|
|
|
|
|||||||||
|
|||||||||
|
|||||||||
|
|||||||||
| |
||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
ASP Free Forums Sponsor:
|
|
|
|
#1
April 11th, 2005, 10:55 PM
|
||||
|
||||
|
Contest
This is a slight variant to the average post around here. I am challenging you guys to develop something using only text with CSS decoration to make what should look like an image on a website.
ex. http://jigsaw.w3.org/css-validator/...&usermedium=all Notice the "CSS Validator" text. Isn't that just perty? Well, I want to see what you guys can do, but make it even more complex than that. Well, this seems weird, but let's see what happens. I will require everyone to use an HTML document type with a base layout: Code:
<html>
<head>
<script type="text/css">
p {
vertical-align: middle;
text-align: center;
}
</script>
</head>
<body>
<p>
</p>
</body>
</html>
You get the idea...you can of course add more <p> tags, but only use <p> and no other <html> please. The winner will get a reputation point from me, and possibly from others if i can get anyone to agree to. When your page is done, put a link to it in a post in this thread. So, get creatin'!
|
|
#2
April 12th, 2005, 03:38 PM
|
||||
|
||||
|
Wait, is this competition to create fancy stuff without images?
Already been done: http://www.designdetector.com/tips/3DBorderDemo2.html Sorry  Last edited by 1337_d00d : April 12th, 2005 at 03:43 PM.
|
|
#3
April 12th, 2005, 05:34 PM
|
||||
|
||||
|
That page just redirects to microsoft.com. Anyway, this is to see what everyone else can do..
|
|
#4
April 12th, 2005, 07:01 PM
|
||||
|
||||
|
Redirects for me too...
|
|
#5
April 12th, 2005, 10:42 PM
|
|||
|
|||
|
That is because there is an invalid link under the link. Here is the actual URL:
http://www.designdetector.com/tips/3DBorderDemo2.html
|
|
#6
April 13th, 2005, 02:40 AM
|
||||
|
||||
|
Quote:
Nice house, Dude where's yours? I am sure you are more than capable of doing something like this 
__________________
Look! Its a ShemZilla    
|
|
#7
April 13th, 2005, 05:53 AM
|
||||
|
||||
|
he's got http:// twice in the url hence its not working,
but yep nice house, although he is using more then just <p>, although only just, but it does far suppass anything i could do so i shouldn't complain. My votes with WSM
__________________
Around a circle you can always draw a bigger circle. EnenDaveyBoy
|
|
#8
April 13th, 2005, 07:08 AM
|
||||
|
||||
|
this is against baseballdude's rules... he wanted us to make such things, not post links to something done by others.
 now, if anyone of us would have made such css house himself, I'm sure he would have taken the big prize instantly. if only I had time for this, I could come up with something...
|
|
#9
April 13th, 2005, 08:03 AM
|
||||
|
||||
|
well, my fingers itched... here is what I came up in the limited time I have:
http://www.amitbb.co.il/Downloads/temp/css_contest.html and the code is... Code:
<html>
<head>
<title>Shadow Wizard CSS</title>
<style type="text/css">
#container { width: 300px; height: 100px; border-top: 1px solid black; border-left: 1px solid black;
border-right: 1px solid black; border-bottom: 1px solid black; }
.innerTextDiv { font-size: 3em; }
.blockDiv { width:50px; height: 50px; text-align: center; color: black; }
#innerDiv1 { margin-left: 0px; margin-top: 0px; background-color: red; }
#innerDiv2 { margin-left: 50px; margin-top: -50px; background-color: blue; }
#innerDiv3 { margin-left: 100px; margin-top: -50px; background-color: lightgreen; }
#innerDiv4 { margin-left: 150px; margin-top: -50px; background-color: yellow; }
#innerDiv5 { margin-left: 200px; margin-top: -50px; background-color: purple; }
#innerDiv6 { margin-left: 250px; margin-top: -50px; background-color: azure; }
#innerDiv7 { margin-left: 0px; margin-top: 0px; background-color: blue; }
#innerDiv8 { margin-left: 50px; margin-top: -50px; background-color: red; }
#innerDiv9 { margin-left: 100px; margin-top: -50px; background-color: yellow; }
#innerDiv10 { margin-left: 150px; margin-top: -50px; background-color: lightgreen; }
#innerDiv11 { margin-left: 200px; margin-top: -50px; background-color: azure; }
#innerDiv12 { margin-left: 250px; margin-top: -50px; background-color: purple; }
</style>
</head>
<body>
<div id="container">
<div id="innerDiv1" class="blockDiv"><div class="innerTextDiv">S</div></div>
<div id="innerDiv2" class="blockDiv"><div class="innerTextDiv">H</div></div>
<div id="innerDiv3" class="blockDiv"><div class="innerTextDiv">A</div></div>
<div id="innerDiv4" class="blockDiv"><div class="innerTextDiv">D</div></div>
<div id="innerDiv5" class="blockDiv"><div class="innerTextDiv">O</div></div>
<div id="innerDiv6" class="blockDiv"><div class="innerTextDiv">W</div></div>
<div id="innerDiv7" class="blockDiv"><div class="innerTextDiv">W</div></div>
<div id="innerDiv8" class="blockDiv"><div class="innerTextDiv">I</div></div>
<div id="innerDiv9" class="blockDiv"><div class="innerTextDiv">Z</div></div>
<div id="innerDiv10" class="blockDiv"><div class="innerTextDiv">A</div></div>
<div id="innerDiv11" class="blockDiv"><div class="innerTextDiv">R</div></div>
<div id="innerDiv12" class="blockDiv"><div class="innerTextDiv">D</div></div>
</div>
</body>
</html>
|
|
#10
April 13th, 2005, 08:15 AM
|
||||
|
||||
|
nice one shadow
I would try, but I only just started using css, and I never would have if it wasn't for this forum 
|
|
#11
April 13th, 2005, 08:31 AM
|
||||
|
||||
|
thanks... this is really amateur compared to the WSM but I'm only beginner as well!
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
