Quantcast

Creativebits.org

an All Creative World site
ireid's picture
1283 pencils

How is this done in webdesign?

Hi

Anyone know how this was done on starcraft2.com's site?

If you scroll down to the bottom of the page, the image of the planet that you see through the background does NOT scroll with the rest of the site, giving the illusion that the foreground is really in FRONT of the background space. Have a look:

http://www.starcraft2.com

Tre Cool. :)

"Try not, Do! or do not, there is no try."
-Yoda

Commenting on this Forum topic is closed.

pokie's picture
1198 pencils

css craziness.

digilee's picture
221 pencils

css and png - pretty easy actually.

take it there > http://www.rickler.com

ireid's picture
1283 pencils

Magicians not revealing their secrets?

(I saw the Prestige! lol)

"Try not, Do! or do not, there is no try."
-Yoda

natobasso's picture
3954 pencils

Make your background image "fixed":
http://www.web-source.net/html_stationary_background.htm

Web searches can yield wonderful results! I typed in 'keep background stationary' and this is the first link that popped up.

----
Client: "can you guys make it more like a power-point presentation, you know, with the sliding text stuff and all?" (http://clientcopia.com/quotes.php?id=7)

ireid's picture
1283 pencils

I had some time so I went through the source. The first thing it does is reference: "@import url(/css/master.css)"

then that file when you load it up in the browser by inputting the URL (i.e starcraft2.com/css/master.css) then you get the 'MEAT' :)

Within this CSS file all the settings and parameters are set. i.e. under their 'footer." settings they set the background of the planet image UNDER the images of the foreground.

Sorry I sound excited because you really can do amazing stuff with CSS. Just wish I had time to explore CSS more in depth. . .:P

"Try not, Do! or do not, there is no try."
-Yoda

natobasso's picture
3954 pencils

CSS is REALLY great when you need to change all the pages your website at once without having to do the change on every page. What a time saver.

----
Client: "can you guys make it more like a power-point presentation, you know, with the sliding text stuff and all?" (http://clientcopia.com/quotes.php?id=7)

harrison's picture
173 pencils

to build something like that:

- set up your page with a fixed bacgkround image
- build your site as per normal
- at the bottom of your page put a png with a transparent section

effect complete

ireid's picture
1283 pencils

I am a newbie when it comes to CSS. Is there any WYSIWG editor for CSS (a la Dreamweaver) that I could use? Or should I be brave and do hard coding (shudder)

:)

"Try not, Do! or do not, there is no try."
-Yoda

Ralfy's picture
76 pencils

Freeway Pro 4 can be used to create CSS (table-less) page layouts using absolute positioning, and exposes the real power of CSS through relative positioning, percentage scaling of all elements, partial styles, and more, and all with the legendary Freeway WYSIWYG design view.

http://www.softpress.com/

pokie's picture
1198 pencils

the way you worded it, makes it sound totally easy and totally understandable.

Thanks!

Going to have to remember this trick....

digilee's picture
221 pencils

The only way to learn is to make a mistake.

In other words, if you have the time, learn to hand code.

take it there > http://www.rickler.com

natobasso's picture
3954 pencils

You can start in dreamweaver and even build a css file for your website there, but as digilee said nothing beats knowing the code.

You can use the web to preview your css. I like using Firefox because it has extensions for web validation including HTML and CSS.

----
Client: "can you guys make it more like a power-point presentation, you know, with the sliding text stuff and all?" (http://clientcopia.com/quotes.php?id=7)

archmedia's picture
587 pencils

i'm still weary of the use of transparent PNG's as they've only now been integrated into IE. most users haven't updated their Internet explorer, so be careful how you use them. in this context it works nicely cause it's a gaming website, and most gamers are well up to date on their browsers.

just an FYI :)

____________________________________________
Architectural Technician - Multimedia Designer
www.ArchMedia.us

chanman's picture
52 pencils

wtf is css?

archmedia's picture
587 pencils

after reading some past post (namely the halo one) i'm assuming you don't know much about design stuff.

i will however answer that CSS is Cascading Style Sheets. other then that, look it up.

____________________________________________
Architectural Technician - Multimedia Designer
www.ArchMedia.us

natobasso's picture
3954 pencils

The group that sets web standards for operability. Their description of CSS:
http://www.w3.org/Style/CSS/

----
Client: "can you guys make it more like a power-point presentation, you know, with the sliding text stuff and all?" (http://clientcopia.com/quotes.php?id=7)

Creativebits is a blog about creativity, design and Macs. We also have a critique section where you can post your work to get opinions and a forum to discuss any design related topics.

Recommend us on Google

Latest critique

  • Butterfingers ad campaign
  • Critique for my logo

Marketplace