My CSS Style Guide/Techniques (Umbrella Website Background Effects): Benjamin-Newton Overview

Important Notice

I have a new domain set up called Cloudy.diamonds - Clarity in a Confusing World

I have officially dropped benjamin-newton.info, benjamin-newton.net, benjamin-newton.org, and benjamin-newton.us and they will no longer be mine nor redirect to any of my websites. I am making things simpler and cheaper for me and less confusing for when I deal with technical people. These will eventually be bought up by entirely different people and be used for any purpose like just for ads.

benjamin-newton.com, on the other hand, will remain mine for the forseeable future.

All of these techniques are purely HTML and CSS only. You can use these techniques freely, as long as you don't copy my general site designs. I got most of them or parts of them from other places as well.

Grass Effect

I got this from somewhere else but modified colors



body {

background-color: green;
background-size: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
                                  
background-image: 

linear-gradient(to right, rgba(255,255,255,.07) 50%, transparent 50%),
linear-gradient(to right, rgba(255,255,255,.13) 50%, transparent 50%),
linear-gradient(to right, transparent 50%, rgba(255,255,255,.17) 50%),
linear-gradient(to right, transparent 50%, rgba(255,255,255,.19) 50%);

}
   

Fire Effect

I got this from somewhere else but modified colors



body {

background-color: #cc3300;
background-size: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
                                  
background-image: 

linear-gradient(to right, rgba(255,255,255,.07) 50%, transparent 50%),
linear-gradient(to right, rgba(255,255,255,.13) 50%, transparent 50%),
linear-gradient(to right, transparent 50%, rgba(255,255,255,.17) 50%),
linear-gradient(to right, transparent 50%, rgba(255,255,255,.19) 50%);

}
   

Leaves Effect

I came up with this all by myself



#all {

background: rgb(120,206,0);

background: 

linear-gradient(to right, rgba(120,206,0,1) 0%,rgba(204,255,0,1) 10%,rgba(120,206,0,1) 20%,rgba(204,255,0,1) 30%,rgba(120,206,0,1) 40%,rgba(204,255,0,1) 50%,rgba(120,206,0,1) 60%,rgba(204,255,0,1) 70%,rgba(120,206,0,1) 80%,rgba(204,255,0,1) 90%,rgba(120,206,0,1) 99%); 

  }
  

Yellow and Blue Vertical Stripes

I came up with this all by myself



#all {

background: rgb(255,229,0);

background: 

linear-gradient(to right, rgba(255,229,0,1) 0%,rgba(255,229,0,1) 10%,rgba(66,148,255,1) 10%,rgba(66,148,255,1) 20%,rgba(255,229,0,1) 20%,rgba(255,229,0,1) 30%,rgba(66,148,255,1) 30%,rgba(66,148,255,1) 40%,rgba(255,229,0,1) 40%,rgba(255,229,0,1) 50%,rgba(66,148,255,1) 50%,rgba(66,148,255,1) 60%,rgba(255,229,0,1) 60%,rgba(255,229,0,1) 70%,rgba(66,148,255,1) 70%,rgba(66,148,255,1) 80%,rgba(255,229,0,1) 80%,rgba(255,229,0,1) 90%,rgba(66,148,255,1) 90%);

} 


Bright Sunshine with Misty Smokey Sky

I came up with this all by myself



#main {

background: linear-gradient(30deg, #ffe500 0%,#4294ff 0%,#ffe500 10%,#4294ff 20%,#ffe500 30%,#4294ff 30%,#ffe500 30%,#4294ff 40%,#ffe500 50%,#4294ff 50%,#ffe500 50%,#4294ff 60%,#ffe500 70%,#4294ff 70%,#ffe500 70%,#4294ff 80%,#ffe500 90%,#4294ff 90%,#ffe500 90%,#4294ff 100%);

} 


Hawaiian Colors Striped

I came up with this all by myself



#all {

