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

Network First Things

Fighting and Making Fun of Ambiguity

Network Summary

  • BEN-NEW's Network
  • BENjamin-NEWton Challenging Projects Network
  • by Ben Huot
  • Academic Non-Fiction E-Books & More Free Stuff

This is an Old School Informational website

General Book Statistics

  • 2,686 pages of unique text written over 20 years
  • average of 1 essay or poem written every week for over 20 years
  • average of 134 pages written every year for over 20 years

Quick Facts About the Author and Designer

I am all of the following

I am from and live in Eugene, Oregon (America)

Network Ownership

"Think Critically" with BENjamin-NEWton's Network © Ben Huot 1998-Present.

Website designs and all content not marked with a specific license copyrighted, from 1998-Present. I am the webmaster of this network, which includes a half dozen different, but related websites.

These websites all serve different purposes or audiences, but all share one thing in common: they are all created by me and are about me and my mission/ministry. I am the webmaster, so that I not only create everything on these websites, but also have designed and done all the technical things, to make this site work well, on a wide range of the most popular devices.

I have worked on all this for 20 years now, while understanding that I would never make any money off of it, as my niche is too small.

Greetings

Welcome, visting human, pet, toy, or automated software

My stuffed toy bear Fred says I don't have Schizophrenia, but he does

License

This website adheres to the following

No Money

Entire E-Book Downloads, in Multiple Popular Formats

  • No Cost
  • No Ads
  • No DRM

Privacy Respected

  • No Tracking
  • No Ads
  • No Personal Information

No Bugging You

  • No Selling
  • No App
  • No Newsletters

No Subtle Ads/Selling

  • No Memberships
  • No Sponsored Articles
  • No Donations Accepted

Nothing In Your Way

  • No Signups
  • No Password or Email Asked For
  • No User Agreements

No Tracking

  • No Cookies
  • No Analytics
  • No 3rd Party Code

No Permissions Asked For

  • No Geolocation
  • No Microphone or Camera Access
  • No Contact or Photos Access

None of the More Risky New Technologies

  • No AR or VR
  • No 3D
  • No 3rd Party Domains or CDNs

None of the Slower Things

  • No Background Videos
  • No Giant Photos
  • No Social Media Share Buttons

Jump to Top

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;
    
}
    

Jump to Top

Website Card Data

20 Years of Critical Thinking
Creativity in Philosophy, Not Theology

Website Description

I am a researcher, writer, and designer for consumer, citizen, and seeker advocacy. I can improve your life, by giving you better advice.

Jump to Top

For Automated Software Visitors

XML Sitemap