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.
Related
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.
Check this out:
http://codepen.io/maxwbailey/pen/vGKBr
Now, they look fine when you aren't hovering over them, but when you hover over the <button> and <input> elements, you'll see that the text below them is bumped around a bit, while hovering over the <a> element does not cause the same effect. That's because the <button> and <input> elements are displaying as inline-blocks still (which handle borders, padding, and margins differently than regular inlines), despite the display: inline !important; line that is applied to them.
Is there anyway to override this? I know it's doable via hacks like borders with the same colour as the background, etc. but I'd really like to know if there's a way to make them display: inline properly.
Note: The problem here isn't about the text being bumped around (though that is an effect of it), it's that, despite everything saying otherwise, the browser is still forcing the button to display as an inline-block. Thanks to everyone who's provided methods to prevent the text bumping from happening, but that's not the real problem here.
Thanks!
Not sure the context of why your markup exists like this, but the issue looks like it's being triggered by setting the font-family. If you take a look at this pen - http://codepen.io/pnts/pen/Egwuo - the hover works fine without a font-family specified, but if you uncomment the line specifying one, the jumping begins.
It seems your question is a little misleading. Your button tag IS in fact set to display:inline on both normal and hover states. It sounds like the question you have is how to prevent the text below from getting bumped down on rollover. Instead of using a bottom border as you are currently, why not use the following in the hover state to achieve the underline?
text-decoration:underline;
agree with the previous answer, however if you want the flexibility of a border, being able to use padding to adjust where it lays etc, you could use
border:1px solid transparent;
not as hacky as using the same color as you bg because it doesn't matter the color of the background that way.
I've been trying to build this CSS layout for a while now. I am trying to make this:
http://tinypic.com/r/29xx9ps/6
And I can not even get the first step done of putting the blue bar at the top of the screen. But any help would be much appreciated.
I also found this:
What is the hexadecimal code of the "blue" background color of Facebook?
give me the color codes but please any help would be appriated I'm watching tutorials like crazy but I have a wired dead line for this
I am oblvious when it comes to css
You may need to learn it then. I recommend you start with http://www.w3.org/TR/CSS21/selector.html and http://www.w3.org/TR/CSS21/propidx.html
And I can not even get the first step done of putting the blue bar at the top of the screen
Your "Title WHITE" text and "Sign Up" button are inside something: in your HTML, let that "something" be a <div> element.
For example if you do "View Source" on my web page at http://www.modeltext.com you'll see that I have a <div id="HEADER"> element.
My CSS at http://www.modeltext.com/images/styles.css specifies:
#HEADER
{
background-image: url(bg_main.gif);
background-repeat: repeat-x;
background-position: bottom; }
That's because I'm using an image as the background, to get those lines on the background. If instead you want a simple solid background color, then you could simply use the background-color property instead.
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?
Which css should I apply to textbox that make it same as background means user does not feel like he is typing in textbox? I tried giving same background color but it still doesn't provide exact what I want. User still can feel that it's a textbox.
Do you mean like this?
input {
border: 0;
background: transparent /* the important bit */
}
Live Demo (I added a blue border on a parent element so you can see where the <input> is)
http://jsfiddle.net/eUmr2/1/ (with gradient background to more easily see the transparent)
Appears to work in IE6:
If I understand your question correctly, you should first of all "hide" borders of textarea or input field. You can simply use "border:none;" property for this. In this case, if both backgrounds will be the same (e.g. textarea and rest of the container) it will be displayed like you need.
I don't know exactly what are you trying to achieve, but this method is used usually for not standard designs of form fields. The only you need to do is to be sure that this part of your page is OK from usability point of view.
Good luck!
Remove the borders and apply the same background color as the container it's in.