How I can add border to shadow?
I wan't make something similar to this
Here's my code:
.btn {
margin: 10px;
}
.btn:active span {
transform: translate(0, 6px);
box-shadow: 0 -5px 0 blue;
transition: 0.3s;
}
.btn {
display: inline-block;
border-radius: 6px;
box-shadow: 0 6px 0 blue;
}
.btn span {
display: inline-block;
color:white;
padding: 10px 20px;
background: #3194c6;
border-radius: 4px;
transition: .2s ease-in-out;
}
Here's my jsfiddle
Use multiple shadows:
.btn {
margin:10px;
display: inline-block;
border-radius: 6px;
box-shadow: 0px 0px 0px 2px #000,
0 6px 0 red,
0px 6px 0px 2px #000,
0px 0px 0px 2px #000;
}
.btn span {
display: inline-block;
color: white;
padding: 10px 20px;
background: #3194c6;
border-radius: 4px;
transition: .2s ease-in-out;
}
<span>Press this!</span>
Related
I want to radius the border of the card but the code does not work properly..
Here is the code I used.
.card{
box-shadow: 0 4px 8px 0 #333333;
transition: 0.3s;
border-radius: 30px;
width: 100%;
}
Add border border:2px solid black;
.card{
box-shadow: 0 4px 8px 0 #333333;
transition: 0.3s;
border:2px solid black;
border-radius: 30px;
width: 100%;
}
if you want to make more space between text and border you can add padding to this code:
card{
box-shadow: 0 4px 8px 0 #333333;
transition: 0.3s;
border-radius: 30px;
width: 100%;
border: 1px solid #000;
}
I have a range slider styled in Chrome.. I'm having major issues trying to get it to look the same in IE11 and firefox.. I've tried following some guides on how to make it compatible using the ms- and moz- for the webkit tags but it's still not formatting the same. I understand it may be a little different but its just nowhere near the same result. here's the code so far.. basically the range slider needs to be formatted same as the button above it.... any help much appreciated.
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing:content-box;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing:content-box;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
.switch-label_1 {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
.switch-label:before, .switch-label:after, .switch-label_1:before, .switch-label_1:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing:content-box;
}
.switch-label:before, .switch-label_1:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after, .switch-label_1:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #86b692;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-input:checked ~ .switch-label_1 {
background: #a9d2d5;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label_1:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label_1:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition
========================== */
.switch-label, .switch-label_1, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
.range {
display: block;
vertical-align: top;
width: 300px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing:content-box;
}
.range-frame{
position: relative;
display: block;
height: inherit;
font-size: 10px;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
input[type=range] {
-webkit-appearance: none;
margin: 10px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 35px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: lightgray;
border-radius: 25px;
border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 35px;
width: 39px;
border-radius: 35px;
background: silver;
cursor: pointer;
-webkit-appearance: none;
margin-top: -1px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: lightgray;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 35px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: lightgray;
border-radius: 25px;
border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 35px;
width: 39px;
border-radius: 35px;
background: silver;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 35px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 39px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: lightgray;
border: 0px solid #000101;
border-radius: 35px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: transparent;
border: 0px solid #000101;
border-radius: 35px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 35px;
width: 39px;
border-radius: 35px;
background: silver;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: lightgray;
}
input[type=range]:focus::-ms-fill-upper {
background:lightgray;
}
.output-value{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 10px;
color: #aaaaaa;
pointer-events: none;
}
<html>
<head>
<title>Roland</title>
<link rel="stylesheet" href="range.css" />
<link rel="stylesheet" href="switch.css">
</head>
<body>
<form>
<label class="switch">
<input class="switch-input" type="checkbox" Filter="PL" Column="1">
<span class="switch-label" data-on="PL" data-off="PL"></span>
<span class="switch-handle"></span>
</label>
<label class="range">
<span class="range-frame">
<span for fader class="output-value" id="rangevalue">0 Nm</span>
<input class="range-input" id="fader" type="range" min="0" max="150" step="1" value="0" onchange="outputUpdate(value)">
</span>
</label>
</form>
<script>
function outputUpdate(vol) {
document.getElementById('rangevalue').innerHTML=vol + ' Nm';
}
</script>
</body>
</html>
here's what it should look like on all browsers -
thanks
C
The input type range is quite customizable. Unfortunately, each browser has its own way and thus we have to write longer codes than expected. Than also you will not get the exact similar results. The result will look little bit different from other browsers.
You can refer an example below which I try to customize to make it looks like your range slider. I tested it with various browsers and it looks almost similar in most of the browsers.
<!DOCTYPE html>
<html>
<head>
<style>
input[type=range] {
-webkit-appearance: none;
margin: 10px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 35px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: lightgray;
border-radius: 25px;
border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 35px;
width: 39px;
border-radius: 35px;
background: silver;
cursor: pointer;
-webkit-appearance: none;
margin-top: -1px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: lightgray;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 35px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: lightgray;
border-radius: 25px;
border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 35px;
width: 39px;
border-radius: 35px;
background: silver;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 35px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 39px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: lightgray;
border: 0px solid #000101;
border-radius: 35px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: lightgray;
border: 0px solid #000101;
border-radius: 35px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 35px;
width: 39px;
border-radius: 35px;
background: silver;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: lightgray;
}
input[type=range]:focus::-ms-fill-upper {
background:lightgray;
}
body {
padding: 30px;
}
</style>
</head>
<body>
<input type="range">
</body>
</html>
Output in various browsers:
Reference:
(1) Codepen example
(2) Styling Cross-Browser Compatible Range Inputs with CSS
Further, you can try to modify it based on your own requirement or use it as a reference for making the changes in your own code.
My question makes more sense with a picture.
.instagram {
color: #E44060;
font-size: 1.5em;
padding: 12px 14px 12px 14px;
border: 2px solid #E44060;
border-radius: 7px;
&:visited {
color: inherit;
}
&:hover {
color: $tertiary-color;
background-color: #E44060;
transition: all .25s ease 0s;
}
&:active {
background-color: #B2334C;
border: 2px solid rgba(0,0,0,0.2);
box-shadow: inset 4px 4px rgba(0,0,0,0.2), inset -4px -4px rgba(0,0,0,0.2);
}
}
How do I make it so the corners of the box-shadow don't overlap making the opacity 0.4? Should I try to create a button using a different method?
Use boxshadow and transform to create the push button effect
.button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
<button class="button">Instagram</button>
Rather than having 2 box-shadows, you could use the "spread" feature (the 4th number after "inset").
box-shadow: inset 0 0 0 4px rgba(0,0,0,0.2);
https://www.w3schools.com/CSSref/css3_pr_box-shadow.asp
I'm trying to achieve a 'press' button effect with a <button> and a <span> but for some reason the shadow is getting cut off on Safari ONLY.
I'm using two tags here because that's a limitation of the website i'm editing, I can't change the markup.
It's simple as this, HTML:
<button><span>A simple fucking button</span></button>
CSS:
button {
-webkit-appearance: none;
border: none;
background: none;
padding: 0;
margin: 0;
}
button span {
text-transform: uppercase;
font-weight: bold;
border: 3px solid black;
padding: 10px 35px;
border-radius: 2em;
display: block;
background-color: #fff;
box-shadow: 0px 4px 0px -2px #bfbfbf,
0px 5px 0px 0px black;
}
button:active,
button:hover {
color: inherit;
}
button:hover {
span {
transform: translate(0px, 5px);
box-shadow: 0px 0px 0px 0px;
}
}
codepen.io example:
https://codepen.io/marlonmarcello/pen/dVBKpd
If you are open to dropping the span, then the button and styles can be adjusted to achieve the desired effect:
https://codepen.io/enquiren/pen/qMzLrd
button {
-webkit-appearance: none;
border: none;
background: none;
padding: 0;
margin: 0;
cursor: pointer;
&.pushable {
text-transform: uppercase;
font-weight: bold;
border: 3px solid black;
padding: 10px 35px;
border-radius: 2em;
display: block;
background-color: #fff;
box-shadow: 0px 4px 0px -2px #bfbfbf,
0px 5px 0px 0px black;
&:hover {
transform: translate(0px, 5px);
box-shadow: 0px 0px 0px 0px;
}
}
}
<button class="pushable">A simple button</button>
Tooltip CSS
.has-tooltip .tooltip {
position: absolute;
left: 50%;
top: -40px;
opacity: 0;
-webkit-transition: ease-out 300ms opacity;
-moz-transition: ease-out 300ms opacity 0ms;
-o-transition: ease-out 300ms opacity 0ms;
transition: ease-out 300ms opacity 0ms;
-webkit-transition-delay: 0ms;
pointer-events: none;
z-index: 9999;
}
.has-tooltip .tooltip span {
position: relative;
left: -50%;
display: block;
padding: 2px 8px;
font-size: 14px;
color: #fff;
white-space: nowrap;
background: rgba(45, 45, 45, 1);
border: 1px solid rgba(204,204,204,0.60);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
-moz-box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
}
View Live Example
What I Am Trying To Achieve
By only having one element, have a tooltip styled as seen in the link above with a tooltip arrow which also has the same look applied to appear to be one element. I've seen multiple which place another element within for the arrow however I'm hoping to achieve this without needing to do so.
Questions
How can I have a tooltip arrow which gives the impression it is part of the tooltip with the same styles applied.
Note: If you provide code, could you please fully explain what you have done so I can implement a top tip as well as a bottom tip.
You could use a pseudo element, i.e. ::before, and by rotate it 45 deg and positioning it about half its height from the bottom so it looks like an arrow.
a.has-tooltip {
position: relative;
transition: opacity 0.5s;
}
a.has-tooltip span {
position: absolute;
left: 20%; top: 50%;
transform: translate(0,-150%);
background: #333;
color: white;
border-radius: 10px;
box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
padding: 10px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.2s;
border: 4px solid #999;
}
a.has-tooltip span::before {
content: '';
position: absolute;
left: 20%; top: calc(100% - 10px);
height: 20px; width: 20px;
transform: rotate(45deg);
background: inherit;
box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
z-index: -1;
border: inherit;
border-width: 0 4px 4px 0;
}
a.has-tooltip:hover span {
opacity: 1;
}
<br><br><br>
<a href="#" class="has-tooltip" id="link"><span>Hi! I'm a tooltip!</span>
Hi! I'm a link!
</a>
Updated based on a comment
When one make a shadow like this, and as it is actually a square, their 2 shadows intersect
a.has-tooltip {
position: relative;
transition: opacity 0.5s;
}
a.has-tooltip span {
position: absolute;
left: 20%; top: -10%;
transform: translate(0,-150%);
background: #333;
color: white;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
-moz-box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
padding: 10px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.2s;
border: 1px solid #FFFFFF;
}
a.has-tooltip span::before {
content: '';
position: absolute;
left: 10%; top: calc(100% - 10px);
height: 20px; width: 20px;
transform: rotate(45deg);
background: inherit;
-webkit-box-shadow: 4px 4px 0px 2px rgba(0,0,0,0.50);
-moz-box-shadow: 4px 4px 0px 2px rgba(0,0,0,0.50);
box-shadow: 4px 4px 0px 2px rgba(0,0,0,0.50);
z-index: -1;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
a.has-tooltip:hover span { opacity: 1; }
<br><br><br><br>
<a href="#" class="has-tooltip" id="link"><span>Hi! I'm a tooltip!</span>
Hi! I'm a link!
</a>
To fix that is almost impossible, unless one use a SVG, though here is 2 possible solutions.
Give the shadow a non transparent color
a.has-tooltip {
position: relative;
transition: opacity 0.5s;
}
a.has-tooltip span {
position: absolute;
left: 20%; top: -10%;
transform: translate(0,-150%);
background: #333;
color: white;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 0px 6px rgba(128,128,128,1);
-moz-box-shadow: 0px 0px 0px 6px rgba(128,128,128,1);
box-shadow: 0px 0px 0px 6px rgba(128,128,128,1);
padding: 10px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.2s;
border: 1px solid #FFFFFF;
}
a.has-tooltip span::before {
content: '';
position: absolute;
left: 10%; top: calc(100% - 10px);
height: 20px; width: 20px;
transform: rotate(45deg);
background: inherit;
-webkit-box-shadow: 4px 4px 0px 2px rgba(128,128,128,1);
-moz-box-shadow: 4px 4px 0px 2px rgba(128,128,128,1);
box-shadow: 4px 4px 0px 2px rgba(128,128,128,1);
z-index: -1;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
a.has-tooltip:hover span { opacity: 1; }
<br><br><br><br>
<a href="#" class="has-tooltip" id="link"><span>Hi! I'm a tooltip!</span>
Hi! I'm a link!
</a>
Use the other pseudo, ::after, as the shadow, which will be transparent. With this one need to play a little with the size of the main shadow and the position of the ::after pseudo.
a.has-tooltip {
position: relative;
transition: opacity 0.5s;
}
a.has-tooltip span {
position: absolute;
left: 20%; top: -10%;
transform: translate(0,-150%);
background: #333;
color: white;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.50);
-moz-box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.50);
box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.50);
padding: 10px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.2s;
border: 1px solid #FFFFFF;
}
a.has-tooltip span::before {
content: '';
position: absolute;
left: 10%; top: calc(100% - 10px);
height: 20px; width: 20px;
transform: rotate(45deg);
background: inherit;
z-index: -1;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
a.has-tooltip span::after {
content: '';
position: absolute;
left: calc(10% - 5px); top: calc(100% + 6px);
width: 0;
height: 0;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-top: 16px solid rgba(0,0,0,0.50);
z-index: -2;
}
a.has-tooltip:hover span { opacity: 1; }
<br><br><br><br>
<a href="#" class="has-tooltip" id="link"><span>Hi! I'm a tooltip!</span>
Hi! I'm a link!
</a>