My CSS Style Guide/Techniques (Special Touches): 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 purely CSS and HTML. 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.

Shiny Red Headings

I came up with this all by myself



h1, h2, h3, h4 {

background: #ff3863; /* Old browsers */
background: linear-gradient(to bottom, #ff3863 0%,#5e0000 64%); /* W3C */

text-decoration: none;
color: white;
font-size: 18pt;
font-weight: normal;
text-shadow: #990000 0px 0px 2px;
text-transform: capitalize;
text-align: center;

border-width: .25em;
border-style: solid;
border-color: #990000;

display: block;
margin: 0 auto;

padding: .25em;
       
}


Gold Effect on Lists of Links

I came up with this all by myself

 

#header #jump-past ul, 
#header #jump-past ol,
#header #jump-past ul li, 
#header #jump-past ol li, 
#header #jump-past ul li a, 
#header #jump-past ol li a
 {
color: black;
border-color: yellow;
border-width: 2px;
border-style: solid;
background: yellow;
margin: .5em;
padding: .5em;
width: auto;
text-shadow: 1px 1px 1px #cccc66;
display: inline-block; 
border-radius: 1em; 
background: #9e9300; /* Old browsers */
background: linear-gradient(to right, #9e9300 0%,#fff67a 51%,#e2d56c 78%,#e2d56c 100%); /* W3C */
box-shadow: inset 1px 1px 2px black,
            inset -1px -1px 5px yellow;
border-color: black; 
border-width: 1px;
border-style: outset;
text-decoration: none;
}
 

Wood Frame for Pictures Effect

I got this from somewhere else but developed my own implementation


#content img {
                                  
background-image: 

linear-gradient(to right, rgba(255,255,255,.07) 50%, transparent 50%),
linear-gradient(to right, rgba(255,255,255,.13) 50%, transparent 50%),
linear-gradient(to right, transparent 50%, rgba(255,255,255,.17) 50%),
linear-gradient(to right, transparent 50%, rgba(255,255,255,.19) 50%);  

box-shadow: 0 0px 2px black, inset 0 0px 2px black;     
              
 }

Coffee Stain

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>

<span class="coffee-stain">
   <span class="c-s1"></span>
   <span class="c-s2"></span>
   <span class="c-s3"></span>
</span>

</body>
</html>
    
    


.coffee-stain {

display: block;
margin: 0 auto;
position: relative;
z-index: 4;
opacity: 0.35;

}
 
.coffee-stain2 {

display: block;
margin: 0 auto;
position: relative;
z-index: 4;
opacity: 0.35;

}
 
.c-s1 {
 
width: 3em;
height: 3em;
position: absolute;
background-color: brown;
border-style: solid; 
border-width: 1px; 
border-color: sienna;
border-radius: 3em;
box-shadow: 0 0px 10px brown;
background-image: radial-gradient(circle at 30% 70%, beige, sienna);
display: block;
margin: 0 auto;
z-index: 4;
 
}
 
.c-s2 {
 
width: 7em;
height: 7em;
top: 25px;
left: 15px;
position: absolute;
background-color: brown;
border-style: solid; 
border-width: 3px; 
border-color: sienna;
border-radius: 7em;
box-shadow: 0 0px 10px brown;
background-image: radial-gradient(circle at 50% 50%, beige, sienna);
display: block;
margin: 0 auto;
z-index: 4;

}
 
.c-s3 {

width: 12em;
height: 12em;
top: -50px;
right: 25px;
position: absolute;
background-color: brown;
border-style: solid; 
border-width: 5px; 
border-color: sienna;
border-radius: 12em;
box-shadow: 0 0px 10px brown;
background-image: radial-gradient(circle at 90% 10%, beige, sienna);
display: block;
margin: 0 auto;
z-index: 4;

}


Decorative Ribbon for Slogan

I got this from somewhere else



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

<div class="non-semantic-protector"> 
<div class="ribbon">"Truly Original, Even for Oregon"</div>
</div>

</body>
</html>

 


.non-semantic-protector { position: relative; z-index: 1; }

.ribbon {

font-size: 18pt !important;
/* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */

width: 50%;
    
position: relative;
background: #cc0000;
color: #fff;
text-align: center;
padding: 1em 2em; /* Adjust to suit */
margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
text-shadow: 1px 1px 1px black;

}

.ribbon:before, .ribbon:after {

content: "";
position: absolute;
display: block;
bottom: -.5em;
border: 1.5em solid #aa0000;
z-index: -1;
 
}

.ribbon:before {

left: -2em;
border-right-width: 1.5em;
border-left-color: transparent;
 
}

.ribbon:after {

right: -2em;
border-left-width: 1.5em;
border-right-color: transparent;
 
}

.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {

content: "";
position: absolute;
display: block;
border-style: solid;
border-color: black transparent transparent transparent;
bottom: -1em;
 
}

.ribbon .ribbon-content:before {

left: 0;
border-width: 1em 0 0 1em;
 
}

.ribbon .ribbon-content:after {

right: 0;
border-width: 1em 1em 0 0;
 
}
 

First Place Ribbon

I got this from somewhere else but developed my own implementation



.badge-ribbon {
 
top: -100px;
left: 0px;
position: relative;
background-color: #000099;
height: 100px;
width: 100px;
border-radius:         50px;
margin: 0 auto;
background-image: radial-gradient(circle at 50% 50%, #666633, #000099);
color: white;
box-shadow: 0 0px 10px white;
text-shadow: 1px 1px 1px black;
border-style: dotted; 
border-width: 5px; 
border-color: #999966;
line-height: 1.5em;
text-align: center;

}

.badge-ribbon:before, .badge-ribbon:after {
  
content: '';
position: absolute;
border-bottom: 70px solid #000099;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
top: 70px;
left: -10px;
transform: rotate(-140deg);

}

.badge-ribbon:after {
  
left: auto;
right: -10px;
transform: rotate(140deg);

}


Valentine's Day Heart

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>

<span class="heart"></span>
<span class="heart-text">Be My Cow</span>

</body>
</html>



.heart {
    
position: relative;
width: 10em;
height: 9em;
top: 0em;
color: black;
border-style: dotted;
border-width: 0px;
border-color: #330033;
margin: 0 auto;
display: block;
text-align: center;
z-index: 4;

}

.heart:before, .heart:after {

position: absolute;
content: "";
left: 5em;
top: 0;
width: 5em;
height: 8em;
background-color: rgb(204,0,0);
border-radius: 5em 5em 0 0;
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
transform-origin: 0 100%;
border-style: dotted;
border-width: 3px;
border-color: white;
margin: 0 auto;
display: block;
text-align: center;
z-index: 4;
background-image: radial-gradient(circle at 50% 50%, rgb(102,0,0), rgb(204,153,153));
box-shadow: 0 0px 10px white;

}

.heart:after {

left: 0;
transform: rotate(45deg);
transform-origin :100% 100%;
background-color: rgb(204,0,0);
border-style: dotted;
border-width: 3px;
border-color: white;
margin: 0 auto;
display: block;
text-align: center;
z-index: 4;
background-image: radial-gradient(circle at 50% 50%, rgb(102,0,0), rgb(204,153,153));
box-shadow: 0 0px 10px white;

}

.heart-text {

top: -150px;
left: 3px;
width: 160px;
height: 1em;
position: relative;
text-align: center;
margin: 0 auto;
display: block;
color: white;
text-shadow: 1px 1px 1px #330033,
2px 2px 2px #330033;
background-color: #330033;
font-size: 24pt;
z-index: 5;
border-style: dotted;
border-width: 3px;
border-color: white;
padding: 5px;
background-image: radial-gradient(circle at 50% 50%, rgb(204,153,204), rgb(51,0,51));
box-shadow: 0 0px 10px white;

}

Have Nice Day Picture

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="rainy-weather">
    <div id="sun-behind"></div>
    <div id="sun-front"></div>
    <div id="cloud-center"></div>
    <div id="cloud-below"></div>
    <div id="cloud-left"></div>
    <div id="cloud-bottom"></div>
    <div id="cloud-corner"></div>
    <div id="cloud-low"></div>
    <div id="cloud-high"></div>
    <div id="cloud-end"></div>
    <div id="cloud-main">Have a Nice Day!</div>
</div>

</body>
</html>

    




#rainy-weather {

padding: 0px;
width: 500px;
height: 300px;
position: relative;
left: 0px;
z-index: 2;
background-color: white;
display: block;
margin: 0 auto;
background: rgb(0,6,48); /* Old browsers */
background: linear-gradient(to bottom, rgba(0,6,48,1) 15%,rgba(73,0,3,1) 47%,rgba(255,199,0,1) 100%); /* W3C */
border-top-color: #cc9966;
border-top-width: 25px;
border-top-style: solid;
border-bottom-color: #cc9966;
border-bottom-width: 25px;
border-bottom-style: solid;
border-left-color: #996633;
border-left-width: 25px;
border-left-style: solid;
border-right-color: #996633;
border-right-width: 25px;
border-right-style: solid; 
                       
}
 
#cloud-main {

width: 280px;
height: 130px;
border-radius: 10em;
position: absolute;
top: 90px;
left: 140px;
z-index: 5;
border-color: black;
border-width: 0px;
border-style: solid;
font-size: 24pt;
text-align: center;
background-image: none;
background: rgb(255,255,255); /* Old browsers */
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(204,204,204,1) 71%); /* W3C */
box-shadow: 0px 0px 20px #cccccc; 
color: black;
text-shadow: 0px -1px 0px #cccccc;

}
 
