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%);
}
Related
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.
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>
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;
I'm trying to get the background image to lay on top of the gradient background, do I have to create another div to do this?
#inner_bg {
width: 846px;
height: 646px;
margin: -1px 0 0 0;
background: url(../simg/inner_bg.gif) no-repeat 20px 140px;
background: #031f34;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI5JSIgc3RvcC1jb2xvcj0iIzAzMWYzNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzAzNjY4ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iIzA1YjdkMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(left, #031f34 9%, #03668f 40%, #05b7d1 70%);
background: -webkit-gradient(linear, left top, right top, color-stop(9%,#031f34), color-stop(40%,#03668f), color-stop(70%,#05b7d1));
background: -webkit-linear-gradient(left, #031f34 9%,#03668f 40%,#05b7d1 70%);
background: -o-linear-gradient(left, #031f34 9%,#03668f 40%,#05b7d1 70%);
background: -ms-linear-gradient(left, #031f34 9%,#03668f 40%,#05b7d1 70%);
background: linear-gradient(to right, #031f34 9%,#03668f 40%,#05b7d1 70%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#031f34', endColorstr='#05b7d1',GradientType=1 );
float: left;
position: relative;
}
Yes you will need another element to work with (maybe a pseudo element like ::before), the backgrounds are replacing each other (when they are valid).
http://jsfiddle.net/fTpaz/2/
#inner_bg {
width: 846px;
height: 646px;
margin: -1px 0 0 0;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI5JSIgc3RvcC1jb2xvcj0iIzAzMWYzNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzAzNjY4ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iIzA1YjdkMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(left, #031f34 9%, #03668f 40%, #05b7d1 70%);
background: -webkit-gradient(linear, left top, right top, color-stop(9%,#031f34), color-stop(40%,#03668f), color-stop(70%,#05b7d1));
background: -webkit-linear-gradient(left, #031f34 9%,#03668f 40%,#05b7d1 70%);
background: -o-linear-gradient(left, #031f34 9%,#03668f 40%,#05b7d1 70%);
background: -ms-linear-gradient(left, #031f34 9%,#03668f 40%,#05b7d1 70%);
background: linear-gradient(to right, #031f34 9%,#03668f 40%,#05b7d1 70%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#031f34', endColorstr='#05b7d1',GradientType=1 );
float: left;
position: relative;
}
#inner_bg::before{
content: ' ';
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background: red;
opacity:0.5;
}
Create another divide. Position on top of the div with the gradient background. Add a z-index higher than that of the div with the gradient background.