background-color: #f1ff8c;
background-image: linear-gradient(to right, #f1ff8c 0%,#f1ff8c 10%,#00e5ff 10%,#00e5ff 20%,#ddd8c7 20%,#ddd8c7 30%,#f1ff8c 30%,#f1ff8c 40%,#00e5ff 40%,#00e5ff 50%,#ddd8c7 50%,#ddd8c7 60%,#f1ff8c 60%,#f1ff8c 70%,#00e5ff 70%,#00e5ff 80%,#ddd8c7 80%,#ddd8c7 90%,#f1ff8c 90%,#f1ff8c 100%);

} 


Hawaiian Colors Glow

I came up with this all by myself



#footer, #header {
  
background-image: linear-gradient(135deg, #f1ff8c 0%,#00e5ff 8%,#f1ff8c 10%,#ddd8c7 16%,#00e5ff 21%,#f1ff8c 26%,#ddd8c7 32%,#00e5ff 36%,#f1ff8c 40%,#ddd8c7 46%,#00e5ff 50%,#f1ff8c 56%,#ddd8c7 62%,#00e5ff 67%,#f1ff8c 70%,#ddd8c7 77%,#00e5ff 80%,#f1ff8c 87%,#ddd8c7 93%,#00e5ff 97%,#f1ff8c 100%); 
 
} 


Hot Dirty Metal

I came up with this all by myself



#all p, 
#all .poetry 

{

background: radial-gradient(ellipse at center, rgba(0,61,68,1) 15%,rgba(84,74,0,1) 60%,rgba(0,0,0,1) 100%);

color: #F1FF8C;

}
  
#all ul, 
#all ol 
  
{
  
background-color: transparent;
background-image: linear-gradient(to bottom, rgba(0,61,68,0.75) 0%,rgba(0,61,68,0.75) 35%,rgba(84,74,0,0.75) 65%,rgba(84,74,0,0.75) 100%);
color: #F1FF8C;

}

#all p a, 
#all li a, 
#all address a

{ 

background: linear-gradient(135deg, rgba(0,61,68,1) 0%,rgba(84,74,0,1) 100%); 
color: #F1FF8C;

}


Over Grass/Over Fire Effect for Dirt Shadow/Stain, Blur Over Leaves Effect, or Over Stripes Candy Effect

I came up with this all by myself


#main {
 
background-image: linear-gradient(to right, rgba(51,51,0,1) 0%,rgba(51,51,0,0) 50%,rgba(51,51,0,1) 100%); 
  
} 
  
#footer, #header {
   
background-image: linear-gradient(to right, rgba(204,204,153,1) 0%,rgba(204,204,153,0) 50%,rgba(204,204,153,1) 100%); 
  
} 
 

Bamboo Effect

I came up with this all by myself



h2, h3, h4, h5, h6 {

background:

linear-gradient(to 180deg, rgb(221,216,199) 1px, transparent 1px),
linear-gradient(to 270deg, rgb(221,216,199) 20px, transparent 20px),
linear-gradient(to 180deg, rgb(246,238,211) 1px, transparent 1px),
linear-gradient(to 270deg, white 10px, transparent 10px),
linear-gradient(to 270deg, white 10px, transparent 10px),
linear-gradient(to right, rgb(236,230,207) 25%, rgb(230,225,204) 25%, rgb(230,225,204) 50%, transparent 50%, transparent 75%, rgb(239,242,213) 75%, rgb(239,242,213));

background-color: rgb(217,213,197);
background-size: 80px 80px;

}
 

Golden Pages with Curled Corners

I came up with this all by myself



p, .poetry {

border-radius: 0em 6em 2.8em 6em / 6em 2em 5em 2.4em;
  
background-color: #ffcc00;
  
background-image: radial-gradient(ellipse at center, rgba(255,223,99,1) 0%,rgba(255,223,99,0.68) 65%,rgba(86,69,0,0.57) 86%,rgba(86,69,0,0.5) 100%); 
  
border-width: 1px;
border-style: solid;
border-color: black;
  
color: black;
text-shadow: 1px 1px 1px #ffcc66; 

}

p a {

color: black;
text-shadow: 1px 1px 1px #ffcc66;

}

.poetry {
  
border-radius: 0em 12em 5.6em 12em / 12em 4em 10em 4.8em;
  
padding-left: 2em;
padding-right: 2em;
padding-bottom: 5em;
padding-top: 5em;
  
}

    

