My CSS Style Guide/Techniques: 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.

Simplified Website

White and Gold Metallic Crosses Latticework on Black

I got this from somewhere else but heavily modified it


#content {

background-image: 

radial-gradient(circle, transparent 0%, black 60%, black 60%, transparent 100%, transparent),
radial-gradient(circle, transparent 0%, black 60%, black 60%, transparent 100%, transparent),
linear-gradient(#a38923 16px, transparent 16px),
linear-gradient(90deg, #a38923 16px, transparent 16px);

background-position: 200px 200px, 200px 200px, 0 -8px, -8px 0;
background-size:200px 200px, 200px 200px, 200px 100px, 100px 100px;
    
}
      
#footer, #header {

background-image: 

radial-gradient(circle, transparent 0%, black 60%, black 60%, transparent 100%, transparent),
radial-gradient(circle, transparent 0%, black 60%, black 60%, transparent 100%, transparent),
linear-gradient(#ffffcc 16px, transparent 16px),
linear-gradient(90deg, #ffffcc 16px, transparent 16px);

background-position: 200px 200px, 200px 200px, 0 -8px, -8px 0;
background-size:200px 200px, 200px 200px, 200px 100px, 100px 100px;

}

Red on Green and Green on Red "Christmas" Crosses Latticework

I got this from somewhere else but heavily modified it


#content {

background-position: 200px 200px, 200px 200px, 0 -8px, -8px 0;
background-size:200px 200px, 200px 200px, 200px 100px, 100px 100px;

background-image: 

radial-gradient(circle, transparent 0%, #993333 60%, #993333 60%, transparent 100%, transparent),
radial-gradient(circle, transparent 0%, #993333 60%, #993333 60%, transparent 100%, transparent),
linear-gradient(#336633 16px, transparent 16px),
linear-gradient(90deg, #336633 16px, transparent 16px);

background-color: #993333;
     
}

#footer, #header {

background-image: 

radial-gradient(circle, transparent 0%, #336633 60%, #336633 60%, transparent 100%, transparent),
radial-gradient(circle, transparent 0%, #336633 60%, #336633 60%, transparent 100%, transparent),
linear-gradient(#993333 16px, transparent 16px),
linear-gradient(90deg, #993333 16px, transparent 16px);

background-color: #336633;

background-position: 200px 200px, 200px 200px, 0 -8px, -8px 0;
background-size:200px 200px, 200px 200px, 200px 100px, 100px 100px;
    
}  

Shaded Golden Khaki

I came up with this all by myself



#content, #footer, #header {

background-image: 

radial-gradient(circle, transparent 0%, #ada479 60%, #ada479 60%, transparent 100%, transparent),
radial-gradient(circle, transparent 0%, #ada479 60%, #ada479 60%, transparent 100%, transparent);
  
background-position: center top, center top;
background-repeat: no-repeat, no-repeat;

background-size: auto auto, auto auto;

padding-left: 0%;
padding-right: 0%;

background-color: #ada479;

}

Red, Orange, and Yellow 3d Cube at Angle Effect

I came up with this all by myself


h2, h3 {
background: linear-gradient(to bottom, #000000 0%,#d24b5a 50%,#ba2737 51%,#000000 100%); 
      
}
      
h1 {

background: #000000;
background: linear-gradient(to bottom, #000000 0%,#f17432 50%,#ea5507 50%,#000000 100%); 

}

.header-notice {

background-color: #fccd4d;
background-image: linear-gradient(to bottom, #000000 0%,#fccd4d 50%,#f8b500 50%,#000000 100%); 

}


Semi-Transparent Styles for Lists of Links

I came up with this all by myself



#silver ul {

background-color: #333333;
background-image: linear-gradient(to bottom, rgba(211,211,211,0.5), transparent);
    
box-shadow: black 2px 2px 2px;
       
border-radius: 1em; 
       
border-color: #cccccc;
border-width: 2px;
border-style: solid;
       
display: block;
list-style-type: none;
    
padding: 1em;

margin-left: 5%;
margin-right: 5%;

width: auto;

color: black;
font-weight: normal;
text-shadow: white 1px 1px 1px;
text-align: center;
      
}

 #gold ul {
 
background-color: rgba(255,204,0,0.5);
background-image: linear-gradient(to bottom, rgba(255,204,0,0.5), transparent);
      
box-shadow: black 2px 2px 2px;
       
border-radius: 1em; 
       
border-color: #cccccc;
border-width: 2px;
border-style: solid;
       
display: block;
list-style-type: none;
    
padding: 1em;

margin-left: 5%;
margin-right: 5%;

width: auto;

color: black;
font-weight: normal;
text-shadow: white 1px 1px 1px;
text-align: center;

}

#silver ul li {

background-color: #cccccc;
background-image: linear-gradient(to bottom, white, transparent);
      
box-shadow: black 2px 2px 2px;
       
border-radius: 1em; 
       
border-color: #cccccc;
border-width: 2px;
border-style: solid;
       
color: black;
font-weight: normal;
text-shadow: #cccccc 1px 1px 1px;
text-align: center;

display: inline-block;
width: auto;
list-style-type: none;
       
padding: .5em;
margin: .5em;
       
border-color: #cccccc;
border-width: 2px;
border-style: solid;

}

 #gold ul li {
 
background-color: rgb(207,205,137);
background-image: linear-gradient(to bottom, rgb(131,120,0), transparent);
      

box-shadow: black 2px 2px 2px;
       

border-radius: 1em; 
       
border-color: #cccccc;
border-width: 2px;
border-style: solid;
       
color: black;
font-weight: normal;
text-shadow: rgb(170,160,96) 1px 1px 1px;
text-align: center;

display: inline-block;
width: auto;
list-style-type: none;
       
padding: .5em;
margin: .5em;
       
border-color: #cccccc;
border-width: 2px;
border-style: solid;

}

#silver ul li a {

background-color: white;

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

border-radius: .5em; 
       
color: black;
font-weight: normal;
text-shadow: white 1px 1px 1px;
text-align: center;
       
display: inline-block;
width: auto;
text-decoration: none;
        
padding: .5em;
margin: .5em;
      
}

 #gold ul li a {
 
background-color: white;
       
border-color: rgb(207,120,0);
border-width: 2px;
border-style: solid;   

border-radius: .5em; 
       
color: black;
font-weight: normal;
text-shadow: white 1px 1px 1px;
text-align: center;
       
display: inline-block;
width: auto;
text-decoration: none;
        
padding: .5em;
margin: .5em;

}


Rubber Balloon/Shiny Plastic (green, mint, blue, pink, yellow, purple)



h5.green {

background: rgb(211,255,209);

background: radial-gradient(ellipse at center, rgba(211,255,209,1) 0%,rgba(97,255,89,0.73) 54%,rgba(97,255,89,0.62) 76%,rgba(12,255,0,0.5) 100%); 
      
text-shadow: 1px 1px 1px rgb(211,255,209);

border-radius: 2em;
    
}  
      
h4.mint {

background: rgb(216,255,239);

background: radial-gradient(ellipse at center, rgba(216,255,239,1) 0%,rgba(119,255,200,0.73) 54%,rgba(119,255,200,0.62) 76%,rgba(0,255,157,0.5) 100%); 

text-shadow: 1px 1px 1px rgb(216,255,239);

border-radius: 2em;

}
       
h3.blue {

background: rgb(224,239,255);

background: radial-gradient(ellipse at center, rgba(224,239,255,1) 0%,rgba(99,174,255,0.73) 54%,rgba(99,174,255,0.62) 76%,rgba(0,123,255,0.5) 100%); 

text-shadow: 1px 1px 1px rgb(224,239,255);

border-radius: 2em;

}
    
h2.pink {

background: rgb(255,201,221);

background: radial-gradient(ellipse at center, rgba(255,201,221,1) 0%,rgba(255,81,133,0.73) 54%,rgba(255,81,133,0.62) 76%,rgba(255,0,127,0.5) 100%); 

text-shadow: 1px 1px 1px rgb(255,201,221);

border-radius: 2em;

}   
       
h1#yellow {

background: rgb(255,253,226);

background: radial-gradient(ellipse at center, rgba(255,253,226,1) 0%,rgba(255,242,107,0.73) 54%,rgba(255,242,107,0.62) 76%,rgba(255,246,0,0.5) 100%); 

text-shadow: 1px 1px 1px rgb(255,253,226);

border-radius: 2em;

} 

ul.purple { 

background: rgb(246,219,255);

background: radial-gradient(ellipse at center, rgba(246,219,255,1) 0%,rgba(221,99,255,0.73) 54%,rgba(221,99,255,0.62) 76%,rgba(203,0,255,0.5) 100%); 

border-radius: 2em;

}


Shiny Gold East Syriac Cross over Blue Sky Background (from Historic Persian Empire Christian Church)



.sky-cross {

width: 300px;
height: 319px;

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

-webkit-clip-path: polygon(29% 99%, 26% 97%, 25% 95%, 32% 89%, 40% 83%, 40% 65%, 40% 47%, 30% 47%, 19% 47%, 12% 53%, 5% 59%, 3% 57%, 0% 54%, 5% 47%, 8% 40%, 4% 33%, 0% 26%, 2% 24%, 5% 22%, 12% 28%, 20% 34%, 30% 34%, 40% 34%, 40% 26%, 40% 17%, 32% 11%, 25% 4%, 28% 2%, 30% -0%, 38% 4%, 47% 7%, 55% 4%, 64% -0%, 66% 1%, 68% 4%, 69% 4%, 61% 11%, 54% 17%, 54% 26%, 54% 34%, 64% 34%, 74% 34%, 81% 28%, 89% 22%, 91% 24%, 94% 26%, 90% 33%, 85% 40%, 89% 47%, 93% 54%, 91% 57%, 89% 59%, 81% 53%, 74% 47%, 64% 47%, 54% 47%, 54% 65%, 54% 83%, 61% 89%, 69% 95%, 66% 98%, 64% 100%, 55% 96%, 47% 93%, 40% 96%, 32% 99%, 30% 100%, 29% 99%);

clip-path: polygon(29% 99%, 26% 97%, 25% 95%, 32% 89%, 40% 83%, 40% 65%, 40% 47%, 30% 47%, 19% 47%, 12% 53%, 5% 59%, 3% 57%, 0% 54%, 5% 47%, 8% 40%, 4% 33%, 0% 26%, 2% 24%, 5% 22%, 12% 28%, 20% 34%, 30% 34%, 40% 34%, 40% 26%, 40% 17%, 32% 11%, 25% 4%, 28% 2%, 30% -0%, 38% 4%, 47% 7%, 55% 4%, 64% -0%, 66% 1%, 68% 4%, 69% 4%, 61% 11%, 54% 17%, 54% 26%, 54% 34%, 64% 34%, 74% 34%, 81% 28%, 89% 22%, 91% 24%, 94% 26%, 90% 33%, 85% 40%, 89% 47%, 93% 54%, 91% 57%, 89% 59%, 81% 53%, 74% 47%, 64% 47%, 54% 47%, 54% 65%, 54% 83%, 61% 89%, 69% 95%, 66% 98%, 64% 100%, 55% 96%, 47% 93%, 40% 96%, 32% 99%, 30% 100%, 29% 99%);

display: block;
margin: 0 auto;

}
  
.sky-background {
  
background-color: #ccffeb;
background-image: linear-gradient(45deg, #ccffeb 0%,#cdccff 100%);

width: 100%;
height: 319px;
padding: 0px;

}


Really Mobile Website

Light on Dark Section Design Optimized for Apple Watch (matches aesthetic and low memory)

I came up with this on my own


    
body 

{ 

font-family: -apple-system, SanFranciscoText-Light, HelveticaNeue-Light, LucidaGrande, sans-serif;
font-weight: normal;
font-style: normal;
line-height: 2em;
color: #390B14;  
background-color: #390B14;
background: linear-gradient(135deg, #222222 10%,#41220f 40%,#6a5938 70%,#e7d2b4 100%);
margin: .5em; 
padding: 0px; 
  
}
  
#header 

{
  
background-color: #4D4029;
padding: .5em;
border-radius: 2em; 
border-width: 5px;
border-style: solid;
border-color: black;
margin: .5em;

}
  
#footer 

{
  
background-color: #4D4029;
padding: .5em;
border-radius: 2em; 
border-width: 5px;
border-style: solid;
border-color: black;
margin: .5em;
  
}
  
#content 

{
  
background-color: #6A5938;
padding: .5em;
border-radius: 2em; 
border-width: 5px;
border-style: solid;
border-color: black;
margin: .5em;

}

#header, 
#footer 

{
    
margin: .5em;
padding: .5em;
border-color: white;
border-style: solid;
border-width: 5px;

}
    
h1:before 

{
  
color: white;
text-shadow: 1px 1px 1px black;
margin: .25em; 
padding: .5em; 
border-color: #222222; 
border-style: solid; 
border-width: 5px; 
background-color: black;
border-radius: .5em; 
text-shadow: 1px 1px 1px black;
  
}      
  
address:before 

{

background-color: #FFF0DC;
color: #390B14; 
text-shadow: none;
display: block;

}     

h2:before, 
h3:before, 
h4:before, 
h5:before, 
h6:before 

{
  
color: #FFF0DC;
margin: .5em; 
padding: .5em; 
border-color: black; 
border-style: solid; 
border-width: 5px; 
border-radius: .5em; 
background-color: #222222;
text-shadow: 1px 1px 1px black;
  
}
    
h1:before, 
h2:before, 
h3:before, 
h4:before, 
h5:before, 
h6:before,
p:before, 
.poetry:before, 
ul:before, 
ol:before 

{

font-variant: small-caps;

}

p:before, 
p a:before, 
address a:before, 
.poetry:before, 
li:before, 
.line-poem:before, 
ul:before, 
ol:before 

{

color: #390B14;
background-color: #E7D2B4;
border-color: black;
border-width: 2px;
border-style: solid;
border-radius: .5em; 
padding: 5px;
margin: 5px;
display: inline-block;
text-shadow: none;
text-align: left;
vertical-align: top;
  
}
  
ul:before, 
ol:before 

{

display: block;
text-align: center;

}

p:nth-of-type(even):after, 
.poetry:nth-of-type(even):after, 
ul:nth-of-type(even):after, 
ol:nth-of-type(even):after, 
p:nth-of-type(odd):after, 
.poetry:nth-of-type(odd):after, 
ul:nth-of-type(odd):after, 
ol:nth-of-type(odd):after 

{

display: block;
padding: 1em;
margin: 1em;
border-top-color: black;
border-top-width: 5px;
border-top-style: solid; 
background-color: black;
background-color: rgba(0,0,0,0.25);
color: white;
text-shadow: 1px 1px 1px black;
  
}

#content ul:before 

{
 
background-color: #FFF0DC;
color: #390B14; 
text-shadow: none;
border-width: 2px;
border-style: solid;
border-color: #330033;

}    
  
h1, 
h2, 
h3, 
h4, 
h5, 
h6 

{
      
padding: 1em; 
margin-top: 1em; 
margin-bottom: 1em;
color: white; 
text-shadow: 1px 1px 1px black;
font-weight: normal;
border-radius: .5em; 

} 
      
h1 

{ 

background-color: #350B15;
border-color: black; 
border-style: solid; 
border-width: 5px; 

}
      
h2, 
h3, 
h4, 
h5, 
h6 

{
       
border-color: black; 
border-style: solid; 
border-width: 5px; 
background-color: #512C00;
      
}
      
ul, 
ol 

{

text-indent: 0em; 
text-align: left;
list-style: none;
margin-left: 0%;
margin-right: 0%;
margin-top: 1em;
margin-bottom: 1em;
padding: 1em; 
border-color: black;
border-style: solid; 
border-width: 5px;
border-radius: 1em; 
background-color: #41220F;
      
}
      
li 

{

background-color: #614958;
color: #FFF8E2; 
border-color: black;
border-style: solid; 
border-width: 5px;
text-shadow: 1px 1px 1px black; 
border-radius: .75em; 
padding: 1em;
margin: 1em; 
display: inline-block;
      
}
      
a 

{ 
  
color: white;
border-width: 2px;
border-style: solid;
border-color: #BFAD95;
text-decoration: none;
display: inline-block;
text-align: left;
margin: 5px;
padding: 5px;
background-color: rgba(0,0,0,0.25);
vertical-align: top;
text-shadow: 1px 1px 1px black;
  
}

em, 
strong 

{
  
font-weight: normal;
font-style: normal;
background-color: black;
background-color: rgba(0,0,0,0.5);
text-shadow: 1px 1px 1px black;
  
}
  
em 

{
  
background-color: rgb(0,0,85);
color: #CFF;
  
}
  
strong 

{

background-color: rgb(85,0,0);
color: #FCC;

}
      
p, 
.poetry, 
address 

{
margin-left: 0%;
margin-right: 0%;
margin-top: 1em;
margin-bottom: 1em;
padding: 1em;
text-align: left; 
border-radius: 1em; 
line-height: 2em;
border-color: black;
border-width: 5px;
border-style: solid;
background-color: #390B14;
color: #FFF0DC; 

}
      
address 

{
      
text-align: center;
display: block;
margin: 0 auto;
font-style: normal;
padding: 2em;
margin: 10%;
background-color: #3C1331;

}
  
a[href]:after 

{
    
    display: block;
    
}

@media only screen and (min-width: 768px) {

body, 
#all {

background: linear-gradient(135deg, #6a5938 0%,#4d4029 11%,#41220f 25%,#390b14 30%,#41220f 35%,#4d4029 50%,#6a5938 60%,#4d4029 70%,#41220f 90%,#390b14 95%,#3c1331 99%);
text-shadow: black 1px 1px 1px;

}

#header, 
#content, 
#footer 

{

background: radial-gradient(ellipse at center, #3c1331 1%,#390b14 23%,#41220f 57%,#4d4029 85%,#6a5938 100%);
text-shadow: black 1px 1px 1px;

}

li 

{

background: radial-gradient(ellipse at center, #0f030c 1%,#1c0306 17%,#281309 39%,#382c1e 67%,#3f3521 100%);
text-shadow: black 1px 1px 1px;

}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 

{

background-color: white;
background-image: linear-gradient(to bottom, rgba(73,62,39,1) 0%,rgba(63,52,33,0.96) 15%,rgba(48,23,11,0.89) 43%,rgba(35,7,11,0.81) 77%,rgba(35,11,28,0.75) 99%,rgba(35,11,28,0.75) 100%);
text-shadow: black 1px 1px 1px;

}

ul, 
ol 

{

background-color: white;
background-image: linear-gradient(to right, rgba(48,15,38,0.5) 0%,rgba(48,9,15,0.61) 22%,rgba(63,31,15,0.79) 57%,rgba(73,60,39,0.93) 85%,rgba(86,73,45,1) 100%);
text-shadow: black 1px 1px 1px;

}

p, 
address 

{

background: linear-gradient(to bottom, #3f3521 0%,#382c1e 15%,#281309 43%,#1c0306 78%,#0f030c 99%);
text-shadow: black 1px 1px 1px;

}

p:before, p a:before, .poetry:before, li:before, .line-poem:before, ul:before, ol:before, address:before 

{

background: radial-gradient(ellipse at center, #ffe7c6 0%,#bfad95 25%,#110204 97%,#1e0e07 98%,#2d2418 99%,#352d1c 100%);
text-shadow: #bfad95 1px 1px 1px;

}
  
}

@media only screen and (min-width: 1024px) {

h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
ul, 
ol, 
p, 
.poetry 

{

margin-left: 10%;
margin-right: 10%;

}
 
#content 

{
 
 margin: 5%;

}

#header 

{
    
margin: 5%;
  }
  
#footer {

margin: 5%;
  
}

}


@media only screen and (max-width: 767px) {

h1, 
h2, 
h3, 
h4, 
h5, 
h6 

{

font-size: 18pt;

}

h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
ul, 
ol, 
li, 
p, 
.poetry 

{

padding: .5em;
margin: .5em;

}

ul, 
ol, 
li, 
p, 
.poetry 

{

font-size: 14pt;

}

h1:before, 
h2:before, 
h3:before, 
h4:before, 
h5:before, 
h6:before 

{

margin: .25em; 
padding: .25em; 
  
}

#header, 
#footer, 
#content 

{ 

margin-left: 0px; 
margin-right: 0px;
padding-left: 0px; 
padding-right: 0px; 

}

p:nth-of-type(even):after 

{
  
display: none;
visibility: hidden;
padding: 0em;
margin: 0em;
border-width: 0px;
  
}

}

@media only screen and (max-width: 319px) {

body, 
#all, 
#header, 
#footer, 
#content, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
ul, 
ol, 
li, 
p, 
.poetry {

padding: 0em;
margin: 0em;
border-width: 0px;
border-radius: 0em; 
font-size: 13pt;

}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 

{

font-size: 15pt;

}

h1:before, 
h2:before, 
h3:before, 
h4:before, 
h5:before, 
h6:before 

{

margin: .125em; 
padding: .125em; 
  
}
  
li 

{
  
display: block;
width: auto;
  
}
  
}

#content a[href]:after, 
#header a[href]:after, 
#footer a[href]:after 

{
    
display: block;
font-variant: small-caps;
border-top-color: white;
border-top-style: solid;
border-top-width: 1px;
padding-top: 1px;
margin-top: 1px;

}

p a:active,
li a:active

{

background-color: #FFC9B3;
color: black;
text-shadow: none;

}   

}


Pink/Purple on Yellow/Gold: Prophetic/Apocalyptic Look

I came up with this on my own



body 

{

background-color: black;

background-image: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(188,0,0,1) 5%,rgba(255,148,0,1) 10%,rgba(255,195,0,1) 15%,rgba(255,242,0,1) 20%,rgba(255,255,255,1) 25%,rgba(255,242,0,1) 30%,rgba(255,195,0,1) 35%,rgba(255,148,0,1) 40%,rgba(188,0,0,1) 45%,rgba(0,0,0,1) 50%,rgba(188,0,0,1) 55%,rgba(255,148,0,1) 60%,rgba(255,195,0,1) 65%,rgba(255,242,0,1) 70%,rgba(255,255,255,1) 75%,rgba(255,242,0,1) 80%,rgba(255,195,0,1) 85%,rgba(255,148,0,1) 90%,rgba(188,0,0,1) 95%,rgba(0,0,0,1) 100%);

padding: 0em;
margin: 0em;

}

#all 

{

padding-left: 0em;
padding-right: 0em;
margin-left: 0em;
margin-right: 0em;

padding-top: 2em;
padding-bottom: 2em;
margin-topt: 2em;
margin-bottom: 2em;

}

#header, 
#content, 
#footer 

{

padding: 2em;
margin: 3em;

background-color: black;

background: linear-gradient(to right, rgba(89,63,33,1) 0%,rgba(150,85,0,1) 5%,rgba(201,141,0,1) 10%,rgba(209,163,0,1) 15%,rgba(229,211,107,1) 20%,rgba(209,163,0,1) 25%,rgba(201,141,0,1) 30%,rgba(150,85,0,1) 35%,rgba(89,63,33,1) 40%,rgba(150,85,0,1) 45%,rgba(201,141,0,1) 50%,rgba(209,163,0,1) 55%,rgba(229,211,107,1) 60%,rgba(209,163,0,1) 65%,rgba(201,141,0,1) 70%,rgba(150,85,0,1) 75%,rgba(89,63,33,1) 80%,rgba(150,85,0,1) 85%,rgba(201,141,0,1) 90%,rgba(209,163,0,1) 95%,rgba(229,211,107,1) 100%);

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

}

li

{

background-color: transparent;
background-image: radial-gradient(ellipse at center, #0f030c 1%,#1c0306 17%,#281309 39%,#382c1e 67%,#3f3521 100%);

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

}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 

{

background-color: black;
background-image: linear-gradient(to bottom, #09000a 0%,#410047 100%);

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

}

ul, 
ol 

{

background-color: black;
background-image: radial-gradient(ellipse at center, #8c0062 0%,#000000 100%);

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

padding: 1em;
margin: 1em;

}

p, 
address
 
{

background-color: black;
background-image: radial-gradient(ellipse at center, #390066 0%,#040023 59%,#1c0033 100%);
background-image: radial-gradient(ellipse at center, #390066 0%,#000000 93%);

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

padding: 1em;
margin: 1em;

}

#all #header p a, 
#all #footer p a, 
#all #content p a,
#all #header p.notice a, 
#all #footer p.notice a, 
#all #content p.notice a,
#all #header li a, 
#all #footer li a, 
#all #content li a,
#all #header address a, 
#all #footer address a, 
#all #content address a 

{

background-color: transparent;
background-image: linear-gradient(to bottom, #ffcef0 0%,#c6a3bd 21%,#663656 62%,#2d1826 100%);

color: black;
text-shadow: #EDC0DF 1px 1px 1px;
  
}
  
#all #header p a, 
#all #footer p a, 
#all #content p a,
#all #header p.notice a, 
#all #footer p.notice a, 
#all #content p.notice a,
#all #header address a, 
#all #footer address a, 
#all #content address a  

{

color: white;
text-shadow: #1C0F17 1px 1px 1px;
  
}

#all p:before, 
#all p a:before, 
#all .poetry:before, 
#all li:before,
#all li a:before,
#all .line-poem:before, 
#all ul:before, 
#all ol:before, 
#all address:before, 
#all address a:before,
#all p:after, 
#all p a:after, 
#all .poetry:after, 
#all li:after, 
#all li a:after,
#all .line-poem:after, 
#all ul:after, 
#all ol:after, 
#all address:after, 
#all address a:after

{

background-color: transparent;
background-image: linear-gradient(to bottom, rgba(112,101,90,0.65) 0%,rgba(45,39,37,0.65) 57%,rgba(53,45,28,0.65) 100%);
   
color: white;
text-shadow: black 1px 1px 1px;

border-color: #cccccc;
border-style: solid;
border-width: 5px;

}
  
  

Fire Effect

I came up with this on my own



body 

{

background: linear-gradient(to right, rgba(155,132,0,1) 0%,rgba(160,83,0,1) 5%,rgba(127,59,0,1) 10%,rgba(79,62,28,1) 15%,rgba(127,59,0,1) 20%,rgba(160,83,0,1) 25%,rgba(155,132,0,1) 30%,rgba(160,83,0,1) 35%,rgba(127,59,0,1) 40%,rgba(79,62,28,1) 45%,rgba(127,59,0,1) 50%,rgba(137,73,0,1) 55%,rgba(155,132,0,1) 60%,rgba(160,83,0,1) 65%,rgba(127,59,0,1) 70%,rgba(79,62,28,1) 75%,rgba(127,59,0,1) 80%,rgba(160,83,0,1) 85%,rgba(155,132,0,1) 90%,rgba(155,77,0,1) 95%,rgba(127,59,0,1) 100%);

}


Lite Website

Multicolored Spray Paint/Air Brush Effect

I came up with this on my own



h1 

{

background-image: radial-gradient(ellipse at center, rgba(237,237,237,1) 0%,rgba(177,177,177,0.6) 54%,rgba(177,177,177,0.43) 76%,rgba(128,128,128,0.25) 100%);
text-shadow: 1px 1px 1px rgb(237,237,237);
background-color: black;
color: black;
border-color: black;
border-width: 4px;
border-style: solid;
box-shadow: 1px 1px 1px black;

}
  
li 

{
  
background-image: radial-gradient(ellipse at center, rgba(255,253,226,1) 0%,rgba(255,242,107,0.73) 54%,rgba(255,242,107,0.62) 76%,rgba(255,246,0,0.5) 100%);
text-shadow: 1px 1px 1px rgb(255,253,226);
background-color: black;
color: black;
border-color: black;
border-width: 4px;
border-style: solid;
box-shadow: 1px 1px 1px black;
    
}
      
h2  

{

background-image: radial-gradient(ellipse at center, rgba(255,201,221,1) 0%,rgba(255,81,133,0.73) 54%,rgba(255,81,133,0.62) 76%,rgba(255,0,127,0.5) 100%);
text-shadow: 1px 1px 1px rgb(255,201,221);
background-color: black;
color: black;
border-color: black;
border-width: 4px;
border-style: solid;
box-shadow: 1px 1px 1px black;
      
}
      
h3 

{

background-image: radial-gradient(ellipse at center, rgba(224,239,255,1) 0%,rgba(99,174,255,0.73) 54%,rgba(99,174,255,0.62) 76%,rgba(0,123,255,0.5) 100%);
text-shadow: 1px 1px 1px rgb(224,239,255);
background-color: black;
color: black;
border-color: black;
border-width: 4px;
border-style: solid;
box-shadow: 1px 1px 1px black;

}
      
h4  

{

background-image: radial-gradient(ellipse at center, rgba(245,255,219,1) 0%,rgba(208,255,99,0.6) 54%,rgba(208,255,99,0.43) 76%,rgba(175,255,1,0.25) 100%);
text-shadow: 1px 1px 1px #9C9;
background-color: black;
color: black;
border-color: black;
border-width: 4px;
border-style: solid; 
box-shadow: 1px 1px 1px black;
      
}
    
h5 

{

background-image: radial-gradient(ellipse at center, rgba(219,255,251,1) 0%,rgba(99,255,242,0.6) 54%,rgba(99,255,242,0.43) 76%,rgba(1,255,238,0.25) 100%);
text-shadow: 1px 1px 1px #6C6;
background-color: black;
color: black;
border-color: black;
border-width: 4px;
border-style: solid;
box-shadow: 1px 1px 1px black;
      
}

h6 


{

background-image: radial-gradient(ellipse at center, rgba(246,219,255,1) 0%,rgba(221,99,255,0.6) 54%,rgba(221,99,255,0.43) 76%,rgba(203,0,255,0.25) 100%);
text-shadow: 1px 1px 1px #303;
color: white;
background-color: black;
border-color: black;
border-width: 4px;
border-style: solid;
box-shadow: 1px 1px 1px black;

}
      
p, 
ul, 
ol 

{

background-image: radial-gradient(ellipse at center, rgba(255,230,219,1) 0%,rgba(255,151,99,0.6) 54%,rgba(255,151,99,0.43) 76%,rgba(255,90,1,0.25) 100%);
text-shadow: 1px 1px 1px #C96;
background-color: black;
color: black;
border-color: black;
border-width: 4px;
border-style: solid;
box-shadow: 1px 1px 1px black;
      
}
      

Brightly Multi-Colored Pieces of Paper at Angles

I came up with this on my own



body 

{

background-image: linear-gradient(45deg, #ffff00 0%,#ffff00 10%,#00ff72 10%,#00ff72 20%,#0099ff 20%,#0099ff 30%,#e0007f 30%,#e0007f 40%,#ffff00 40%,#ffff00 50%,#00ff72 50%,#00ff72 60%,#0099ff 60%,#0099ff 70%,#e0007f 70%,#e0007f 80%,#ffff00 80%,#ffff00 90%,#00ff72 90%,#00ff72 100%);

}

#header, #footer 

{

background-image: linear-gradient(135deg, #ffff00 0%,#00ff72 10%,#0099ff 20%,#e0007f 30%,#0099ff 40%,#00ff72 50%,#ffff00 60%,#00ff72 70%,#0099ff 80%,#e0007f 90%,#0099ff 100%);
  
}
  
#content 

{ 

background-image: linear-gradient(45deg, rgba(255,255,0,0.5) 0%,rgba(0,255,114,0.5) 10%,rgba(0,153,255,0.5) 20%,rgba(224,0,127,0.5) 30%,rgba(0,153,255,0.5) 40%,rgba(0,255,114,0.5) 50%,rgba(255,255,0,0.5) 60%,rgba(0,255,114,0.5) 70%,rgba(0,153,255,0.5) 80%,rgba(224,0,127,0.5) 90%,rgba(0,153,255,0.5) 100%);

}


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