How to create pages similar to a book shadows, using two divs and CSS3? Equal in the image that follows attachment.
I tried using box-shadow with inset but it worked.
box-shadow: inset -5px -5px 5px #888;
Thank you.
You can use linear gradient:
.leftPage{
background: linear-gradient(to right, #fff 92%, #9f9f9f 100%);
}
.rightPage{
background: linear-gradient(to left, #fff 95%, #898989 100%);
}
example -> jsfiddle
Here you go http://jsfiddle.net/DhgY8/1/
HTML
<div class="book">
<div class="left page"></div>
<div class="right page"></div>
</div>
CSS
.book {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: silver;
}
.left {
box-shadow: 6px 0 2px 1px black, -8px 0 6px grey inset;
z-index: 3;
left: 0;
}
.right {
right: 0;
}
.page {
background: white;
position: absolute;
top: 0;
bottom: 0;
width: 50%;
}
It's not perfect, but it's pretty close to what you want :)
Related
I want to make a card look like this, the border or the sides of the card are semi-circular, is it possible to make it with css? if yes, how? Thank you in advance
.wrapper {
}
.content-card {
width: 315px;
height: 131px;
left: 0px;
top: 0px;
background: #FFFFFF;
box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.12);
border-radius: 8px;
}
<div class="wrapper">
<div class="content-card">
</div>
</div>
Multiple background can do it:
.content-card {
width: 300px;
height: 150px;
background:
radial-gradient(8px at left ,#0000 98%,#fff) left ,
radial-gradient(8px at right,#0000 98%,#fff) right;
background-size: 50.5% 25px;
background-repeat:repeat-y;
filter: drop-shadow(4px 8px 12px rgba(0, 0, 0, 0.12));
border-radius: 8px;
}
body {
background: pink;
}
<div class="content-card">
</div>
The old way - border-image
It permits you to use the willing image for borders, it was widely use for this kind of cases. You can have repeat option on it to allow different box's sizes with the same style.
The mozilla doc is quite explicit with good examples of it : https://developer.mozilla.org/en-US/docs/Web/CSS/border-image
The recent way - without image
You have the possibility to use pseudo-element :after and :before and stylize those elements with a repeated background using radial-gradient.
body {
background-color: #ffaaaa;
}
.ticket {
position: relative;
width: 300px;
height: 170px;
margin: 10px;
border-radius: 10px;
background: white;
box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.12);
}
.ticket:before,
.ticket:after {
content: '';
position: absolute;
top: 5px;
width: 6px;
height: 160px;
}
.ticket:before {
left: -5px;
background: radial-gradient(circle, transparent, transparent 50%, #FBFBFB 50%, #FBFBFB 100%) -7px -8px/16px 16px repeat-y;
}
.ticket:after {
left: 300px;
background: radial-gradient(circle, transparent, transparent 50%, #FBFBFB 0%, #FBFBFB 100% ) -3px -7px / 16px 16px repeat-y;
}
<div class="ticket"></div>
Hello partners!
I wanted to see if someone could advise me on how to do the following:
In a webapp that I am making I have a stylized NavBar as seen in the photos (in AdobeXD it is shown as a union of a rectangle with a circle).
Nav Example AdobeXD | Complete View
How could I make that navbar with HTML / CSS?
I already have the following but I have the problem of how to merge the div of the rectangle and the div of the circle in order to have the same shadow and the same linear gradient, it is possible to do that? 🥺 or would it be better to export that nav as SVG?
body{
margin: 0;
}
.navContainer{
width:100vw;
}
.mainNav{
width:100vw;
background: linear-gradient(#30355e 0%, #383e6e 100%);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
height: 73px;
border-radius: 0 0 40px 40px;
filter: drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.25));
}
.circleNav{
width:110px;
height:110px;
background: linear-gradient(#30355e 0%, #383e6e 100%);
border-radius: 50%;
position: absolute;
left: calc(50% - 57px);
top: 10px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
<html>
<div class="navContainer">
<div class="mainNav">
</div>
<div class="circleNav">
</div>
</div>
</html>
You can do it like below:
body {
margin: 0;
}
.navContainer {
width: 100vw;
filter: drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.45)); /* filter on main container */
}
.mainNav {
background:
linear-gradient(#30355e 0%, #383e6e 100%)
top/100% 110px; /* 110px = height of circle */
height: 75px;
border-radius: 0 0 40px 40px;
}
.circleNav {
width: 110px;
height: 110px;
background: linear-gradient(#30355e 0%, #383e6e 100%);
border-radius: 50%;
margin: -75px auto 0; /* same as height of nav */
}
<div class="navContainer">
<div class="mainNav">
</div>
<div class="circleNav">
</div>
</div>
Or with a reduced code like below:
body {
margin: 0;
}
.navContainer {
filter: drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.45)); /* filter on main container */
height: 110px;
}
.navContainer::before,
.navContainer::after{
content:"";
position:absolute;
top:0;
height:100%;
border-radius: 50%;
background-image:linear-gradient(#30355e, #a3aae4);
}
.navContainer::before {
left:0;
right:0;
height:70%;
background-size:100% calc(100%/0.7);
background-position:top;
border-radius: 0 0 40px 40px;
}
.navContainer::after {
left:50%;
aspect-ratio:1/1; /* the support of this is low so you can replace it with width:110px */
transform:translate(-50%);
}
<div class="navContainer">
</div>
The progress indicator which is at the extreme left starts from outside the progress bar initially, it gets into correct position if i remove the right: -10%; but then the progress indicator does not move when I change the width in the inline css of the pro-bar.
How to fix this.
.progress_bar{
height: 15px;
background-color:grey;
border-radius:15px;
box-shadow:0 4px 7px -5px #000 inset;
}
.progress_bar:first-child{
margin: 50px 0;
}
.progress_bar .pro-bar{
position: relative;
height: 100%;
box-shadow: 0 1px 11px -4px #fff inset;
border-radius:15px;
animation: animate-positive 4s;
}
.progress_bar .pro-bar > span{
background: linear-gradient(to top, #3d4131 35%, #fff 233%);
color: #a5a5a4;
box-shadow: 1px 1px 3px #1d1a1f;
font-size: 14px;
font-weight: 700;
position: absolute;
top: -37px;
right: -10%;
padding: 4px 10px;
border-radius: 3px 3px 3px 0px;
}
.progress_bar .pro-bar > span:after{
content: "";
border-top: 6px solid #3d4131;
border-right: 6px solid transparent;
position: absolute;
bottom: -6px;
left:0;
}
.pro-bar {
background: linear-gradient(to right,#d98164 35%,#a9b487 68%);
}
<div class="row">
<div class="col-xs-9 progress-container">
<div class="col-md-6">
<div class="progress_bar">
<div class="pro-bar" style="width: 0%">
<span>0%</span>
</div>
</div>
</div>
</div>
</div>
I think I've figured it out, please try
left: 100%;
instead of the right: -10%;
I am trying to add an inset box shadow that has transparency/fades out on the left and right edges of a div. I managed to add a normal inset box shadow but I don't know how to add transparency to the edges. How can I do this?
Here's an example of what I'm trying to achieve.
.container {
height: 300px;
width: 300px;
box-shadow: rgb(178, 169, 169) 0px 8px 8px -8px inset, rgb(178, 169, 169) 0px -8px 8px -8px inset;
<div class="container">
</div>
I managed to do it using radial-gradient. Check this fiddle
*{
box-sizing: border-box;
}
body{
margin: 0;
}
.banner{
width: 100%;
padding: 30px;
background: #eee;
position: relative;
}
.banner::before{
content: "";
background: radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 75%);
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 15px;
z-index: -1;
}
<div>
<div class="banner"></div>
</div>
How would I have a top right corner div as shown in the image. I want to do something similar though not exactly the same. I think the text is not an image.
Also, I have seen some websites that has a page hover effect when a mouse is over the top right section. Any idea how to do that?
If the text isn't an image, none of the other answers will work. Here is some css that rotates a div 45 degrees and works in IE + FF + Webkit.
#yourdiv
{
top: 0px;
right: 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(M11='0.7071067811865476', M12='-0.7071067811865475', M21='0.7071067811865475', M22='0.7071067811865476', sizingMethod='auto expand');
}
Make sure it's a transparent PNG
#Element {
position: fixed;
top:0;
right:0;
z-index:10;
}
(An element with greater stack order is always in front of an element with a lower stack order.)
div.topRight {
position: absolute;
top: 0%;
right: 0%;
}
This will assign a division with class set as 'topRight' to the top right corner. I'm sure you can figure out how to get the image to show up properly from that. Make sure you set the proper width and height on it. As for hovering, what exact effects do you want? You can modify the CSS on hover easily, if that's all you want to do.
div.topRight:hover {
// new css rules
}
you may want to take a look at this JSFiddle:
Css:
.wrapper {
margin: 50px auto;
width: 280px;
height: 370px;
background: white;
border-radius: 10px;
-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: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-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;
}
html:
<div class="wrapper">
<div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div>
</div>
I'm assuming you want fixed positioning.
#Element {
position: fixed;
top:0;
right:0;
}