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 Previews
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 |
Do you need developer help for Fade test?
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!
Ash Durham (ashdurham) Script Codes
| Name | Size |
| Animated Progress Bar | 5,053 Kb |
| Viewport Media Query LESS example | 2,605 Kb |
| Radio status lights with gradients | 4,501 Kb |
| Responsive scrolling text | 2,259 Kb |
| Viewport Media Query SASS example | 2,580 Kb |
| Knockout Competition Draw Generator | 22,359 Kb |
| Dynamic video proportion | 2,430 Kb |
| Viewport Media Query example 1 | 2,029 Kb |
| Youtube-like loading bar with pure CSS | 4,195 Kb |
| Animated scroll navigation layout | 3,062 Kb |
Create amazing sales emails with AI!
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!
Similar Scripts & Codes
| Name | Username | Size |
| TigerWoods Freecodecamp Page | Baileytj | 2,869 Kb |
| Brian The CSS Bee | Jonitrythall | 3,922 Kb |
| JQuery FullScreen Overlay | _codemics | 2,252 Kb |
| Adding and Removing Element | Accimeesterlin | 2,119 Kb |
| GsuiPopup | Mr21 | 2,641 Kb |
| Cool audio | Bigliam | 1,868 Kb |
| CSS3 Media Queries demo | Machal | 1,824 Kb |
| Factorial | KeithleySLHS | 1,158 Kb |
| Fading Navigation Bar | J-w-v | 2,805 Kb |
| Learning canvas drawing | Aurer | 2,204 Kb |
Do you want hide your ip address?
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!