I'm trying to add a shadow to angular material tooltip arrow but couldn't able to do it. If you can see in the stackblitz I have customized the tooltip with an arrow but not able to add a shadow to the arrow.
My tooltip CSS:
::ng-deep .tooltip-class {
background-color: #ffffff !important;
opacity: 1;
color: rgba(0, 0, 0, 0.87) !important;
margin: 0 8px;
padding: 8px 12px;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px;
border-radius: 6px;
overflow: visible !important;
box-shadow: 0px 1px 2px #00000029, 0px 2px 4px #0000001f,
0px 1px 8px #0000001a;
}
::ng-deep .tooltip-class:before {
border-right-color: white !important;
}
::ng-deep .tooltip-class:after {
content: '';
position: absolute;
top: 40%;
right: 100%;
margin-top: -5px;
border-width: 10px;
border-style: solid;
border-color: transparent #fff transparent transparent;
}
The tooltip arrow is generated using ::after pseudo-element. You can add shadow to it using filter or you can also create a new rotated pseudo-element ::before and apply box-shadow to it since applying box-shadow to ::after would not be perfect as it would reveal the transparent parts of the box.
.tooltip-class:after {
filter: drop-shadow(-0.25px 1px 0.75px gray);
}
Stackblitz demo
Related
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;
}
I'm trying to change the background color for the thumb with styled-components for react, but I do not know how, cant seem to get it. My styled-components look like this:
const InputVolume = styled.input`
::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background-color: #FFFFFF;
border-radius: 25px;
border: 0px solid #000101;
};
&:focus::-webkit-slider-runnable-track {
background: #D78E91;
};
::-webkit-slider-thumb {
background-color: #FFFFFF;
}
`;
Word of warning: the MDN docs recommend against using this in production.
It looks like you're just missing setting some appearance: none properties and then adding a few more to specify things like height and width. Here is a working example of the snippet below.
Also, it looks like you have some typos in your styles. You've got a border set to 0px, same with your box shadow, and a border radius that only needs to be 2px, not 25px (based on the height and what I'm assuming you're trying to do with it).
const InputVolume = styled.input`
appearance: none;
cursor: pointer;
::-webkit-slider-runnable-track {
height: 4px;
width: 100%;
cursor: pointer;
pointer-events: none;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background-color: #fff;
border-radius: 2px;
border: 1px solid #000101;
}
&:focus {
outline: none;
}
&:focus::-webkit-slider-runnable-track {
background: #d78e91;
}
&::-webkit-slider-thumb {
height: 16px;
width: 16px;
appearance: none;
background: #fff;
border-radius: 8px;
margin-top: -6px;
border: 1px solid #777;
}
`;
I have about 100 buttons in my website, all using JavaScript onclick method. I want to replace them all with regular <a href> links for SEO purposes.
I made new class called button_seo with the same CSS as the old buttons. I placed it in the global CSS file, but it will not work and my buttons have no styling.
It does works when I place the CSS in the same file where the button is, but I would like to place it in the global file so I can control many buttons at once.
What might cause this? I don't have any style for the button_seo class anywhere in the files, just in global CSS file.
Here is my code:
.button_seo {
height: 40px ;
background: linear-gradient(to bottom, #4eb5e5 0%, #389ed5 100%); /* W3C */
border: none;
border-radius: 5px;
position: relative;
border-bottom: 4px solid #2b8bc6;
color: #fbfbfb;
font-weight: 600;
font-family: "Open Sans", sans-serif;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
font-size: 15px;
text-align: center;
text-indent: 5px;
box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.2);
cursor: pointer;
width: 190px;
left: 100px;
}
<a class="button_seo" style="left:30px;" href='../censord' title='censord'>Click >></a>
As comment to your answer, is this what you want?
.button_seo {
display: inline-block;
line-height: 40px; /* same as height */
height: 40px ;
background: linear-gradient(to bottom, #4eb5e5 0%, #389ed5 100%); /* W3C */
border: none;
border-radius: 5px;
position: relative;
border-bottom: 4px solid #2b8bc6;
color: #fbfbfb;
font-weight: 600;
font-family: "Open Sans", sans-serif;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
font-size: 15px;
text-align: center;
text-indent: 5px;
box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.2);
cursor: pointer;
width: 190px;
left: 100px;
}
<a class="button_seo" style="left:30px;" href='../censord' title='censord'>Click >></a>
EDIT - I found this SO
i fixed it, can't use height and width parameters for link, that not button after all.
I have created an animated rotated button and I would like it to have a shadow that is paralel to the x-axis. Now the shadow is not, do You have an idea how to make it? Thank You. This is the css of the existing button and the link to the codepan with "the live example".
.btnMail{
border-radius: 4px;
background-color: rgba(120, 0, 255, 0.8);
border: none;
color: white;
padding: 12px 16px;
font-size: 30px;
cursor: pointer;
transform: rotate(-10deg);
transform-origin: bottom left;
box-shadow: 0 8px 6px -6px black;
}
https://codepen.io/hubkubas/pen/dmJjWB
Based on the understanding of your question, you can achieve fancy 3D looking shadows or custom depth shadows by applying shadow-box property to pseudo elements which you can then further manipulate, to get the desired shadows.
Here is a quick-fix that probably shows the type of shadow you want:
/* btn */
.btnMail{
width: 65px;
height: 60px;
display: inline-block;
border-radius: 4px;
background-color: rgba(120, 0, 255, 0.8);
border: none;
color: white;
padding: 12px 16px;
font-size: 30px;
cursor: pointer;
transform: rotate(-10deg);
transform-origin: bottom left;
}
.btnMail:hover {
transition: 0.30s;
transform: rotate(0deg);
box-shadow: 0px 8px 6px -6px black;
background-color: rgba(255, 0, 54, 0.8);
}
.btnMail:active {
box-shadow: 0 6px 6px -6px black;
transition: 0.30s;
}
#shadow{
z-index: -111;
width: 65px;
height: 50px;
position: absolute;
top: 17px;
left: 5px;
box-shadow: 0px 10px 16px -9px black;
}
<button class="btnMail shadow"><i class="fa fa-envelope"></i></button>
<div id="shadow">
</div>
(Note: I have used a seperate div tag for the shadow, since the animation you apply on the button will also be applied on the shadow).
You can learn more about how to create custom shadows on this link.
how can i create this shape via css ?
Example
Here is an example of a paper folding effect achieved via CSS.
The key here is the box shadow which is positioned over the div using :before
HTML
<div class="note">
</div>
CSS
.note {
position: relative;
width: 30%;
padding: 1em 1.5em;
margin: 2em auto;
color: #fff;
background: #97C02F;
overflow: hidden;
}
.note:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #fff #fff #658E15 #658E15;
background: #658E15;
box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
Codepen example https://codepen.io/Washable/pen/BJqMJd