My CSS Style Guide/Techniques (Main Components): Benjamin-Newton Overview

Main Content of This Page Starts Here

All of these techniques are purely HTML and CSS only (and some SSI and meta tags). 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.

CSS Techniques Used Throughout Page

Low Memory, Extra Readable Text Shadow

I got this from general idea somewhere else but developed my own code


h1.light-color-text, 
h2.light-color-text, 
h3.light-color-text, 
h4.light-color-text, 
h5.light-color-text, 
h6.light-color-text 

{

text-shadow: 

1px 1px 0px rgba(0,0,0,0.75), 
2px 2px 0px rgba(0,0,0,0.75), 
3px 3px 0px rgba(0,0,0,0.25), 

-1px -1px 0px rgba(0,0,0,0.75),
-2px -2px 0px rgba(0,0,0,0.75), 
-3px -3px 0px rgba(0,0,0,0.25);

}

p.light-color-text,
li.light-color-text,
address.light-color-text 

{

text-shadow: 1px 1px 0px rgba(0,0,0,0.75), 
-1px -1px 0px rgba(0,0,0,0.75);

}       
        
p.dark-color-text,
li.dark-color-text,
address.dark-color-text {    

text-shadow: 

1px 1px 0px rgba(255,255,255,0.75), 
-1px -1px 0px rgba(255,255,255,0.75);

}

h1.dark-color-text, 
h2.dark-color-text, 
h3.dark-color-text, 
h4.dark-color-text, 
h5.dark-color-text, 
h6.dark-color-text {
         
text-shadow: 

1px 1px 0px rgba(255,255,255,0.75), 
2px 2px 0px rgba(255,255,255,0.5), 
3px 3px 0px rgba(255,255,255,0.25), 

-1px -1px 0px rgba(255,255,255,0.75),
-2px -2px 0px rgba(255,255,255,0.5), 
-3px -3px 0px rgba(255,255,255,0.25);
}


Responsive Multi-Device Font Sizes



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

	body {
	    font-size: 14pt;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
	    font-size: 20pt;
	}
	
	h1:before,
	h2:before,
	h3:before,
	h4:before,
	h5:before,
	h6:before {
	    font-size: 18pt;
	}
	
    address,
	p,
	.poetry,
	li,
	ol,
	ul {
	    font-size: 16pt;
	}
	
	#all p:after,
	#all ul:after,
	#all ol:after,
	#all a:after,
	#all a:before {
	    font-size: 14pt;
	}
	
	#network-title {
	   font-size: 28pt;
	}

	#website-title {
	    font-size: 23pt;
	}

	#website-title:before {
	    font-size: 19pt;
	}
}

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

	body #all h1 {
	    font-size: 32pt;
	}

	body #all h2 {
	    font-size: 30pt;
	}

	body #all h3 {
	    font-size: 28pt;
	}

	body #all h4 {
	    font-size: 26pt;
	}

	body #all h5 {
	    font-size: 24pt;
	}

	body #all h6 {
	    font-size: 22pt;
	}
	
	body #all h1:before {
	    font-size: 30pt;
	}

	body #all h2:before {
	    font-size: 28pt;
	}

	body #all h3:before {
	    font-size: 26pt;
	}

	body #all h4:before {
	    font-size: 24pt;
	}

	body #all h5:before {
	    font-size: 22pt;
	}

	body #all h6:before {
	    font-size: 20pt;
	}
	
	#network-title {
	   font-size: 36pt;
	}
}

@media only screen and (min-width: 1366px) { 
    
	body {
	    font-size: 16pt;
	}
    
    address,
	p,
	.poetry,
	li,
	ol,
	ul {
	    font-size: 18pt;
	}

	#all p:after,
	#all ul:after,
	#all ol:after,
	#all a:after,
	#all a:before {
	    font-size: 16pt;
	}
	
	#network-title {
	   font-size: 48pt;
	}

	#website-title {
	    font-size: 24pt;
	}

	#website-title:before {
	    font-size: 20pt;
	}
    
}

@media only screen and (min-width: 320px) and (max-width: 767px) { 
	
body {
  font-size: 14pt;
}

h1,
h2, 
h3, 
h4, 
h5, 
h6 {
  font-size: 18pt;
} 

}

@media print { 
	* {
	    font-size: 12pt !important;
	}

	* h1 {
	    font-size: 24pt !important;
	}

	* h2 {
	    font-size: 18pt !important;
	}

	* h3 {
	    font-size: 14pt !important;
	}

	* h4 {
	    font-size: 12pt !important;
	}

	* h5 {
	    font-size: 10pt !important;
	}


	* address {
	    font-size: 12pt !important;
	}

	* em,
	* strong,
	* a {
	    font-size: 12pt !important;
	}

}


Auto-Numbering Outline

I got this from somewhere else but developed my own implementation



body {

counter-reset: first item paragraph;  
  
}      
    
h2 {

counter-increment: first; 
counter-reset: second;

}    
    
h2:before {

content: counter(first) " - ";
 
}

h3 {

counter-increment: second; 
counter-reset: third;

}

h3:before {

content: counter(first) "." counter(second) " - "; 

}

h4 {

counter-increment: third; 
counter-reset: fourth;
  
}

h4:before {

content: counter(first) "." counter(second) "." counter(third) " - ";
 
}

h5 {
  
counter-increment: fourth; 
counter-reset: fifth;

}

h5:before {

  content: counter(first) "." counter(second) "." counter(third) "." counter(fourth) " - "; 
  
}

h6 {

counter-increment: fifth; 
counter-reset: sixth;

}

h6:before {

content: counter(first) "." counter(second) "." counter(third) "." counter(fourth) "." counter(fifth) " - "; 
  
}

p, 
.poetry, 
ul, 
ol 

{

counter-increment: paragraph;
  
}

p:before, 
.poetry:before, 
ul:before, 
ol:before 

{
   
content: counter(paragraph, upper-roman) ". ";
   
}

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

{

display: inline-block;
text-align: left;
vertical-align: top;
  
}
  
ul:before, 
ol:before 

{

display: block;
text-align: center;
font-variant: small-caps;
font-size: 18pt;

}

li, 
p a, 
address a,
.line-poem 

{

counter-increment: item;

}

li:before, 
p a:before, 
address a:before, 
.line-poem:before 

{
   
content: counter(item, lower-alpha) ". ";

}

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

{
  
content: 'I is 1, V is 5, X is 10, L is 50, C is 100, D is 500, M is 1,000 (Smaller Number Preceding Larger Number Means: Subtract That Many From The Number)';
display: block;
padding: 1em;
margin: 1em;
border-top-color: black;
border-top-width: 5px;
border-top-style: solid; 

}
  
#content p:before 

{

content: "Content " counter(paragraph, upper-roman) ". ";

}

#header p:before 

{

content: "Header " counter(paragraph, upper-roman) ". ";

}

#footer p:before 

{

content: "Footer " counter(paragraph, upper-roman) ". ";
 
}

#content .poetry:before 

{

content: "Content " counter(paragraph, upper-roman) ". ";

}

#header .poetry:before 

{

content: "Header " counter(paragraph, upper-roman) ". ";

}

#footer .poetry:before 

{


content: "Footer " counter(paragraph, upper-roman) ". ";

}

#content ol:before 

{
 
content: "Content " counter(paragraph, upper-roman) ". ";

}

#content ul:before 

{

content: "Main Navigation " counter(paragraph, upper-roman) ". "; 

}    

#header ul:before, #header ol:before 

{

content: "Header " counter(paragraph, upper-roman) ". ";

}

