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>
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>
Currently, I am playing with HTML and CSS and I wanted to make a icon from this image
the image is somewhat like that. I tried adding different shapes of ovals and circles inside the bigger circle but it did not work. For the shaded part, I used a box-shadow in styling it. There are already too many divs in my sample icon. I just want to have it simple and readable.
Here is my HTML structure:
<link rel="stylesheet" href="style.css">
<div class="cont">
<div class="icon2">
<div class="inner-circle"></div>
</div>
</div>
and here is my CSS:
.cont {
width: 190px;
height: 190px;
padding: 20px;
}
.icon2 {
position: relative;
border: 2px solid #353332;
width: 187px;
height: 184px;
border-radius: 50%;
background-color: #fff;
box-shadow: inset 20px 35px #1CAEE3;
transform: rotate(177deg);
}
.inner-circle {
border: 7px solid #353332;
width: 120px;
height: 183px;
background-color: #fff;
border-radius: 50% 50% 50% 49% / 60% 52% 40% 40%;
transform: rotate(240deg);
display: block;
margin: 6px 0px 4px 35px;
border-top: 0;
border-bottom: 0;
border-left: 0;
}
Can you explain me this and how can I come up with a solution to my problem? I'm stuck for hours and I just wanted to try it with pure HTML and CSS and not using photoshop.
You can easily do this with one element and radial-gradient. Simply adjust the percentage used inside the gradient to control the shape:
.box {
width:150px;
height:150px;
border-radius:50%;
border:4px solid;
background:
radial-gradient(circle at top left,transparent 59.4%,black 60% calc(60% + 4px),orange calc(60% + 5px));
}
<div class="box"></div>
You can also use box-shadow ;)
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radii, and color.
demo aside your image:
div {
border: solid 6px;
display: inline-flex;
height: 200px;
width: 200px;
border-radius: 50%;
box-shadow: inset -50px -70px 1px -30px rgb(255, 127, 39), inset -56px -77px 1px -33px;
}
code {
font-size: 30px;
color: green;
margin: auto;
font-weight: bold;
}
div,
img {
vertical-align: middle;
}
<img src="https://i.stack.imgur.com/HRpQY.png">
<div><code>box-shadow</code></div>
another example :
div {
float:left;
height: 180px;
width: 180px;
margin: 1em;
box-sizing: border-box;
padding: 25px;
background: #F4E5D9;
box-shadow: inset -40px -40px 3px -20px #C5824D, inset 40px 40px 3px -20px #EABD9A, inset 0 0 2px 30px #AD6026, inset 0 0 0px 32px #705642, inset 0 -55px 3px 10px #705B4B, inset 0 55px 3px 10px #705B4B, 0 0 3px 2px #705B4B, 0 0 3px 4px #665447, 0 0 3px 7px #3F332A, 0 0 3px 9px #705642, 88px 90px 1px -86px gray, 87px 85px 2px -82px #F2C232, 85px 95px 2px -82px #A30700, 92px 92px 2px -82px #C5824D, 88px 90px 10px -70px white;
border-radius:50%;
display:flex;
flex-direction:column;
justify-content:center;text-align:center;
}
div + div {border-radius:4em /50%;
<div>
<p>inset shadow </p>
<p>border-radius </p>
<p>decreased shadow </p>
</div>
<div>
<p>inset shadow </p>
<p>border-radius </p>
<p>decreased shadow </p>
</div>
you may also draw citrus slices https://codepen.io/gcyrillus/pen/wutEK .
but SVG would be at best here ;)
You could make use of a pseudo element and have an overflow:hidden to hide the rest of the pseudo element's parts that fall outside of the div's 'outer circle'
div {
height: 200px;
width: 200px;
overflow: hidden;
border: 5px solid black;
background:orange;
border-radius: 50%;
position: relative;
}
div:after {
content: "";
position: absolute;
height: 100%;
width: 200%;
border: inherit;
border-radius: 50%;
background: white;
top: -20%;
left: -100%;
}
<div></div>
I'm trying to create a background for a banner using css where one side has a color and on the other side has another one with a 45° cut like this
I've been able to recreate the above image except for the drop shadow that doesn't stay in the right position.
Any advice would be greatly appreciated.
This is my code code:
#container {
height: 100px;
width: 400px;
overflow: hidden;
background-color: #2962ff;
}
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid #2196f3;
border-right: 400px solid transparent;
-webkit-box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75);
box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75);
}
<div id="container">
<div id="triangle-topleft"></div>
</div>
The CSS triangle trick with border can not be used for this, as a shadow will still be applied to the box, and not only to the triangle.
You will have to create a pseudo element, rotate it and THEN apply shadow to it.
#container {
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
background-color: grey;
}
#container:before {
content: '';
position: absolute;
left: 20%;
width: 100%;
height: 200%;
background-color: rgb(255, 255, 255); /* fallback */
background-color: rgba(255, 255, 255, 0.5);
top: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
box-shadow: inset 0 0 20px 10px #333;
}
<div id="container"></div>
Basically you create a rectangle which is larger than the parent, then rotate it and apply a shadow. You can tweak the colors and rotation-degree for your needs
Demo: http://jsfiddle.net/b5TnZ/2032/
You can add multiple color stops in Linear Gradients. Use two color set.
Gradient generated using Shapy
.canvas {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
min-height: 100%;
min-width: 100%;
}
.gradient-canvas {
max-height: 100%;
max-width: 100%;
width: 100%;
height: 100%;
background: linear-gradient(127deg, rgb(31, 163, 209) 0%, rgb(31, 163, 209) 50%, rgb(25, 64, 208) 0%, rgb(46, 101, 223) 52%) 50% 50% / 100% 100% no-repeat;
}
<div class="canvas"><div class="gradient-canvas"></div></div>
You can try gradient like below:
#container {
height: 150px;
background:
linear-gradient(135deg,#2962ff 49.8%,rgba(0,0,0,0.75) 50%, #2196f3 calc(50% + 10px));
background-color:#2196f3;
}
<div id="container">
</div>
And simply replace the deg with to bottom right if you want the diagonal result:
#container {
height: 150px;
width:50%;
background:
linear-gradient(to bottom right,#2962ff 50%,rgba(0,0,0,0.75) 50%, #2196f3 calc(50% + 10px));
background-color:#2196f3;
}
<div id="container">
</div>
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 :)