Woot!... CSS house

  • veedee
  • Graduate
  • Graduate
  • User avatar
  • Posts: 110

Post 3+ Months Ago

Awesome house made with CSS (CSS and html ONLY I i think).... !

http://www.designdetector.com/tips/3DBorderDemo2.html

How to do that? :shock:
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Vladdrac
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2136
  • Loc: Louisville, Ky

Post 3+ Months Ago

damn, lol

well the source is all there, and the css is in the html file. It is pretty lengthy, I damn sure wouldn't want to try it
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

veedee wrote:
Awesome house made with CSS (CSS and html ONLY I i think).... !

http://www.designdetector.com/tips/3DBorderDemo2.html

How to do that? :shock:



Not tha difficult really. You use position:absolute; to place everything, and then different coloured borders to create the 3d effect. The house thing is quite common, i've seen it done in a few places.

Now, if you think that is impressive, try the css pencils demo by the same guy :)
  • Vladdrac
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2136
  • Loc: Louisville, Ky

Post 3+ Months Ago

that is really good too, only it is quite small
  • Bobbo171
  • Graduate
  • Graduate
  • Bobbo171
  • Posts: 174

Post 3+ Months Ago

Vladdrac wrote:
that is really good too, only it is quite small


if you go to the php CSS colored pencil one, you can zoom it

http://www.designdetector.com/tips/phpcsspencils.php
  • darksat
  • Proficient
  • Proficient
  • User avatar
  • Posts: 487
  • Loc: London (via the rest of the world)

Post 3+ Months Ago

I could do that if I gave up my social life.
  • cjxxi
  • Expert
  • Expert
  • cjxxi
  • Posts: 565
  • Loc: Fort Worth, TX

Post 3+ Months Ago

Dont's worry guys! i think no one is
going to do that... and so perfect..
these are generate by programs sush as
microsoft word I, seen it in 2003 version.
i don't know how he did it any ways.






http://networklatino.com
  • FusionDesigner
  • Proficient
  • Proficient
  • User avatar
  • Posts: 282

Post 3+ Months Ago

Strange people.
  • Vladdrac
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2136
  • Loc: Louisville, Ky

Post 3+ Months Ago

microsoft word? what?
  • veedee
  • Graduate
  • Graduate
  • User avatar
  • Posts: 110

Post 3+ Months Ago

can do it with microsoft word 2003 ???
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

cjxxi wrote:
Dont's worry guys! i think no one is
going to do that... and so perfect..
these are generate by programs sush as
microsoft word I, seen it in 2003 version.
i don't know how he did it any ways.

house: hand coded, you could do it in 20 mins if you really knew what you were doing.

pencils: Yeah cause word outputs custom javascript and php code :roll: the colours would have been sampled with a <b>custom</b> program to create an array, but the base styles would have been hand written then hard-coded into a php/javascript loop.
  • Vladdrac
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2136
  • Loc: Louisville, Ky

Post 3+ Months Ago

I could see how it would be done now, cause when you zoom in it is nothing but css pixels (cixels?). All one would have to do is get a photo they had or perhaps a drawing, and pixelate it a little in photoshop, then just place the divs accordingly. If it was a large picture it would take quite a while.
  • Uzzo
  • Graduate
  • Graduate
  • Uzzo
  • Posts: 136
  • Loc: London

Post 3+ Months Ago

Looks to me like someone was REALLY REALLY bored!

Looks nice though, does show off what CSS can do but come on, has he/she not got something better to do?
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

Actually you could even do this with tables, and just have a whole crapload of 1px by 1px cells, for instance 640 cells accross and 480 cells down, 307200 cells total.

You would need some way of grabbing every pixel of an image one after another with PHP, then placing the color of that pixel as the background color of the cell. Basically you'd need to be able to break apart a image and rebuild it with the information gathered.
  • Vladdrac
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2136
  • Loc: Louisville, Ky

Post 3+ Months Ago

oh cool, so your going to do this for us? can't wait! lol. j/k man
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

I was going to, but I don't see any pixel puller in the php function list. If someone could find the function for me, I'd gladly run the script off right away ;)
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

It's all been done...woowoowoo...it's all been doooonnee beffoooooreeee....

http://php.us.themoes.org/manual/en/fun ... olorat.php
Read the user comments ;)
  • Vladdrac
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2136
  • Loc: Louisville, Ky

Post 3+ Months Ago

lol, but it really is a browser killer though
  • darksat
  • Proficient
  • Proficient
  • User avatar
  • Posts: 487
  • Loc: London (via the rest of the world)

Post 3+ Months Ago

I had a house just like that.
  • Rat
  • Guru
  • Guru
  • User avatar
  • Posts: 1190
  • Loc: desk

Post 3+ Months Ago

lol, thats cool. i like the pencils, it looks so real, must've taken a while =/
  • calande
  • Newbie
  • Newbie
  • calande
  • Posts: 9

Post 3+ Months Ago

:shock:
At this point, it's considered art.
I prefer creating the actual image with Photoshop :lol:

--
Charles.
Chat: auriance@jabber.org
WWW: http://www.auriance.com
  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1892
  • Loc: Las Vegas

Post 3+ Months Ago

b_heyer wrote:
Actually you could even do this with tables, and just have a whole crapload of 1px by 1px cells, for instance 640 cells accross and 480 cells down, 307200 cells total.

You would need some way of grabbing every pixel of an image one after another with PHP, then placing the color of that pixel as the background color of the cell. Basically you'd need to be able to break apart a image and rebuild it with the information gathered.


I wrote a script about a year ago that would allow a user to upload a jpg, then generate the image as a set of 1x1 table cells. Using php and GD 2.0 you can use imagecolorat() to get the color of a pixel, then duplicate that pixel by setting the bgcolor of the td and putting a 1x1 transparent gif in the cell. It was HORRIBLY slow, but it worked.

I'll see if I can dig it up.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Just as a side note with the pencils, he reduces the bandwidth somewhat by having each div cover 3 pixcels. So 3 different colours on each div, quite clever really.
  • isthistakenyet?
  • Beginner
  • Beginner
  • User avatar
  • Posts: 48
  • Loc: Burnley U.K.

Post 3+ Months Ago

Thanks to the recent protester at the palace i have made a union jack with css borders, you can see it at http://www.santaisahindu.org/css/unionjack.html

A batman logo will be added eventually.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

isthistakenyet? wrote:
Thanks to the recent protester at the palace i have made a union jack with css borders, you can see it at http://www.santaisahindu.ahazdesigns.com/css/unionjack.html
Nice :)

Quote:
A batman logo will be added eventually.

Is that going to be some fancy work with bulletpoints? Sounds fun though, can't wait to see what you come up with :)
  • isthistakenyet?
  • Beginner
  • Beginner
  • User avatar
  • Posts: 48
  • Loc: Burnley U.K.

Post 3+ Months Ago

Okay, after 14 cups of coffee, 2 cheese butties and a pack of maltesers, iv finally managed to make a reasonable looking batman logo made using css and xhtml! Here it is ---> http://www.santaisahindu.org/css/batman.html

Now i need to combine it with the union jack, gimme a couple of minutes.....

There we are, in honour of the palace protester i give you the union jackman ----> http://www.santaisahindu.org/css/unionjackbat.html

Post Information

  • Total Posts in this topic: 26 posts
  • Users browsing this forum: No registered users and 63 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.