#footer ul:before, #footer ol:before 

{

content: "Footer " counter(paragraph, upper-roman) ". ";

}

#content ul.nav:before, #content ol.nav:before 

{
 
content: "Main Navigation " counter(paragraph, upper-roman) ". ";

}

#header ul.nav:before, #header ol.nav:before \

{
 
content: "Header Navigation " counter(paragraph, upper-roman) ". ";

}

#footer ul.nav:before, #footer ol.nav:before 

{

content: "Footer Navigation " counter(paragraph, upper-roman) ". ";

}

#content h2:before 

{

content: "Content " counter(first) " - "; 

}

#content h3:before 

{

content: "Content " counter(first) "." counter(second) " - "; 
  
}

#content h4:before 

{
  
content: "Content " counter(first) "." counter(second) "." counter(third) " - "; 
  
}

#content h5:before 

{
  
content: "Content " counter(first) "." counter(second) "." counter(third) "." counter(fourth) " - "; 
  
}

#content h6:before 

{

content: "Content " counter(first) "." counter(second) "." counter(third) "." counter(fourth) "." counter(fifth) " - "; 
  
}
  
#header h2:before 

{
  
content: "Header " counter(first) " - "; 

}

#header h3:before 

{
  
content: "Header " counter(first) "." counter(second) " - "; 
  
}

#header h4:before 

{

content: "Header " counter(first) "." counter(second) "." counter(third) " - "; 

}

#header h5:before 

{
  
content: "Header " counter(first) "." counter(second) "." counter(third) "." counter(fourth) " - "; 
  
}

#header h6:before

{

content: "Header " counter(first) "." counter(second) "." counter(third) "." counter(fourth) "." counter(fifth) " - "; 
  
}
  
#footer h2:before 

{

content: "Footer " counter(first) " - "; 
  
}

#footer h3:before 

{
  
content: "Footer " counter(first) "." counter(second) " - "; 
  
}

#footer h4:before 

{
  
content: "Footer " counter(first) "." counter(second) "." counter(third) " - "; 
  
}

#footer h5:before 

{
  
content: "Footer " counter(first) "." counter(second) "." counter(third) "." counter(fourth) " - "; 

}

#footer h6:before 

{
  
content: "Footer " counter(first) "." counter(second) "." counter(third) "." counter(fourth) "." counter(fifth) " - "; 

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

h1:before 

{

content: "♥ This Web Page Title — "; 
  
}   

#content p:before 

{
 
content: "§ Content Section ¶ Paragraph " counter(paragraph, upper-roman) ". ";

}

#header p:before 

{
 
content: "§ Header Section ¶ Paragraph " counter(paragraph, upper-roman) ". ";

}

#footer p:before 

{

content: "§ Footer Section ¶ Paragraph " counter(paragraph, upper-roman) ". ";

}

#content .poetry:before 

{

content: "§ Content Section: Poem " counter(paragraph, upper-roman) ". ";

}

#header .poetry:before 

{

content: "§ Header Section: Poem " counter(paragraph, upper-roman) ". ";

}

#footer .poetry:before 

{
 
content: "§ Footer Section: Poem " counter(paragraph, upper-roman) ". ";

}

#content ol:before 

{

content: "§ Content Section • List " counter(paragraph, upper-roman) ". ";

}

#content ul:before 

{

content: "§ Main Navigation ⇔ " counter(paragraph, upper-roman) ". "; 

}    

#header ul:before, #header ol:before 

{
 
content: "§ Header Section • List " counter(paragraph, upper-roman) ". ";

}

#footer ul:before, #footer ol:before 

{
 
content: "§ Footer Section • List " counter(paragraph, upper-roman) ". ";

}

#content ul.nav:before, #content ol.nav:before 

{

content: "§ Main Navigation ⇔ " counter(paragraph, upper-roman) ". ";

}

#header ul.nav:before, #header ol.nav:before 

{
 
content: "§ Header Navigation ⇔ " counter(paragraph, upper-roman) ". ";

}

#footer ul.nav:before, #footer ol.nav:before 

{

content: "§ Footer Navigation ⇔ " counter(paragraph, upper-roman) ". ";

}

li:before, p a:before, address a:before, .line-poem:before 

{
   
content:  "⇒ Item " counter(item, lower-alpha) ". ";

}

#content h2:before 

{

content: "§ Content Section: Heading " counter(first) " — "; 

}

#content h3:before 

{

content: "§ Content Section: Heading " counter(first) "." counter(second) " — "; 

}

#content h4:before 

{
  
content: "§ Content Section: Heading " counter(first) "." counter(second) "." counter(third) " — "; 
  
}

#content h5:before 

{

content: "§ Content Section: Heading " counter(first) "." counter(second) "." counter(third) "." counter(fourth) " — "; 
  
}

#content h6:before 

{
  
content: "§ Content Section: Heading " counter(first) "." counter(second) "." counter(third) "." counter(fourth) "." counter(fifth) " — "; 
  
}
  
#header h2:before 

{

content: "§ Header Section: Heading " counter(first) " — "; 

}

#header h3:before 

{

content: "§ Header Section: Heading " counter(first) "." counter(second) " — "; 

}

#header h4:before 

{
  
content: "§ Header Section: Heading " counter(first) "." counter(second) "." counter(third) " — "; 
  
}

#header h5:before 

{
  
content: "§ Header Section: Heading " counter(first) "." counter(second) "." counter(third) "." counter(fourth) " — "; 
  
}

#header h6:before 

{

content: "§ Header Section: Heading " counter(first) "." counter(second) "." counter(third) "." counter(fourth) "." counter(fifth) " — "; 
  
}
  
#footer h2:before 

{
  
content: "§ Footer Section: Heading " counter(first) " — "; 
  
}

#footer h3:before 

{
  
content: "§ Footer Section: Heading " counter(first) "." counter(second) " — "; 
  
}

#footer h4:before 

{
  
content: "§ Footer Section: Heading " counter(first) "." counter(second) "." counter(third) " — "; 
  
}

#footer h5:before 

{

content: "§ Footer Section: Heading " counter(first) "." counter(second) "." counter(third) "." counter(fourth) " — "; 

}

#footer h6:before 

{

content: "§ Footer Section: Heading " counter(first) "." counter(second) "." counter(third) "." counter(fourth) "." counter(fifth) " — "; 

}
  
}


Horizontal to Vertical Lists and Paragraphs

I got this from somewhere else but developed my own implementation (based on screen/browser-width)


ul {

display: block;

}

ul li {

display: inline-block;
text-align: center;

}

ul li a { 

display: inline-block;
text-align: center;

}

p {

width: 14em;
display: inline-block;
vertical-align: top;

}

Auto Link Description by File Type or Domain

I got this from somewhere else but developed my own implementation (order of commands is very important - do not change order of lines)

  

#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;

}

a[href^='/']:after,

a[href^='$']:after,

a[href^='../']:after

{

content: ' - another section ';
    
}

a[href='./']:after

{

content: ' - same section ';
    
}


a[href^='http://']:after,
a[href^='https://']:after 

{

content: ' - different website ';
    
}

a[href^='https://benjamin-newton.com']:after

{

content: ' - another section ';
    
}

a[href='https://benjamin-newton.com']:after, 

a[href='https://benjamin-newton.com/']:after, 

a[href='/']:after 

{

content: ' - front page ';
    
}  

a[href^='https://itunes.apple.com/']:after

{

content: ' - Apple iTunes Store ';
    
}

a[href^='https://benjamin-newton.org']:after 

