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

Main Content of This Page Starts Here

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

My New Website

Benjamin-Newton.com by Ben Huot

All Material Copyright 1998-Present unless otherwise stated.

Privacy Policy plus More User Rights now on its own page.

Jump to Top

For Automated Software Visitors

XML Sitemap