#cloud-center {

width: 130px;
height: 130px;
margin: 0 auto;
position: absolute;
border-radius: 10em;
top: 60px;
right: 140px;
z-index: 5;
border-color: black;
border-width: 0px;
border-style: solid;
background: rgb(255,255,255); /* Old browsers */
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(204,204,204,1) 71%); /* W3C */
box-shadow: 0px 0px 20px #cccccc; 
}

#cloud-below {

width: 130px;
height: 130px;
margin: 0 auto;
position: absolute;
border-radius: 10em;
top: 130px;
right: 140px;
z-index: 5;
border-color: black;
border-width: 0px;
border-style: solid;
background: rgb(255,255,255); /* Old browsers */
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(204,204,204,1) 71%); /* W3C */
box-shadow: 0px 0px 20px #cccccc; 

}
 
#cloud-left {

width: 130px;
height: 130px;
margin: 0 auto;
position: absolute;
top: 70px;
right: 200px;
z-index: 5;
border-color: black;
border-width: 0px;
border-style: solid;
background: rgb(255,255,255); /* Old browsers */
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(204,204,204,1) 71%); /* W3C */
box-shadow: 0px 0px 20px #cccccc; 

}

#cloud-bottom {

width: 130px;
height: 130px;
margin: 0 auto;
position: absolute;
border-radius: 10em;
top: 120px;
right: 200px;
z-index: 5;
border-color: black;
border-width: 0px;
border-style: solid;
background: rgb(255,255,255); /* Old browsers */
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(204,204,204,1) 71%); /* W3C */
box-shadow: 0px 0px 20px #cccccc; 

}