{

content: ' - my hobbies website ';
    
}

a[href^='https://benjamin-newton.net']:after 

{

content: ' - my umbrella website ';
    
}
 
a[href^='https://benjamin-newton.us']:after 

{

content: ' - my overview website ';
  
}

a[href^='https://benjamin-newton.info']:after 

{

content: ' - my childhood website ';
    
}

a[href^='http://mobile.benjamin-newton.com']:after 

{
    
content: ' - my mobile website ';
    
}


a[href^='#']:after 

{

content: ' - on this page ';
     
}

a[href$='.shtml']:after 

{
    
content: ' - another webpage ';
    
}

a[href$='.html']:after 

{
    
content: ' - plain webpage ';
    
}

a[href*='-plain']:after,
a[href*='-red']:after

{
    
content: ' - unusual file format ';

}

a[href*='-plain.html']:after 

{
    
content: ' - entire book webpage ';

}

a[href$='.zip']:after 

{
    
content: ' - Zip Download ';
    
}

a[href$='.pdf']:after 

{
    
content: ' - PDF Download ';
    
}

a[href$='.epub']:after,
a[href$='.ibooks']:after 

{
    
content: ' - Apple E-Book ';
    
}

a[href$='.mobi']:after 

{
    
content: ' - Amazon.com E-Book ';
    
}

a[href$='.rtf']:after 

{
    
content: ' - old Microsoft format ';
    
}

a[href$='.csv']:after 

{
    
content: ' - old spreadsheet format ';
    
}

a[href$='.djvu']:after 

{
    
content: ' - unusual document format ';
    
}


a[href$='.docx']:after,
a[href$='.pptx']:after, 
a[href$='.xlsx']:after

{
    
content: ' - new Microsoft format ';
    
}


a[href$='.pages']:after,
a[href$='.key']:after, 
a[href$='.numbers']:after

{
    
content: ' - new Apple format ';
    
}

a[href$='.odt']:after,
a[href$='.odp']:after, 
a[href$='.ods']:after

{
    
content: ' - Open Document Format ';
    
}

a[href$='.png']:after, 
a[href$='.jpg']:after

{
    
content: ' - photo or drawing ';
    
}

a[href$='.eps']:after 

{
    
content: ' - old Adobe format ';
    
}

a[href$='.cbz']:after 

{
    
content: ' - comic book archive ';
    
}

a[href$='.svg']:after 

{
    
content: ' - advanced picture format ';
    
}

a[href$='.wmv']:after,
a[href$='.wma']:after  

{
    
content: ' - Microsoft audio format ';
    
}

a[href$='.ogg']:after,
a[href$='.flac']:after 

{
    
content: ' - unusual audio format ';
    
}

a[href$='.mp3']:after 

{
    
content: ' - old audio format ';

}
 
a[href$='.mp4']:after,
a[href$='.m4a']:after 

{
    
content: ' - new audio format ';
    
}

a[href$='.m4r']:after

{
    
content: ' - iPhone Ringtone ';

}

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

{  

a[href$='-pdf.zip']:after 

{
    
content: ' - PDF in Zip Download ';

}

a[href$='-pdf-a1a.zip']:after 

{

content: ' - Accessible PDF in Zip Download ';

}

a[href$='-rtf.zip']:after 

{
    
content: ' - Rich Text in Zip Download ';

}

a[href$='-mobi.zip']:after 

{
    
content: ' - Amazon.com E-Book in Zip Download ';

}

a[href$='-epub.zip']:after  

{

content: ' - Apple E-Book in Zip Download ';
    
}

a[href$='-html-interactive.zip']:after 

{

content: ' - Standard Web Page Bundle in Zip Download ';
    
}

 a[href$='-html-basic-mobile.zip']:after 
 
{
 
content: ' - Mobile Web Page Bundle in Zip Download ';
    
}

a[href$='-ebooks.zip']:after, a[href$='-desktop-printer.zip']:after 

{
    
content: ' - PDF Bundle in Zip Download ';
    
}

a[href$='-mobile-ebook.zip']:after 

{
    
content: ' - Mobile E-Book Bundle in Zip Download ';
    
}

a[href$='-word-processor.zip']:after 

{
    
content: ' - Word Processor Bundle in Zip Download ';
    
}

a[href$='-all-books-in-1.zip']:after 

{
    
content: ' - One Big PDF in Zip Download ';
    
}

a[href$='-all-books-in-1.epub']:after 

{

content: ' - One Big Apple E-Book ';
    
}

a[href$='-all-books-in-1.mobi']:after 

{

    content: ' - One Big Amazon.com E-Book ';
    
}

}

a[href*='@']:after 

{
    
    content: ' - email address ';
    
}

  

Auto Link Underline Style by Domain with Border-Bottom

I got this from somewhere else but developed my own implementation (order of commands is very important - do not change order of lines)

  

p a 

{ 

border-bottom-width: .5em;
border-bottom-style: solid;
border-bottom-color: #CC0000;
text-decoration: none;
background-color: rgba(255,255,255,0.5);
color: black;

}

address a 

{

border-bottom-width: .5em;
border-bottom-style: solid;
border-bottom-color: #CC0000;
text-decoration: none;
background-color: rgba(255,255,255,0.5);
color: black;

}

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

{

display: block;
    
font-variant: small-caps;

border-top-color: black;
border-top-style: solid;

border-top-width: 1px;

padding-top: 1px;
margin-top: 1px;

}

a[href^='/'],
a[href$='/'],
a[href='./'], 
a[href^='../']

{

border-bottom-style: solid;
border-bottom-width: .5em;
text-decoration: none;
color: black;

}

a[href^='http://'], 
a[href^='https://']

{

border-bottom-style: double;
border-bottom-width: .5em;
text-decoration: none;
color: black;

}

a[href^='https://benjamin-newton.com']

{

border-bottom-style: solid;
border-bottom-width: .5em;
text-decoration: none;
color: black;

}

a[href^='https://benjamin-newton.us'], 
a[href^='https://benjamin-newton.org'], 
a[href^='https://benjamin-newton.net'], 
a[href^='https://benjamin-newton.info'], 
a[href^='http://mobile.benjamin-newton.com'], 
a[href*='rackcdn']

{

border-bottom-style: dashed;
border-bottom-width: .5em;
text-decoration: none;
color: black;

}
  

Emphasis, Strong Emphasis, Stronger Emphasis, Strongest Emphasis, and No Emphasis with Gradient Underlines

I got this from somewhere else but developed my own implementation

  

body {

line-height: 2em;

}

em, strong, .none, strong.stronger, strong.strongest

{

background-color: white;
background-color: rgba(255,255,255,0.75);
text-shadow: 1px 1px 1px white;
font-style: normal;
font-weight: normal;
font-variant: small-caps;

}
  
em
  
{

color: #000099;
  
}
  
strong
  
{

color: #990000;
  
}
  
.none {

color: #003300;
  
}
  
strong.stronger {

color: #333300;
  
}
  
strong.strongest  {

color: #990099;
  
}

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

em, strong, .none, strong.stronger, strong.strongest 

{

position: relative;
margin: 0px;
font-style: normal;
font-weight: normal;
border-width: 0px;
z-index: 1;
overflow: hidden;
padding-bottom: .5em;
display: inline-block;
   
}

em:after, strong:after, .none:after, strong.stronger:after, strong.strongest:after 

{

content: "";
position: absolute;
margin: 0px;
padding: 0px;
bottom: 0em;
left: 0;
height: .75em;
width: 100%;
z-index: 2;
border-width: 0px;
   
}

