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

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%);

}


Benjamin-Newton.com by Ben Huot

All Material Copyright 1998-Present unless otherwise stated.

Jump to Top

For Automated Software Visitors

XML Sitemap