My CSS Style Guide/Techniques (Hobbies Website 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.

Tartan Effect

I got this somewhere else and just changed the colors (try changing background color)


#content, #header, #footer {

background-color: #663300;

background-image: 

repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
repeating-linear-gradient(270deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
repeating-linear-gradient(125deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px, rgba(0,0,0,.2) 5px);

}
 
#header, #footer {
 
background-color: #ffffcc;

}
   

Book Effect for Paragraphs

I came up with this all by myself



#page p:before {

margin: 0 auto;
display: block;

color: #990000;
font-size: 24pt;
text-shadow: 1px 1px 1px #cccc00;

line-height: 1em;
width: 5em;

padding: .25em;
text-align: center;

border-style: solid; 
border-width: 2px; 
border-color: #990000;

background-color: #c9ab34;

background-image: linear-gradient(to bottom, #ffffff 0%,#c9ab34 50%,#57461c 50%,#755b1a 65%,#a38923 100%);


border-radius: 50% / 50%;

}

#page p, #page .poetry {

background-color: #f3eed9;

background-image: linear-gradient(to right, #f3eed9 0%,#f1e7c6 49.9%,#dbc7a7 50%,#e8d5b8 100%);

color: black;
font-weight: normal;
font-size: 14pt;
text-shadow: 1px 1px 1px rgb(242,241,222);
text-align: left;

width: 20em;
padding: 1em;

border-style: solid; 
border-width: 20px; 
border-color: #990000;

height: auto;


border-radius: 1em;


margin: 0 auto;
display: inline-block; 

overflow: hidden;
vertical-align: top;

}


Dark Shiny Gold

Based on lighter version of gold I found somewhere else.



#page p:before, #page ul:before, #page ol:before 

{

  background-color: #c9ab34;
background-image: linear-gradient(to bottom, rgba(255,233,183,1) 0%,rgba(122,102,31,1) 50%,rgba(10,8,3,1) 50%,rgba(38,29,8,1) 65%,rgba(84,69,18,1) 100%);

}


Gold and Silver Swords

I came up with this all by myself



#page h1 {

border-radius: 0px 15em 15em 0px / 0px 3em 3em 0px;

background: white; 

background-image: linear-gradient(to bottom, #ffffdb 0%,#ffffdb 49.9%,#fff1bb 50%,#fff1bb 100%);

color: #cc0000;
text-shadow: 1px 1px 1px white; 
font-size: 24pt;
font-weight: normal;
font-style: normal;
text-shadow: 1px 1px 1px white;
text-align: left;
line-height: 1em;

padding-left: 15%;
padding-right: 5%;
padding-top: 0%;
padding-bottom: 0%;

margin-top: 0%;
margin-bottom: 1em;
margin-left: 0%;
margin-right: 0%;

background-position: 0px 0px; 
background-repeat: no-repeat; 

border-color: #333300;
border-width: 3px;
border-style: dotted;

position: relative;
}
 
#page h2 {

border-radius: 0px 15em 15em 0px / 0px 3em 3em 0px;

background-color: white;

background-image: linear-gradient(to bottom, #ffffff 0%,#e4e4e4 49.9%,#cdcdcd 50%,#c4c4c4 100%);
background-position: 0px 0px; 
background-repeat: no-repeat;   

font-size: 24pt;
font-weight: normal;
text-shadow: 1px 1px 1px white;


text-align: left;
color: black;

padding-left: 10%;
padding-right: 5%;
padding-top: 0%;
padding-bottom: 0%;

margin-top: 0%;
margin-bottom: 1em;
margin-left: 0%;
margin-right: 0%;

border-color: black;
border-width: 1px;
border-style: solid;  
   
border-right-color: red;
border-right-width: 1px;
border-right-style: solid; 
    
position: relative;  
 
}

Red and Gold Shield

I came up with this all by myself


address {

background: 

radial-gradient(ellipse at center, rgba(198,180,85,1) 0%,rgba(25,0,0,1) 49%,rgba(25,0,0,0) 69%,rgba(255,25,25,0) 100%),
linear-gradient(45deg, rgba(255,25,25,0) 0%,rgba(25,0,0,0) 50%,rgba(25,0,0,1) 51%,rgba(255,25,25,1) 99%),
linear-gradient(135deg, rgba(255,25,25,1) 0%,rgba(255,25,25,1) 1%,rgba(25,0,0,1) 49%,rgba(25,0,0,0) 50%,rgba(255,25,25,0) 100%);


background-size: 50% 50%, 30em 30em, 30em 30em; 
background-position: 50% 50%, -15em 100%, 15em 100%; 
background-repeat: no-repeat, no-repeat, no-repeat;

}

address p {

padding: 0em;
color: black;
width: 75%;
height: auto;
background-color: rgba(255,255,255,0.5);
text-align: center;
 
}

Multi Colored Sophisticated Shields

I came up with this all by myself



#footer, #header, #content, #page, body { 

background-color: #B59945;

}
 
#footer, #header, #content {

background-position: left top, right top; 
background-repeat: no-repeat, no-repeat; 

text-align: center;
margin-left: 1%;
margin-right: 1%;
border-width: 0px;
padding-left: 0px;
padding-right: 0px;
  
}

#header {

background-image:    

linear-gradient(30deg, rgba(25,25,255,0) 0%,rgba(0,0,25,0) 50%,rgba(0,0,25,1) 50%,rgba(25,25,255,1) 100%),

linear-gradient(150deg, rgba(255,255,25,1) 0%,rgba(255,255,25,1) 0%,rgba(25,25,0,1) 50%,rgba(25,0,0,0) 50%,rgba(255,25,25,0) 100%);


background-size: 50% auto, 50% auto; 

border-top-left-radius: 20%;
border-top-right-radius: 20%;

}
  
#content {

background-image:    

linear-gradient(30deg, rgba(255,25,25,0) 0%,rgba(25,0,0,0) 50%,rgba(25,0,0,1) 50%,rgba(255,25,25,1) 100%),

linear-gradient(150deg, rgba(25,255,25,1) 0%,rgba(25,255,25,1) 0%,rgba(0,25,0,1) 50%,rgba(0,25,0,0) 50%,rgba(25,255,25,0) 100%);


background-size: 50% auto, 50% auto; 

border-top-left-radius: 10%;
border-top-right-radius: 10%;
  
} 
  
#footer {
  
background-image:    
    
linear-gradient(30deg, rgba(255,150,25,0) 0%,rgba(25,15,0,0) 50%,rgba(25,15,0,1) 50%,rgba(255,150,25,1) 100%),

linear-gradient(150deg, rgba(150,15,150,1) 0%,rgba(150,15,150,1) 0%,rgba(25,0,25,1) 50%,rgba(15,0,15,0) 50%,rgba(150,15,150,0) 100%);

background-size: 50% 25%, 50% 25%; 

border-top-left-radius: 5%;
border-top-right-radius: 5%;
  
} 
  
   

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