em:after {

background: blue;
background: linear-gradient(to right, rgba(0,0,255,1) 0%,rgba(0,0,0,1) 100%);

}
   
strong:after {

background: red;
background: linear-gradient(to right, rgba(255,0,0,1) 0%,rgba(0,0,0,1) 100%);

}
   
.none:after {

background: green;
background: linear-gradient(to right, rgba(0,255,0,1) 0%,rgba(0,0,0,1) 100%);

}
   
strong.stronger:after {

background: yellow;
background: linear-gradient(to right, rgba(255,255,0,1) 0%,rgba(0,0,0,1) 100%);

}
   
strong.strongest:after {

background: purple;
background: linear-gradient(to right, rgba(255,0,255,1) 0%,rgba(0,0,0,1) 100%);

}

}

   

Creative Buttons



a {

display: inline-block;
width: auto;
text-align: left;
border-color: rgb(63,63,63);
border-width: 5px;
border-style: solid;
padding: .5em;
margin: .5em;
border-bottom-width: 7px;
border-bottom-style: solid;
border-bottom-color: rgb(255,0,127);
color: black;
text-decoration: none;
background-color: white;
background-color: rgba(255,255,255,0.75);

}

a {

color: white;
background-color: black;
background-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(255,0,127,0.5) 15%,rgba(191,0,89,0.5) 52%,rgba(127,0,57,0.5) 85%,rgba(0,0,0,0.5) 100%);

}

a {

color: white;
background-color: black;
background-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(255,0,127,0.5) 15%,rgba(191,0,89,0.5) 52%,rgba(127,0,57,0.5) 85%,rgba(0,0,0,0.5) 100%);

}

a {

color: white;
background: linear-gradient(to bottom, rgba(191,0,89,1) 0%,rgba(0,0,0,1) 100%);

}

a {

color: black;
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,127,184,1) 100%);

}

a {

color: black;
background: radial-gradient(ellipse at center, #ffffff 0%,#ffbfda 50%,#ff7fb8 100%);

}

a {

background: linear-gradient(to bottom, rgba(191,0,89,0.75) 0%,rgba(191,0,89,1) 25%,rgba(127,0,57,1) 75%,rgba(127,0,57,0.75) 100%);
	
}

a {

color: white;
background: radial-gradient(ellipse at center, #000000 0%,#7f0039 75%,#bf0059 100%);

}

a {

color: white;
background: linear-gradient(to bottom, #ffbfda 0%,#7f0039 50%,#000000 50%,#000000     65%,#280716 100%);

}

a {

color: white;
background: linear-gradient(to bottom, #bf0059 50%,#7f0039 50%);

}

 

Scroll Down Arrows using CSS Gradients

I came up with this all by myself


h1:after, h2:after, h3:after, h4:after {
content: "scroll down";

background: 
linear-gradient(45deg, rgba(255,255,255,0) 0%,rgba(0,0,0,0) 50%,rgba(5,5,5,1) 51%,rgba(255,255,255,1) 99%),
linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(5,5,5,1) 49%,rgba(0,0,0,0) 50%,rgba(255,255,255,0) 100%);

width: 6em; 
height: 3em;   
background-size: 6em 6em, 6em 6em; 
background-position: -3em 100%, 3em 100%; 
background-repeat: no-repeat, no-repeat;
text-align: center;
position: relative;
display: block;
margin: 0 auto;
color: white;
font-size: 12pt;
text-shadow: 1px 1px 1px black;
padding-top: .5em;

}

Scroll to Top Arrow using CSS Gradients

I came up with this all by myself



#all:after {
 
content: "scroll to top";

background: 

linear-gradient(45deg, rgba(255,255,255,1) 1%,rgba(5,5,5,1) 49%,rgba(0,0,0,0) 50%,rgba(255,255,255,0) 100%),

linear-gradient(135deg, rgba(255,255,255,0) 0%,rgba(0,0,0,0) 50%,rgba(5,5,5,1) 51%,rgba(255,255,255,1) 99%); 
    
width: 6em; 
height: 3em;  
background-size: 6em 6em, 6em 6em; 
background-position: 3em 2.5em, -3em 2.5em; 
background-repeat: no-repeat, no-repeat;
text-align: center;
position: relative;
display: block;
margin: 0 auto;
color: white;
font-size: 12pt;
line-height: 3em;
text-shadow: 1px 1px 1px black;
padding-top: 3em;
padding-bottom: -4em;
border-width: 0px;

}

Setting to Plain Styling for Print Stylesheet

I got this from somewhere else but developed my own implementation

  

@media print {
  
/* start print CSS3 style reset */
   
* {

background: transparent !important;
color: black !important;  
border-radius: 0em !important;
box-shadow: none !important;  
background-image: none !important; 
text-shadow: none !important; 
line-height: 1em !important;
  
}
  
:not(td) {

border-color: white !important;
border-width: 0px !important;
border-style: solid !important;

}
  
/* end print CSS3 style reset */ 
  
body {
  
margin: .25in !important;
padding: .25in !important;
font-family: Georgia, Verdana, sans-serif;

}
  
#all, #header, #footer {
    
width: auto;
  
}
  
#all, #header, #footer, * em, * strong, * a, table, tr, td, td p {
  
padding: 0px !important;
margin: 0px !important;

}
  
* ul , * ol, * li, * p, * blockquote, * .poetry, * h1, * h2, * h3, * h4, * h5, * h6 { 
  
padding: .25em !important;
margin: .25em !important;
line-height: 1em !important;

}
  
body, * ul , * ol, * li, * p, * blockquote, * .poetry {
  
width: auto !important;
font-size: 12pt !important;
text-align: left !important;

}
  
* h1, * h2, * h3, * h4, * h5, * h6 { 
  
text-align: center !important;

}
  
* h1 { 
  
font-size: 24pt !important;
  
}

* h2 { 

font-size: 18pt !important;
  
}

* h3 { 

font-size: 14pt !important;

}

* h4 { 

font-size: 12pt !important;
  
}
    
* h5 { 

font-size: 10pt !important;
  
}
  
* li { 
  
page-break-inside: avoid !important;
list-style-type: none !important;
list-style-position: inside !important;
display: list-item !important;
  
}
  
* p, * blockquote, * .poetry {

page-break-inside: avoid !important;

}
  
* p {

text-indent: 3em !important;
  
}
  
* address {
  
width: auto !important;
text-align: center !important;
display: block !important;
margin: 0 auto !important;
font-size: 12pt !important;

}
  
* em, * strong, * a {
  
font-size: 12pt !important;
display: inline !important;

}
  
* em {
  
font-style: italic !important;
  
}
  
* strong {
  
font-weight: bold !important;
  
}
 
* a {

text-decoration: underline !important;
   
}
   
table {
  
display: table;
width: 60%;
 
}
  
tr {

width: 100%;
display: table-row;
page-break-inside: avoid;

}

td {

width: 100%;
display: table-cell;
page-break-inside: avoid;
text-align: center;
font-size: 10pt;
border-color: black !important;
border-width: 1px !important;
border-style: solid !important;

}

td p {

width: 100%;
page-break-inside: avoid;
text-align: center;
text-indent: 0px;
font-size: 10pt;

}
   
tr td:nth-child(1) p,  
tr td:nth-child(2) p, 
tr td:nth-child(3) p, 
tr td:nth-child(4) p {

font-weight: bold;
    
}   

*::before, 
*::after,    
* img,
* object,
* .cow-vector,
* #logo,
* .svg-fallback,
* .cows,
* .custom-nav, 
* .notice,
* .header-notice, 
* #jump-past, 
* jump-up,
* .non-semantic-protector, 

* #hotair-graphic, 
* #rainy-weather, 
* #clouds,
* #flat-design,
* .golden-background,

* audio,

* #fixed-nav-bar, 
* #top-menu, 
* #fixed-nav-bar,
* .hide-show {
  
display: none !important;
visibility: hidden !important;
width: 0px !important;
height: 0px !important;
padding: 0px !important;
margin: 0px !important;
  
}
  
*::before, *::after {

content: "" !important;

}
  
}

     

