My CSS Style Guide/Techniques (Minor Site/Section Background Effects): Benjamin-Newton Overview

Areas of My Life and Website

Caption

faux coat of arms representing myself as Christian, disabled veteran, book writer, and web designer

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 7 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.

School Experiences Website

I got this from somewhere else and modified it slightly

Lined/Ruled Notebook Paper Effect with Yellow Tint


body {

background-color: white;
background-image: repeating-linear-gradient(0deg, white, white 20px, blue 21px); 
background-size: 100% 21px; 
 
}  

#footer, #header {

background-color: rgba(255,255,153,.4);
background: linear-gradient(to bottom, rgba(255,255,153,1) 0%,rgba(255,255,153,0) 50%,rgba(255,255,153,1) 100%);

}


Yellow Pencils Background

I came up with this all by myself



#content {

background: #ce9102;

background: linear-gradient(to right, #ce9102 0%,#f9df6b 5%,#f9df6b 10%,#ce9102 15%,#f9df6b 20%,#f9df6b 25%,#ce9102 30%,#f9df6b 35%,#f9df6b 40%,#ce9102 45%,#f9df6b 50%,#f9df6b 55%,#ce9102 60%,#f9df6b 65%,#f9df6b 70%,#ce9102 75%,#f9df6b 80%,#f9df6b 85%,#ce9102 90%,#f9df6b 95%);

}


Colored Pencils Background

I came up with this all by myself



#footer, #header {

background: #9e0002;

background: linear-gradient(to right, #9e0002 1%,#ff0043 5%,#ff0043 10%,#9e0002 15%,#ff7f00 20%,#ff7f00 25%,#995e01 30%,#89c900 35%,#89c900 40%,#426d01 45%,#00b3ba 50%,#00b3ba 55%,#003863 60%,#0062ed 65%,#0062ed 70%,#000e93 75%,#b26bff 80%,#b26bff 85%,#5e0063 90%,#ff59fc 95%);

}


Resume Website Section

Sheet of Paper Background Effect

I got this from somewhere else



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Prism</title>
</head>
<body>

<div class="page_container">
     <div class="jumpto-block shadow-bottom"></div>

      <div class="jumpto-block shadow-bottom"></div>

      <div class="jumpto-block shadow-bottom"></div>

      <div class="jumpto-block shadow-bottom"></div>    
</div>

</body>
</html>




.jumpto-block {

background: #FFFFFF;
background: linear-gradient(0deg, rgba(204,204,204,0.5) 0%, rgba(255,255,255,0.25) 25%, rgba(255,255,255,0.25) 75%, rgba(204,204,204,0.5) 100%);
border: 1px solid #666666;
border-radius: none;
box-shadow: 0 0 1em #999999;
margin: 2.5% auto;
padding: 2.5%;
position: relative;
width: 80%;

}

.jumpto-block:before, .jumpto-block:after {

background: none;
bottom: 2.4em;
box-shadow: 0 2em 2.4em #999999;
content: "";
height: 2em;
left: 2.4em;
position: absolute;
width: 40%;
z-index: -1;
transform: skew(-4deg) rotate(-4deg);

}

.jumpto-block:after {

transform: skew(4deg) rotate(4deg);
left: auto;
right: 2.4em;

}

.jumpto-block.shadow-left {

background: linear-gradient(0deg, #F5F5F5 0%, #FFF 50%) !important;
       
}

.jumpto-block.shadow-right {
       
background: linear-gradient(0deg, #FFF 50%, #F5F5F5 100%) !important;

}

.shadow-bottom:before, .shadow-bottom:after {

top: auto;
bottom: 2.4em;
box-shadow: 0 2em 2.4em #999999;

}

.shadow-left:after {

display: none;
       
}

.shadow-right:before {

display: none;
       
}

.shadow-top-bottom.shadow-left:after {

display: block;
bottom: auto;
top: 15px;
right: auto;
left: 12px;
box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);

}

.shadow-top-bottom.shadow-right:before {

display: block;
bottom: auto;
top: 15px;
right: 12px;
left: auto;
box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);

}

