Forum Moderators: not2easy
I am learning CSS and javascript right now.
I really liked the layout of this web page <sniped highly graphical layout>
Basically, there are 2 things I want to know.
First one is, the horizontal menu at the top is something I have never seen. Is there some code that I can use to design using CSS?
Secondly, as you can see, the lines sepaerating white and blue colors. How can I do that.
I would be really glad if you can suggest me something. As I said, am a novice .. Please do not give a complex code that I can not understand.
Thanks for reading this :)
[edited by: swa66 at 8:15 pm (utc) on Nov. 24, 2009]
[edit reason] No links please see ToS and Forum Charter [/edit]
The blue-white border that runs at an angle is again the same: a background image.
It's all in the background.
So it's all relatively simple CSS that can be achieved using rather simple techniques and some more advanced graphics.
Things to look into:
- using background images in CSS
- text replacement (using CSS to hide the text and keep a background image)
- simple horizontal CSS menus
- selecting a current element in a menu
- :hover
- CSS sprites
Once you know all of those "techniques" it's pretty easy to get this. But take it one step at a time if you're learning. To tackle this as a first project: it'll be a steep learning curve.
All of these techniques occur in discussions regularly out here, hang out and you'll see them mentioned often.
[edited by: swa66 at 10:28 pm (utc) on Nov. 24, 2009]
Unfortunately the link is cut out because we don't do site reviews, however for the benefit of others and yourself, it was a highly graphical site, with all effects being achieve by CSS and background graphics.
emiley, if you are just starting off and want to dissect how a site may be achieving an effect, the first thing you can do is use a firefox browser and then when you're on a page hit Tools->page info then in the media tab you will see all images used on the page, that will be enogh to show you if effects are indeed being achieved using clever images. You may also want to search for articles on CSS Sprites, the menu on that page along with many others are usually achieved in virtually the same way, it's purely the images themselves that give them a different look.
As you're just starting off, and said you didn't want complex code may I suggest you look at creating saimple rollover menus using List elements and background colors, then once you get the theory as to how they are started it's simply a case of siszing the <li> items and then using background images on them. These images would adjust their background position, thus giving the appearance that they are changing whenever you :hover over a link that is inside the <li> element.
The other lines you mention are simply a case of background images placed on various other elements purtely for visual effect.
A good site to visit is CSS Zen Garden, it's site where the HTML remains static and all designs are created using only CSS and background graphics, you can download the CSS and images for these designs, the idea of it so you can destruct and learn by playing around with the code to learn how that way..
Hope it helps, and if you come across any more specific queries on your learning curve do give us a shout, and feel free to provide small code samples, not links thanks
Suzy
;)
