Currently we make use of nice flat ccs-only buttons that show a push-down effect onclick. They have a weird behaviour:
.button {
cursor: pointer;
display: inline-block;
color: #FFF;
font-weight: normal;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: inline-block;
background: #32a2f0;
border: 0px;
border-bottom: 2px solid #1e87cc;
padding: 10px 30px;
}
.button:hover {
background: #1e87cc !important;
border-bottom: 2px solid #0169AD;
}
.button:active {
border-bottom: 0px !important;
border-top: 2px solid #0169AD;
margin-top: 2px;
padding-top: 10px;
padding-bottom: 8px;
}
http://jsfiddle.net/6SeG8/
The problem is: When clicking the button at the top 2 to 4 pixels, the click event will not trigger. The css :active state does trigger, but the action of the button does not.
It's because of the borders and the top margin you're applying. Rather than specifying border-top: 0px;, etc., you should instead give a transparent border. You can then give extra width to the top border to make up for the margin:
.button {
...
border-top: 2px solid transparent;
}
.button:active {
...
border-bottom: 2px solid transparent;
border-top: 4px solid #0169AD; /* Added 2px to this, instead of 2px margin */
}
JSFiddle demo.
Also you really shouldn't need to use !important at all.
Consider using an after pseudo-element:
.button:active:after{
content: " ";
position: absolute;
top: -4px;
left: 0;
width: 100%;
height: 100%;
}
JSFiddle
Note, that it doesn't work in IE7 and earlier.
.button:active {
border-bottom: 0px !important;
border-top: 2px solid #0169AD;
//margin-top:2px; //this is the problem
padding-top: 10px;
padding-bottom: 8px;
}
Updated Fiddle
.button:hover {
background: #1e87cc !important;
border-bottom: 2px solid #0169AD; // This may cause the onclick not to work when clicking form the bottom of the button
}
Try to press and hold button.
You can see if you press in a middle of the button then the button is dark blue (really pressed).
If you press near the border then the button cannot get 'mouseup' to raise 'click' event. So your javascript will never receive click event and triggered.
If you want the same behavior change border margin to transparent border with desired size.
One thing you can do is
<span class="button">Click me</span>
Related
I am experiencing weird behavior of input when it is focused. As you can see through the images below, an extra white border appears whatever its outline-color is.
I tried setting padding: 0px; and box-shadow: none; too, but still I could not remove it. One thing I realized is that setting outline-style: solid; does the trick, but then I couldn't see rounded corner anymore.
The image below is the same input element which has completely same css rulesets:
input {
flex: auto;
border: 1px solid darkgrey;
border-radius: 4px;
background-color: transparent;
color: white;
font-size: 42px;
}
input:focus {
outline-style: auto;
outline-color: orange;
}
body {
background-color: #383838;
}
<input>
Don't use the auto value. Use solid instead
input {
flex: auto;
border: 1px solid darkgrey;
border-radius: 4px;
background-color: transparent;
color: white;
font-size: 42px;
}
input:focus {
outline-style: solid;
outline-color: orange;
}
body {
background-color: #383838;
}
<input>
In addition, in CSS3, outline-style accepts the value auto. The auto value permits the user agent to render a custom outline style, typically a style which is either a user interface default for the platform, or perhaps a style that is richer than can be described in detail in CSS, e.g. a rounded edge outline with semi-translucent outer pixels that appears to glow. ref
In the Reveal focus docs its:
But, as the docs
Reveal focus increases the size of the focus visual, which might cause issues with your UI layout. In some cases, you'll want to customize the Reveal focus effect to optimize it for your app.
How would you approach creating the effect that does not affect the UI in the way described above?
My Reveal focus component:
Reveal glow is box-shadow
Primary focus visual is outline
Secondary focus visual is border
Background
but something seems off and I can't quite grasp it. Is it box-shadow, is it spacing (like margin, I don't set any as you can see), or is it yet something else? How would you fix it if you wanted it to look like on the gif below?
body {
background-color: #000;
padding: 5px 100px;
}
.tile {
display: inline-block;
height: 82px;
background-color: #555555;
}
.x1 { width: 19%; }
.x2 { width: 38%; }
.reveal-focus {
border: 1px solid transparent;
outline: 2px solid transparent;
}
.reveal-focus:focus {
outline-color: #61B250;
box-shadow: 0 0 15px 3px #61B250;
}
The shadow is being placed above elements that appear before the focused one, but below elements after it. You need to add position: relative to all the elements, and z-index: 1 to the focused one.
To make sure this doesn't interfere with any other stacking, apply position: relative; z-index: 0 to the container. This ensures that it has its own stacking context.
The GIF you show appears to also have a slight animation effect, with the glow being more intense for just a moment before fading to normal. This can be achieved quite simply with animation.
body {
background-color: #000;
padding: 5px 100px;
}
.tile {
display: inline-block;
height: 82px;
background-color: #555555;
}
.x1 { width: 19%; }
.x2 { width: 38%; }
.reveal-focus {
border: 1px solid transparent;
outline: 2px solid transparent;
position: relative;
}
.reveal-focus:focus {
border-color: #000;
outline-color: #61B250;
box-shadow: 0 0 15px 3px #61B250;
animation: glowfade 0.4s linear;
z-index: 1;
}
#keyframes glowfade {
from {box-shadow: 0 0 30px 6px #61B250;}
to {box-shadow: 0 0 15px 3px #61B250;}
}
Adjust values as desired.
I have added button with rounded corner. It will be little bit blurred with circle button.
.btn {
border: 1px solid #4278ae;
display: inline-block;
vertical-align: middle;
padding: 10px;
margin: 10px;
border-radius: 100%;
}
Test
I want look like this flat and smooth. How can i achieve this?
1px is just not visible to our eyes. The code has no issue but you can use 2px for it to look better.
As you know pixels work like this,
Therefore we see it as if the curve is not smooth/clear.
.btn {
border: 2px solid #4278ae;
display: inline-block;
vertical-align: middle;
padding: 10px;
margin: 10px;
border-radius: 100%;
}
Test
Use Box-Shadow property in place of border:
box-shadow: 0px 0px 3px 0px #4278ae;
in place of
border: 1px solid #4278ae;
It looks more clear
So I have the following two triangles:
The points are cut off, but my code is literally just this:
.navCaret {
position: relative;
float: right;
right: 5px;
top: 5px;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #ccc;
}
.navCaretOL {
position: relative;
float: right;
right: 9px;
top: 9px;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #333;
}
And as you can see in this JSFiddle, it actually DOESN'T cut the edges off when rendering these triangles in a JSFiddle.
All in all this could not be a more standard way of creating a pure CSS triangle and has worked for me many, many times. Anyone have any idea what could be causing this strange behavior? Thanks.
EDIT: By the way, confirmed to behave the same way in IE and Chrome, both latest versions.
OMG I just figured this out by going through my page and deleting each CSS rule line-by-line. Apparently the problem was caused by the following rule:
div.navUpper * {
padding-top: 4px;
}
'.navUpper' is the container my carets were in. The '*' selector was applying 4px padding to them -- the effects of which can be seen here: https://jsfiddle.net/6f4yxp4e/8/
Thanks again to those who responded -- you were both right in different ways.
The triangle is only pointy when the border stretches all the way to the center, meaning anything altering the content box has to be 0 - this includes width/height and padding. Check for other css rules that overwrite your height: 0; or add some padding.
.navCaret {
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #ccc;
outline: 1px solid red; /*for illustration purposes only*/
}
.navCaretOL {
height: 0;
width: 0;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #333;
white-space: nowrap; /*for illustration purposes only*/
outline: 1px solid red; /*for illustration purposes only*/
}
<div class="navCaret">height != 0</div>
<br>
<div class="navCaretOL">height == 0 (content is overflowing)</div>
I just created a button with a dropdown menu, you can view the demo here.
In the demo I added a black background to shopping-cart-wrapper element so you can see where the problem lies.
The problem is when you hover over the button you can keep your mouse on the black background and the dropdown menu is still visible.
I only want the dropdown menu to be visible when you hover over the button or keep your mouse on the dropdown menu.
Here is the code I have:
HTML:
<div class="shopping-cart-wrapper">
<a class="shopping-cart" href="#" alt="my-shopping-cart">My Shopping Cart (0)</a>
<div class="shopping-cart-dropdown">
<div class="empty-cart"><span>Your shopping cart is empty</span></div>
</div>
</div>
CSS:
.shopping-cart-wrapper:hover .shopping-cart-dropdown {
opacity: 1;
display: block;
}
.shopping-cart-wrapper {
display: inline-block;
background: #000;
margin-top: 5px;
margin-left: 15px;
}
.shopping-cart {
border: 1px solid #d3d3d3;
color: #656565;
padding-right: 10px;
padding-top: 8px; padding-bottom: 8px;
padding-left: 40px;
font-weight: bold;
display: inline-block;
font-size: 13px;
text-align: right;
text-decoration: none;
box-shadow: 0px 1px 0px #f2f2f2;
background: #f8f8f8 url("http://placehold.it/32x32") no-repeat 0 0 ;
position: relative;
}
.shopping-cart:hover {
background: #fff url("images/cart-sprite.png") no-repeat 0 -29px ;
color: #202020;
border: 1px solid #c6c6c6;
box-shadow: 0px 1px 0px #e5e5e5;
}
.shopping-cart-dropdown {
opacity: 0;
display: none;
border: 1px solid #d3d3d3;
padding-bottom: 80px;
position: relative;
right: 49px;
width: 247px;
background: #f6f6f6;
font-size: 12px;
font-weight: bold;
}
.empty-cart{
background: #202020;
padding: 10px;
color: #fff;
text-align: center;
position: relative;
}
What's Going On
The problem here really isn't a problem, because everything is working as it is supposed to. When you hover over the container, the child is visible. Then the child is visible, the parent becomes larger to encompass it.
Current Selector:
To fix this, you have a couple options. The easiest would be to use a sibling selector instead of a parent. Select the a inside .shopping-cart-wrapper instead of .shopping-cart-wrapper itself, and use the + sibling selector.
We've got to be careful though, because we want the child to stay visible when the mouse is hovering over itself. When using the parent as a selector, this is automatic. With a sibling, we have to manually do this. We'll use both the sibling and the child itself as selectors.
Code
Working Example
Current:
.shopping-cart-wrapper:hover .shopping-cart-dropdown {
opacity: 1;
display: block;
}
Working:
.shopping-cart-wrapper a:hover + .shopping-cart-dropdown,
.shopping-cart-dropdown:hover {
opacity: 1;
display: block;
}
Further Information
http://reference.sitepoint.com/css/adjacentsiblingselector