Silk Cushion Effect: Orange Pastel Version

I got this from somewhere else but changed the colors (which was a lot of work)



#content {

background-color: rgb(255,218,186);

background-image: 

radial-gradient(ellipse at center, rgba(255,228,196,0) 4%,rgba(245,255,250,0) 9%),
radial-gradient(ellipse at center, rgba(255,228,196,1) 4%,rgba(245,255,250,1) 8%,rgba(245,255,250,0) 10%),
radial-gradient(ellipse at center, rgba(255,228,196,0) 4%,rgba(245,255,250,0) 9%),
radial-gradient(ellipse at center, rgba(255,228,196,0) 4%,rgba(245,255,250,0) 9%),
radial-gradient(ellipse at center, rgba(245,255,250,1) 35%,rgba(245,255,250,0) 60%),
radial-gradient(ellipse at center, rgba(245,255,250,1) 35%,rgba(245,255,250,0) 60%),
radial-gradient(rgba(250,235,215,1), rgba(255,255,255,0)),
radial-gradient(rgba(250,235,215,1), rgba(255,255,255,0)),
linear-gradient(45deg, rgba(245,255,250,0) 49%,rgba(255,235,205,1) 50%,rgba(245,255,250,0) 70%),
linear-gradient(-45deg, rgba(245,255,250,0) 49%,rgba(255,235,205,1) 50%,rgba(245,255,250,0) 70%);

background-position: 0 0, 50px 50px, 50px 0, 0 50px, 50px 0, 100px 50px, 0 0, 50px 50px, 0 0, 0 0;
background-size: 100px 100px;

  }
 

Semi Transparent Headings and Lists with Pastel Orange and Blue List Items and a Bright Orange and Blue Background



#header 

{

background-color: blue;
background-image: linear-gradient(135deg, #003399 0%,#a00077 10%,#ff3300 20%,#a00077 30%,#003399 40%,#a00077 50%,#ff3300 60%,#a00077 70%,#003399 80%,#a00077 90%,#ff3300 100%);

}
  
#footer, 
#content 

{

background-color: purple;
background-image: linear-gradient(135deg, #003399 0%,#a00077 10%,#ff3300 20%,#003399 30%,#a00077 40%,#ff3300 50%,#003399 60%,#a00077 70%,#ff3300 80%,#003399 90%,#a00077 100%);
  
}
  
h1 

{

background-color: transparent;
background-image: linear-gradient(to bottom, rgba(140,51,16,1) 0%,rgba(117,34,1,0.75) 50%,rgba(117,34,1,0.5) 100%);

}

h2 

{

background-color: transparent;
background-image: linear-gradient(to bottom, rgba(226,226,226,1) 0%,rgba(219,219,219,0.75) 50%,rgba(209,209,209,0.75) 51%,rgba(254,254,254,0.5) 100%);

}

h3 

{

background-color: transparent;
background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,0.75) 50%,rgba(215,222,227,0.75) 51%,rgba(245,247,249,0.5) 100%);

}

h4 

{

background-color: transparent;
background-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(241,241,241,0.75) 50%,rgba(225,225,225,0.75) 51%,rgba(246,246,246,0.5) 100%);

}

h5 

{

background-color: transparent;
background-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(243,243,243,0.75) 50%,rgba(237,237,237,0.75) 51%,rgba(255,255,255,0.5) 100%);

}

  
ul, 
ol 

{

background-color: transparent;
background-image: radial-gradient(ellipse at center, rgba(255,193,193,0.5) 0%,rgba(255,193,193,0.5) 28%,rgba(127,191,255,0.5) 100%);

}

li
 
{

background-color: rgb(255,234,234);
background-image: linear-gradient(135deg, rgba(255,234,234,1) 0%,rgba(255,255,255,1) 100%);

}


li:nth-child(even) 

