Fade test
How do I make an fade test?
Test scenario with fading borders and background blending into a fading background. Works where ever the container falls on the background. What is a fade test? How do you make a fade test? This script and codes were developed by Ash Durham on 05 January 2023, Thursday.
Fade test - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fade test</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html { height: 100%;
}
body { height: 100%; background: white; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMGZjZmMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, white 0%, #f0fcfc 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #f0fcfc)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, white 0%, #f0fcfc 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, white 0%, #f0fcfc 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, white 0%, #f0fcfc 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%, #f0fcfc 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0fcfc',GradientType=0 ); /* IE6-8 */
}
.header { height: 100px;
}
.main_container { max-width: 960px; width: 80%; margin: 0 auto; position: relative; padding-bottom: 50px;
}
.content_base { height: 50px; border-bottom-left-radius: 100px; position: absolute; bottom: 0; left: 0; width: 100%; border: 1px solid #ccc; border-top: 0; background: #fff; box-sizing: border-box;
}
.content_container { width: 100%; height: auto; position: relative;
}
.border { /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwZmNmYyIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIxJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(top, rgba(240, 252, 252, 0) 0%, #cccccc 21%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(240, 252, 252, 0)), color-stop(21%, #cccccc)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(240, 252, 252, 0) 0%, #cccccc 21%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(240, 252, 252, 0) 0%, #cccccc 21%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(240, 252, 252, 0) 0%, #cccccc 21%); /* IE10+ */ background: linear-gradient(to bottom, rgba(240, 252, 252, 0) 0%, #cccccc 21%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f0fcfc', endColorstr='#cccccc',GradientType=0 ); /* IE6-8 */ height: 100%; width: 1px; position: absolute; top: 0;
}
.border.left { left: 0;
}
.border.right { right: 0;
}
.content { padding: 30px; /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwZmNmYyIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIxJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(top, rgba(240, 252, 252, 0) 0%, white 21%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(240, 252, 252, 0)), color-stop(21%, white)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(240, 252, 252, 0) 0%, white 21%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(240, 252, 252, 0) 0%, white 21%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(240, 252, 252, 0) 0%, white 21%); /* IE10+ */ background: linear-gradient(to bottom, rgba(240, 252, 252, 0) 0%, #ffffff 21%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f0fcfc', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */ min-height: 300px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="header"></div>
<div class="main_container"> <div class="content_container"> <div class="border left"></div> <div class="content"> This is content </div> <div class="border right"></div> </div> <div class="content_base"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Fade test - Script Codes CSS Codes
html { height: 100%;
}
body { height: 100%; background: white; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMGZjZmMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, white 0%, #f0fcfc 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #f0fcfc)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, white 0%, #f0fcfc 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, white 0%, #f0fcfc 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, white 0%, #f0fcfc 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%, #f0fcfc 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0fcfc',GradientType=0 ); /* IE6-8 */
}
.header { height: 100px;
}
.main_container { max-width: 960px; width: 80%; margin: 0 auto; position: relative; padding-bottom: 50px;
}
.content_base { height: 50px; border-bottom-left-radius: 100px; position: absolute; bottom: 0; left: 0; width: 100%; border: 1px solid #ccc; border-top: 0; background: #fff; box-sizing: border-box;
}
.content_container { width: 100%; height: auto; position: relative;
}
.border { /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwZmNmYyIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIxJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(top, rgba(240, 252, 252, 0) 0%, #cccccc 21%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(240, 252, 252, 0)), color-stop(21%, #cccccc)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(240, 252, 252, 0) 0%, #cccccc 21%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(240, 252, 252, 0) 0%, #cccccc 21%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(240, 252, 252, 0) 0%, #cccccc 21%); /* IE10+ */ background: linear-gradient(to bottom, rgba(240, 252, 252, 0) 0%, #cccccc 21%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f0fcfc', endColorstr='#cccccc',GradientType=0 ); /* IE6-8 */ height: 100%; width: 1px; position: absolute; top: 0;
}
.border.left { left: 0;
}
.border.right { right: 0;
}
.content { padding: 30px; /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwZmNmYyIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIxJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(top, rgba(240, 252, 252, 0) 0%, white 21%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(240, 252, 252, 0)), color-stop(21%, white)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(240, 252, 252, 0) 0%, white 21%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(240, 252, 252, 0) 0%, white 21%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(240, 252, 252, 0) 0%, white 21%); /* IE10+ */ background: linear-gradient(to bottom, rgba(240, 252, 252, 0) 0%, #ffffff 21%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f0fcfc', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */ min-height: 300px;
}
Developer | Ash Durham |
Username | ashdurham |
Uploaded | January 05, 2023 |
Rating | 3 |
Size | 5,616 Kb |
Views | 4,048 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Knockout Competition Draw Generator | 22,359 Kb |
Responsive scrolling text | 2,259 Kb |
Dynamic video proportion | 2,430 Kb |
Animated scroll navigation layout | 3,062 Kb |
Animated Progress Bar | 5,053 Kb |
Interactive Star Rating for forms | 3,705 Kb |
Social Share Button Counter | 3,666 Kb |
Viewport Media Query example 2 | 2,224 Kb |
Viewport Media Query example 1 | 2,029 Kb |
Cross Browser Placeholders | 3,761 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Multi-step GSAP animation | Acacheung | 2,668 Kb |
Kudos Please | TimPietrusky | 6,624 Kb |
CSS Parent Selector | Tomhodgins | 2,143 Kb |
Menubar compass mixin | Michaelparenteau | 4,925 Kb |
Knob rotation | Alemesre | 2,122 Kb |
Import shader in three.js | Khangeldy | 2,636 Kb |
Review test | Otro_user_gil | 4,054 Kb |
Simple blog concept | Drew_mc | 2,666 Kb |
ABVI Menu Discarded | Overdrivemachines | 3,607 Kb |
Angular-HAML | Cwacht | 2,022 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!