I'm trying to do this:
But I can't find how I can make an linear blur for card in css or in React..
On the element that you want, add an overlay.
.element:after {
content: "";
display: block;
width: 100%;
height: 200px;
position: absolute;
bottom: 0;
pointer-events: none;
background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%, white 100%);
}
use
background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%, white 100%);
on the div in which you want this effect.
Related
Is it possible to create a creased button effect using CSS to achieve something like this image (not including the white icon in the center):
I think there's a very faint white shadow/glow to the left of center, on the lighter side, and there's a faint dark shadow or something to the right of center, on the dark side.
I've tried it using a multi-stop gradient, and the two-tone color effect is simple enough, but those white/dark shadows could be a problem.
The easiest way is with a gradient. Note, this solution is completely scaleable due to use of percent.
div {
width: 100px;
height: 100px;
border-radius: 100%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#34495e+0,3f4c6b+50,34495e+50,2c3e50+50,2c3e50+100 */
background: #34495e;
/* Old browsers */
background: -moz-linear-gradient(left, #34495e 0%, #3f4c6b 50%, #34495e 50%, #2c3e50 50%, #2c3e50 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(left, #34495e 0%, #3f4c6b 50%, #34495e 50%, #2c3e50 50%, #2c3e50 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #34495e 0%, #3f4c6b 50%, #34495e 50%, #2c3e50 50%, #2c3e50 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#34495e', endColorstr='#2c3e50', GradientType=1);
/* IE6-9 */
}
<div></div>
Here is one more solution, using thick rounded borders
div {
width: 140px;
height: 140px;
box-sizing: border-box;
border-radius: 50%;
border-left: 70px solid #5c6a8f;
border-right: 70px solid #53618c;
}
<div></div>
you can use after selector to create a half circle and display it over the circle
.icon{
background: red;
width: 100px;
height: 100px;
border-radius:50%
}
.icon:before{
content: '';
width: 50px;
height: 100px;
border-radius: 0 100px 100px 0;
background: blue;
display: block;
margin-left: 50px;
}
<div class="icon"><div>
I'm trying to make 2 gradients overlap each other at the same time with this code...
#grad1 {
height: 3px;
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
}
#grad2 {
height: 3px;
background: -webkit-linear-gradient(left, #2184E2 , #AE1937);
background: -o-linear-gradient(right, #2184E2, #AE1937);
background: -moz-linear-gradient(right, #2184E2, #AE1937);
background: linear-gradient(to right, #2184E2 , #AE1937);
}
But it doesn't overlap each other like I want it to.
How can I make #grad1 overlap #grad2 so they're both visible at the same time?
Use this way:
#grad1 {
position: absolute;
z-index: 1;
}
#grad2 {
position: absolute;
z-index: 2;
}
This way it just overlaps both the stuff, keeping the #grad2 on top of #grad1. Make sure, you have another <div>, which is the parent of both having a position: relative to it.
Snippet
#grad1 {
height: 3px;
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
}
#grad2 {
height: 3px;
background: -webkit-linear-gradient(left, #2184E2 , #AE1937);
background: -o-linear-gradient(right, #2184E2, #AE1937);
background: -moz-linear-gradient(right, #2184E2, #AE1937);
background: linear-gradient(to right, #2184E2 , #AE1937);
}
#grad1 {
position: absolute;
z-index: 1;
}
#grad2 {
position: absolute;
z-index: 2;
}
.parent {position: relative; width: 50px; height: 50px;}
.parent > div {width: 50px;}
<div class="parent">
<div id="grad1"></div>
<div id="grad2"></div>
</div>
does anyone knows a way to create a div with responsive width in shape of an inverted cone (see attached code snippet) only using css. Also this div needs to have a repeated background image (pattern).
I tried to use clipPath:
#div {
height: 100%;
width: 100%;
-webkit-clip-path: polygon(50% 90px, 100% 0%, 100% 100%, 0 100%, 0 0);
clip-path: polygon(50% 25%, 100% 0, 100% 100%, 0 100%, 0 0);
background: blue;
padding-top: 160px;
}
<div id="div"></div>
This works fine in Safari and Chrome but won't work in Mozilla, Opera or IE.
Is there a way to achieve for all relevant browsers?
Any help would be appreciated.
Use linear-gradient with side or corner values instead of fixed angles. You can make that shape with transforms too, but that'll require JS to make it responsive.
Fiddle
body {
background-color: blue;
margin: 0;
padding: 0;
}
div {
height: 150px;
width: 100%;
position: relative;
}
div:after, div:before {
content:"";
position: absolute;
height: inherit;
width: 50%;
}
div:before {
left: 0;
background: -webkit-linear-gradient(to bottom left, white 50%, transparent 50%);
background: -moz-linear-gradient(to bottom left, white 50%, transparent 50%);
background: -o-linear-gradient(to bottom left, white 50%, transparent 50%);
background: linear-gradient(to bottom left, white 50%, transparent 50%);
}
div:after {
right: 0;
background: -webkit-linear-gradient(to bottom right, white 50%, transparent 50%);
background: -moz-linear-gradient(to bottom right, white 50%, transparent 50%);
background: -o-linear-gradient(to bottom right, white 50%, transparent 50%);
background: linear-gradient(to bottom right, white 50%, transparent 50%);
}
<div></div>
You can set the div to have overflow hidden, and then set 2 pseudo elements with skew, one for each half
.test {
width: 400px;
height: 300px;
overflow: hidden;
position: relative;
}
.test:after, .test:before {
content: "";
position: absolute;
top: 0px;
width: 50%;
height: 100%;
}
.test:before {
left: 0px;
transform: skewY(15deg);
transform-origin: top left;
background: repeating-linear-gradient(-15deg, white 0px, lightblue 40px);
}
.test:after {
right: 0px;
transform: skewY(-15deg);
transform-origin: top right;
background: repeating-linear-gradient(15deg, white 0px, lightblue 40px);
}
<div class="test"></div>
I have the following css:
header {
background-color: #5A775A;
position: relative;
top: -25px;
width: 100%;
height: 10%;
color: white;
}
h1 {
position: relative;
left: 60px;
top: 20px;
}
html {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #000000 0%, #5A775A 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #000000 0%, #5A775A 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #000000 0%, #5A775A 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #000000), color-stop(1, #5A775A));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #000000 0%, #5A775A 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #000000 0%, #5A775A 100%);
}
Which is producing the following design:
As you can see the gradient is repeating. How do I make it so it does not repeat vertically, and it is just one long gradient across the entire page?
EDIT:
Trying to use
background-size: 100% 100%;
background-repeat: no-repeat;
Produces:
The problem with this is it does not span across the entire screen.
Simply use
background-size: 100% 100%;
background-attachment: fixed;
With background-repeat: no-repeat; add: background-size: cover;
How could one go about dynamically generating a shape like this in CSS3:
Ignore the borders, as the important aspects are:
- The gradient in the arrow body, and that the gradient lasts from the tip to the end of the arrow.
- The length of the square part will vary.
I tried the regular :after method of adding a triangle to the end of a div element, but I couldn’t get the gradient to span both the tip and the body properly.
Fiddle: http://jsfiddle.net/rtuY9/8/
You can try something like this - DEMO
div {
width: 50px;
height: 100px;
position: relative;
margin: 100px;
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 100%);
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 100%);
}
div:after {
z-index: -1;
content: "";
display: block;
position: absolute;
left: -125px;
top: -51px;
margin: 100px;
height: 100px;
width: 100px;
background: #c00;
-webkit-transform:rotate( -45deg );
-moz-transform:rotate( -45deg );
transform:rotate( -45deg );
background: -webkit-linear-gradient(45deg, #1e5799 0%, #2989d8 50%, #ffffff 50%, #ffffff 100%);
background: -moz-linear-gradient(45deg, #1e5799 0%, #2989d8 50%, #ffffff 50%, #ffffff 100%);
}