My CSS Style Guide/Techniques (Advanced 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 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;
}

Benjamin-Newton.com by Ben Huot

All Material Copyright 1998-Present unless otherwise stated.

Jump to Top

For Automated Software Visitors

XML Sitemap