I'm trying to create a box shadow just like shown in the image:
As you can see the shadow is rounded. I tried it with CSS like this:
.rottweiler {
width: 600px;
height: 300px;
background-image: url('https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12224942/Rottweiler-On-White-10.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: top;
border: 1px solid silver;
box-shadow: inset 0 0 30px 30px rgba(0,0,0,0.9);
}
<div class="rottweiler"></div>
I want the shadow to be more like a circle, how do I do that?
You can use radial-gradient.
.rottweiler {
width: 600px;
height: 300px;
background-image: radial-gradient(circle, transparent, transparent, rgba(0, 0, 0, 0.8)), url('https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12224942/Rottweiler-On-White-10.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: top;
border: 1px solid silver;
}
<div class="rottweiler"></div>
.rottweiler {
width: 600px;
height: 300px;
background-image: radial-gradient(circle, transparent, transparent, rgba(0, 0, 0, 0.9)), url('https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12224942/Rottweiler-On-White-10.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: top;
border: 1px solid silver;
}
<div class="rottweiler"></div>
You can achieve this pattern using CSS Radial Gradients
SYNTAX
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
For more info: https://www.w3schools.com/css/css3_gradients_radial.asp
<!DOCTYPE html>
<html>
<head>
<style>
#grad {
min-height: 100vh;
background-image: radial-gradient(ellipse at center center, #4d4d4d 5%, #252525 , black 100%);
}
</style>
</head>
<body>
<div id="grad"></div>
</body>
</html>
Related
I want to create a zig-zag border in css which is responsive, i.e. the zig-zag border must adjust itself to fit perfectly according to width of the container.
I was able to create this:
But on changing the width it's output is :
I want to perfectly fit the zig-zag pattern like above image on changing the width of the container.
It would be helpful if I could also add some radius at peak points like this :
Here is the code so far
.container {
width: 664px;
}
.sub-container {
border: 2px solid black;
border-bottom: 0;
padding: 40px;
height: 200px;
}
.upper-zigzag {
background: linear-gradient(135deg, #ffffff 25%, transparent 25%) 0px 0,
linear-gradient(225deg, #ffffff 25%, transparent 25%) 0px 0;
background-size: 60px 60px;
background-color: black;
height: 32px;
background-repeat: repeat-x;
border-left: 2px solid black;
border-right: 2px solid black;
}
.lower-zigzag {
position: relative;
background:
linear-gradient(315deg, #ffffff 25%, transparent 25%) -28px -30px,
linear-gradient(45deg, #ffffff 25%, transparent 25%) -28px -30px;
background-size: 60px 60px;
background-color: transparent;
height: 30px;
background-repeat: repeat-x;
margin-top: -30px;
z-index: 1;
}
<div class="container">
<div class="sub-container"></div>
<div class="upper-zigzag"></div>
<div class="lower-zigzag"></div>
</div>
Thanks!
#artist-image-container{
background-image:
radial-gradient(rgba(245, 246, 252, 0.52), #181c44),url('./yo\ yo\ honey\ singh.jpg');
width: 34%;
min-width: 34%;
min-height: 300px;
background-size: cover;
color: white;
background-repeat: no-repeat;
padding: 20px;
}
I have written this code but I want to add radial gradient as shown in image at the bottom.
Maybe you mean like that
#img{
background-image:
linear-gradient(to bottom, rgba(245, 246, 252, 0.1), rgba(0, 0, 153, 0.8)),
url('https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cmFuZG9tfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80');
width: 200px;
height: 200px;
background-size: cover;
color: white;
padding: 20px;
}
<div id="img"></div>
I'm attempting to create a button that contains a gradient covering the whole button, then with an image on just a portion of the button.
(note: for ease of the question I've changed my code to a div, but the outcome remains the same)
Initially this was successful doing such:
<div class="myBtn_1">test button one</div>
.myBtn_1
{
border: solid 1px #ff00ff;
background-image: url('https://picsum.photos/21?image=1080'),
linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1));
background-repeat: no-repeat;
background-size: auto 100%;
width: 200px;
height: 50px;
padding-left: 65px;
}
the jfiddle representing this can be found: here
HOWEVER I want some border around my image within the button/div, so I added background-position 5px 5px to the css, as well as explicitly setting the background-size (auto 40px). This does add padding to the image, but it also adds padding to the gradient.
again, see the 2nd class in the same jfiddle
Question: how can I create a button/div in css that has a gradient covering the full background, then add an image that has padding around it?
You can comma delineate the individual background properties too.
.myBtn_3
{
border: solid 1px #ff00ff;
background-image: url('https://picsum.photos/21?image=1080'), linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1));
background-repeat: no-repeat;
background-size: auto 40px, auto auto;
width: 200px;
height: 50px;
padding-left: 65px;
background-position: 5px 5px, 0 0;
}
<div class="myBtn_3">
test button two
</div>
Why don't you use
position: absolute;
on the image and just put it inside the div
.myBtn_1
{
border: solid 1px #ff00ff;
background-image: url('https://picsum.photos/21?image=1080'),
linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1));
background-repeat: no-repeat;
background-size: auto 100%;
width: 200px;
height: 50px;
padding-left: 65px;
}
.myBtn_2
{
border: solid 1px #ff00ff;
background-image: url('https://picsum.photos/21?image=1080'), linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1));
background-repeat: no-repeat;
background-size: auto 40px;
width: 200px;
height: 50px;
padding-left: 65px;
background-position: 5px 5px;
}
.myBtn_3
{
border: solid 1px #ff00ff;
background-image: linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1));
background-repeat: no-repeat;
background-size: auto 100%;
width: 200px;
height: 50px;
padding-left: 65px;
position: relative;
}
.myBtn_3 img {
position: absolute;
left: 5px;
top: 5px;
height: calc(100% - 10px)
}
<div class="myBtn_1">test button one</div>
<br />
<div class="myBtn_2">
test button two
</div>
<br />
<div class="myBtn_3">
test button three
<img src="https://picsum.photos/21?image=1080">
</div>
Is it possible to add a blur to only one side of a div using box-shadow?
What I am trying to achieve is a shadow with no width, just blur on only one side of a div. In my example I try to apply it to the bottom but the side really shouldn't matter.
I tried have using box-shadow: 0px 5px 5px -5px #000000; however using this method the shadow does not cover the whole length on the bottom of the div.
#bg {
text-align: center;
width: 200px;
height: 200px;
padding: 50px;
background: #eeeeee;
}
#box {
width: 100%;
height: 100%;
box-shadow: 0px 5px 5px -5px #000000;
background: yellow;
}
<div id="bg">
<div id="box"></div>
</div>
Only HTML and CSS solutions please.
You could use an after element and stretch it a little:
#bg {
text-align: center;
width: 200px;
height: 200px;
padding: 50px;
background: #eeeeee;
}
#box:after {
content:'';
display:block;
position:absolute;
z-index:0;
top:0;
left:-4px;
right:-4px;
bottom:0;
box-shadow: 0px 5px 5px -5px #000000;
}
#box {
width: 100%;
height: 100%;
position:relative;
background: yellow;
}
<div id="bg">
<div id="box"></div>
</div>
try this for bottom positioned box-shadow
.your_class {
box-shadow: 0 8px 6px -6px black;
}
You can also read https://developer.mozilla.org/en/docs/Web/CSS/box-shadow to understand how the box-shadow works
#bg {
text-align: center;
width: 200px;
height: 200px;
padding: 50px;
background: #eeeeee;
}
#box {
width: 100%;
height: 100%;
border-bottom: 2px solid #ccc;
background: yellow;
}
<div id="bg">
<div id="box"></div>
</div>
There is no readily available way to do precisely what you seek, at least not using a single box-shadow. Remember, the CSS box-shadow property accepts multiple comma-delimited entries, so this is your best bet if you're committed to using them. In the example below, I'm simply using two copies of the same box-shadow value with one difference: I've offset the first horizontally toward the left by 2.5px and the other toward the right by positive 2.5px. Additionally, I've added opacity to the color (due to mitigate the darkening effect of overlapping shadows).
#bg {
text-align: center;
width: 200px;
height: 200px;
padding: 50px;
background: #EEE;
}
#box {
width: 100%;
height: 100%;
box-shadow: -2.5px 5px 5px -3px rgba(0, 0, 0, 0.50),
2.5px 5px 5px -3px rgba(0, 0, 0, 0.5);
background-color: Yellow;
}
<div id="bg">
<div id="box"></div>
</div>
Try this
#bg {
text-align: center;
width: 200px;
height: 200px;
padding: 50px;
background: #eeeeee;
}
#box:after {
content:'';
display:block;
position:absolute;
z-index:0;
bottom:0px;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #9C9C9C),
color-stop(0.22, #EEEEEE)
);
background-image: -o-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%);
background-image: -moz-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%);
background-image: -webkit-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%);
background-image: -ms-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%);
background-image: linear-gradient(to bottom, #9C9C9C 0%, #EEEEEE 22%);
height:10px;
width:100%;
}
#box {
width: 100%;
height: 100%;
position:relative;
background: yellow;
}
https://jsfiddle.net/Lfa4z5b4/
Below is the image I am trying for, I managed to get a square using CSS, but I am trying for horizontal and vertical line in a square.
.hub{
width: 119px;
height: 101px;
background: #b5adad;
}
<div class="hub"></div>
There are many ways to do this and one would be to use gradients like below: (the image in question was actually a rectangle.)
The approach is very simple - we use 2 linear gradients to create two thin solid colored lines and then position the images such that they match our needs. Linear gradients are used even though it creates only a solid color because it is easier to control size and position of an image than background color.
div {
height: 100px;
width: 200px;
border: 1px solid red;
background-image: linear-gradient(to bottom, red, red), linear-gradient(to right, red, red);
background-repeat: no-repeat;
background-size: 1px 100%, 100% 1px;
background-position: 20px 0px, 0px 10px;
}
<div></div>
We can also create an output which has a fade-out or shadow effect like in the image in question:
div {
height: 100px;
width: 200px;
border: 1px solid;
background-color: gray;
background-image: linear-gradient(to bottom, black, black), linear-gradient(to right, red, transparent), linear-gradient(to right, black, black), linear-gradient(to bottom, red, transparent);
background-repeat: no-repeat;
background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px;
background-position: 20px 0px, 21px 0px, 0px 10px, 0px 11px;
box-shadow: inset 0px 0px 3px red;
}
<div></div>
Another way is to use :before and :after pseudo-elements:
.hub{
width: 119px;
height: 101px;
background: #b5adad;
position: relative;
padding: 18px 0 0 18px;
}
.hub:after, .hub:before {
content: " ";
background: black;
display: block;
position: absolute;
}
.hub:after {
width: 1px;
height: 100%;
left: 15px;
top: 0;
}
.hub:before {
width: 100%;
height: 1px;
top: 15px;
left: 0;
}
<div class="hub">Lorem ipsum dolor amet</div>