#cloud-corner {

width: 130px;
height: 130px;
margin: 0 auto;
position: absolute;
border-radius: 10em;
top: 60px;
right: 40px;
z-index: 5;
border-color: black;
border-width: 0px;
border-style: solid;
background: rgb(255,255,255); /* Old browsers */
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(204,204,204,1) 71%); /* W3C */
box-shadow: 0px 0px 20px #cccccc; 
}

#cloud-low {

width: 130px;
height: 130px;
margin: 0 auto;
position: absolute;
border-radius: 10em;
top: 115px;
left: 95px;
z-index: 5;
border-color: black;
border-width: 0px;
border-style: solid;
background: rgb(255,255,255); /* Old browsers */
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(204,204,204,1) 71%); /* W3C */
box-shadow: 0px 0px 20px #cccccc; 

}

#cloud-high {
  
width: 130px;
height: 130px;
margin: 0 auto;
position: absolute;
border-radius: 10em;
top: 70px;
left: 90px;
z-index: 5;
border-color: black;
border-width: 0px;
border-style: solid;
background: rgb(255,255,255); /* Old browsers */
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(204,204,204,1) 71%); /* W3C */
box-shadow: 0px 0px 20px #cccccc; 

}

#cloud-end {

width: 130px;
height: 130px;
margin: 0 auto;
position: absolute;
border-radius: 10em;
top: 120px;
right: 40px;
z-index: 5;
border-color: black;
border-width: 0px;
border-style: solid;
background: rgb(255,255,255); /* Old browsers */
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(204,204,204,1) 71%); /* W3C */
box-shadow: 0px 0px 20px #cccccc; 

}

