Can I create this using css?
there's some box-shadow css I can use to create the bottom border, but how do you create the effect on the left and right sides?
Yes you can: https://jsfiddle.net/0mro5t77/
The trick is to use an outer and an inner container. The outer container provides the white background for the bar and the box shadow. The inner container has a gradient "page background color -> transparent -> page background color" and is positioned absolutely so it overlaps the outer container to create the fading effect.
html, body {
background: #ccc;
}
.outer {
box-shadow: 0 -20px 20px -20px #333, 0 20px 20px -20px #333;
background: #fff;
width: 600px;
height: 50px;
margin: 0 auto;
}
.inner {
width: 600px;
height: 100px;
background: linear-gradient(to right, #ccc 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 75%, #ccc 100%);
position: absolute;
margin-top: -25px;
text-align: center;
padding-top: 30px;
}
Related
I've setup the following jsfiddle = https://jsfiddle.net/gfxjwuao/
.skeleton-yqjgac1o2g6:empty {
height: 133px;
background-color: red;
border-radius: 0px 0px 0px 0px;
background-image: radial-gradient( circle 20px at 20px 20px, #F5F7F9 19px, transparent 20px );
background-repeat: repeat-y;
background-size: 40px 133px;
background-position: center center;
}
<div class="skeleton-yqjgac1o2g6"></div>
All I want to do is vertically align the circle. I can horizontally center it all fine, but it just seems to ignore it vertically. Any ideas?
Using background-position: center center is ignored.
Tried it like this, changing the coordinates of radial-gradient to "center":
.skeleton-yqjgac1o2g6:empty {
height: 133px;
background-color: red;
border-radius: 0px 0px 0px 0px;
background-image: radial-gradient( circle 20px at center, #F5F7F9 19px, transparent 20px );
background-repeat: repeat-y;
background-size: 40px 133px;
background-position: center center;
}
<div class="skeleton-yqjgac1o2g6"></div>
Just a noob, though.
Can't really explain it.
Just change background-image radial graidient y to 50%. or just copy paste answer below and look for reasoning by yourself. :)
.skeleton-yqjgac1o2g6:empty {height: 133px; background-color: red; border-radius: 0px 0px 0px 0px; background-image: radial-gradient( circle 20px at 20px 50%, #F5F7F9 19px, transparent 20px );background-repeat: repeat-y;background-size: 40px 133px;background-position: 50% 50%;vertical-align: center;}
It's hard to see but on the INSIDE of the Border, left and right side only of the skewed rectangle, there is whitespace which is only there if I have a gradient background
https://imgur.com/a/fDcD8bi
my css:
padding: 50px 0;
margin: 0;
border-radius: 15px;
border-radius: 0;
border: 4px solid #717171;
transform: skewX(352deg);
box-shadow: -5px 10px 10px 0px #0b0b0b2b;
cursor: pointer;
background: rgb(41,41,41);
background: -moz-linear-gradient(15deg, rgba(41,41,41,1) 0%, rgba(59,59,59,1) 100%);
background: -webkit-linear-gradient(15deg, rgba(41,41,41,1) 0%, rgba(59,59,59,1) 100%);
background: linear-gradient(15deg, rgba(41,41,41,1) 0%, rgba(59,59,59,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#292929",endColorstr="#3b3b3b",GradientType=1);
Any CSS magicians could help me with the whitespace on the inside? as I'd like to have the rectangle skewed with a gradient. But they don't work together so well. Thanks
I am trying to use CSS linear-gradient and box-shadow to make an image have a box-shadow on 3 sides (top, right, and left) while also having a "fade-to-white" on the bottom edge of the image.
I don't want the image url in the CSS, I want to use the img tag in the html.
This is what I have so far: https://codepen.io/adelelanders/pen/rNVMxZw however the bottom edge is still showing the box-shadow (dark line). I want the bottom edge to fade to white.
img {
max-width: 100%;
}
.image-container {
max-width: 100%;
width: 600px;
}
.white-fade::after {
display: block;
position: relative;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 100%);
margin-top: -150px;
height: 150px;
width: 100%;
content: '';
}
.box-shadow {
border-radius: 5px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
<div class="image-container white-fade">
<img class="box-shadow" src="https://cdn.pixabay.com/photo/2019/03/18/06/46/cyber-4062449__340.jpg" />
</div>
consider mask instead of gradient
img {
max-width: 100%;
}
.image-container {
max-width: 100%;
width: 600px;
padding:20px; /* Some padding for the shadow */
-webkit-mask:
linear-gradient(#fff,#fff) top/100% calc(100% - 149px) no-repeat,
linear-gradient(#fff,transparent) bottom/100% 150px no-repeat;
mask:
linear-gradient(#fff,#fff) top/100% calc(100% - 149px) no-repeat,
linear-gradient(#fff,transparent) bottom/100% 150px no-repeat;
}
.box-shadow {
border-radius: 5px;
display:block;
box-shadow: 0 10px 20px rgba(0, 0, 0, 1), 0 6px 6px rgba(0, 0, 0, 1);
}
<div class="image-container white-fade">
<img class="box-shadow" src="https://cdn.pixabay.com/photo/2019/03/18/06/46/cyber-4062449__340.jpg" />
</div>
Is there any way to create navigation bar with transparent background color like below image?
I tried using CSS3 pseudo selectors but the curves are not as per the design:
div::before{
width: 200px;
height: 90px;
background: rgba(255, 255, 255, 0.2);
background: radial-gradient(circle 0 at -20% 50%,transparent,transparent 100px,rgba(255, 255, 255, 0.2) 100px),
radial-gradient(circle 20px at 180px 50%,transparent,transparent 100px,rgba(255, 255, 255, 0.2) 100px);
background-size:100px 90px, 100px 90px;
background-position:0 0,100% 0;
background-repeat:no-repeat
}
You can do this in multiple ways with CSS and I've shown few of them in the below answer. I've used ul and li tags because I feel they are more suited for a navigation bar but you can easily convert it to work with div tags also.
One drawback that both CSS approaches have is that the parent element is still basically a rectangle and so mouse interactions would happen outside the curve (but inside the element's boundaries). The only solution I have for this problem is to use clip-path.
Using Radial Gradient:
This is just like what you had started to do. I have just set the gradient at the correct position and have used it to produce the right hand side black border also. The curve on element's left side is done using the border-radius property.
The radial gradient is transparent for 20px (half the height of the element) and is black color for 1px (to produce the border), has the required background color for the rest of it.
Drawback of using gradients is that they would not work in IE9 and lower because they do not support gradients.
li {
position: relative;
float: left;
width: 33%;
height: 40px;
line-height: 36px; /* height - 2 * border width */
text-indent: 10px;
border: 2px solid rgba(0, 0, 0, .5);
border-right: none;
border-radius: 20px 0px 0px 20px;
background: radial-gradient(20px 20px at calc(100% + 4px) 50%, transparent 18px, rgba(0, 0, 0, .5) 19px, rgba(0, 0, 0, .5) 20px, rgba(255, 255, 255, .25) 21px); /* the first color after transparent is border color, the last color is background color */
background-clip: content-box;
box-shadow: -1px 2px 1px rgba(0, 0, 0, .25);
overflow: hidden;
}
ul {
list-style-type: none;
}
* {
box-sizing: border-box;
}
body {
background: radial-gradient(circle, chocolate 0%, sandybrown 100%);
min-height: 100vh;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
Using Box Shadow:
This has better browser support because box-shadow works even in IE9. For this approach, we need a pseudo-element which is placed just inside the right border of the parent element. Both the elements (that is, the pseudo and the parent) have a border-radius assigned to create the curve. Background color is achieved using a wide box-shadow on the pseudo-element because assigning a background color to the parent or the pseudo-element will bleed outside the shape also.
li {
position: relative;
float: left;
width: 33%;
height: 40px;
line-height: 36px; /* height - 2 * border width */
text-indent: 10px;
border: 2px solid rgba(0, 0, 0, .5);
border-right: none;
border-radius: 20px 0px 0px 20px;
box-shadow: -1px 2px 1px rgba(0, 0, 0, .25);
overflow: hidden;
}
ul {
list-style-type: none;
}
li:after {
position: absolute;
content: '';
height: 100%;
width: 100%;
left: calc(100% - 18px); /* 100% - (half of height - border width) */
top: -2px; /* inverse of border width */
border-radius: 20px;
border: 2px solid rgba(0, 0, 0, .5);
box-shadow: 0px 0px 0px 999px rgba(255, 255, 255, .25); /* the color here is the background color */
z-index: -1;
}
*{
box-sizing: border-box;
}
body {
background: radial-gradient(circle, chocolate 0%, sandybrown 100%);
min-height: 100vh;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
Using SVG:
You can do this using SVG also by creating the required shape with a path element and positioning it absolutely with respect to the parent.
li {
position: relative;
float: left;
width: 33%;
height: 40px;
line-height: 40px;
text-indent: 10px;
}
ul {
list-style-type: none;
}
svg {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
path {
stroke: rgba(0, 0, 0, .5); /* border color */
stroke-width: 2; /* border width */
fill: rgba(255, 255, 255, .25); /* background color */
}
path:hover{
stroke: red;
}
body {
background: radial-gradient(circle, chocolate 0%, sandybrown 100%);
min-height: 100vh;
}
<ul>
<li>
<svg viewBox='0 0 200 40' preserveAspectRatio='none'>
<path d='M20,1 A19,19 0 1,0 20,39 L200,39 A19,19 0 0,1 200,1z' />
</svg>One</li>
<li>
<svg viewBox='0 0 200 40' preserveAspectRatio='none'>
<path d='M20,1 A19,19 0 1,0 20,39 L200,39 A19,19 0 0,1 200,1z' />
</svg>Two</li>
<li>
<svg viewBox='0 0 200 40' preserveAspectRatio='none'>
<path d='M20,1 A19,19 0 1,0 20,39 L200,39 A19,19 0 0,1 200,1z' />
</svg>Three</li>
</ul>
Is it possible to create this shape in CSS3? How?
I am stuck: http://dabblet.com/gist/2962169
h1 {
background-color: #434b82;
border-radius: 20px 0 0 20px;
transform: skew(-20deg);
}
<h1>TEST</h1>
You mean somthing like this
h1 {
background-color: #434b82;
border-radius: 20px 0 0 20px;
width:500px;
height:40px;
border-right: 40px solid transparent;
}
h1:after{
position:absolute;
width: 80px;
border-top: 40px solid #434b82;
margin-left:500px;
border-right: 20px solid transparent;
content:"";
}
<h1></h1>
We can use linear-gradient() to draw this shape on rectangular element.
This trick uses the idea of dividing whole shape in two parts and then draws each part on the background independently.
div {
background-image: linear-gradient(to left, #434b82, #434b82),
linear-gradient(to left top, transparent 50%, #434b82 50%);
background-position: top right 20px, 100% 100%;
background-size: 100% 100%, 20px 100%;
background-repeat: no-repeat;
}
div {
background-image: linear-gradient(to left, #434b82, #434b82),
linear-gradient(to left top, transparent 50%, #434b82 50%);
background-position: top right 20px, 100% 100%;
background-size: 100% 100%, 20px 100%;
background-repeat: no-repeat;
border-radius: 30px 0 0 30px;
line-height: 50px;
padding: 0 25px;
height: 50px;
width: 200px;
color: #fff;
}
<div>
Some Text Here...
</div>