I'm trying to achieve the following using CSS: (focus on the middle part of the photo)
My first attempt was something like:
<div style="background:blue;height:200px"></div>
<div style="background: linear-gradient(blue 50%, #ffffff 50%);>
<img...><img...><img...>
</div>
But then I have no way to create the colored line in the middle.
(Correct me if I'm wrong?)
I assume a better way would be to create a 50% height div, and then creating a floating div for the photos.
I use bootstrap which is not great for vertical align, so I tried using this FlexBox.
Any help would be very appreciated, thanks.
You can specify more than one background image (including gradients) for one element, e.g.
html, body {
height: 100%;
min-height: 350px;
margin: 0;
}
body {
background-color: #006;
background-image:
linear-gradient(to right, #f00, #ff0 25%, #0f0 50%, #0ff 75%, #00f),
linear-gradient(to top, #fff, #fff),
radial-gradient(circle closest-side at center,
rgba(255,255,255,1) 0%, rgba(255,255,255,1) 39%,
rgba(255,255,255,.7) 40%, rgba(255,255,255,.7) 59%,
rgba(255,255,255,.4) 60%, rgba(255,255,255,.4) 79%,
rgba(255,255,255,.1) 80%, rgba(255,255,255,.1) 99%,
rgba(255,255,255,.0) 100%),
radial-gradient(circle closest-side at center,
rgba(255,255,255,1) 0%, rgba(255,255,255,1) 39%,
rgba(255,255,255,.7) 40%, rgba(255,255,255,.7) 59%,
rgba(255,255,255,.4) 60%, rgba(255,255,255,.4) 79%,
rgba(255,255,255,.1) 80%, rgba(255,255,255,.1) 99%,
rgba(255,255,255,.0) 100%);
background-size: 100% 4px, 100% 50%, 62.5% auto, 62.5% auto;
background-repeat: no-repeat;
background-position: 50% 50%, 50% 100%, 0 50%, 100% 50%;
}
Related
I'm currently trying to recreate the following background design:
I have tried many variations from using linear-gradient to conic-gradients. I wasn't able to make this using CSS only.
Is it possible to create this background using CSS only? If yes, could someone point me to the right direction?
I would like to avoid using a background image here
You could use CSS background as several radial-gradients:
* { margin: 0; box-sizing: border-box; }
body {
font: 16px/1.4 sans-serif; letter-spacing: 0.12em;
min-height: 100vh;
background-image:
radial-gradient(circle at 20% 20%, hsla(100, 60%, 30%, 0.2) 0%, transparent 30%),
radial-gradient(circle at 40% 30%, hsla(150, 60%, 30%, 0.2) 0%, transparent 30%),
radial-gradient(circle at 60% 40%, hsla(250, 60%, 30%, 0.2) 0%, transparent 30%),
radial-gradient(circle at 80% 50%, hsla(340, 60%, 30%, 0.2) 0%, transparent 30%);
}
I'm trying to replicate the following gradient in CSS:
The best I've managed to do is:
background:
radial-gradient(ellipse at 20% 20%, #35234b 0%, transparent 70%),
radial-gradient(ellipse at 60% 20%, #2975bf 0%, transparent 70%),
radial-gradient(ellipse at 100% 20%, #3d54b1 0%, transparent 70%),
radial-gradient(ellipse at 100% 100%, #9f3c54 0%, transparent 70%),
radial-gradient(ellipse at 20% 100%, #362d6f 0%, transparent 70%);
background-blend-mode:screen;
which isn't that close:
Is it possible to get even closer to the gradient in the image? (It doesn't have to be CSS, Javascript is also valid, or even an external library. But pure CSS is preferred.)
body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
background:
radial-gradient(ellipse at 20% 20%, #35234b 0%, transparent 70%),
radial-gradient(ellipse at 60% 20%, #2975bf 0%, transparent 70%),
radial-gradient(ellipse at 100% 20%, #3d54b1 0%, transparent 70%),
radial-gradient(ellipse at 100% 100%, #9f3c54 0%, transparent 70%),
radial-gradient(ellipse at 20% 100%, #362d6f 0%, transparent 70%);
background-blend-mode:screen;
}
You were really close, start anticlockwise from the left bottom color,
and don't use mix-blend mode- to get rid of artifacts.
body {
font: 16px/1.4 sans-serif; letter-spacing: 0.12em;
min-height: 150vh;
padding: 2em;
margin: 0;
color: hsla(0, 0%, 100%, 0.85);
background-color: #170d24;
background-image:
radial-gradient(ellipse at 10% 90%, #3c2d83 0%, transparent 55%),
radial-gradient(ellipse at 90% 90%, #c33c65 0%, transparent 55%),
radial-gradient(ellipse at 90% 10%, #4a74dc 0%, transparent 55%),
radial-gradient(ellipse at 10% 10%, #35244f 0%, transparent 55%);
}
<b>ETHEREUM</b> 2.0
<h1>Your Gateway<br>into Blockchain</h1>
<p>Scroll down... and to the moon!</p>
Thanks to Temani Afif's suggestion I came up with the following. Still not exact, but way closer than before. If anyone wants to improve on this, it's very much welcome.
body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
background:linear-gradient(to right, #35234b 0% 10%,#2975bf 60% 70%,#3d54b1 80% 100%);
}
body::before{
content:""; display:block; height:100%;
background:linear-gradient(to right, #362d6f,#9f3c54);
-webkit-mask:linear-gradient(to bottom,transparent, #fff);
mask:linear-gradient(to bottom,transparent, #fff);
}
Can someone explain the following radial gradient syntax and perhaps provide its equivalent in CSS3 standard format that works across modern browsers?
-webkit-radial-gradient( 50% 50%, 200% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%)
-webkit-radial-gradient(50% 50%,
200% 50%,
hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%)
The radial-gradient provided above can be explained as follows:
The gradient is a radial gradient which means the colors change in circular/elliptical path along a defined radius.
The first parameter 50% 50% defines the position of the gradient image's center point. Here it is nothing but the center of the container element on which it is applied.
The second parameter 200% 50% defines the radius of the gradient in X-axis and Y-axis. Here the radius is 200% of the container's width in X-axis and 50% of the container's height in Y-axis.
The above setting along with the container's dimensions determine the shape of the gradient. If the container is 250px tall and 250px wide then the radius in X-axis would be 500px whereas the radius in Y-axis would be 125px and so the gradient would be elliptical. On the other hand if the container is 400px tall and 100px wide then the radius in X-axis would be 200px and the radius in Y-axis would also be 200px. So, the gradient's shape would be a circle.
The next set of parameters define the colors and where they should end/stop. The gradient would have hsla(0, 0%, 90%, 1) as color till 5%, from 5% to 30% the color would gradually move from hsla(0, 0%, 90%, 1) to hsla(0, 0%, 85%, 1) and then from 30% to 100% it would move from hsla(0, 0%, 85%, 1) to hsla(0, 0%, 60%, 1).
The equivalent standard syntax for this radial-gradient would be the following:
background: radial-gradient(ellipse 200% 50% at 50% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%);
The below snippet has the output of both of them for comparison.
div {
float: left;
height: 250px;
width: 250px;
border: 1px solid black;
margin-right: 4px;
}
.radial-grad {
background: -webkit-radial-gradient(50% 50%, 200% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%);
}
.radial-grad-standard {
background: radial-gradient(ellipse 200% 50% at 50% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%);
}
<div class='radial-grad'></div>
<div class='radial-grad-standard'></div>
PLAYGROUND HERE
Vertical grid can be achieved by:
HTML:
<div class="vertical-grid">
</div>
CSS:
.vertical-grid {
background-size: 20px 100%;
background-image: linear-gradient(to right,
black 0%,
transparent 5%,
transparent 100%);
}
Horizontal grid can be achieved by:
HTML:
<div class="horizontal-grid">
</div>
CSS:
.horizontal-grid {
background-size: 100% 10px;
background-image: linear-gradient(to bottom,
black 0%,
transparent 7%,
transparent 100%);
}
Is that possible to have both grids on the same element?
HTML:
<div class="vertical-grid horizontal-grid">
</div>
CSS:
[Enter your answer here]
PLAYGROUND HERE
Here is a possible solution using multiple backgrounds:
.vertical-grid.horizontal-grid {
background-size: 20px 100%, 100% 10px;
background-image: linear-gradient(to right,
black 0%,
transparent 5%,
transparent 100%),
linear-gradient(to bottom,
black 0%,
transparent 7%,
transparent 100%);
}
DEMO
I'm trying to overlay 2 different gradients, without using any image:
one repeatable gradient (6px by 6px) that makes an hash-like image.
one vertically transparent gradient all over the page (100% to 0%).
Here is the code I tried unsuccefully:
html{
background: -moz-linear-gradient(top, transparent 0%, #FFFFFF 100%);
background-repeat: no-repeat;
background-attachment: fixed;
}
body{
background: -moz-linear-gradient(45deg, #C6C6C6 0%, #C6C6C6 25%, #FFFFFF 25%, #FFFFFF 50%, #C6C6C6 50%, #C6C6C6 75%, #FFFFFF 75%, #FFFFFF 100%);
background-size: 6px 6px;
}
Any idea is this is possible ?