Green Glow Background (impression of leaf)

I came up with this all by myself



p, .poetry {


border-radius: 0em 6em 2.8em 6em / 6em 2em 5em 2.4em;

background-color: #669966;

background-image: radial-gradient(ellipse at center, rgba(182,255,0,1) 0%,rgba(182,255,0,0.68) 65%,rgba(0,73,2,0.5) 100%); 
 
border-width: 1px;
border-style: solid;
border-color: green;

color: black;
text-shadow: 1px 1px 1px #99cc00; 

}

p a {

color: black;
text-shadow: 1px 1px 1px #99cc00;

}

.poetry {
  
border-radius: 0em 12em 5.6em 12em / 12em 4em 10em 4.8em;
  
padding-left: 2em;
padding-right: 2em;
padding-bottom: 5em;
padding-top: 5em;
  
}

  

Blue 3d Like Smooth Rolling/Polished Metal Pipes

I came up with this all by myself



#header p, #footer p {

background: linear-gradient(30deg, #b1c1c6 0%,#dae9f2 0%,#b1c1c6 10%,#dae9f2 20%,#b1c1c6 20%,#dae9f2 20%,#b1c1c6 30%,#dae9f2 40%,#b1c1c6 40%,#dae9f2 40%,#b1c1c6 50%,#dae9f2 60%,#b1c1c6 60%,#dae9f2 60%,#b1c1c6 70%,#dae9f2 80%,#b1c1c6 80%,#dae9f2 80%,#b1c1c6 90%,#dae9f2 100%,#dae9f2 100%,#b1c1c6 100%); 
color: black;
text-shadow: 1px 1px 1px #ccffff;

}

  

Blue 3d Like Smooth Rolling/Polished Metal Pipes

I came up with this all by myself



#header p, #footer p {

background: linear-gradient(30deg, #b1c1c6 0%,#dae9f2 0%,#b1c1c6 10%,#dae9f2 20%,#b1c1c6 20%,#dae9f2 20%,#b1c1c6 30%,#dae9f2 40%,#b1c1c6 40%,#dae9f2 40%,#b1c1c6 50%,#dae9f2 60%,#b1c1c6 60%,#dae9f2 60%,#b1c1c6 70%,#dae9f2 80%,#b1c1c6 80%,#dae9f2 80%,#b1c1c6 90%,#dae9f2 100%,#dae9f2 100%,#b1c1c6 100%); 
color: black;
text-shadow: 1px 1px 1px #ccffff;

}

  

Khaki 3d Like Smooth Rolling/Polished Metal Pipes

I came up with this all by myself



#header p, #footer p {

background: linear-gradient(30deg, #e5e3d7 0%,#e5e3d7 10%,#c9c9b5 10%,#e5e3d7 10%,#c9c9b5 20%,#e5e3d7 30%,#c9c9b5 30%,#e5e3d7 30%,#c9c9b5 40%,#e5e3d7 50%,#c9c9b5 50%,#e5e3d7 50%,#c9c9b5 60%,#e5e3d7 70%,#e5e3d7 70%,#c9c9b5 80%,#e5e3d7 80%,#c9c9b5 80%,#e5e3d7 90%,#c9c9b5 100%,#c9c9b5 100%,#e5e3d7 100%); 

text-shadow: 1px 1px 1px #cccc66;

}

  

Fresh Red Paint Effect with Irregular Corners

I came up with this all by myself



.notice {

border-radius: 2em 3em 1.4em 3em / 3em 1em 2.5em 1.2em;

border-width: .25em;
border-style: solid;
border-color: red;

background-color: rgb(204, 0, 0);
background-image: linear-gradient(to bottom, red, rgb(204, 0, 0));
    
color: white;
font-size: 18pt;

text-align: center;
line-height: 1em;

padding: 1em;
margin: 1em;
    
}
    

Benjamin-Newton.com by Ben Huot

All Material Copyright 1998-Present unless otherwise stated.

Jump to Top

For Automated Software Visitors

XML Sitemap