I have a div having a box-shadow. I would like to remove the right-side of it but would not like to add any new code however can modify the existing box-shadow property. I used clip-path but I want it to work on IE as well.Please advice.
.test1 {
box-shadow: 0 0 0 1px rgba(138, 155, 168, 0.6), 0 0 0 rgba(138, 155, 168, 0), 0 1px 1px rgba(138, 155, 168, 0.3);
padding: 20px;
margin-top: 50px;
margin-left: 20px;
margin-right: 20px;
}
<div class="test1">MY AWESOME CONTENT</div>
Please advice.
Just move the shadow to the left till it is behind the element as so ...
.test1 {
box-shadow: -1px 0 0 1px rgba(138, 155, 168, 0.6), 0 0 0 rgba(138, 155, 168, 0), 0 1px 1px rgba(138, 155, 168, 0.3);
padding: 20px;
margin-top: 50px;
margin-left: 20px;
margin-right: 20px;
}
<div class="test1">MY AWESOME CONTENT</div>
.test1 {
box-shadow: -1px 0 0 1px rgba(138, 155, 168, 0.6), 0 0 0 rgba(138, 155, 168, 0), 0 1px 1px rgba(138, 155, 168, 0.3);
padding: 20px;
margin-top: 50px;
margin-left: 20px;
margin-right: 20px;
}
This appears to do the trick as far as I can tell. The latter two box shadows don't appear to do anything however. If you're just looking for a border, there are better ways to do it.
use an extra white shadow that will hide the one you don't need:
.test1 {
box-shadow:
1px 0 1px #fff,
0 0 0 1px rgba(138, 155, 168, 0.6),
0 1px 1px rgba(138, 155, 168, 0.3);
padding: 20px;
margin-top: 50px;
margin-left: 20px;
margin-right: 20px;
}
<div class="test1">MY AWESOME CONTENT</div>
Related
I want to decrease the font size of first div and increase the font size of the second div.
top1 {
transform: translateX(-7em);
font-size: 1.2em !important ;}
#txt{
margin: 10px;
border-radius: 9px;
backdrop-filter: blur(8 px) saturate(171%);
-webkit-backdrop-filter: blur(5px) saturate(171%);
border: 1px solid ;
border-color: rgba(255, 255, 255, 0.7) rgba(255, 255, 255, 0.7) rgba(34, 136, 156, 0.7) rgba(34, 136, 156, 0.7);
box-shadow: 0px 0px 12px 2px rgb(135, 167, 185);
-webkit-box-shadow: 0px 0px 12px 2px rgb(182, 145, 158);
-moz-box-shadow: 0px 0px 12px 2px rgba(0,0,0,1);
background:rgba(238, 221, 221, 0.85);
padding: .5em 1em ;
color: rebeccapurple;
font-size: .7em;
}
https://codepen.io/tiwari_ashuism/pen/WNOjbgO
Both div elements have the same id="txt" and this id has a font-size of 0.7em which you need to delete. Use the classes to apply different font-size for each div class.
#txt{
margin: 10px;
border-radius: 9px;
backdrop-filter: blur(8 px) saturate(171%);
-webkit-backdrop-filter: blur(5px) saturate(171%);
border: 1px solid ;
border-color: rgba(255, 255, 255, 0.7) rgba(255, 255, 255, 0.7) rgba(34, 136, 156, 0.7) rgba(34, 136, 156, 0.7);
box-shadow: 0px 0px 12px 2px rgb(135, 167, 185);
-webkit-box-shadow: 0px 0px 12px 2px rgb(182, 145, 158);
-moz-box-shadow: 0px 0px 12px 2px rgba(0,0,0,1);
background:rgba(238, 221, 221, 0.85);
padding: .5em 1em ;
color: rebeccapurple;
}
.top1 {
transform: translateX(-7em);
font-size: 1.5em !important ;
}
.top2 {
transform: translateX(7em);
font-size: 1.1em !important;
}
I am creating a button with a drop shadow effect (neumorphism) but when I apply my CSS to the button is just appears as a 2 toned solid button...Which part of the CSS am I using incorrectly? Are my drop shadow values wrong relative to the size of the button? Changing the width and height doesn't help.
.css-test {
background: #EAF0F8;
mix-blend-mode: normal;
border: 0.5px solid #FFFFFF;
box-shadow: 0px -30px 60px rgba(167, 179, 190, 0.35), 0px 30px 60px rgba(167, 179, 190, 0.35);
border-radius: 35px;
}
.buysellbutton {
width: 44px;
height: 44px;
background: #F0F0F3;
box-shadow: -10px -10px 30px 40% #FFFFFF, 10px 10px 30px rgba(174, 174, 192, 0.4);
border-radius: 16px;
}
<div class="css-test">
<h3> Cash Flow: <span>CSS TEST</span></h3>
<button class="buysellbutton">buy</button>
</div>
to remove black border from button just add broder-style:none to button. Added one more button with hover and active styling.
for creating Neumorphism effect you can check https://neumorphism.io/
.css-test {
background: #EAF0F8;
mix-blend-mode: normal;
border: 0.5px solid #FFFFFF;
box-shadow: 0px -30px 60px rgba(167, 179, 190, 0.35), 0px 30px 60px rgba(167, 179, 190, 0.35);
border-radius: 15px;
padding: 10px;
}
.buysellbutton {
width: 80px;
height: 44px;
border-style:none;
border-radius: 16px;
background: #F0F0F3;
box-shadow: 18px 18px 36px #c5c5c7,
-18px -18px 36px #ffffff;
outline:none;
}
.button {
width: 150px;
height: 50px;
background: #f3f0f1;
position: relative;
background: #f3f0f1;
margin-bottom: 25px;
border-radius: 32px;
text-align: center;
cursor: pointer;
transition: all 0.1s ease-in-out;
outline: none;
border-style: none;
box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.8),
6px 6px 10px rgba(0, 0, 0, 0.2);
color: #6f6cde;
}
span {
font-size: 25px;
font-weight: semibold;
}
.button:hover {
opacity: 0.7;
box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.8),
6px 6px 10px rgba(0, 0, 0, 0.2);
}
.button:active {
opacity: 1;
box-shadow: inset -4px -4px 8px rgba(255, 255, 255, 0.5),
inset 8px 8px 16px rgba(0, 0, 0, 0.1);
color: #79e3b6;
}
<div class="css-test">
<h3> Cash Flow: <span>CSS TEST</span></h3>
<button class="buysellbutton">buy</button>
<button class="button"><span>Buy</span></button>
</div>
First, use the below code at the top of all CSS
button{
all: unset;
}
and instead of
box-shadow: -10px -10px 30px 40% #FFFFFF, 10px 10px 30px rgba(174, 174, 192, 0.4);
use
box-shadow: -10px -10px 30px 40px #FFFFFF, 10px 10px 30px rgba(174, 174, 192, 0.4);
Hey, I am trying to achieve the text styling using box shadow but couldn't get even close. Can you guid me on which approach I should use. Here is what I tried so far:
.head {
text-shadow: 0 1px 0 #766d36, 0 2px 0 #766d36, 0px 0px 50px #928848, 0 0px 0px #928848, 0 -1px 0 #574f1b, 0 0px 10px rgba(232, 217, 119, 0.1), 0 0 12px rgba(232, 217, 119, 0.1), 0 -3px 15px rgba(232, 217, 119, 0.3), 0 0px 73px rgba(232, 217, 119, 1), 0 4px 29px rgba(232, 217, 119, 0.25), 0 3px 1px rgba(232, 217, 119, 1), 0 15px 20px rgba(232, 217, 119, 0.15);
color: #aea254;
}
<h1 class="head">Enter</h1>
Found this one, hope this helps:
https://codepen.io/adambundy/pen/HtmaK
h1 {
font: bold 200px arial, sans-serif;
background-color: #565656;
color: transparent;
text-shadow: 2px 2px 3px rgba(255,255,255,0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
You can try this: https://codepen.io/anon/pen/gjVrdx
.bg {
background-color: #e8d977;
width: 200px;
height: auto;
}
.title {
padding: 10px 22px;
font-size: 55px;
font-family: sans-serif;
text-shadow: 10px 6px 7px rgba(255,255,255,0.5) !important;
opacity: 0.2;
}
<div class='bg'>
<h1 class='title'>Enter</h1>
</div>
I have an image. I want to have the box shadow just like in the image.
I have tried below code.
.main_div{
height:260px;
width:300px;
-moz-box-shadow: 0px 3px 8px rgb(67, 176, 238);
-webkit-box-shadow: 0px 3px 8px rgb(67, 176, 238);
box-shadow: 0px 3px 8px rgb(67, 176, 238);
}
<div class="main_div"></div>
I don't want box-shadow to top.
Any help would be great.
Thank You.
You could add multiple box-shadow, as you don't want that at top so you could style each side as below,
Syntax for box-shadow,
box-shadow:offset-x | offset-y | blur-radius | spread-radius | color
.main_div {
height: 260px;
width: 300px;
margin: 50px;
box-shadow: 0px 12px 10px -5px rgba(67, 176, 238, 1), 10px 12px 10px -5px rgba(67, 176, 238, 1), -10px 12px 10px -5px rgba(67, 176, 238, 1);
}
<div class="main_div"></div>
try this; hope it works for you;
.main_div {
height: 260px;
width: 300px;
-moz-box-shadow: 0px 3px 8px rgb(67, 176, 238);
-webkit-box-shadow: 0px 3px 8px rgb(67, 176, 238);
box-shadow: 0px 6px 30px rgb(67, 176, 238);
}
you can try
.main_div{
height:260px;
width:300px;
-moz-box-shadow: 0px 3px 8px rgb(67, 176, 238);
-webkit-box-shadow: 0px 3px 8px rgb(67, 176, 238);
box-shadow: 0px 3px 6px rgba(32, 79, 182);
}
I hope this is what you are looking for. You can change opacity to your liking
.main-main{
height: 500px;
width: 500px;
background-color: #bcc0c6;
}
.main_div{
background-color: white;
height:260px;
width:300px;
-webkit-box-shadow: 0px 10px 15px 0px rgba(224, 13, 34,1);
-moz-box-shadow: 0px 10px 15px 0px rgba(224, 13, 34,1);
box-shadow: 0px 10px 15px 0px rgba(224, 13, 34,1);
}
<br />
<div class="main-main">
<div class="main_div"></div>
</div>
I have used your image (displayed at the top) and I also wrapped your div in order to set a background color similar to yours. I think the result (displayed at the bottom) is quite close to the provided image:
.main_div_wrap {
background-color:#eff2f4;
width: 350px;
padding: 25px;
}
.main_div {
background-color:#ffffff;
height: 260px;
width: 350px;
-moz-box-shadow: 0px 9px 12px 0px rgb(197, 224, 246);
-webkit-box-shadow: 0px 9px 12px 0px rgb(197, 224, 246);
box-shadow: 0px 9px 12px 0px rgb(197, 224, 246);
}
What about this?
<img src="https://i.stack.imgur.com/hbltS.png" />
<div class="main_div_wrap">
<div class="main_div"></div>
</div>
I would like to ask how should I apply different colour glow to an image border when a user hover over? like say that in this JSFiddle file, I have a green thumb and a red thumb. I want each image border to glow according to the colour of the image, or any colour that I specify. How should I achieve that?
PS** For example purposes the image are converted to base64 in the JSFiddle.
This is how I do in my CSS
img{
width: 16px;
cursor: pointer;
padding: 10px;
}
img:hover{
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 5px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 5px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
Thank You
If I understand your question then here is an example DEMO
img{
width: 48px;
cursor: pointer;
/*padding: 10px;*/
/* border:1px solid #fff;*/
margin-right: 20px;
}
img:hover{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
-moz-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
}
img:last-of-type:hover{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 30px 0px rgba(232, 0, 0, 0.67);
-moz-box-shadow: 0px 0px 30px 0px rgba(232, 0, 0, 0.67);
box-shadow: 0px 0px 30px 0px rgba(232, 0, 0, 0.67);
}
As written in the comment, there is no way for HTML/CSS to determine the main color of the image displayed. If you know the predominant color of each image, give them class names accordingly and write the related CSS.
See demo for a simple version.
img.green:hover{
border-color: #66afe9;
box-shadow: 0 0 8px rgba(0,255,0, 0.6);
}
img.red:hover{
border-color: #66afe9;
box-shadow: 0 0 8px rgba(255,0,0, 0.6);
}
Change:
box-shadow: inset 5px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
to:
box-shadow: inset 0 0 5px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
DEMO
box-shadow Syntax:
Formal syntax: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
Box shadow also worked for,
img:hover{ box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }
If you want to more style in css
http://ianlunn.github.io/Hover/
or use your custom image like this
img:hover{background:url('http://www.addglitter.com/link-sparkle.gif');