I'm trying to use box shadow to create a border around 2 html elements. I cannot user box-shadow on the button element as the performance in Android is very poor, it needs to be on each inner element. I also cannot user border proterty as again the performance is poor on some android devices. As you can see on the jsfiddle, the left and right "borders" are thicker than the top and bottom.
The solution below uses box shadow on the top, left and bottom of the em element and on the top, right and bottom of span element.
How do I make the "border" look even?
<button class="button">
<em></em>
<span class="hidden" style="display: inline;">698</span>
</button>
.button {
background: #00bdf2;
border-color: white;
border-width: 0.1rem;
border-style: solid;
float: right;
height: 3rem;
margin-right: 2.4rem;
margin-top: 0.9rem;
overflow: visible;
padding: 0;
position: relative;
z-index: 101;
border: 0;
}
input, button {
border-radius: 0;
outline: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
}
.button em {
background-position: center center;
background-repeat: no-repeat;
background-size: 1.5rem 1.5rem;
display: inline-block;
float: left;
height: 100%;
padding: 0 1rem;
width: 1.5rem;
-webkit-box-shadow: inset .1rem 0 0 .1rem #000;
-moz-box-shadow: inset 0 0 .2rem #000;
box-shadow: inset .1rem 0 0 .1rem #000;
}
.button > span {
background: #ffcd00;
color: #444444;
float: right;
height: 100%;
font-family: Arial;
font-size: 1.4rem;
line-height: 3rem;
padding: 0 1rem;
text-align: center;
-webkit-box-shadow: inset .1rem 0 0 .1rem #000;
-moz-box-shadow: inset 0 0 .2rem #000;
box-shadow: inset -.1rem 0 0 .1rem #000;
}
By moving the h-shadow to .1rem and -.1rem you are pushing the shadow left (or right) by that value, so by design, this will reveal more of the shadow on that sides.
Removing the value and having it as 0 will fix this, but will also show the shadow of the side you are trying to hide it from so this will not create the effect you are after.
Related
I have an element with inline background color made with box-shadox, like this:
.overlay {
display: inline;
background-color: red;
box-shadow: 10px 0 0 red, -10px 0 0 red;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.overlay>span {
padding: 6px 10px;
border-radius: 4px;
border: 1px solid #fff;
}
body {
padding: 20px;
color: #fff;
font-size: 20px;
}
<div class="overlay">
<span>Category</span>
</div>
However, since the text also needs a border and border radius, I added an inner span.
As a consequence I need to add more box-shadow to top and bottom, but how?
I tried adding more layers to the box-shadow like this:
box-shadow: 10px 0 0 red, -10px 0 0 red, 0 10px 0 red, 0 -10px 0 red;
but it doesn't look good. How can I solve this?
You can use spread property in box-shadow to display shadow around every 4 edges of the element.
.overlay {
display: inline-block;
background-color: red;
box-shadow: 0 0 0 20px red;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.overlay>span {
padding: 6px 10px;
border-radius: 4px;
border: 1px solid #fff;
display:inline-block;
}
body {
padding: 20px;
color: #fff;
font-size: 20px;
}
<div class="overlay">
<span>Category</span>
</div>
And there are tools for box-shadow that you can use to achieve the best form you want.
Please add use display: inline-block for displaying top and bottom box shadow. it will work
.overlay {
display: inline-block;
background-color: red;
box-shadow: 2px -1px 0 10px red;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.overlay>span {
display: inline-block;
padding: 6px 10px;
border-radius: 4px;
border: 1px solid #fff;
margin:2px;
}
body {
padding: 20px;
color: #fff;
font-size: 20px;
}
<div class="overlay">
<span>Category</span>
</div>
Here's what i want to accomplish:
As you can see, there's a small border at the bottom, i've tried to add border-bottom: 1px solid #c1ad6f but it results to:
Border is not fully filled cause of radius.
.btn {
background: #d5c289;
border-bottom: 6px solid #c1ad6f;
font-weight: 500;
font-size: 1.125rem;
padding: 1.25rem;
border-radius: 4px;
}
<a class="btn" href="#form" role="button">Enroll</a>
You may consider box-shadow instead of border to achieve this in a better way:
.box {
display: inline-block;
margin: 10px;
height: 100px;
width: 200px;
background: #d5c289;
box-sizing:border-box;
border-radius: 0 0 20px 20px;
}
.shadow {
box-shadow: 0 -10px 0 0 #c1ad6f inset;
animation: anime 2s infinite linear alternate;
}
.border {
border-bottom: 10px solid #c1ad6f;
animation: anime-alt 2s infinite linear alternate;
}
#keyframes anime {
from {box-shadow: 0 -1px 0 0 #c1ad6f inset;}
to {box-shadow: 0 -30px 0 0 #c1ad6f inset;}}
#keyframes anime-alt {
from {border-bottom: 1px solid #c1ad6f;}
to {border-bottom: 30px solid #c1ad6f;}}
<div class="box shadow">
Good one with box-shadow
</div>
<div class="box border">
Not good with border
</div>
This is simple trick to make border rounded using box-shadow. it will
exactly giving the output what you want.
.btn-bordered {
background: #17aa56;
color: #fff;
border-radius: 15px;
box-shadow: 0 10px #119e4d;
padding: 25px 60px 25px 90px;
}
.btn-block {
border: none;
font-family: inherit;
font-size: inherit;
color: inherit;
background: #ddd;
cursor: pointer;
padding: 25px 80px;
display: inline-block;
margin: 15px 30px;
text-transform: Capitialize;
letter-spacing: 1px;
font-weight: 700;
position: relative;
overflow:hidden;
}
<button class="btn-bordered btn-block" type="button">Bottom Rounded Button</button>
#AlexanderKim, you could increase border-bottom. like this: border-bottom: 5px solid #c1ad6f;. I made this fiddle: jsfiddle.net/bektkdnz but increased padding so it was easier to see
I don't understand why I can't get this to work easily. Trying to make a simple CSS button for a link with a white line around the text. I want the red box to change to #1f1f1f when I hover over but I'm having issues with it delaying depending when I hover what part.
BUTTON TEXT
font-size: 1.3em letter-spacing: .3em
BOX
10px padding (between text and outline),
1px #ffffff border,
5px padding (between outline and main box),
background: #be0922
hover
background: #1f1f1f
normal red button (background:#be0922;)
hover black button (background:#1f1f1f;)
I might try just making the <a> the full red button, with a <span> inside with a border.
HTML:
<a href="#" class="fancy-button">
<span>Read More about our services</span>
</a>
CSS:
.fancy-button {
background: #be0922;
font-size: 1.3em;
letter-spacing: .3em;
text-align: center;
padding: 10px;
box-sizing: border-box;
display: inline-block;
text-decoration: none;
}
.fancy-button span {
color: white;
text-transform: uppercase;
border: 1px solid white;
display: inline-block;
padding: 5px 10px;
box-sizing: border-box;
}
.fancy-button:hover {
background: #1f1f1f;
}
See jsfiddle with this example working:
http://jsfiddle.net/3gh9qen2/
there is a few ways with border, box-shadow and outline ....
button {
line-height: 1.3;
padding: 15px;
background: red;
border: none;
color: white;
vertical-align: middle;
margin: 5px;
box-sizing: border-box;
}
.outline {
outline: solid 1px;
outline-offset: -5px;
}
.outlineborder {
outline: 5px solid red;
border: 1px solid white;
}
.shadow {
box-shadow: 0 0 0 5px red, inset 0 0 0 1px white;
}
.border {
box-sizing: border-box;
border: 5px solid transparent;
box-shadow: inset 0 0 0 1px white;
}
.shadowborder {
box-shadow: 0 0 0 5px red;
border: 1px solid white;
margin: 5px;
}
button:hover {
background: #1f1f1f
}
.outlineborder:hover {
outline-color: #1f1f1f
}
.shadow:hover {
box-shadow: 0 0 0 5px #1f1f1f, inset 0 0 0 1px white;
}
.shadowborder:hover {
box-shadow: 0 0 0 5px #1f1f1f;
}
<button class=none>101 simple reset to start from</button>
<button class=outline>simple reset & outline offset</button>
<button class=outlineborder>simple reset & outline + border</button>
<button class=shadow>simple reset & shadow</button>
<button class=shadowborder>simple reset & border shadow </button>
<button class=border>simple reset & shadow border</button>
p.s. I would have used your markup if it was posted
I'm trying to make an inset pill using pure CSS:
Where the two color blocks are clickable separately.
But I can't figure out how to apply the box shadow to the containing element. The closest I got was using an :after element and positioning it over the links; but that covers up the links, making them un-clickable:
(jsFiddle)
<div class="pill">
✚
⦿
</div><!--/.pill-->
.pill {
position: relative;
float: left;
&:after {
content: "";
display: block;
border-radius: 8px;
box-shadow: inset 1px 2px 0 rgba(0,0,0,.35);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
a {
display: block;
padding: 4px 6px;
text-decoration: none;
color: #fff;
float: left;
&.plus {
background: #3c55b1;
border-radius: 8px 0 0 8px;
border-right: 1px solid darken(#3c55b1, 30%);
}
&.circle {
background: #40be84;
border-radius: 0 8px 8px 0;
border-left: 1px solid lighten(#40be84, 15%);
}
}
}
I'm aware of the pointer-events property, but browser support is pretty shabby.
So what do we think? Possible?
You are not using the spread property on the box shadow, so you want to create a border, instead using box shadow add a border to each element.
Remove the:after property and will get the normal behavior
jsFiddle
Make it simple,
draw your box-shadow from a, so it doesn't matter wich size they take.
http://codepen.io/gcyrillus/pen/xwcKg
.pill {
position: relative;
float: left;
background:#eee;
padding:0.5em;
}
a {
display: inline-block;
padding: 4px 6px;
width:1em;
text-align:center;
text-decoration: none;
color: #fff;
font-weight:bold;
box-shadow:inset 1px 2px 0 rgba(0,0,0,.35);
}
.plus {
background: #3c55b1;
border-radius: 8px 0 0 8px;
border-right: 1px solid #0c2571;
position:relative;
}
.circle {
background: #40be84;
border-radius: 0 8px 8px 0;
box-shadow:
inset 0px 2px 0 rgba(0,0,0,.35),
inset 1px 0 0 #70de94
;
}
Over the last year, I noticed that lots of sites have moved their share/popularity stats to a left sidebar that remains visible on the screen even if you scroll the window down. Here is the URL for a page that has this kind of functionality: http://news.cnet.com/8301-31921_3-57371426-281/anti-sopa-forces-have-isp-snooping-bill-in-their-crosshairs
What's the best way to create that kind of sidebar?
an easy way is to use CSS to absolutely position it and set the Z index so that it appears above everything else
try this on your HTML page
<style>
.side-sharebar {
display: block;
left: 482px;
position: fixed;
top: 20px;
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #EEEEEE;
border-color: #CCCCCC transparent #CCCCCC #CCCCCC;
border-radius: 3px 0 0 3px;
border-style: solid;
border-width: 1px;
box-shadow: -6px 0 6px -6px rgba(0, 0, 0, 0.25) inset, 0 1px 0 #FFFFFF inset;
left: auto !important;
margin-left: -98px;
margin-top: 2px;
position: absolute;
top: 0;
width: 76px;
}
.side-sharebar ul li {
border-bottom: 1px solid #CCCCCC;
box-shadow: 0 1px 0 #FFFFFF;
padding: 10px 2px 10px 0;
position: relative;
text-align: center;
}
.side-sharebar ul {
list-style: none outside none;
}
</style>
....
<div class="side-sharebar"><ul><li>one</li><li>two</li></ul></div>