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

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.

enter image description here

i believe it is possible with some weird mathematical functions — argentum47, Jun 06 '15 at 12:26
Is there a reason other than performance that it has to be in css? You could try an inline svg. Unless your css is also inline, your visitors will have to download the styles first to see them too. — Phil, Jun 06 '15 at 12:29
1) Yes, it is definitely possible with pure css. Google e.g. "css chapes". 2) Such a simple image would not even be very big really. It's not the image size alone that makes it a large file. It's the complexity. If people can easily get away with full page backgrounds that are actual photographs, you can surely get away with such a simple image of only like 5 colors and large areas. But, it's definitely quite easy to achieve with css or an svg. — Roope, Jun 06 '15 at 12:35
You could use one of the approaches mentioned in [this thread](http://stackoverflow.com/questions/30317427/three-colors-angled-background-color/30317703#30317703). They are not the same but similar. — Harry, Jun 06 '15 at 13:21
This is a simple use case for CSS linear gradients stacked as multiple background images on the same element. — Razvan Caliman, Jun 09 '15 at 14:39

score 2 · Answer 1 · answered Jun 08 '15 at 09:05

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>

score 2 · Answer 2 · answered Jun 09 '15 at 14:33

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.

score 1 · Answer 3 · answered Jun 06 '15 at 13:54

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 ...'); }

score 0 · Answer 4 · answered Jun 06 '15 at 12:36

0

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>

answered Jun 06 '15 at 12:36

Juno Im

77
1
8

1

I think "any" image gives the wrong impression, I'm running this code and it's very, very slow and clogging up my browser. This will probably work well for SMALL images, or non-complex images. Just saying – Martin Jun 06 '15 at 13:07

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

4 Answers4

SVG