CSS Techniques Used In Only Part of Page

Top Fixed Header

I got this from somewhere else but developed my own implementation

 

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

<div id="fixed-nav-bar">  

   <span id="on-page">  
   
          <a href="#footer-starts">Network </a>
        
          <a href="#all">Top </a>
          
    </span>
          
    <span id="off-page">       
       
          <a href="https://benjamin-newton.us/">Overview </a>

             <a href="https://benjamin-newton.com/">Creative </a>
           
             <a href="https://benjamin-newton.org/">Oregon </a>
               
             <a href="https://benjamin-newton.net/">Challenging </a>
       
       </span>     
           
           <span id="on-page4">
             
             <a href="http://mobile.benjamin-newton.com/">Simple</a>
             
             <a href="http://mobile.benjamin-newton.com/wear">Less</a>
             
       </span>
       
</div>  

  
<div id="fixed-nav-bar2">  

   <span id="on-page2">  
   
          <a href="#footer-starts">Network </a>
        
          <a href="#all">Top </a>
          
    </span>
          
    <span id="off-page2">       
       
          <a href="https://benjamin-newton.us/">About </a>

             <a href="https://benjamin-newton.com/">Main/Pro </a>
           
             <a href="https://benjamin-newton.org/">Hobbies </a>
             
             <a href="https://benjamin-newton.info/">Childhood </a>
               
             <a href="https://benjamin-newton.net/">Umbrella </a>
       
       </span>     
           
           <span id="on-page3">
             
             <a href="http://mobile.benjamin-newton.com/">Mobile </a>
             
             <a href="http://mobile.benjamin-newton.com/wear">Really Mobile </a>
             
             <a href="https://benjamin-newton.us/pro/resume">Resume </a>
             
             <a href="https://benjamin-newton.com/lost">Error/Redirect Page </a>
             
       </span>
       
</div>  


</body>
</html>
    



#fixed-nav-bar 

{

position: fixed;
top: 0;
z-index: 100000; 
width: 100%;
background: transparent; 
color: black;
text-align: left;
overflow: hidden;
display: block;
white-space: nowrap;
margin: 0px;
padding: 0px;
  
}

#fixed-nav-bar2 

{

z-index: 100000;
width: 100%;
background: transparent; 
color: black;
text-align: left;
overflow: visible;
display: block;
white-space: normal;
margin: 0px;
padding: 0px;
  
}

#fixed-nav-bar a, #fixed-nav-bar2 a 

{
  
color: white;
text-decoration: none;
border-width: 0px;
border-color: white;
border-style: none;
background: transparent;
display: inline-block;
padding-left: 0px;
margin-left: 0px;
padding-right: 0px;
margin-right: 0px;
text-align: left;
-moz-border-radius-bottomright: 0em;
border-bottom-right-radius: 0em;
-moz-border-radius-bottomleft: 0em;
border-bottom-left-radius: 0em; 
height: 2em;
line-height: 2em;
  
}

#fixed-nav-bar a:before, #fixed-nav-bar2 a:before 

{
  
height: 2em;
line-height: 2em;
display: inline-block;
margin: 0px;
padding: 0px;
vertical-align: top;

}

#fixed-nav-bar a:after, #fixed-nav-bar2 a:after

{

content: "";
  
}

#fixed-nav-bar #off-page, 
#fixed-nav-bar2 #off-page2, 
#fixed-nav-bar #on-page, 
#fixed-nav-bar2 #on-page2 {

text-align: left;
  
}

#fixed-nav-bar #off-page a:nth-child(even), #fixed-nav-bar2 #off-page2 a:nth-child(even) 

{

background: #ffffcc;
color: black;
text-shadow: 1px 1px 1px #cccccc;

}

#fixed-nav-bar #off-page a:nth-child(odd), #fixed-nav-bar2 #off-page2 a:nth-child(odd) 

{

background: #006600;
color: white;
text-shadow: 1px 1px 1px black;

}

#fixed-nav-bar #on-page a, #fixed-nav-bar2 #on-page2 a
 
{

color: white;
background: #990000;
text-shadow: 1px 1px 1px black;

}

#fixed-nav-bar #on-page4 a, #fixed-nav-bar2 #on-page3 a:nth-child(odd) {

color: white;
background: #000099;
text-shadow: 1px 1px 1px black;
  
}
  
#fixed-nav-bar2 #on-page3 a:nth-child(even)
 
{

color: black;
background: #FBE6FF;
text-shadow: 1px 1px 1px #cccccc;

}

#fixed-nav-bar #off-page a:before, #fixed-nav-bar2 #off-page2 a:before

{
  
content: " ♠ ";
  
}
  
#fixed-nav-bar #off-page a:nth-child(odd):before, #fixed-nav-bar2 #off-page2 a:nth-child(odd):before 

{
  
color: white;
background-color: black;
  
}
  
#fixed-nav-bar #off-page a:nth-child(even):before, #fixed-nav-bar2 #off-page2 a:nth-child(even):before 

{

color: black;
background-color: white;

}

#fixed-nav-bar #on-page a:before, #fixed-nav-bar2 #on-page2 a:before 

{
  
content: " ♦ ";
color: white;
background-color: black;

}
  
#fixed-nav-bar2 #on-page3 a:before, #fixed-nav-bar #on-page4 a:before 

{

content: " ♣ ";
color: white;
background-color: black;
  
}
  
#fixed-nav-bar2 #on-page3 a:nth-child(even):before 

{
  
color: black;
background-color: white;
  
}

#fixed-nav-bar #off-page a.current-website:before, #fixed-nav-bar2 #off-page2 a.current-website:before, #fixed-nav-bar2 #on-page3 a.current-website:before, #fixed-nav-bar #on-page4 a.current-website:before 

{ 

content: " √ ";
  
}

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

#fixed-nav-bar, #fixed-nav-bar2 

{

background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,0.93) 94%,rgba(255,255,255,1) 100%);

}

#fixed-nav-bar #off-page a:nth-child(even), #fixed-nav-bar2 #off-page2 a:nth-child(even) 

