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>
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 want my buttons like this: https://codepen.io/jouanmarcel/pen/LYYEmmO
but when I put that in my code, something like that comes out
<!DOCTYPE html>
<html>
<head>
<body>
<link rel="stylesheet" href="css/style.css">
<div class = box>
<button class="button">Fire</button>
<button class="button">Fire</button>
<button class="button">Ice</button>
<button class="button">Ice</button>
</body>
</head>
</html>
css
body {
padding: 0;
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.button {
border: 1px solid green;
backdrop-filter: blur(10px);
transform: skewX(-10deg);
height: 50px;
width: 200px;
border-radius: 20px 5px 20px 0px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
transition: all .3s ease;
font: 15px sans-serif;
font-weight: 300;
text-shadow: 0 0 20px #fff;
text-transform: uppercase;
animation: breath2 2s .5s infinite alternate;
transition: all .2s ease;
cursor: pointer;
}
button:before {
content: "";
display: block;
width: calc(100% - 22px);
height: calc(50px - 8px);
animation: breath 2s infinite alternate;
left: 10px;
top: 3px;
position: absolute;
background-color: transparent;
border: 1px solid #fff;
border-radius: 15px 3px 15px 3px;
}
button.fire {
border-color: rgba(255, 236, 168, 1);
background-image: linear-gradient(to bottom, transparentize(rgba(255, 138, 48, 1), .4), transparentize(rgba(240, 96, 29, 1), .4));
box-shadow: 0 0 70px transparentize(rgba(255, 138, 48, 1), .4), 0 5px 20px transparentize(rgba(255, 138, 48, 1), .4), inset 0 1px rgba(255, 236, 168, 1), inset 0 -1px rgba(255, 236, 168, 1);
color: rgba(255, 236, 168, 1),
}
button:before {
box-shadow: inset 0 0 30px 0 rgba(255, 236, 168, 1);
}
button.ice {
border-color: rgba(168, 236, 255, 1);
background-image: linear-gradient(to bottom, transparentize(rgba(48, 138, 255, 1), .5), transparentize(rrgba(29, 96, 240, 1), .5));
box-shadow: 0 0 70px transparentize(rgba(48, 138, 255, 1), .5), 0 5px 20px transparentize(rgba(48, 138, 255, 1), .5), inset 0 1px rgba(255, 236, 168, 1), inset 0 -1px rgba(255, 236, 168, 1);
color: rgba(168, 236, 255, 1);
}
button:before {
box-shadow: inset 0 0 30px 0 rgba(168, 236, 255, 1)
}
button:hover
button.fire {
box-shadow: 0 0 70px transparentize(rgba(255, 138, 48, 1), .2), 0 5px 20px transparentize(rgba(255, 138, 48, 1), .2), inset 0 1px rgba(255, 236, 168, 1), inset 0 -1px rgba(255, 236, 168, 1)
}
button:before {
box-shadow: inset 0 0 50px 0 rgba(255, 236, 168, 1)
}
button.ice {
box-shadow: 0 0 70px transparentize(rgba(48, 138, 255, 1), .2), 0 5px 20px transparentize(rgba(48, 138, 255, 1), .2), inset 0 1px rgba(168, 236, 255, 1), inset 0 -1px rgba(168, 236, 255, 1)
}
button:before {
box-shadow: inset 0 0 50px 0 rgba(168, 236, 255, 1)
}
button + button {
margin-top: 15px;
animation-delay: .3s;
}
#keyframes breath {
0% {
transform: scaleX(1);
}
100% {
transform: scaleX(0.95);
}
}
#keyframes breath2 {
0% {
transform: skewX(-10deg) scaleX(1);
}
100% {
transform: skewX(-10deg) scaleX(0.95);
}
}
.ref {
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, .6);
border-radius: 3px;
padding: 5px 8px;
position: absolute;
font-size: 16px;
bottom: 10px;
right: 10px;
color: #fff;
font-weight: 300;
font-family: sans-serif;
text-decoration: none;
font-size: 12px;
}
idk how to fix it want it like so: https://codepen.io/jouanmarcel/pen/LYYEmmO
sorry for my english
Your conversion of sass to css is wrong on many places. transparentize is not a css function, and you need to change the rgba values accordingly. The original example is designed for DIV elements, the styling might not work for the button tag as expected.
If you want to use plane css, its best to convert sass to css using a tool, not by hand. You could just use the sass command line tool or even easier use a online converter like the one from https://codebeautify.org/.
This will create the following code, that should work as expected:
body {
padding: 0;
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.button {
border: 1px solid green;
backdrop-filter: blur(10px);
transform: skewX(-10deg);
height: 50px;
width: 200px;
border-radius: 20px 5px 20px 0px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
transition: all .3s ease;
font: 15px sans-serif;
font-weight: 300;
text-shadow: 0 0 20px #fff;
text-transform: uppercase;
animation: breath2 2s .5s infinite alternate;
transition: all .2s ease;
cursor: pointer; }
.button:before {
content: "";
display: block;
width: calc(100% - 22px);
height: calc(50px - 8px);
animation: breath 2s infinite alternate;
left: 10px;
top: 3px;
position: absolute;
background-color: transparent;
border: 1px solid #fff;
border-radius: 15px 3px 15px 3px; }
.button.fire {
border-color: #ffeca8;
background-image: linear-gradient(to bottom, rgba(255, 138, 48, 0.6), rgba(240, 96, 29, 0.6));
box-shadow: 0 0 70px rgba(255, 138, 48, 0.6), 0 5px 20px rgba(255, 138, 48, 0.6), inset 0 1px #ffeca8, inset 0 -1px #ffeca8;
color: #ffeca8; }
.button.fire:before {
box-shadow: inset 0 0 30px 0 #ffeca8; }
.button.ice {
border-color: #a8ecff;
background-image: linear-gradient(to bottom, rgba(48, 138, 255, 0.5), rgba(29, 96, 240, 0.5));
box-shadow: 0 0 70px rgba(48, 138, 255, 0.5), 0 5px 20px rgba(48, 138, 255, 0.5), inset 0 1px #ffeca8, inset 0 -1px #ffeca8;
color: #a8ecff; }
.button.ice:before {
box-shadow: inset 0 0 30px 0 #a8ecff; }
.button:hover.fire {
box-shadow: 0 0 70px rgba(255, 138, 48, 0.8), 0 5px 20px rgba(255, 138, 48, 0.8), inset 0 1px #ffeca8, inset 0 -1px #ffeca8; }
.button:hover.fire:before {
box-shadow: inset 0 0 50px 0 #ffeca8; }
.button:hover.ice {
box-shadow: 0 0 70px rgba(48, 138, 255, 0.8), 0 5px 20px rgba(48, 138, 255, 0.8), inset 0 1px #a8ecff, inset 0 -1px #a8ecff; }
.button:hover.ice:before {
box-shadow: inset 0 0 50px 0 #a8ecff; }
.button + .button {
margin-top: 15px;
animation-delay: .3s; }
#keyframes breath {
0% {
transform: scaleX(1); }
100% {
transform: scaleX(0.95); } }
#keyframes breath2 {
0% {
transform: skewX(-10deg) scaleX(1); }
100% {
transform: skewX(-10deg) scaleX(0.95); } }
.ref {
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 3px;
padding: 5px 8px;
position: absolute;
font-size: 16px;
bottom: 10px;
right: 10px;
color: #fff;
font-weight: 300;
font-family: sans-serif;
text-decoration: none; }
.ref::first-letter {
font-size: 12px; }
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);
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>
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>