My CSS Style Guide/Techniques (Advanced 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 not just purely HTML and CSS only. You have to download images, go to other websites, adjust your .htaccess file, and use media queries. 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.

Golden Brown Shadow/Glow

I got this from somewhere else but developed my own implementation



#header, #header li {

background-color: #DBDBC0;
padding: .5em;
margin: 0 auto;
display: block;
border-width: 1px;
border-style: solid;
border-color: black;
text-align: center;
color: black;
box-shadow: #cccccc 0px 0px 2px;

}

#header {

padding: 0em;
width: auto;
margin-top: 50px;

}

#header li {

text-align: left;
color: black;
text-shadow: #BFBE8F 1px 1px 1px;
background-color: #cccc99;

}

#header p, #header address, #header ul {

background-color: #999966;
padding: .5em;
margin: .5em;
border-width: 1px;
border-style: solid;
border-color: black;
color: white;
text-shadow: #666633 1px 1px 1px;

background: #7c7662; /* Old browsers */
background: radial-gradient(ellipse at center, #7c7662 0%,#3a3527 100%); /* W3C */

white-space: normal;
box-shadow: #cccccc 0px 0px 2px;
line-height: 1.75em;
font-style: normal;
font-weight: normal;

}

#header address {

text-align: center;

}

#header a {

background-color: #cccc99;
padding: .25em;
margin-top: -.25em;
border-width: 1px;
border-style: solid;
border-color: black;
color: black;
text-shadow: #E8E5C5 1px 1px 1px;
text-align: center;

/* Old browsers */
background: #d5cea6; /* Old browsers */
background: radial-gradient(ellipse at center, #d5cea6 0%,#726949 100%); /* W3C */

box-shadow: #cccccc 0px 0px 2px;

}

body, #header ul {

background-image: url('gold-speckle.png');

background-image: 

url('gold-speckle.png'), 
radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%), radial-gradient(ellipse at center, #d3d2c9 0%,#9e8d58 66%); /* W3C */

background-image: 

url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+CjxmaWx0ZXIgaWQ9Im4iIHg9IjAiIHk9IjAiPgo8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC43IiBudW1PY3RhdmVzPSIxMCIgc3RpdGNoVGlsZXM9Im5vU3RpdGNoIj48L2ZlVHVyYnVsZW5jZT4KPC9maWx0ZXI+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQiPjwvcmVjdD4KPHJlY3Qgd2lkdGg9IjUwMCIgaGVpZ2h0PSI1MDAiIGZpbHRlcj0idXJsKCNuKSIgb3BhY2l0eT0iMC40Ij48L3JlY3Q+Cjwvc3ZnPg=="),
radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%), radial-gradient(ellipse at center, #d3d2c9 0%,#9e8d58 66%);  /* W3C */

}

#header li {

background-image: 

radial-gradient(ellipse at center, #d3d2c9 0%,#9e8d58 100%); /* W3C */

}

#header {

background-image: 

url('gold-speckle.png'), 
radial-gradient(ellipse at center, #d3d2c9 0%,#9e8d58 100%); /* W3C */

background-image: 

url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+CjxmaWx0ZXIgaWQ9Im4iIHg9IjAiIHk9IjAiPgo8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC41IiBudW1PY3RhdmVzPSI1IiBzdGl0Y2hUaWxlcz0ibm9TdGl0Y2giPjwvZmVUdXJidWxlbmNlPgo8L2ZpbHRlcj4KPHJlY3Qgd2lkdGg9IjUwMCIgaGVpZ2h0PSI1MDAiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNCI+PC9yZWN0Pgo8cmVjdCB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgZmlsdGVyPSJ1cmwoI24pIiBvcGFjaXR5PSIwLjQiPjwvcmVjdD4KPC9zdmc+"),
radial-gradient(ellipse at center, #d3d2c9 0%,#9e8d58 100%);

margin-top: 50px;

}


Advanced Icon Technique without Custom Fonts or Images

I came up with this all by myself

  

.icon {

display: none;
visibility: hidden;

width: 0px;
height: 0px;

}

.separator {

color: black;
font-size: 36pt;

padding-top: 1em;
padding-bottom: 1em;
padding-right: 0em;
padding-left: 0em;

display: block;
margin: 0 auto;

border-width: 0px;

}   

@media 

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

p .icon {

display: inline-block;
visibility: visible;
    
width: auto;
height: 24pt;
    
padding: 1px;
margin: 1px;

font-family: Georgia, Verdana, Arial;    
font-size: 24pt;

float: left;
position: relative;

top: 2px;
right: 2px;
    
}

.ribbon .icon {
       
display: inline-block;
visibility: visible;
    
width: auto;
height: 24pt;
    
padding: 0px;
margin: 0px;

font-family: Georgia, Verdana, Arial;
font-size: 24pt;
    
float: none;
position: relative;
    
top: 2px;
right: 2px;
    
}

li .icon {

display: inline;
visibility: visible;
    
width: auto;
height: 24pt;
    
padding: 0px;
margin: 0px;
    
font-family: Georgia, Verdana, Arial;
font-size: 24pt;
vertical-align: center;
    
float: left;
position: relative;

right: 4px;
   
}

.bookmark .icon {

display: inline-block;
visibility: visible;
    
width: auto;
height: 24pt;
    
padding: 0px;
margin: 0px;

font-family: Georgia, Verdana, Arial;
font-size: 24pt;
    
float: none;
position: relative;

right: 4px;
left: 4px;
    
}

address .icon {

display: inline-block;
visibility: visible;

width: auto;
height: 24pt;

padding: 0px;
margin: 0px;

font-family: Georgia, Verdana, Arial;
font-size: 24pt;

}

p { 

line-height: 24pt; 
text-align: justify;

}

.separator .icon {

display: block;
visibility: visible;

position: static;
margin: 0 auto;
float: none;

height: auto;
width: auto;

font-size: 36pt;
}

}

  

Add this to your (hidden) .htaccess file on your web server

  

AddDefaultCharset ISO-8859-1
AddCharset UTF-8 .shtml
AddCharset UTF-8 .css

  

just make sure you are saving the HTML file in Unicode Text format and copy and paste your choice of the symbols/font glyphs from here: http://www.fileformat.info/info/unicode/category/So/list.htm directly into your HTML file.

Finally, make sure every icon is wrapped in an "icon" class span in the HTML file.



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

<span class="icon">@copy</span>

</body>
</html>

  

Format Code to Correctly Line Wrap

I came up with this all by myself



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


 


pre {
  width: auto;
  background: #dddddd;
  text-align: left;
  font-size: 12pt;
  padding: 1em;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre-wrap;
  }


Force Internet Explorer to Not Show Javascript Errors Dialog

I got this entirely from somewhere else

  
var gOldOnError = window.onerror;
// Override previous handler.
window.onerror = function myErrorHandler(errorMsg, url, lineNumber) {
 if (gOldOnError)
   // Call previous handler.
   return gOldOnError(errorMsg, url, lineNumber);

 // Just let default handler run.
 return false;
}

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