CSS, is it possible to achieve this without an image? - html

Question

I am making a website and on most websites it has a big image with massive text in it which says Welcome or something I have replicated the same thing but I was wondering is the image in the photo behind the OptimisePCs possible to achieve with plain CSS so no image, this is for performance reasons because people have to download the image to see it which takes time.

Answer 1

SVG
Here is an svg solution.
By setting the width to 100% on the svg element is scales with the page in the horizontal/x direction.
In other words this background is responsive.
Added the menu for fun.
body {
margin: 0;
}
.content {
width: 100%;
}
/* SVG background */
.svg-background {
width: 100%;
height: 100%;
}
.svg-background polygon:nth-child(1) {
fill: #005A50;
stroke: #005A50;
stroke-width: 0.1;
}
.svg-background polygon:nth-child(2) {
fill: #007367;
}
.svg-background polygon:nth-child(3) {
fill: #1C9F91;
stroke: #1C9F91;
stroke-width: 0.1;
}
.svg-background polygon:nth-child(4) {
fill: #3DAEA2;
}
/* NAVBAR Many for making it look better :D*/
.navigation {
background-color: #222;
}
.menu-bar {
display: block;
list-style: none;
margin: 0;
padding: 0;
height: 50px;
}
.menu-bar li {
display: inline-block;
color: white;
font-size: 20px;
//dding: 15px;
padding-right: 15px;
padding-left: 15px;
line-height: 2em;
height: 100%;
}
.menu-bar li:hover {
background-color: #72B1D7;
}
<nav class="navigation">
<ul class="menu-bar">
<li>OptimisePCs</li>
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
<div class="content">
<svg class="svg-background" viewBox="0 0 100 100">
<polygon points="0,0 10,0 0,20" />
<polygon points="10,0 0,20 0,100 50,100" />
<polygon points="10,0 50,100 70,100 80,0" />
<polygon points="80,0 70,100 100,100 100,0" />
</svg>
</div>

Answer 2

It seems like what you want is a background.
You can achieve this with multiple backgrounds and CSS linear-gradient values at various angles. You can use color stops which go from solid to transparent at the same spot to get the hard edges.
Here's an example:
header{
width: 100%;
height: 200px;
background: linear-gradient(60deg, #227766 25%, rgba(0,0,0,0) 25%),
linear-gradient(350deg, #40D2B3 20%, rgba(0,0,0,0) 20%),
linear-gradient(125deg, rgba(0,0,0,0) 70%, #39C1A5 70%),
linear-gradient(125deg, #2D9D87 45%, rgba(0,0,0,0) 45%),
linear-gradient(125deg, #35BEA2 70%, rgba(0,0,0,0) 70%);
}
<header></header>
As an added bonus, this is responsive out of the box. It will scale with the size of the container.
Additionally, you should set a solid background-color which will be the fallback for older browsers which lack support for gradients.

Answer 3

In this case using a svg might be more space efficient (and also scales to any resolution)
To use it in "pure CSS", you can inline the svg:
.selector { background: url('data:image/svg+xml;base64, ... svg code goes here ...'); }
Personally I use SCSS and the compass framework to make this easy:
.selector { background: inline-image("path/to/file.svg"); }
The drawback is that you have to take care not to inline it multiple times (or you replicate the code), if you need to do that, combine the respective classes instead:
.selector1, .selector2 { background: url('data:image/svg+xml;base64, ... svg code goes here ...'); }

Answer 4

image to css
using this site you can easily change image to css + !!
<style>
.pixels{
border-radius: 0;
display: inline-block;
width: 1px;
height: 1px;
box-shadow: bla~~
}
</style>
<div class="pixels"></div>