I use a bar with a rotated square as separator on my site.
The background-color is a gradient and fixed, so it creates a nice scroll effect, but when the rotated div reaches the view-port top, a strange gradient overlay appears.
Just look at it(you need to scroll slowly until the separator reaches the top of the view-port):
http://jsfiddle.net/nff2fjf7/4/
body {
height:800px;
}
.seperator {
margin:100px 0 0 0;
background-attachment: fixed;
background-color: rgba(0, 157, 197, 1);
background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
width:100%;
height:40px;
text-align: center;
}
.triangle {
width:40px;
height:40px;
display: inline-block;
margin: 10px 0;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background-attachment: fixed;
background-color: rgba(0, 157, 197, 1);
background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
}
<body>
<div class="seperator">
<div class="triangle"></div>
</div>
</body>
body {
height:800px;
}
.seperator {
margin:100px 0 0 0;
background-attachment: fixed;
background-color: rgba(0, 157, 197, 1);
background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
width:100%;
height:40px;
text-align: center;
}
.triangle {
width:40px;
height:40px;
display: inline-block;
margin: 10px 0;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background-attachment: fixed;
background-color: rgba(0, 157, 197, 1);
background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-repeat:no-repeat;
}
<body>
<div class="seperator">
<div class="triangle"></div>
</div>
</body>
setting background-repeat:no-repeat on .triangle seems to cure it at the top of the page, but the issue is still present at the bottom :/
Fiddle
I'm no pro with anything to do with web designs, and i have little idea on what each specific statement does, however, here's what I can tell you.
Your shapes DO NOT display with gradient. The colors you use for gradient are red/blue, and only blue is displayed
comment the following line from triangle and you'll notice your square you use for triangle actually gets a gradient! (blue to red gradient)
background-attachment: fixed;
Also, if you set background-attachment mode to scroll everywhere you'll notice the square you use for triangle gradient doesn't display as you want it to.
if you are fine with colors, you don't really need a gradient.
Edit: I've messed around with your code and if you want to keep the gradient (top to bottom) you can use this code which is your code with scroll background attachment and the triangle modified:
body {
height:800px;
}
.seperator {
margin:100px 0 0 0;
background-attachment: scroll;
background-color: rgba(0, 157, 197, 1);
background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
width:100%;
height:40px;
text-align: center;
}
.triangle{
width: 0;
height: 0;
display: inline-block;
margin: 40px 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid rgba(231, 52, 76, 1);
}
Related
I'm trying to put a gradient on a background image using this code
background: url('../img/newspaper.jpeg'),linear-gradient(to bottom right,#002f4b, #dc4225);
background-size: cover;
I'm getting the image but the gradient is not being applied
Add the gradient first and then add the image url, just like this:
background: linear-gradient(rgba(244, 67, 54, 0.95),
rgba(33, 150, 243, 0.75),
rgba(139, 195, 74, 0.75),
rgba(255, 87, 34, 0.95)),
url("http://placehold.it/200x200");
Or look at the snippet below:
.bg {
background: linear-gradient(
rgba(244, 67, 54, 0.45),
rgba(33, 150, 243, 0.25),
rgba(139, 195, 74, 0.25),
rgba(255, 87, 34, 0.45)),
url("http://placehold.it/200x200");
width: 200px;
height: 200px;
}
<div class="bg"></div>
Hope this helps!
div {
width: 350px;
height: 350px;
background: linear-gradient(to bottom right, rgba(0,47,75,.9), rgba(220,66,37,.9)), url(http://placehold.it/350x350);
background-size: cover;
}
<div></div>
do it in one line like below, I gave an example for that, see it
background-image: linear-gradient(to start-direction end-direction, color1, color2, url("imageUrl");
#hero {
height: 320px;
width: 100%;
background-image: linear-gradient(to right bottom, rgba(99, 102, 241, .9), rgba(219, 99, 139, .9)), url("https://i.picsum.photos/id/305/600/300.webp?hmac=QcFzy6dHM3Qs5MQwTjvnHEkSoTGAfg_VRgbH5g7pUQM");
background-size: cover;
}
<div id="hero"></div>
How would one create the following button using CSS?
The fact that it is skewed is not the issue. The part I'm not sure about is the diagonal split in color that's positioned from corner to corner. Im not sure how to define a gradient in such a way that it would work for all button dimensions responsively.
I have the following so far, for a skewed button without the diagonal difference in color.
button.btn {
color: white;
background-color: red;
padding: 10px 20px;
line-height: 1;
border: none;
transform: skewX(-25deg);
cursor: pointer;
}
button.btn span {
display: block;
transform: skewX(25deg);
}
<button class="btn" ><span>View Demo</span></button>
But I'm sure a lot of that will all have to change.
Here is a gradient solution that will work with any size:
button.btn {
color: white;
background:linear-gradient(to bottom right, #e80027 49%,#d20024 50%);
padding: 10px 20px;
line-height: 1;
border: none;
transform: skewX(-25deg);
cursor: pointer;
}
button.btn span {
display: block;
transform: skewX(25deg);
}
<button class="btn" ><span>View Demo</span></button>
<button class="btn" ><span>View Demo Demoooo</span></button>
<button class="btn" ><span>View </span></button>
Use Gradient CSS generator to get any sort of gradient backgrounds..
button.btn {
color: white;
background: rgba(248, 80, 50, 1);
background: -moz-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(248, 80, 50, 1)), color-stop(50%, rgba(241, 111, 92, 1)), color-stop(51%, rgba(246, 41, 12, 1)), color-stop(71%, rgba(240, 47, 23, 1)), color-stop(100%, rgba(231, 56, 39, 1)));
background: -webkit-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
background: -o-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
background: -ms-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
background: linear-gradient(135deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827', GradientType=1);
padding: 10px 20px;
line-height: 1;
border: none;
transform: skewX(-25deg);
cursor: pointer;
}
button.btn span {
display: block;
transform: skewX(25deg);
}
<button class="btn"><span>View Demo</span></button>
Try this:
.btn{
background-color: #34ADFF;
background-image: -webkit-linear-gradient(-68deg, #e80027 50%, #d20024 50%);
border:0px;
padding:20px 25px;
font-size:17px;
-webkit-transform:skew(-30deg);
-moz-transform:skew(-30deg);
-o-transform:skew(-30deg);
transform:skew(-30deg);
color:#fff;
margin-left:20px;
}
<button class="btn" ><span>View Demo</span></button>
button.btn {
color: white;
background-color: red;
padding: 10px 20px;
line-height: 1;
border: none;
transform: skewX(-25deg);
cursor: pointer;
background: linear-gradient(165deg, rgba(245, 80, 50, 1) 0%, rgba(245, 111, 92, 1) 50%, rgba(230, 41, 12, 1) 51%, rgba(230, 47, 23, 1) 71%, rgba(230, 56, 39, 1) 100%);
}
button.btn span {
display: block;
transform: skewX(25deg);
}
<button class="btn" ><span>View Demo</span></button>
І use html2canvas for save div as image.
Сan i save div with CSS transform: perspective?
I mean something like this:
#div2 {
background: linear-gradient(to right, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
width: 60px;
height: 90px;
transform: perspective(200px) rotateY(45deg);
}
or
#div2 {
background: linear-gradient(to right, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
width: 60px;
height: 90px;
transform: matrix3d(1, 0, 0, -0.008, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0.23, 1);
}
This question already has answers here:
Make CSS3 triangle with linear gradient
(5 answers)
Closed 8 years ago.
How is it possible to make a CSS arrow as a gradient instead os a solid colour?
Here is my CSS"
.breadcrumbDivider .arrow-right {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid gold;
position: relative;
margin-left: 360px;
}
I tried using the CSS gradient background image gradient but it takes the border parameter but unsure how to overcome this?
Here is the gradient I am trying to use...
background-color: #c9bc9e;
background-image: -webkit-gradient(linear, left top, left bottom, from(#c9bc9e), to(#a89464));
background-image: -webkit-linear-gradient(top, #c9bc9e, #a89464);
background-image: -moz-linear-gradient(top, #c9bc9e, #a89464);
background-image: -ms-linear-gradient(top, #c9bc9e, #a89464);
background-image: -o-linear-gradient(top, #c9bc9e, #a89464);
background-image: linear-gradient(top, #c9bc9e,#a89464);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#c9bc9e', endColorStr='#a89464');
I've made this by 'cutting out' the arrow from a square div, instead of 'generating' an arrow. It even has a hover effect:
.arrow {
height: 200px;
width: 300px;
background: rgb(169, 3, 41);
background: -moz-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(169, 3, 41, 1)), color-stop(44%, rgba(143, 2, 34, 1)), color-stop(100%, rgba(109, 0, 25, 1)));
background: -webkit-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -o-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -ms-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: linear-gradient(to bottom, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a90329', endColorstr='#6d0019', GradientType=0);
position: relative;
overflow: hidden;
transition: all 0.8s;
}
.arrow:before {
content: "";
position: absolute;
top: 0;
width: 70%;
height: calc(100% - 80px);
border-top: 40px solid white;
border-bottom: 40px solid white;
z-index: 10;
}
.arrow:after {
content: "";
position: absolute;
right: 0;
border-top: 100px solid white;
border-bottom: 100px solid white;
border-left: 100px solid transparent;
z-index: 10;
}
.perc {
position: absolute;
top: 0;
width: 0%;
height: 100%;
background: rgb(30, 87, 153);
background: -moz-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(30, 87, 153, 1)), color-stop(50%, rgba(41, 137, 216, 1)), color-stop(51%, rgba(32, 124, 202, 1)), color-stop(100%, rgba(125, 185, 232, 1)));
background: -webkit-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
background: -o-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
background: -ms-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
background: linear-gradient(to bottom, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
z-index: 5;
transition: all 0.8s;
}
.arrow:hover .perc {
width: 100%;
}
<div class="arrow">
<div class="perc"></div>
</div>
Note
Originally designed for a progress bar, but hover effect can be removed if necessary.
Is suitable for a block coloured background only
So, if I cut the 'fancy stuff' and show you how it works:
Hover the one below to see the magic:
.arrow {
height: 200px;
width: 300px;
background: rgb(169, 3, 41);
background: -moz-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(169, 3, 41, 1)), color-stop(44%, rgba(143, 2, 34, 1)), color-stop(100%, rgba(109, 0, 25, 1)));
background: -webkit-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -o-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -ms-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: linear-gradient(to bottom, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a90329', endColorstr='#6d0019', GradientType=0);
position: relative;
overflow: hidden;
transition: all 0.8s;
}
.arrow:before {
content: "";
position: absolute;
top: 0;
width: 100%;
height: calc(100% - 80px);
border-top: 40px solid white;
border-bottom: 40px solid white;
z-index: 10;
}
.arrow:after {
content: "";
position: absolute;
right: 0px;
border-top: 100px solid white;
border-bottom: 100px solid white;
border-left: 100px solid transparent;
z-index: 10;
}
.arrow:hover:before {
border-top: 40px solid tomato;
border-bottom: 40px solid tomato;
}
.arrow:hover:after {
border-top: 100px solid yellow;
border-bottom: 100px solid blue;
}
<div class="arrow"></div>
Please help me how I can make div using css like below image path.
Here is my code that is so far...
http://jsfiddle.net/L8FfE/
<table class="screenheader" cellspacing="0" cellpadding="0" width="100%" style="padding-top: 5px;">
<tr style="font-family: Calibri, Arial, Sans-Serif; font-size: 40pt; font-weight: bold;
color: #fff; background: repeating-linear-gradient(180deg, #23538A , #A7CFDF 5px, #23538A 5px, #A7CFDF 10px);">
<td width="100%" style="padding-bottom: 5px;">
<div id="meetingname" width="100%" style="padding-left: 20px; text-align: left;">
HI Test
</div>
</td>
<td width="100%" style="padding-left: 20px; text-align: left;">
</td>
</tr>
</table>
Is this what you mean (beside the colors, I can't get those right)?
http://jsfiddle.net/L8FfE/2/
Html:
<div id="background">
<div id="overlay"></div>
</div>
CSS:
div#background {
width: 100%;
height: 50px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#053F63), to(#105C97));
background: -webkit-linear-gradient(#053F63 0%, #105C97 100%);
background: -moz-linear-gradient(#053F63 0%, #105C97 100%);
background: -o-linear-gradient(#053F63 0%, #105C97 100%);
background: linear-gradient(#053F63 0%, #105C97 100%);
}
div#overlay {
font-family: Calibri, Arial, Sans-Serif;
font-size: 40pt;
font-weight: bold;
color: #fff;
width: 100%;
height: 50px;
background: -moz-repeating-linear-gradient(rgba(35, 83, 138, 1) 5px, rgba(167, 207, 223, 0) 5px, rgba(35, 83, 138, 1) 5px, rgba(167, 207, 223, 0) 10px);
background: -webkit-repeating-linear-gradient(rgba(35, 83, 138, 1) 5px, rgba(167, 207, 223, 0) 5px, rgba(35, 83, 138, 1) 5px, rgba(167, 207, 223, 0) 10px);
background: repeating-linear-gradient(rgba(35, 83, 138, 1) 5px, rgba(167, 207, 223, 0) 5px, rgba(35, 83, 138, 1) 5px, rgba(167, 207, 223, 0) 10px);
-webkit-mask-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0)), color-stop(0.4, rgba(0, 0, 0, 0)), color-stop(0.6, rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 1)));
-webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 100%);
mask-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 100%);
mask-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 100%);
mask-image: linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 100%);
}
That's not quite right. You'll need another div to achieve both the left gradient and vertical gradient. I've written this for Chrome only, and you'll also have to change the #colors to rgba, but you can see in the JS fiddle here it looks much more like the jpeg.
HTML
<div class="rightGradient">
<div class="horizontal stripes"></div>
<div class="topGradient"></div>
</div>
CSS
.stripes {
position: relative;
height: 100px;
width: 375px;
-webkit-background-size: 100% 6px;
}
.horizontal {
background-color: transparent;
background-image: -webkit-linear-gradient(top, #0f5b97 50%, transparent 50%, transparent);
}
.rightGradient {
position: absolute;
height: 100px;
width: 375px;
background-image: -webkit-linear-gradient(right, #074166 20%, #0f5b97 70%);
}
.topGradient {
position: absolute;
top: 0px;
height: 100px;
width: 375px;
background-color: transparent;
background-image: -webkit-linear-gradient(286deg , #074166 -20%, transparent 70%);
}