{

background-color: rgb(193,226,255);
background-image: linear-gradient(135deg, rgba(193,226,255,1) 0%,rgba(255,255,255,1) 100%);

}

p

{

background-color: rgb(255,226,254);
background-image: linear-gradient(135deg, rgba(255,226,254,1) 0%,rgba(255,255,255,1) 100%);

}

h1:before 

{

color: white;
background-color: black;
border-color: white;
border-width: 1px;
border-style: solid;

}

h2:before 

{

color: black;
background-color: white;
border-color: black;
border-width: 1px;
border-style: solid;

}

li:nth-of-type(odd):before, 
ul:nth-of-type(odd):before, 
ol:nth-of-type(odd):before, 
h3:before 

{

color: white;
background-color: #ff3300;
border-color: white;
border-width: 1px;
border-style: solid;

}

li:nth-of-type(even):before, 
ul:nth-of-type(even):before, 
ol:nth-of-type(even):before, 
h4:before 

{

color: white;
background-color: #003399;
border-color: white;
border-width: 1px;
border-style: solid;

}

li:nth-of-type(odd):after, 
ul:nth-of-type(odd):after, 
ol:nth-of-type(odd):after
 
{
   
color: white;
background-color: #003399;
border-color: white;
border-width: 1px;
border-style: solid;

}

li:nth-of-type(even):after, 
ul:nth-of-type(even):after, 
ol:nth-of-type(even):after 

{

color: white;
background-color: #ff3300;
border-color: white;
border-width: 1px;
border-style: solid;
   
}

h5:before
 
{

color: black;
background-color: #FFE4C0;
border-color: black;
border-width: 1px;
border-style: solid;

}

h6:before 

{

color: black;
background-color: #EDFCFF;
border-color: black;
border-width: 1px;
border-style: solid;

}

 

Book Bundle Downloads License File

I got this from somewhere else but modified it

Dark Brown/Gold Carpet Effect



body {

background:

linear-gradient(to 207deg, rgb(41,36,19) 5px, transparent 5px) 0px 5px,
linear-gradient(to 27deg, rgb(41,36,19) 5px, transparent 5px) 10px 0px,
linear-gradient(to 207deg, rgb(66,58,31) 5px, transparent 5px) 0px 10px,
linear-gradient(to 27deg, rgb(66,58,31) 5px, transparent 5px) 10px 5px,
linear-gradient(to 270deg, rgb(52,46,25) 10px, transparent 10px),
linear-gradient(to right, rgb(56,50,27) 25%, rgb(50,45,24) 25%, rgb(50,45,24) 50%, transparent 50%, transparent 75%, rgb(69,62,33) 75%, rgb(69,62,33));

background-size: 20px 20px;

}   

Sanded Wood Grain Plywood Effect

I came up with this all by myself



