How is this done in webdesign?
ireid (1306 points) | Mon, 2007-05-21 16:08Hi
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:
Tre Cool. :)
"Try not, Do! or do not, there is no try."
-Yoda
css craziness.
css and png - pretty easy actually.
take it there > http://www.rickler.com
Magicians not revealing their secrets?
(I saw the Prestige! lol)
"Try not, Do! or do not, there is no try."
-Yoda
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)
----
The Salon Design Tech
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
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)
----
The Salon Design Tech
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
andrew harrison
http://andrew.harrison.org
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
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/
the way you worded it, makes it sound totally easy and totally understandable.
Thanks!
Going to have to remember this trick....
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
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)
----
The Salon Design Tech
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
wtf is css?
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
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)
----
The Salon Design Tech