Few things come to my mind and what i would do.
Remove that huge belt buckle surrounding Simple Geek and that grey background from top right nav. Let it just sit on the canvas. Remove radius and box shadow from article and add bottom shadow. I like that textured background.
-moz-box-shadow: 0 7px 6px -6px #222;
-webkit-box-shadow: 0 7px 6px -6px #222;
box-shadow: 0 7px 6px -6px #222;
OK, I am starting to see the thinking here.
I really need to make a better logo. In my defense I was starting to learn Gimp when I made that.
I cleaned and tightened up the articles. Still need to decide on an article header/footer background color if any.
I removed the background, border, and radius for the top nav. Cleaned up the links by removing the text-decoration except when hover, bolded the links and changed the color.
I will kill off a lot of the white space in the pages header when I redo the logo…
Still happy to get more feedback!
I didn’t see the site with the gradients everyone mentioned. What I see now I really like. Very nice background texture, and the soft blue color scheme is relaxing and professional looking.
I agree with springlab, that when you redo the logo, keep it clean and simple. Ditto to his suggestion about the nav buttons. I find that the site looks soothing and very attractive, but the logo looks out of place, breaking the overall harmonious mood. As do the nav buttons, but to a lesser extent.
I fixed up the search box. My thinking was to make it stand out just a bit with the original shading and corner radius.
As far as the nav buttons. I wanted to do something a bit different, but it is obvious that they don’t really fit now with the changes. Which leaves the question of what to do? I could do a nav bar with sprites next to the button text with a very subtle gradient or no gradient. It seems that I went way overboard, or gradients are out of style for most anything but buttons.
Logo definitely needs work. While I love the shiny plastic blue look, it does not fit anymore.
Try to add this 3 sided inset shadow (left, top, right) to your article-header and add to that element margin-bottom:-4px and see what it looks like
-moz-box-shadow: inset 0 -4px 0 0 #fff, inset 0 0 6px #333;
-webkit-box-shadow: inset 0 -4px 0 0 #fff, inset 0 0 6px #333;
box-shadow: inset 0 -4px 0 0 #fff, inset 0 0 6px #333;
Edit: You might want to change #fff in first part of the inset shadow to hex of your header background
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".