Is this a box shadow or an outline? I'm confused because outlines can't have radius property and box shadows have blur effect.
That can be a combination of border and box-shadow and outline: none.
I have added the border and box-shadow to default state, if needed we can move that to :focus
body {
padding: 10px;
zoom: 250%;
}
.custom {
width: 100%;
height: 30px;
border-radius: 5px;
border: 2px solid #0000ff;
box-shadow: 0 0 0 2pt rgb(0 0 255 / 30%);
}
.custom:focus {
outline: none;
}
<input type="text" class="custom">
Use an outline with a rgba color on an input with a border radius:
input {
border: 1px solid #ae11fc;
border-radius: 0.5rem;
font-size: 1rem;
height: 2rem;
}
input:focus {
outline: #ae11fc44 solid 0.2rem;
}
Checkout out this fiddle
You can achieve the required styling by adding the following properties to your input style. You can play around it here: https://codepen.io/taleyamirza/pen/ExmzYJr
input:focus {
outline-color: #6c8afc;
border-color: #9ecaed;
box-shadow:0 0 10px #6c8afc;
-moz-box-shadow: 0px 0px 4px #6c8afc;
-webkit-box-shadow: 0px 0px 4px #6c8afc;
}
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>
Look at the edges. I been trying to fix this for two days now, throw at it everything everywhere. The problem is when the scrollbar appears this happens. Note it's the same when scrollbar is unstyled. What do you think?
Styled component code:
padding: 6px;
resize: none;
font-family: inherit;
font-size: inherit;
background-color: #e4e4e4;
color: black;
outline: none;
border: none;
&:focus {
outline: none;
border: none;
box-shadow: 0 0 0 2px #2d8cff;
background-color: ${Colors.primary};
}
& {
::-webkit-scrollbar {
width: 16px;
cursor: initial;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
box-shadow: inset 0 0 10px 10px #c1c1c1;
border: solid 4px transparent;
cursor: initial;
}
::-webkit-scrollbar-thumb:hover {
box-shadow: inset 0 0 10px 10px #7d7d7d;
}
}
I fixed this using box-sizing: border-box and using border instead of boxshadow. In border then has to be specified in not focus state too, to the same color as background.
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 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.
Is there any way to add a glow around the div? Look at twitter login and how there is a blue glow around the input box, can that be done for the div?
CSS3 can do that
-webkit-box-shadow:0 0 20px blue;
-moz-box-shadow: 0 0 20px blue;
box-shadow:0 0 20px blue;
Working JSFiddle.
Here is the complete code to style a div exactly like the twitter login input. The styles for the blue border are the box-shadow and border styles for the selector div[contenteditable]:focus. Live demo here (click).
Markup:
<div contenteditable="true">Username or email</div>
CSS:
div[contenteditable]:focus {
border: 1px solid rgb(86, 180, 239);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);
}
div[contenteditable] {
width: 97%;
max-width: 280px;
margin-right: 10px;
font-family: Arial,sans-serif;
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.075);
box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.075);
display: inline-block;
padding: 4px;
margin: 0;
outline: 0;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 13px;
line-height: 20px;
}
As shown before, use css: focus, border and box-shadow.
If using IE, make sure <doctype> is specified.
.text:focus {
border: 1px solid #07c;
box-shadow: 0 0 10px #07c;
}
jsFiddle example.
Also you will face some problem with Internet Explorer while dealing this issue. IE-9 How ever supports box-shadow but the previous versions don't, Check it out here for making it work in all versions of IE