Shade Posted March 15, 2009 Share Posted March 15, 2009 hello,this is the result of what I learned from w3schools,nothing much, but a start:EDIT(0.1) : some design changes , added an info box, and some animated SVG(not IE) .Visit My Website Link to comment Share on other sites More sharing options...
Synook Posted March 16, 2009 Share Posted March 16, 2009 Ah, not bad, a larger header font size and some purpose and you might have a good site. :)I like the slider on the menu, but it would be good if it translated back to behind the current page on mouseout. Link to comment Share on other sites More sharing options...
Trotun Posted March 17, 2009 Share Posted March 17, 2009 Good, good. The slider is spiffy. Is the body text going to look good against the background though? Link to comment Share on other sites More sharing options...
Steven Posted March 17, 2009 Share Posted March 17, 2009 I agree with Trotun, make the spot where your content will be a bit more opaque. Other than that, it's a fine looking start! Link to comment Share on other sites More sharing options...
dollar Posted March 25, 2009 Share Posted March 25, 2009 Hey Shade, how did you do that slider? I mean, the thing that is moving when I hover on Home,Gallery,Renders .. Link to comment Share on other sites More sharing options...
Shade Posted March 26, 2009 Author Share Posted March 26, 2009 Hey Shade, how did you do that slider? I mean, the thing that is moving when I hover on Home,Gallery,Renders ..A javascript moves the background-image of the table containing the links, based on which link the mouse is on.that is , start function gets mouse position(m=100,200 or 300) from mouseover event.the code:// JavaScript Document: moves the tab background//final pos varsvar xf = 0;//current pos varvar xn = 400;var m = 0;//speedvar spd = 1;// interval handlervar int1 = "off";//initiate timerfunction start(m){ xf = m; if(int1=="off"){int1 = window.setInterval('slide()',20);}}//stopfunction halt(){ window.clearInterval(int1); int1 = "off";}//slidefunction slide() { // speed proportion spd = Math.abs(xf -xn); spd = spd/10; spd = Math.round(spd); spd = spd + 1; // move the bg if(xn < xf){xn = xn + spd;} if(xn > xf){xn = xn - spd;} if(Math.abs(xf-xn) <=2 ){halt();} //whithin 2px of final pos //update css document.getElementById('tabs').style.backgroundPosition = xn + "px" + " 0px";} Link to comment Share on other sites More sharing options...
lucas22 Posted March 31, 2009 Share Posted March 31, 2009 All I got was a page load error.I'll imagine what it looks like... :) Link to comment Share on other sites More sharing options...
k3d Posted April 7, 2009 Share Posted April 7, 2009 sliding rollover is rather cool. Personally I didn´t like the small content area. Link to comment Share on other sites More sharing options...
jarrett000 Posted April 13, 2009 Share Posted April 13, 2009 I like the site, it looks nice. I went to all the JS, CSS, and image pages to study how you put together with the divs and whatnot and came up with a question:Unless I'm reading it wrong you're table has no transparency or opticacy setting and yet its clearly transparent. How have you done this effect? I was looking for a site similar to this to collect information for my own site so I would really like to know how the transparency was done. I know how to make a div transparent but yours is kind of different and I can't quite put my finger on it. It's very interesting. Link to comment Share on other sites More sharing options...
Ingolme Posted April 14, 2009 Share Posted April 14, 2009 I like the site, it looks nice. I went to all the JS, CSS, and image pages to study how you put together with the divs and whatnot and came up with a question:Unless I'm reading it wrong you're table has no transparency or opticacy setting and yet its clearly transparent. How have you done this effect? I was looking for a site similar to this to collect information for my own site so I would really like to know how the transparency was done. I know how to make a div transparent but yours is kind of different and I can't quite put my finger on it. It's very interesting.The person is using semi-transparent PNGs as a background image. Link to comment Share on other sites More sharing options...
jarrett000 Posted April 15, 2009 Share Posted April 15, 2009 ooooh, thats smart Link to comment Share on other sites More sharing options...
RawDog Posted April 15, 2009 Share Posted April 15, 2009 I really enjoy the slide effect, it works very well with no waiting or loading on FF! Looks great for something that WIP, and makes sure to add a lot of content, since the main area itself looks small. Link to comment Share on other sites More sharing options...
Shade Posted May 2, 2009 Author Share Posted May 2, 2009 thanks for your reviews.Updated version : http://previewz.f-snet.com Link to comment Share on other sites More sharing options...
roondog Posted May 5, 2009 Share Posted May 5, 2009 the transparent pngs don't work in ie6 you might want to look in to a javascript fix for that. There are loads out there. Link to comment Share on other sites More sharing options...
richscom Posted May 7, 2009 Share Posted May 7, 2009 thanks for your reviews.Updated version : http://previewz.f-snet.com I can't go to the site, none of the links work, they all say that it's not available. Link to comment Share on other sites More sharing options...
vytas Posted May 7, 2009 Share Posted May 7, 2009 Now i got it , excellent work! The slider really does it. I like the colour scheme asswell well, One of my personal favourites brown with orange if u do it right, and what u have done is really amazing. May i ask what the purpose of the site is? Link to comment Share on other sites More sharing options...
MadFly Posted May 19, 2009 Share Posted May 19, 2009 That looks excellent!Mind pointing me in the right direction to where you got the info for that slide thing in the menu? Link to comment Share on other sites More sharing options...
Shade Posted May 21, 2009 Author Share Posted May 21, 2009 thank you for replies. the transparent pngs don't work in ie6 you might want to look in to a javascript fix for that. There are loads out there.It doesn't. Even with IE7 (some css parts). and you probably wouldn't have noticed the animatedanalog clock which is SVG and IE never supports it. I generally take firefox and Opera as reference.I can't go to the site, none of the links work, they all say that it's not available. this is hosted with a free hosting service, so the servers are a bit lousy ;P .Now i got it , excellent work! The slider really does it. I like the colour scheme asswell well, One of my personal favourites brown with orange if u do it right, and what u have done is really amazing. May i ask what the purpose of the site is?this site is going to be my image gallery, and the place to test web-coding projects. there will be another version of this interface, later.I intended to design a pleasant and upto W3C standards, site interface. Just need some content to add.That looks excellent!Mind pointing me in the right direction to where you got the info for that slide thing in the menu?If you know a little javascript, you can move/change any element on a web page.so I put together a bit of functions to move background png.the script is posted above. Link to comment Share on other sites More sharing options...
MadFly Posted May 25, 2009 Share Posted May 25, 2009 Cool Thanks.How will this javascript document change if i am using a hover effect for the menu?Will test tonight and see if i can get it working. Link to comment Share on other sites More sharing options...
Chris McIlroy Posted May 25, 2009 Share Posted May 25, 2009 Nice looking webpage, I could not view the animated SVG clock even tho I can view all the SVG content in the w3schools tutorials. Link to comment Share on other sites More sharing options...
Shade Posted May 26, 2009 Author Share Posted May 26, 2009 thank you.well, this SVG does show in my firefox 3 and opera 9.BTW I just added a flash image viewer. It directly loads images from given directories without any server side coding.and some graphics effects. I can't decide whether to keep that sun flare effect or not.check it out SITE UPDATE Link to comment Share on other sites More sharing options...
makeitspiffeh Posted June 8, 2009 Share Posted June 8, 2009 I love it! Keep it simple looking like it is. *wishes that I had flash abilities* Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.