p {

background-color: #f9f4d1;

background: 
radial-gradient(ellipse at center, rgba(219,213,166,0.75) 0%,rgba(219,213,166,0.75) 50%,rgba(219,213,166,0.25) 75%,rgba(219,213,166,0) 100%),
linear-gradient(to bottom, #f9f4d1 50%,#f7e6e6 50%);

background-size: auto auto, 15px 15px;

box-shadow: 4px 4px 4px rgba(0,0,0,.4);

color: black;
font-style: italic;
font-size: 14pt;
text-shadow:  1px 1px 1px white;

padding: 2em;
margin: 2em;

border-radius: 1em;

border-width: .5em;
border-style: dashed;
border-color: rgb(219,213,166);
  
}
  
a {

text-decoration: none;
background-color: transparent;
color: black;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #cc0000;

}
  
em { 

font-weight: bold;
font-style: normal;

}
  
strong {

font-weight: bold;
color: #aa0000;
font-style: normal;

}
  

Pictures Designs

Individual Photos of Me: Bright Pink/Red Balloon Animal (like the Clowns make at the County Fair)

I came up with this all by myself



body {

background: rgb(114,71,55);

background: 

radial-gradient(ellipse at center, rgba(114,71,55,1) 10%,rgba(255,94,94,1) 26%,rgba(114,71,55,1) 41%,rgba(114,71,55,1) 43%,rgba(255,94,94,1) 54%,rgba(114,71,55,1) 66%,rgba(239,204,191,1) 100%);

}


Individual Photos of Me: Neon Rainbow Color Abstract (Poster/Curtains/T-shirt/Blocks)

I was inspired by other examples, but this design I came up with this all by myself



body {

background: #b5af00;

background: linear-gradient(to right, #b5af00 0%,#ff0087 10%,#00a9bc 20%,#b5af00 30%,#ff0087 40%,#00a9bc 50%,#b5af00 60%,#ff0087 70%,#00a9bc 80%,#b5af00 90%,#ff0087 100%);

}


Picture Galleries Shiny/Glowing Brown/Gold "Museum" Effect

I came up with this all by myself



h1, h2, h3, h4 {

background-image: linear-gradient(135deg, rgba(191,178,0,0.5) 0%,rgba(255,0,0,0.5) 10%,rgba(191,178,0,0.5) 20%,rgba(255,0,0,0.5) 30%,rgba(191,178,0,0.5) 40%,rgba(255,8,0,0.5) 50%,rgba(191,178,0,0.5) 61%,rgba(255,0,0,0.5) 70%,rgba(191,178,0,0.5) 80%,rgba(255,0,0,0.5) 90%,rgba(135,0,0,0.5) 100%);
}      


a {
background: rgb(242,221,201);
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(221,202,184,1) 66%,rgba(242,221,201,1) 100%);
}

body {
background: rgb(252,255,204);
background: radial-gradient(ellipse at center, rgba(252,255,204,1) 0%,rgba(114,97,9,1) 58%,rgba(73,56,0,1) 100%);
}

li {
background: rgb(255,255,255);
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(232,216,164,1) 65%,rgba(239,238,198,1) 100%);
}

#header-top {

background: rgb(255,170,0);
background: radial-gradient(ellipse at center, rgba(255,170,0,1) 0%,rgba(114,97,9,1) 42%,rgba(5,4,4,1) 100%);
margin-top: 50px;
}

p, address, ul {

background: rgb(153,124,85);
background: radial-gradient(ellipse at center, rgba(153,124,85,1) 0%,rgba(91,74,52,1) 37%,rgba(28,21,15,1) 100%);
}


Polished, Glowing Mahogany (Hard Red Wood) with matching Paragraphs and Lists Styles

I came up with this all by myself



a, h1, h2, h3, h4 {

color: white;
border-width: 0px;

background: rgb(0,0,0);

background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(84,0,0,1) 45%,rgba(255,199,0,1) 100%);

color: white;
border-width: 1px;
border-style: solid;
border-color: black;
text-shadow: 1px 1px 1px black;
}

body {

background: #ffc700;

background: radial-gradient(ellipse at center, #ffc700 0%,#540000 55%,#000000 100%);

}

p, address, li {

color: black;

background: #ffffff;

background: linear-gradient(135deg, #ffffff 0%,#ffdbdb 59%,#ffeca8 100%);

color: black;
text-shadow: 1px 1px 1px white;

}

p, address {

border-width: .5em;
border-style: solid;
border-color: black;

}

ul {

background-color: black;

}

p, address, li, ul, a, h1, h2, h3, h4 {

       box-shadow: #cccccc 1px 1px 1px;
       
}

Uncategorized Effects

Error Webpage: Pink and Black and White Zig Zag Effect

I got this from somewhere else and modified the colors



#all {

background: 

linear-gradient(135deg, #ebb5ff 25%, transparent 25%) -50px 0,
linear-gradient(225deg, #ebb5ff 25%, transparent 25%) -50px 0,
linear-gradient(315deg, #ebb5ff 25%, transparent 25%),
linear-gradient(45deg, #ebb5ff 25%, transparent 25%);  

background-size: 100px 100px;
background-color: #ffd1ed;

}   
    
 

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