How to add Image shadow like book I am also add this css but it's not working
img {
box-shadow: 25px 25px 20px 10px rgb(113 108 108 / 53%);
}
<div class="position-relative book_width">
<div class="overlay mini_book"></div>
<img src="https://pocketmemories.mojom.co.uk/wp-content/uploads/2020/12/Funeral2.jpg" alt="image">
<p> Remembering Steve Howell</p>
</div>
You can try to add clip-path with box-shadow
img {
box-shadow: 5px 5px 20px 24px rgb(113 108 108 / 53%);
margin:50px;
width:200px;
clip-path:polygon(0 0,100% 0,200% 100%,200% 200%,100% 200%,0 100%);
}
body {
background:pink;
}
<img src="https://pocketmemories.mojom.co.uk/wp-content/uploads/2020/12/Funeral2.jpg" alt="image">
Also like below with some blur:
.box {
margin: 50px;
width: 200px;
position: relative;
}
.box span {
filter:blur(2px);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.box span::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
clip-path: polygon(0 0, 100% 0, 200% 100%, 200% 200%, 100% 200%, 0 100%);
box-shadow: 5px 5px 20px 24px rgb(113 108 108 / 53%);
background: rgb(113 108 108 / 53%);
}
img {
display: block;
width: 100%;
position:relative;
z-index:1;
}
body {
background: pink;
}
<div class="box">
<img src="https://pocketmemories.mojom.co.uk/wp-content/uploads/2020/12/Funeral2.jpg" alt="image">
<span></span>
</div>
You can try combination of box-shadow like below:
HTML
<img src="https://picsum.photos/200">
CSS
img {
box-shadow: 4px 4px 4px #999,
6px 6px 6px #999,
8px 8px 8px #999,
10px 10px 10px #999,
12px 12px 12px #999,
14px 14px 14px #999;
}
Note: Please Adjust values and color as per your requirement :)
Related
I have tried the above shape. but can not able to achieve this
.left {
background: linear-gradient( -90deg, #fff, #fff 38%, red 22%) !important;
border: 1px solid blue;
margin-left: -9px;
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
border-radius: 50%;
bottom: 0;
height: 18px;
left: 0;
margin: auto 0;
position: absolute;
top: 0;
transition: all 0.2s linear;
width: 18px;
}
.right {
background-color: transparent;
border: 1px solid blue;
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%) !important;
border-radius: 50% !important;
bottom: 0 !important;
height: 18px !important;
margin: auto 4px !important;
position: absolute !important;
top: 0 !important;
transition: all 0.2s linear !important;
width: 18px !important
}
<div class="left"></div>
<div class="right"></div>
You could accomplish this by carefully stacking three circles in a wrapper:
A filled circle on the right
A hollow circle atop it to the left
Another hollow circle at the top of the stack on the right
That said, I'd tend to agree with #Paulie_D that this may not be worth the effort to do w/ plain markup, and that SVG would be better.
See it working below:
.wrapper {
width: 60px;
position: relative;
}
.circle {
height: 40px;
width: 40px;
border-radius: 40px;
border: 2px solid blue;
}
.filled {
background-color: blue;
}
.fill-white {
background-color: white;
}
.left {
position: absolute;
left: 0;
}
.right {
position: absolute;
right: 0;
}
<div class="wrapper">
<div class="circle filled right"></div>
<div class="circle fill-white left"></div>
<div class="circle right"></div>
</div>
gradient coloration can help you here. Hover the below to see the result
.box {
width:100px;
height:100px;
border:2px solid blue;
box-sizing:border;
border-radius:50%;
position:fixed;
top:0;
left:100px;
}
.box + .box {
left:180px;
transition:0.5s;
background:
radial-gradient(
circle 50px /* half the width/height of the circle*/
at 152px 52px, /* 152px = 100px (left) + 50px + 2px (border) 52px = 0 (top) + 50px + 2px (border)*/
blue 98%,#0000) fixed;
}
html:hover .box + .box {
left:20px;
}
<div class="box"></div>
<div class="box"></div>
I have two div's the first one with a zig-zag bottom border and an image should be on both div's, the image always go behind the zig-zag border. i tried the z-index property but it did not work. can someone help with this issue? or is there any another approach to draw the zigzag border ?thanks in advance.
#d-wrapper {
background-color: #950051;
}
#d-wrapper * {
margin:0;
padding:0;}
#d-wrapper div.sep {
min-height: 200px;
padding: 32px 0;
}
#d-wrapper div > * {
margin: 0 40px;
}
#d-wrapper .zig-zag-bottom{
margin: 32px 0;
margin-top: 0;
background: #1ba1e2;
padding: 32px 0;
}
#d-wrapper p,
#d-wrapper h1{
font-size:2em;
text-align:center;
color:#fff;
font-family:"PT Sans Narrow", "Fjalla One", sans-serif;
font-weight:900;
text-shadow:1px 1px 0 #1b90e2, 2px 2px 0 #1b90e2, 3px 3px 0 #1b90e2, 4px 4px 0 #1b90e2, 5px 5px 0 #1b90e2;
}
#d-wrapper div.sec-dev p,
#d-wrapper div.sec-dev h1 {
text-shadow:1px 1px 0 #888, 2px 2px 0 #888, 3px 3px 0 #888, 4px 4px 0 #888, 5px 5px 0 #888;
color: #fff;
}
#d-wrapper h1{
font-size:4em;
}
#d-wrapper .zig-zag-bottom:after{
background:
linear-gradient(-45deg, transparent 16px, #1ba1e2 0),
linear-gradient(45deg, transparent 16px, #1ba1e2 0);
background-repeat: repeat-x;
background-position: left bottom;
background-size: 22px 32px;
content: "";
display: block;
width: 100%;
height: 32px;
position: relative;
top:64px;
left:0px;
}
#d-wrapper p{
text-align: center;
}
p {
text-align: center;
}
<div id="d-wrapper">
<div class="zig-zag-bottom">
<h1>Title 1</h1>
<p>Content 1</p>
<img src="https://images.vexels.com/media/users/3/131677/isolated/preview/5517f3c8facf7ff407aaa7752c00e8a5-paintbrush-tool-by-vexels.png" alt="Smiley face" width="160px" height="180px" style="margin-bottom: -150px;">
</div>
<div class="sec-dev">
<h1>Title 2</h1>
<p>Content</p>
</div>
For z-index to work, the element needs to be non-static.
Along with z-index try applying position: relative on the image.
Many times I created simple shadows but now I need to create rounded shadow. Like on the picture
Is it possible to do this with CSS??
THIS IS MY CODE:
-webkit-box-shadow: -2px 0px 79px -2px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 0px 79px -2px rgba(0,0,0,0.75);
box-shadow: -2px 0px 79px -2px rgba(0,0,0,0.75);
It looks like your example image is a linear gradient in a round container, so do that:
.round-shadow-clip {
overflow: hidden;
}
.round-shadow {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), transparent 20%, transparent 80%, rgba(0, 0, 0, 0.6));
border-radius: 100%;
height: 0;
margin-left: -10%;
padding-bottom: 25%;
width: 120%;
}
html {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAALklEQVQ4y2N89+4dA24gKCiIR5aJgQIwqnlkaGb8//8/Hun379+PBtioZko0AwAA0Ajuvut+RAAAAABJRU5ErkJggg');
height: 100%;
}
<div class="round-shadow-clip">
<div class="round-shadow"></div>
</div>
With pseudo you can do this
div {
position: relative;
height: 100px;
border-radius: 50%/40%;
overflow: hidden;
}
div::before,
div::after {
content: '';
position: absolute;
left:0; right:0; top: -5px; height: 0;
box-shadow: 0 0 25px 15px rgba(0,0,0,.5);
}
div::after {
top: auto; bottom: -5px;
box-shadow: 0 0 -25px 15px rgba(0,0,0,.5);
}
<div></div>
Can I create this structure using css? I tried to create this using images, but i need it with css.
Try this, and adapt it to your needs...
body {
padding: 100px;
}
.tabs {
height: 45px;
padding: 0 0 0 0;
overflow: visible;
}
.tab {
width: 200px;
height: 45px;
overflow: hidden;
float: left;
margin: 0 -15px 0 0;
}
.tab-box {
height: 50px;
background: #fff;
border-radius: 4px;
border: 1px solid #ccc;
margin: 0 10px 0;
box-shadow: 0 0 2px #fff inset;
-webkit-transform: perspective(100px) rotateX(30deg);
-moz-transform: perspective(100px) rotateX(30deg);
}
.tab.active {
z-index: 40;
position: relative;
padding-bottom: 1px;
}
.tab.active .tab-box {
background-color: #eee;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjxzdG9wIG9mZnNldD0iMyUiIHN0b3AtY29sb3I9IiNkZGRkZGQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZWVlZWUiIHN0b3Atb3BhY2l0eT0iMC41Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cccccc), color-stop(3%, #dddddd), color-stop(100%, rgba(238, 238, 238, 0.5)));
background-image: -moz-linear-gradient(top, #cccccc, #dddddd 3%, rgba(238, 238, 238, 0.5));
background-image: -webkit-linear-gradient(top, #cccccc, #dddddd 3%, rgba(238, 238, 238, 0.5));
background-image: linear-gradient(to bottom, #cccccc, #dddddd 3%, rgba(238, 238, 238, 0.5));
box-shadow: 0 0 2px 0 #fff inset;
}
.content {
z-index: 1;
padding: 100px;
border: 1px solid #ccc;
background: #eee;
position: relative;
}
.clear {
clear: both;
}
<div class="tabs">
<div class="tab">
<div class="tab-box"></div>
</div>
<div class="tab">
<div class="tab-box"></div>
</div>
<div class="tab active">
<div class="tab-box"></div>
</div>
<div class="tab">
<div class="tab-box"></div>
</div>
</div>
<div class="content"></div>
You can do, but without rounding
.container {
border-top: solid 10px red;
}
.title {
float: right;
height: 30px;
padding: 0 40px 0 30px;
background-color: red;
position: relative;
}
.title:before {
content: '';
border: solid 30px transparent;
border-top-color: red;
position: absolute;
left: -30px;
top: 0;
}
<div class="container">
<div class="title">Title #1</div>
</div>
Live demo - https://jsfiddle.net/yqnc2j44/1/
I have a little question.
I have div 200*200 px. I need effect:
- when user mouse hover on div: alpha 70% black picture
- show new button at middle of picture (or textual link) for example "Add to cart"
You can see my example here: http://jsfiddle.net/t8jPN
<div class="wrapper">
<div class="ribbon-wrapper-green"><div class="ribbon-green">NEW</div></div>
<img src="http://cdn.sheknows.com/articles/2011/05/summer-dresses4.jpg"></img>
</div>
.wrapper {
margin: 50px auto;
width: 200px;
height: 200px;
background: white;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
}
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}
.ribbon-green {
font: bold 15px Sans-Serif;
color: #ffffff;
text-align: center;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}
Thanks
The basic idea is have wrapper for three divs. One div with the image, one div with the shadow and other for the button.
The reason there are separate divs for the shadow and the button (or link) is to avoid the transparency effect on the button.
I guess there are better ways to solve the problem but i would use this one because i find it easier.
Demo http://jsfiddle.net/chepe263/a97FS/10/
<html>
<head>
<style type="text/css">
.contenedor{
position:relative;
width: 200px;
height: 200px;
border: 1px solid black;
}
.atCorner{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.escondido{
display: none;
}
.shadow{
background-color: black;
zoom: 1;
filter: alpha(opacity=70);
opacity: 0.7;
}
.button{
text-align: center;
}
.button button{
margin-top: 40%;
}
</style>
<script type="text/javascript">
$('.contenedor').mouseenter(function(){
jQuery(this).find('.shadow, .button').fadeIn();
}).mouseleave(function(){
jQuery(this).find('.shadow, .button').fadeOut();
});
</script>
</head>
<body>
<div class="contenedor">
<div class="atCorner" id="picture">
<img src="http://cdn.sheknows.com/articles/2011/05/summer-dresses4.jpg" />
</div>
<div class="atCorner escondido shadow" id="">
</div>
<div class="atCorner escondido button" id="">
<button>Buy it</button>
</div>
</div>
</body>
</html>