I'm going for a pretty minimalistic look on my site and I was wondering how I could achieve a look like this:
http://iq.gs/cssdropdown
The top left hand corner in the picture would be transparent or a solid color to match the top navigation bar. What I'm looking to do is to show the six different colored boxes as block elements so when someone hovers over the navigation part, the six boxes drop down and can be used as links. I'm not sure how to do this, as I'm a newbie to CSS.
Please help!
Something like this? : http://jsfiddle.net/SpJ5f/
I didn't bother using the colours/fonts etc you asked for, just the idea behind it
Related
I'm using the following radial menu...
http://www.cssscript.com/demo/radial-popup-menu-with-javascript-and-css3-circlemenu/#
Looks great, however I want two on my page. One bottom right and one bottom left.
That's no biggy, however obviously when on the left of the screen i need the buttons to pop out to the right and visa versa.
my question...
for each of the list items there's a transform in the CSS like...
transform: translate(-144px, 0);
obviously having it as a positive 144 will make it move to the right, which is great when the menu is positioned in the bottom left...
Rather than having to have a left class and right class with essentially the same CSS behind it, just one being positive and the other negative, is there a nice way to have 1 set of css rules that will just translate the li away from the div/screen edge?? or maybe I am thinking about this completely wrong (feel free to say if i am being a numpty)?
thanks
marking as resolved, as per #hissvards comment
"I don't think there's a way to do it using pure CSS, but it would be
dead easy with a preprocessor. - Hissvard"
I need help creating something like this link (http://www.standardchartered.co.in/borrow/)
When the user hovers over the navigation, the grey triangle image will appear. I'm not very sure how to go about doing it. Please help!
The best way to do this is to use a plug-in, possibly for jQuery. There are many drop down menu plugins available. A google search for "jquery drop down menu" will help you. One of the first results for me is:
http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
The second one down on that page appears to have the effect you want, but it also depends on how you want the rest of the menu to appear. You will need to do some research and choose one that suits you.
OR, if you just want a grey triangle to appear, without the menu, when you hover over an element, then some css like this is what you want:
li:hover {
background:url('./images/grey_triangle.png') center bottom;
}
Which says, when the li element is hovered, use ./images/grey_triangle.png as the background image and place it in the center at the bottom of the element. You would need to create your own grey triangle, set appropriate padding etc, but that is the basic css you need for the effect.
I'm using CSS to create a set of toggleable buttons.
I'm almost there, but I don't feel I've got the CSS proprerties quite right: http://jsfiddle.net/rrGab/5/
I think the dark border on the selected button is too dark and too sharply delineated, but I don't know how to make it look smoother.
Could someone suggest how to improve the CSS to make it look better?
I'd love to know the general CSS principles of making buttons "pop" out of the page or appear to be recessed into it.
Apologies if StackOverflow isn't the right place for this - would be happy to move it onto a design forum if that is more appropriate.
For a recessed 'letterpress' effect you need two different colored borders, one for the top, one for the bottom, instead of a solid border. Please refer to this article here. This technique is using text-shadow to create the effect with text, but I think you might could use the philosophy behind it and apply it to border color.
I agree that the solid border doesn't really make it pop. What if you again did a two-toned border, but use the 'middle color' that your gradient produces up top, and then your bottom border could be ever so slightly darker than the bottom of your gradient?
I think this will be easier to show you than explain, but basically I am trying to create a transition effect on two separate div tags when the user hovers over one of them. Here's an example I just whipped up. It's not perfect, I'm just trying to figure out how to split the robot in half.
http://color-reel.com/growbot.html
currently, the right half will move when you hover over it, but I want both left halves and the right have to open up so it looks like the robot is coming apart.
thanks in advance for your help!
edit: p.s. something small that annoys me that I don't know if it's "fixable" is if div element slides past the user's mouse when the element is being hovered over, it glitches. is there an easy way to fix this?
Maybe if you nest the divs you might be able to target the parent div.
So you get something like this:
#parent:hover #three,
#parent:hover #four {
....
}
I'm using Aristo's CSS3 buttons seen here. One thing I like about Facebook's buttons are the little sliver of grey between the border and background of blue button elements. To see this go to "Messages" then "New Message" .. the Send button has just a bit of grey to make it pop out. It looks like this is achieved with this bit of code:
background-position: 0px -17px;
I've put up my attempts on jsfiddle here. My goal is to avoid creating a nested element if possible. I guess I could also create an image and set that as the background, but I was hoping this would possible just with CSS. Thanks!
Perhaps you could use the outline property for the border, and then you get to use the border property for the highlight.