#sun-behind {

width: 180px;
height: 180px;
margin: 0 auto;
background-color: #ffcc00;
position: absolute;
top: 50px;
left: 50px;
z-index: 3;
border-color: #ffff00;
border-width: 0px;
border-style: solid;
text-align: center;
box-shadow: 0px 0px 20px #ffff00; 

}

#sun-front {

width: 180px;
height: 180px;
margin: 0 auto;
background-color: #ffcc00;
position: absolute;
top: 50px;
left: 50px;
z-index: 3;
border-color: #ffff00;
border-width: 0px;
border-style: solid;
border-radius: 10em;
background: rgb(255,170,0); /* Old browsers */
background: radial-gradient(ellipse at center, rgba(255,170,0,1) 46%,rgba(250,255,0,1) 66%,rgba(255,199,0,1) 70%); /* W3C */
text-align: center;
box-shadow: 0px 0px 20px #ffcc00; 

}

#sun-behind:before, #sun-behind:after {

content: "";
position: absolute;
top: 0;
left: 0;
height: 180px;
width: 180px;
background-color: #ffcc00;
border-color: #ffff00;
border-width: 0px;
border-style: solid;
z-index: 3;
box-shadow: 0px 0px 20px #ffff00; 
   
}

#sun-behind:before {
    
transform: rotate(30deg);

}

#sun-behind:after {

transform: rotate(60deg);

}


Just the Sunset Background

I came up with this all by myself



.header-notice {

background-color: rgb(255,250,173); /* Old browsers */

background: linear-gradient(135deg, #ffc700 0%,#490003 53%,#000630 85%); /* W3C */

border-color: black;

color: white;
text-shadow: 1px 1px 1px black;
font-size: 18pt;

}


Collapse and Highlight Table to Fit Narrow Screens

I came up with this all by myself



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

<table>
<th></th>
<tr><td><p>Data Here<p></td></tr>
</table> 

</body>
</html>




table {

border: 1px solid black; 
width: 90%; 
text-align: center; 
background-color: transparent; 
display: block;
margin: 0 auto;
border-radius: 0px;
padding: 0px;
background-image: none;

}

td {

background-color: transparent; 
display: block;
margin: 0 auto;
width: 90%;
border: 0px; 
padding: 0px;
border-radius: 0px;
background-image: none;

}

td p {

width: 90%;
border: 1px solid black; 
display: block;
margin: 0 auto;
padding: 0px;
border-radius: 1em;
text-align: center;
background-image: none;

}

#content td p:after {

content: "";

}

tr { 

display: block;
margin: 0 auto;
padding: 0em;
width: 100%;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-style: solid;
border-top-width: 0px;
border-bottom-width: 5px;
border-left-width: 0px;
border-right-width: 0px;
border-top-color: #000099;
border-bottom-color: #000099;
border-left-color: #000099;
border-right-color: #000099;
border-radius: 0px; 
background-image: none;

}

tr:nth-child(even) {

background-color: #ffffcc;
background-image: none;
    
}  

th {

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

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

background-color: #eeeeee;
background-image: none;

}    
    
tr td:nth-child(3) p {

color: white;
text-shadow: 1px 1px 1px black;
background-color: rgb(204, 0, 0);
background-image: none;

}    
    
tr td:nth-child(4) p {

background-color: #cc6666;
color: white;
text-shadow: 1px 1px 1px black;
background-image: none;

}  

table tr:first-of-type td {

display: none;
visibility: hidden;
width: 0px;
height: 0px;
padding: 0px;
margin: 0px;
border-width: 0px;

}
    
table tr:first-of-type {

display: none;
visibility: hidden;
width: 0px;
height: 0px;
padding: 0px;
margin: 0px;
border-width: 0px;

}   

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