{

background: linear-gradient(to bottom, #ffffcc 20%,#999900 94%);

}

#fixed-nav-bar #off-page a:nth-child(odd), #fixed-nav-bar2 #off-page2 a:nth-child(odd) 

{

background: linear-gradient(to bottom, #00cc00 20%,#003300 94%);

}

#fixed-nav-bar #on-page a, #fixed-nav-bar2 #on-page2 a 

{

background: linear-gradient(to bottom, #ff0000 20%,#330000 94%);

}

#fixed-nav-bar #on-page4 a, #fixed-nav-bar2 #on-page3 a:nth-child(odd) 

{

background: linear-gradient(to bottom, #0000ff 20%,#000033 94%);

}
  
#fixed-nav-bar2 #on-page3 a:nth-child(even) 

{

background: linear-gradient(to bottom, #FBE6FF 20%,#996699 94%);

}

#fixed-nav-bar #off-page a:nth-child(odd):before, #fixed-nav-bar2 #off-page2 a:nth-child(odd):before 

{

background: linear-gradient(to bottom, #999999 20%,black 94%);
  
}
  
#fixed-nav-bar #off-page a:nth-child(even):before, #fixed-nav-bar2 #off-page2 a:nth-child(even):before 

{

background: linear-gradient(to bottom, white 20%,#999999 94%);
  
}

#fixed-nav-bar #on-page a:before, #fixed-nav-bar2 #on-page2 a:before 
  
{

background: linear-gradient(to bottom, #999999 20%,black 94%);
  
}
  
#fixed-nav-bar2 #on-page3 a:before, #fixed-nav-bar #on-page4 a:before 

{

background: linear-gradient(to bottom, #999999 20%,black 94%);
  
}
  
#fixed-nav-bar2 #on-page3 a:nth-child(even):before 

{

background: linear-gradient(to bottom, white 20%,#999999 94%);

}

}

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

#fixed-nav-bar #off-page { 

display: none;
visibility: hidden;
width: 0px;
height: 0px; 

}
    
}    


3 Sizes of 3d Cubes with logo, website address, and author name

I got this somewhere else byt heavily modified it

 
<div class="wrap">
  <div class="cube">
    <b class="front"></b>
    <b class="back"></b>
    <b class="top"></b>
    <b class="bottom"></b>
    <b class="left"></b>
    <b class="right"></b>
  </div>
</div>

Large Size Cube

 

.wrap 
 
{
  
padding-top: 300px;
height: 450px;

position: relative;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
perspective: 1200px;
-webkit-perspective-origin: 50% 150px;
-moz-perspective-origin: 50% 150px;
perspective-origin: 50% 150px;
       
background-color: rgba(255,255,255,0.75);
       
}

.cube 

{

width: 300px;

position: relative;
margin: 0 auto;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
transform:rotateX(-30deg) rotateY(-30deg);
  
background-color: rgba(255,255,255,0.75);
  
}

b 

{

  height: 298px;
  width: 298px;
  
  position: absolute;
  display: block;
  text-align: center;
  margin: 0 auto;
  font-weight: normal;
  
  background: black;
  color: white;
  font-size: 24pt;

}


b:before,
b:after 

{

background-color: black;
background-color: rgba(0,0,0,0.5);
text-shadow: 2px 2px 2px black;

display: block;

}

b:before 

{

content: "Benjamin-Newton.Net";
margin-bottom: 7em;

}

b:after 

{

content: "by Ben Huot";
margin-bottom: 0;

}

b.back 

{

transform: translateZ(-150px) rotateY(180deg);
  
background-color: rgba(0,122,0,0.75);
background-image: url('/ben-wedding-center-1.svg');
border-width: 1px;
border-style: solid;
border-color: black;

}

b.right 

{

transform:rotateY(-270deg) translateX(150px);
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
transform-origin: top right;

background-color: rgba(255,255,122,0.75);
background-image: url('/ben-wedding-center-1.svg');
border-width: 1px;
border-style: solid;
border-color: black;

}

b.left 

{

transform:rotateY(270deg) translateX(-150px);
-webkit-transform-origin: center left;
-moz-transform-origin: center left;
transform-origin: center left;
  
background-color: rgba(0,0,122,0.75);
background-image: url('/ben-wedding-center-1.svg');
border-width: 1px;
border-style: solid;
border-color: black;

}

b.top 

{

transform:rotateX(35deg) rotateZ(-90deg) translateY(-150px);
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
transform-origin: top center;

background-color: rgba(255,122,255,0.75);
background-image: url('/ben-wedding-center-1.svg');
border-width: 1px;
border-style: solid;
border-color: black;

}

b.bottom 

{

transform:rotateX(90deg) translateY(150px);
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
transform-origin: bottom center;

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

}

b.front 

{

transform: translateZ(150px);

background-color: rgba(255,122,122,0.75);
background-image: url('/ben-wedding-center-1.svg');
border-width: 1px;
border-style: solid;
border-color: black;

}


Medium Size Cube

  
 
.wrap 

{

padding-top: 250px;
height: 375px;

position: relative;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
-webkit-perspective-origin: 50% 125px;
-moz-perspective-origin: 50% 125px;
perspective-origin: 50% 125px;
       
background-color: rgba(255,255,255,0.75);
       
}

.cube 

{

position: relative;
margin: 0 auto;
  
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
transform:rotateX(-30deg) rotateY(-30deg);
  
width: 250px;
background-color: rgba(255,255,255,0.75);
  
}

b 

{

position:absolute;
display: block;
text-align: center;
margin: 0 auto;
  
width: 248px;
height: 248px;
font-weight: normal;
font-size: 20pt;
background: black;
color: white;

}

b:before, 
b:after 

{

background-color: black;
background-color: rgba(0,0,0,0.5);
text-shadow: 2px 2px 2px black;

display: block;

}

b:before 

{

content: "Benjamin-Newton";
margin-bottom: 6.62em;

}

b:after 

{

content: "by Ben Huot";
margin-bottom: 0;

}

b.back 

{

transform: translateZ(-125px) rotateY(180deg);

background-color: rgba(0,122,0,0.75);
background-image: url('https://benjamin-newton.net/challenges-svg/ben-challenge-simplify-no-back-clear.svg');
background-repeat: no-repeat;
background-position: center center;
border-width: 1px;
border-style: solid;
border-color: black;

}

b.right 

{

transform:rotateY(-270deg) translateX(125px);
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
transform-origin: top right;

background-color: rgba(255,255,122,0.75);
background-image: url('https://benjamin-newton.net/challenges-svg/ben-challenge-simplify-no-back-clear.svg');
background-repeat: no-repeat;
background-position: center center;
border-width: 1px;
border-style: solid;
border-color: black;

}

b.left 

{

transform:rotateY(270deg) translateX(-125px);
-webkit-transform-origin: center left;
-moz-transform-origin: center left;
transform-origin: center left;
  
background-color: rgba(0,0,122,0.75);
background-image: url('https://benjamin-newton.net/challenges-svg/ben-challenge-simplify-no-back-clear.svg');
background-repeat: no-repeat;
background-position: center center;
border-width: 1px;
border-style: solid;
border-color: black;

}

b.top 

{

transform:rotateX(35deg) rotateZ(-90deg) translateY(-125px);
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
transform-origin: top center;
  
background-color: rgba(255,122,255,0.75);
background-image: url('https://benjamin-newton.net/challenges-svg/ben-challenge-simplify-no-back-clear.svg');
background-repeat: no-repeat;
background-position: center center;
border-width: 1px;
border-style: solid;
border-color: black;

}

b.bottom 

{

transform:rotateX(90deg) translateY(125px);
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
transform-origin: bottom center;
  
background-color: white;
background-image: none;
border-width: 1px;
border-style: solid;
border-color: black;

}

b.front 

{

transform: translateZ(125px);
  
background-color: rgba(255,122,122,0.75);
background-image: url('https://benjamin-newton.net/challenges-svg/ben-challenge-simplify-no-back-clear.svg');
background-repeat: no-repeat;
background-position: center center;
border-width: 1px;
border-style: solid;
border-color: black;

}

 

Small Size Cube

 
 
.wrap {
 
padding-top: 200px;
height: 300px;
  
position: relative;
-webkit-perspective: 800px;
-moz-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50% 100px;
-moz-perspective-origin: 50% 100px;
perspective-origin: 50% 100px;

background-color: rgba(255,255,255,0.75);
       
}

.cube 

{

position: relative;
margin: 0 auto;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
transform:rotateX(-30deg) rotateY(-30deg);
  
width: 200px;
background-color: rgba(255,255,255,0.75);
  
}

b

{

position: absolute;
display: block;
text-align: center;
margin: 0 auto;
font-weight: normal;
  
width: 198px;
height: 198px;
font-size: 16pt;
background: black;
color: white;

}

b:before, 
b:after 

{

background-color: black;
background-color: rgba(0,0,0,0.5);
text-shadow: 2px 2px 2px black;

display: block;

}

b:before 

{

content: "Benjamin-Newton";
margin-bottom: 7em;

}

b:after 

{

content: "by Ben Huot";
margin-bottom: 0;

}

b.back 

{


transform: translateZ(-100px) rotateY(180deg);

background-color: rgba(0,122,0,0.75);
background-image: url('https://benjamin-newton.net/challenges-svg/ben-challenge-simplify-no-back-clear.svg');
background-repeat: no-repeat;
background-position: center center;
border-width: 1px;
border-style: solid;
border-color: black;

}

b.right 

{

transform:rotateY(-270deg) translateX(100px);
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
transform-origin: top right;
  
background-color: rgba(255,255,122,0.75);
background-image: url('https://benjamin-newton.net/challenges-svg/ben-challenge-simplify-no-back-clear.svg');
background-repeat: no-repeat;
background-position: center center;
border-width: 1px;
border-style: solid;
border-color: black;

}

b.left 

{

transform:rotateY(270deg) translateX(-100px);
-webkit-transform-origin: center left;
-moz-transform-origin: center left;
transform-origin: center left;
  
background-color: rgba(0,0,122,0.75);
background-image: url('https://benjamin-newton.net/challenges-svg/ben-challenge-simplify-no-back-clear.svg');
background-repeat: no-repeat;
background-position: center center;
border-width: 1px;
border-style: solid;
border-color: black;

}

b.top 

{


transform:rotateX(35deg) rotateZ(-90deg) translateY(-100px);
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
transform-origin: top center;

background-color: rgba(255,122,255,0.75);
background-image: url('https://benjamin-newton.net/challenges-svg/ben-challenge-simplify-no-back-clear.svg');
background-repeat: no-repeat;
background-position: center center;
border-width: 1px;
border-style: solid;
border-color: black;

}

b.bottom 

{


transform:rotateX(90deg) translateY(100px);
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
transform-origin: bottom center;
  
background-color: white;
background-image: none;
border-width: 1px;
border-style: solid;
border-color: black;

}

b.front 

{


transform: translateZ(100px);

background-color: rgba(255,122,122,0.75);
background-image: url('https://benjamin-newton.net/challenges-svg/ben-challenge-simplify-no-back-clear.svg');
background-repeat: no-repeat;
background-position: center center;
border-width: 1px;
border-style: solid;
border-color: black;

}
 

Round Spotlight/Shadow on Golden Rectangular Image

I came up with this all by myself

    

object.flat-design, img.svg-fallback, img#logo  

{

background: 

radial-gradient(ellipse at center, rgba(255,245,198,1) 0%,rgba(255,239,168,1) 10%,rgba(255,227,137,1) 20%,rgba(255,213,79,1) 30%,rgba(255,195,0,1) 40%,rgba(0,0,0,1) 59%,rgba(0,0,0,1) 64%,rgba(0,0,0,0) 100%),

linear-gradient(to right, #9e9300 0%,#fff67a 51%,#e2d56c 78%,#e2d56c 100%);


box-shadow: inset 1px 1px 2px black,
            inset -1px -1px 5px yellow;
border-color: black;
border-width: 1px;
border-style: outset;

}

 

Round Spotlight/Shadow on Mediterranean Wall/Copper/Bronze

I came up with this all by myself




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

<div class="flat-background">

<div class="solid-color-background">

<object class="flat-design" type="image/svg+xml" data="/challenges-svg/ben-challenge-simplify-no-back-clear.svg" width="75%" height="75%">

</object> 

<img class="svg-fallback" src="/challenges-svg/ben-challenge-simplify-no-back-clear-8color.png" width="578" height="600" alt="benjamin-newton challenging projects logo" />
        
</div>
      
</div>

</body>
</html>



   
object.flat-design, img.svg-fallback, img#logo  {

background: 

radial-gradient(ellipse at center, rgba(255,245,198,1) 0%,rgba(255,239,168,1) 10%,rgba(255,227,137,1) 20%,rgba(255,213,79,1) 30%,rgba(255,195,0,1) 40%,rgba(0,0,0,1) 75%);

}
  
.solid-color-background {
  
background-color: black;

background: 

linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.96) 24%,rgba(0,0,0,1) 25%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 100%); /* W3C */

width: 90%;
height: 375px;

padding: 0px;
display: block;
margin: 0 auto;

}
  
.flat-background {

background: 

linear-gradient(to bottom, #f3eed9 0%,#f1e7c6 49.9%,#dbc7a7 50%,#e8d5b8 100%); /* W3C */

background-size: 5% 5%;

width: auto;
height: 375px;

padding: 0px;
display: block;
margin: 0 auto;

border-radius: 0em 6em 2.8em 6em / 6em 2em 5em 2.4em;

}

 

Round Spotlight/Shadow on Golden Abstract Drawings on Aged Paper

I came up with this all by myself


 

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

<div class="flat-background">

<div class="solid-color-background">

<object class="flat-design" type="image/svg+xml" data="/challenges-svg/ben-challenge-simplify-no-back-clear.svg" width="75%" height="75%">

</object> 

<img class="svg-fallback" src="/challenges-svg/ben-challenge-simplify-no-back-clear-8color.png" width="578" height="600" alt="benjamin-newton challenging projects logo" />
        
</div>
      
</div>

</body>
</html>



   

img {

display: block;
visibility: visible;
margin: 0 auto;
text-align: center;
color: black;
width: 90%;
height: auto;
max-width: 500px;
max-height: none;

}
  
.flat-design, object {
    
display: none;
visibility: hidden;
width: 0px;
height: 0px; 
padding: 0px;
margin: 0px;

}
  
.svg-fallback {

width: 90%;
height: auto;
max-width: 500px;
max-height: none;
display: block;
visibility: visible;
padding: 0px;
margin: 0 auto;
border-width: 0px;
color: black;
  
}
  
    
object.flat-design, img.svg-fallback  {

background: 

radial-gradient(ellipse at center, rgba(255,245,198,1) 0%,rgba(255,239,168,1) 10%,rgba(255,227,137,1) 20%,rgba(255,213,79,1) 30%,rgba(255,195,0,1) 40%,rgba(255,178,0,0.75) 55%,rgba(255,178,0,0) 69%); /* W3C */

}
  
img.svg-fallback  {
  
width: auto;
height: 375px;
max-height: none;
padding: 10px;
display: block;
margin: 0 auto;
  
}
  
.solid-color-background {
  
background-color: black;

background: radial-gradient(ellipse at center, rgba(255,212,0,1) 0%,rgba(255,212,0,0.57) 17%,rgba(255,212,0,0.3) 28%,rgba(190,158,0,0) 40%,rgba(0,0,0,1) 75%,rgba(0,0,0,1) 100%); /* W3C */

width: 100%;
height: 415px;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
margin-bottom: 10px;

}
  
.flat-background {
 
background: 

radial-gradient(ellipse at center, rgba(243,238,217,1) 0%,rgba(239,217,198,1) 18%,rgba(219,199,167,1) 37%,rgba(145,144,143,1) 59%,rgba(142,142,142,0.98) 60%,rgba(142,142,142,0) 100%),

linear-gradient(135deg, rgba(243,238,217,1) 0%,rgba(243,238,217,1) 5%,rgba(219,199,167,1) 5%,rgba(239,217,198,1) 5%,rgba(239,217,198,1) 10%,rgba(219,199,167,1) 10%,rgba(219,199,167,1) 15%,rgba(243,238,217,1) 15%,rgba(243,238,217,1) 20%,rgba(239,217,198,1) 20%,rgba(239,217,198,1) 25%,rgba(219,199,167,1) 25%,rgba(219,199,167,1) 30%,rgba(243,238,217,1) 30%,rgba(243,238,217,1) 35%,rgba(239,217,198,1) 35%,rgba(239,217,198,1) 40%,rgba(219,199,167,1) 40%,rgba(219,199,167,1) 45%,rgba(243,238,217,1) 45%,rgba(243,238,217,1) 50%,rgba(239,217,198,1) 50%,rgba(239,217,198,1) 55%,rgba(219,199,167,1) 55%,rgba(219,199,167,1) 60%,rgba(243,238,217,1) 60%,rgba(243,238,217,1) 65%,rgba(239,217,198,1) 65%,rgba(239,217,198,1) 70%,rgba(219,199,167,1) 70%,rgba(219,199,167,1) 75%,rgba(243,238,217,1) 75%,rgba(243,238,217,1) 80%,rgba(239,217,198,1) 80%,rgba(239,217,198,1) 85%,rgba(219,199,167,1) 85%,rgba(219,199,167,1) 90%,rgba(243,238,217,1) 90%,rgba(243,238,217,1) 95%,rgba(239,217,198,1) 95%,rgba(239,217,198,1) 100%);


background-size: 100px 100px, 100px 100px;

width: auto;
height: 425px;
padding: 0px;
margin-top: 10px;
margin-bottom: 10px;
display: block;

}
  
@media 
only screen and (min-resolution: 192dpi) {

.svg-fallback {

display: none;
visibility: hidden;
width: 0px;
height: 0px;
padding: 0px;
margin: 0px;
border-width: 0px;
}
  
#header .flat-design, #main .flat-design, #footer .flat-design, 

#header object, #main object, #footer object {

width: auto;
height: 375px;
max-width: 500px;
max-height: none;
display: block;
visibility: visible;
margin: 0 auto;
border-width: 0px;
}  

}
  

Page Section Separator Symbol Button Looks Like Brass Door Knob on Mahogany Wood Door

I came up with this all by myself

 

.separator 

{
color: white;
background-color: transparent;
background-image: linear-gradient(45deg, rgba(0,0,0,1) 0%,rgba(124,0,0,1) 41%,rgba(216,115,0,1) 71%,rgba(255,255,255,1) 100%);
border-radius: 10%;
border-width: 5px;
border-style: solid;
border-color: white;
text-align: center;
font-size: 144pt;
display: block;
visibility: visible;
width: 1.75em;
height: 1.75em;
margin: 0 auto;
padding: .25em;
line-height: 1em;
font-family: Georgia, Verdana, Arial;

}  

#header .separator
 
{

background-image: linear-gradient(45deg, #000000 0%,#aa0000 41%,#ef7b00 71%,#ffffff 100%);

}

#footer .separator 

{

background-image: linear-gradient(45deg, #000000 0%,#750000 41%,#ba5d00 71%,#ffffff 100%);

}

.separator .symbol 

{

font-size: 144pt;
margin: 0 auto;
padding: .25em;
height: 1em;
width: 1em;
border-width: 5px;
border-style: solid;
border-radius: 50%;
display: block;
visibility: visible;
line-height: 1em;
font-family: Georgia, Verdana, Arial;
background-image: radial-gradient(ellipse at center, #e0b300 0%,#7f6600 29%,#4c3800 60%,#8c6b00 100%);

} 

#header .separator .symbol 

{

color: white;
border-color: black;
background-color: black;
background-image: radial-gradient(ellipse at center, #c9a100 0%,#665300 33%,#191200 60%,#755b00 100%);
text-shadow: 5px 1px 1px black;

}

#footer .separator .symbol 

{

color: black;
border-color: black;
background-color: white;
background-image: radial-gradient(ellipse at center, #fff2bc 0%,#b59600 38%,#664c00 60%,#c49d00 100%);
text-shadow: 5px 1px 1px white;

}


Swipe Left or Right to Navigate "Pages"

I got this from somewhere else but tore it apart and put it back together, due to poor documentation

Makes height static, to create "pages" fit iPad tablet "like a glove", makes scrolling horizontal, so it is more e-book/mobile app-like navigation (but you cannot zoom in)



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1" />
<title>Prism</title>
</head>
<body>
     
</body>
</html>
   
     

  
* {


box-sizing: border-box; 

}

body {
  
font-size: 14pt;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background-color: #dddddd;

}

#foreground {

background-color: white;
padding-top: 3em;
padding-bottom: 1em;

}

ul#fixed-nav-bar {

display: none;
visibility: hidden;
width: 0px;
height: 0px;

}

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

html {

  height: 100%;
  
}

body {

  height: 100%;
  
}

#foreground {

column-gap: 2em;
column-count: 2;
height: 100%;

}

ul#fixed-nav-bar {

display: block;
visibility: visible;
width: auto;
height: auto;

}

}


Server Side Includes and Meta Tags

Print Webpage Button

I got this from somewhere else

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Prism</title>
</head>
<body>
 
<a href="javascript:window.print()">Print This Page</a>

</body>
</html>


Hide or Show Header and Footer Button

I got this from somewhere else but developed my own implementation



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

<div id="header">

</div>

<div id="content">

<script type="text/javascript">
 
<!--

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.display == 'none')
       e.style.display = 'block';
    else
       e.style.display = 'none';
}

//-->

</script>

<p class="hide-show"><a href="#" onclick="toggle_visibility('header');">hide or show header</a></p>

<p class="hide-show"><a href="#" onclick="toggle_visibility('footer');">hide or show footer</a></p>

</div>

<div id="footer">

</div>

</body>
</html>


Server Side Includes: Basic Page Layout

I got this from somewhere else but developed my own implementation



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!--#include virtual="/meta-tags.txt" -->
<title>Prism</title>
</head>
<body>
    
<!--#include virtual="/header.txt" -->
    
    Main Content Goes Here
    
    
<!--#include virtual="/footer.txt" -->

</body>
</html>

  

Server Side Includes: Auto Last Updated Date

I got this from somewhere else



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

Last Updated: 
<!--#echo var="LAST_MODIFIED" -->

</body>
</html>


Meta Tags Boilerplate

I got this from somewhere else but developed my own implementation



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Prism</title>
<meta content="Ben Huot" name="author" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
<meta name="googlebot" content="noimageindex" />
<script src="/head.min.js"></script>
<script type="text/javascript">

// Load up some CSS
head.load("/resume.css");
             
</script> 
</head>
<body>

</body>
</html>


Apple Touch Icons Boilerplate

I got this from somewhere else (website icons that appear on Apple iDevice (iOS) home screens)

    

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Prism</title>
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-57x57-precomposed.png" /> 
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png" /> 
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png" /> 
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png" /> 
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png" /> 
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png" /> 
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png" /> 
<link rel="shortcut icon" type="image/ico" href="favicon.ico" /> 
</head>
<body>

</body>
</html>


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