ZC0M
8/31/2017 - 11:11 AM
Project 02: Background FX Div [Simple effects for backgrounds]
Unique ID ID Version
2 50551431 PRJ002 v 1.00f
Using a simple div element and as few css properties as possible to create a 'background overlay' full-screen effects/filters layer between the background and everything else (z-index). This project can easily be expanded and improved for future revisions and updates. Adding a set of UI-Control Panel to directly control the values of the real element would help.
<div class="div_overlay-menu" id="portfolio-id_main">
<table class="table_overlay-text">
<tr height="50%">
<td id="portfolio_infotable-r1-c1">
<span class="pinfo_id"></span>
</td>
<td id="portfolio_infotable-r1-c2">
<span class="pinfo_title">-</span>
</td>
<td id="portfolio_infotable-r1-c3">
<span class="pinfo_author">-</span>
</td>
</tr>
<tr height="50%">
<td id="portfolio_infotable-r2-c1">
<span class="pinfo_version">-</span>
</td>
<td id="portfolio_infotable-r2-c2">
<span class="pinfo_subtitle">-</span>
</td>
<td id="portfolio_infotable-r2-c3">
<a href="#">All Projects</a>
</td>
</tr>
</table>
</div>
<div class="bg_base" id="bg_00"></div>
<div class="container" id="div1">
<div class="row">
<div class="col-md-12">
<div class="well" style="margin-top: 1.5%; " align="center">
<h1>Background FX Div <br><small>Full-screen div for background effects.</small></h1>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="well">
<h3><small>1.</small> Creating Elements</h3>
<p>Create a new <b>div</b> element with a unique <i>class</i> and <i>ID</i>. Leave
this empty, no need to have <u>children</u>.</p>
</div>
<div class="panel panel-default">
<div class="panel-heading">JavaScript</div>
<div class="panel-body"> <pre><code>
document.body.onload = addElement;
function addElement () {
<i>// create a new div element </i>
var newDiv = document.createElement("div");
<i>// classify and identify it</i>
newDiv.id = "unique_id";
newDiv.class = "unique_class";
<i>// add the newly created element and its content into the DOM </i>
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
}
</code>
</pre>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="well">
<h3><small>2.</small> Modify Style and Function</h3>
<p>Use that super unique <i>class</i> or <i>ID</i> to give your element some
properties. There are a few which are required for the effect to work,
anything else is yours to create with.</p>
</div>
<div class="panel panel-default">
<div class="panel-heading">CSS</div>
<div class="panel-body"> <pre><code>
.unique_class{
<i>// This is kinda what 'Full-screen background means...</i>
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -9999;
<i>// From here you can customize how you want the element to look.</i>
background: rgba(0,35,70,0.66) url("") repeat left top;
filter: blur(9px);
}
</code>
</pre>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="well">
<h3><small>3.</small>Testing and Improvements</h3>
<p>The results should immediately be apparent provided you don't have anything
obstructing your element.</p>
<hr width="66%">
<div class="popin">
<table><tr><td>
<span class="label label-info">TIP</span>
</td>
<td>
<p class="text-default">Consider the CSS properties of the <i>body</i> as well as its current JS functionality to layer effects into more advanced results. </p>
</td>
</tr>
</table>
</div>
<hr width="66%">
<h4><small>3.a</small> Using Background Videos</h4>
<p>It is also possible to add a secondary <i>video</i> or <i>media</i> layer to the background effect.</p>
<h4><small>3.b</small> Canvas / SVG and More</h4>
<p>Why stop there? It's only one small step to using <i>canvas</i> or <i>svg</i> elements as well. Then it is possible to do some fairly impressive effects for very little effort. An example of this could be a Koi-pond background that creates ripples on its surface based on the mouse position, and much more.</p>
</div>
</div>
</div>
</div>$(document).ready(init_project_info("PRJ00A02",
"Project 02: Background FX Div",
"Simple method for providing a background-present div element for animated GIFs and filter effects, etc.",
"1.0b",
"zcom403@gmail.com"));<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
/* CSS used here will be applied after bootstrap.css */
*{
color: #ccc;
}
body{
padding-left: 2%;
padding-right: 2%;
background: rgb(220,232,247);
background: -moz-linear-gradient(-90deg, rgba(220,232,247,1) 0%, rgba(154,189,234,1) 24%, rgba(107,129,147,1) 52%, rgba(90,100,104,1) 70%, rgba(40,52,59,1) 86%, rgba(6,8,10,1) 100%);
background: -webkit-linear-gradient(-90deg, rgba(220,232,247,1) 0%,rgba(154,189,234,1) 24%,rgba(107,129,147,1) 52%,rgba(90,100,104,1) 70%,rgba(40,52,59,1) 86%,rgba(6,8,10,1) 100%);
background: linear-gradient(270deg, rgba(220,232,247,1) 0%,rgba(154,189,234,1) 24%,rgba(107,129,147,1) 52%,rgba(90,100,104,1) 70%,rgba(40,52,59,1) 86%,rgba(6,8,10,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dce8f7', endColorstr='#06080a',GradientType=1 );;
}
h1, h2, h3, h4, h5, h6{
color: rgba(75,200,255,0.80);
font-family: "Arial Narrow";
font-weight: 900;
text-shadow: 0px 0px 3px #93ddff;
text-shadow: 0px 0px 6px #93ddff;
text-shadow: 0px 0px 9px #93ddff;
text-shadow: 0px 0px 12px #93ddff;
}
.well{
background: rgba(0,0,0,0.33);
//border: rgba(0,150,200,0.33) 3px solid;
border: none;
padding: 8px;
margin: 4px;
}
.panel{
background: rgba(70,70,70,0.33);
// border: rgba(0,200,255,0.33) 1px solid;
border: none;
}
.panel .panel-heading{
background: rgba(70,140,190,0.66);
padding-left: 8px;
border: none;
}
.panel .panel-body{
background: rgba(50,115,170,0.33);
border: none;
}
pre{
font-size: 33%;
color: rgba(200,255,200,0.66);
border: rgba(0,75,150,0.66) 1px solid;
padding-left: 8px;
text-shadow: 0px 0px 1px rgba(0,200,150,1);
text-shadow: 0px 0px 2px rgba(0,200,150,1);
text-shadow: 0px 0px 4px rgba(0,200,150,1);
text-shadow: 0px 0px 6px rgba(0,200,150,1);
text-shadow: 0px 0px 8px rgba(0,200,150,1);
background: -moz-linear-gradient(top, rgba(0,0,0,0.33) 0%, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0.33) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.33) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
}
.popin{
background: rgba(100,200,255,0.33);
border-radius: 8px;
padding: 8px;
box-shadow: 0px 0px 16px 4px rgba(75, 200, 255, 0.33);
}
.popin .text-default{
color: rgba(0,225,255,0.8);
font-size: 0.8em;
font-family: "Verdana";
}
.bg_base{
position: absolute;
background: rgba(0,0,0,1) url("https://media.giphy.com/media/3ohhwgc8TSAkLOkYLe/giphy.gif") no-repeat left top;
background-size: cover;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
-webkit-filter: blur(16px);
filter: blur(16px);
z-index: -99999;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />