How can I generate a gradient like this image?
This is the closest I've got so far, but it is not yet the same:
.background {
position: relative;
background-image: radial-gradient(circle at top right, #ff9bb4, #ff507b, #ff7a2d, #f55a00 ) ;
width: 100%;
height: 300px;
-webkit-transform: skewY(-1.5deg);
-moz-transform: skewY(-1.5deg);
-ms-transform: skewY(-1.5deg);
-o-transform: skewY(-1.5deg);
transform: skewY(-1.5deg);
}
<div class="background"></div>
Maybe you could go at this by layering semi transparent gradients:
CSS
.grad {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
}
.outer {
background: linear-gradient(45deg, rgba(255,83,21,0.21) 0%,rgba(254,55,112,0.87) 100%);
}
.inner {
background: linear-gradient(45deg, rgba(255,83,21,0.5) 0%,rgba(254,55,112,0.87) 100%);
}
HTML
<div class='outer grad'>
<div class='inner grad'></div>
</div>
If you need it, the rotation in the image above can be achieved with transform: rotate(10deg) rather than the skew.
To create the gradient, this could be helpful for you:
Gradient generator
If you would like to have the border as well, I would set the gradient as the background of a div and set the border of the div the way you want.
Created a pen: https://codepen.io/Raphael_Bucher/pen/wyQRYr
HTML
<div class="gradient-wrapper">
<div>
CSS
.gradient-wrapper {
height: 250px;
width: 500px;
margin-top: 50px;
background-image: linear-gradient(to right bottom, #fa9049, #ff8153,
#ff7260, #ff656e, #fe597e);
transform: skewY(-4deg);
-moz-transform: skewY(-4deg);
-webkit-transform: skewY(-4deg);
}
Related
I was asked with making such a background on a responsive site. I thought about preparing two divs using gradient, but it is highly problematic. Is it even possible to do it? Using this as a background-image is cumbersome for higher and lower resolutions.
Any ideas?
some clip-path and pseudo element can approximate this:
.box {
width: 300px;
aspect-ratio: .8;
position: relative;
z-index: 0;
}
.box:before,
.box:after {
content: "";
position: absolute;
z-index: -1;
inset: 0;
}
.box:before {
clip-path: polygon(0 0, 100% 50%, 10% 100%,0 100%);
background: linear-gradient(40deg, #3185c5, #0ea1b1);
}
.box:after {
clip-path: polygon(100% 30%, 100% 50%, 10% 100%,0% 100%, 0 80%);
background: linear-gradient(40deg, #3185c5, #f55778);
}
<div class="box"></div>
I'm working on improving a Keyframe Animation's smoothness. It seems to work perfectly on desktop but is very laggy and not smooth on mobile. How would I need to change my code to make it smooth?
See JSBin: https://jsbin.com/hecifu/6/edit?html,css,js,output
#keyframes overlayAnimation {
0% {
width: 100vw;
height: 100vh;
transform: translate3d(0px, 0px, 0);
background: transparent;
}
25%{
width: 10px;
height: 200px;
transform: translate3d(calc(50vw - 5px), calc(50vh - 100px), 0);
}
50%{
width: 10px;
height: 200px;
transform: translate3d(calc(50vw - 5px), calc(50vh - 100px), 0) rotate(90deg);
}
50.1%{
width: 200px;
height: 10px;
transform: translate3d(calc(50vw - 100px), calc(50vh - 5px), 0) rotate(0deg);
}
75%{
width: 200px;
height: 100vh;
transform: translate3d(calc(50vw - 100px), 0px, 0) rotate(0deg);
}
100%{
width: 100vw;
height: 100vh;
transform: translate3d(0px, 0px, 0) rotate(0deg);
visibility:hidden;
}
There are a few issues that could be causing the slow-down. The main suspect though: remove the box-shadow.
To elaborate
CSS can utilise hardware acceleration for animations... but only for transform and opacity animations - all other animations are run on the CPU, which is less optimised: https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/
Your animation changes the width and height attributes of an element - what you may want to consider is changing it so that the size is altered via a transform: scale(x, y) change instead: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale
But possibly the biggest drain in your animation is actually the box-shadow - you have a box-shadow set that is 2000px in all directions - that is going to be quite a draw on the smartphone, which has to thus calculate (even if it doesn't have to render all of) a box that is at least 4000px larger than the width and height of the device. Box-shadows can be costly to render at the best of times. These documented cases are for scrolling performance, but I should imagine that animating a box-shadow has a similar performance impact.
What might be better here is to try and use a clip-path to clip the content, rather than cover it with a box-shadow. That would work something like this (based on your JSBin):
var $pages = $(".page");
var $overlay = $("#overlay");
$('.page a').on("click", function(){
if($overlay.hasClass("overlayAnimation")) return;
$pages.fadeToggle(4000);
$overlay.addClass("overlayAnimation").on("animationend", function(){
$(this).removeClass("overlayAnimation");
});
});
*{margin:0; box-sizing:border-box;}
html, body{height:100%;}
h1{
font: 60px/2 Helvetica;
color: #fff;
font-weight: normal;
text-align: center;
}
.page{
position: absolute;
overflow: hidden;
width: 90vw;
height: 90vh;
top: 5vh;
left: 5vw;
color: white;
}
#page1{
background: #008562;
}
#page2{
display: none;
background: #ff8600;
}
.page a{
font-family: Helvetica;
color: #fff;
border: 2px solid #fff;
padding: 10px 15px;
display: block;
text-align: center;
margin: 0 auto;
width: 20%;
text-decoration: none;
}
#overlay{
position: fixed;
z-index:999;
width: 100vw;
height: 100vh;
}
#overlay.overlayAnimation{
animation: overlayAnimation 4s forwards;
}
#keyframes overlayAnimation {
0% {
clip-path: inset(0 0);
background: transparent;
}
25%{
clip-path: inset(calc(50% - 100px) calc(50% - 5px));
transform: rotate(0deg);
}
50%{
clip-path: inset(calc(50% - 100px) calc(50% - 5px));
transform: rotate(90deg);
}
50.1%{
clip-path: inset(calc(50% - 5px) calc(50% - 100px));
transform: rotate(0deg);
}
75%{
clip-path: inset(0 calc(50% - 100px));
}
100%{
clip-path: inset(0 0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="overlay">
<div class="page" id="page1">
<h1>PAGE 1</h1>
Click here
</div>
<div class="page" id="page2">
<h1>PAGE 2</h1>
Click here
</div>
</div>
https://jsbin.com/pojewujoko/edit?html,css,js,output
Maybe give that a go, see if it is any more performant? It's certainly more elegant IMO, and makes more sense to someone viewing the code directly.
I am having a strange styling issue with two divs I am working on in css.
The requirements of these divs is that they must be skewed and translated (which I'm doing through a transform), they must have a gradient on the backgrounds, and the backgrounds must have parallax scrolling.
The issue is that this causes part of the background image to not be affected by the gradient.
The current code I am using on these divs is as follows:
HTML:
<div class="diag gradient-bg2">
<div class='diag-wrapper banner3'>
<h1><?=$banner3Header1?></h1>
<p><?=$banner3Content1?></p>
</div>
</div>
<div class="diag gradient-bg3">
<div class='diag-wrapper banner4'>
<h1><?=$banner4Header1?></h1>
<p><?=$banner4Content1?></p>
<a class="btn" id="get-started-btn">ASK AN EXPERT</a>
</div>
</div>
CSS:
.diag {
padding: 5% 20px;
-webkit-transform: skewY(-3deg) translateY(-5vw);
-moz-transform: skewY(-3deg) translateY(-5vw);
-ms-transform: skewY(-3deg) translateY(-5vw);
-o-transform: skewY(-3deg) translateY(-5vw);
transform: skewY(-3deg) translateY(-5vw) ;
}
/*this unskews the content in a skewed div. It should be the opposite of above values**/
.diag > .diag-wrapper {
padding-top:5vh;
-webkit-transform: skewY(3deg);
-moz-transform: skewY(3deg);
-ms-transform: skewY(3deg);
-o-transform: skewY(3deg);
transform: skewY(3deg);
}
.gradient-bg2{
margin:0;
background: linear-gradient(0deg,rgba(255, 255, 255, 0.97),rgba(255, 255, 255, 0.7)), url("../img/mri.png") 50%;
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.gradient-bg3 {
margin:0;
background: linear-gradient(to right,rgba(11, 179, 199, 1),rgba(154, 202, 73, 0.7)), url("../img/mri2.png");
height: 100%;
background-attachment: fixed;
background-position: right;
background-repeat: no-repeat;
background-size:auto 100%;
}
.banner3{
text-align: center;
padding: 10vh 20vw 10vh 20vw;
}
.banner4{
color:white;
padding-top:10vh;
padding-bottom:10vh;
padding-left:16vw;
padding-right:57vw;
}
Something to note is that aside from the gradient error, these divs are functioning exactly as required. Here is a screenshot of what the issue looks like:
First Div
Second Div
Does anybody have any idea what could be causing this issue, and how this issue could be solved?
I am trying to set my HTML background in a way that it looks like it consists of two triangles but I cannot seem to get it to fully fit the page. How would I accomplish that and additionally be able to set a custom color for both?
Here is the code I am working with:
#container {
position: relative;
height: 800px;
width: 800px;
overflow: hidden;
background: grey;
margin-left: -0.4%;
margin-top: -0.4%;
}
#container:before {
content: '';
position: absolute;
left: 28%;
top: 28%;
width: 1200px;
height: 1200px;
background-color: rgb(255, 255, 255); /* fallback */
background-color: rgba(255, 255, 255, 0.5);
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
<div id="container"></div>
I tried changing all the height and width to 100vh and 100vw but that did not seem to help and there is no option to get the colors changed. Any help would be appreciated!
You can do it with the background: linear-gradient():
html, body {margin: 0; width: 100vw; height: 100vh}
body {
background: -webkit-gradient(linear, left top, right bottom, color-stop(50%, Salmon), color-stop(50%, Khaki));
background: -webkit-linear-gradient(top left, Salmon 50%, Khaki 50%);
background: -o-linear-gradient(top left, Salmon 50%, Khaki 50%);
background: linear-gradient(to bottom right, Salmon 50%, Khaki 50%);
}
http://jsfiddle.net/Liamm12/kkt1kd34/
I hope this what are you looking to do
I just set up the body height:100%; and Width:100%; the page will take the full screen
We should add min-height: 100% to the container it will helps the body to be full screen
And finally I just added padding-bottom to container:after it will makes the design as triangles
html, body {
height: 100%;
width:100%;
margin: 0;
}
#container {
position: relative;
min-height: 100%;
overflow: hidden;
background-color: #645384;
}
#container:after {
content: '';
position: absolute;
padding-bottom: 141.42136%;
left: 30%;
width: 100%;
background-color: #f37638;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<div id="container"></div>
</body>
</html>
In order to answer this question, I have used multiple techniques:
Create the aspect ratio box: This is necessary for second steps (since I need a square for this to work.
For more information, you can look through this: Aspect Ratio Boxed
I have used CSS border triangle in order to provide what you are requesting. Look for more detail here: CSS Triangle
So what I have done is, creating a square box, setting the border to make the arrow. I have also made the jsfiddle for you to look through.
https://jsfiddle.net/vqmjyjhw/
I have also add css variable on top to help you modify the box fast if you need to:
:root {
--width: 100%;
--halfWidth: 242px;
--topColor: red;
--bottomColor: blue;
}
With width variable, you can use %. But in order for the trick to work, halfWidth need to be in px. You can use some extra javascript to calculate exactly what is the width of your container to set halfWidth properly.
Currently working on a web design project for a client where I designed a multi-layered diagonal background. I solved a single diagonal with;
background-color: #dbebde;
background-image: -webkit-linear-gradient(120deg, #dbebde 50%, #f8f8f8 45%);
min-height: 400px;
However, as seen in the image below, I need to add a smaller diagonal on the left side.
Does anyone have an idea on how to solve this specific issue?
You can use a single HTML element, let's say a <div>, and use pseudo-elements, particularly ::before and ::after, to create those shapes, without writing additional HTML elements.
You would draw the red one first:
body {
margin: 0;
}
.fullBox {
position: relative;
height: 100vh;
}
.diagonalBox {
background: #FFF;
overflow: hidden;
}
.diagonalBox::before,
.diagonalBox::after {
content: '';
position: absolute;
width: 200%;
height: 200%;
left: 0;
}
.diagonalBox::before {
background: #D00;
top: 10%;
transform: rotate(30deg);
transform-origin: top left;
}
<div class="fullBox diagonalBox"></div>
And then add the light mint green one on top of that:
body {
margin: 0;
}
.fullBox {
position: relative;
height: 100vh;
}
.diagonalBox {
background: #FFF;
overflow: hidden;
}
.diagonalBox::before,
.diagonalBox::after {
content: '';
position: absolute;
width: 200%;
height: 200%;
left: 0;
}
.diagonalBox::before {
background: #D00;
top: 10%;
transform: rotate(30deg);
transform-origin: top left;
}
.diagonalBox::after {
background: #DFD;
top: 100%;
transform: rotate(-30deg);
transform-origin: bottom left;
}
<div class="fullBox diagonalBox"></div>
Keep in mind that your may need to adjust the dimensions and positions of the pseudo-elements.
I suggest you using 2 DIVs and give one of them a gradient with transparent color.
HTML :
<div class="outer">
<div class="inner"></div>
</div>
CSS:
.outer,.inner{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
}
.outer {
background-color: #dbebde;
background-image: -webkit-linear-gradient(50deg, red 70%, #f8f8f8 65%);
background-image: -moz-linear-gradient(50deg, red 70%, #f8f8f8 65%);
background-image: -o-linear-gradient(50deg, red 70%, #f8f8f8 65%);
background-image: -ms-linear-gradient(50deg, red 70%, #f8f8f8 65%);
}
.inner{
background-color: transparent;
background-image: -webkit-linear-gradient(120deg, #dbebde 60%, transparent 55%);
background-image: -moz-linear-gradient(120deg, #dbebde 60%, transparent 55%);
background-image: -o-linear-gradient(120deg, #dbebde 60%, transparent 55%);
background-image: -ms-linear-gradient(120deg, #dbebde 60%, transparent 55%);
}
You can see it in action:
https://codepen.io/FaridNaderi/pen/LLBVqw
Hope at least it helps you.