A simple box with multicolor header
How do I make an a simple box with multicolor header?
A flexible box using the flat ui colors http://flatuicolors.com/ . What is a a simple box with multicolor header? How do you make a a simple box with multicolor header? This script and codes were developed by Jonathan De Montalembert on 10 July 2022, Sunday.
A simple box with multicolor header Previews
A simple box with multicolor header - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A simple box with multicolor header</title> <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! */ body { background: #222;
}
div { font-color: #444; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dddddd)); background: -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%); background: -webkit-linear-gradient(top, #ffffff 0%, #dddddd 100%); background: linear-gradient(to bottom, #ffffff 0%, #dddddd 100%); line-height: 1.6em; border: 1px solid #8A8A8A; margin: 50px auto; padding: 40px; width: 50%; min-width: 300px; max-width: 800px; position: relative; border-radius: 3px; background: white; -moz-box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.6), inset 10px 0 8px -5px rgba(0, 0, 0, 0.1), inset -10px 0 8px -5px rgba(0, 0, 0, 0.1), inset 0 0 100px 10px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.6), inset 10px 0 8px -5px rgba(0, 0, 0, 0.1), inset -10px 0 8px -5px rgba(0, 0, 0, 0.1), inset 0 0 100px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.6), inset 10px 0 8px -5px rgba(0, 0, 0, 0.1), inset -10px 0 8px -5px rgba(0, 0, 0, 0.1), inset 0 0 100px 10px rgba(0, 0, 0, 0.2);
}
div:after { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFhYmM5YyIvPjxzdG9wIG9mZnNldD0iMTAlIiBzdG9wLWNvbG9yPSIjMTZhMDg1Ii8+PHN0b3Agb2Zmc2V0PSIxMCUiIHN0b3AtY29sb3I9IiMyZWNjNzEiLz48c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iIzI3YWU2MCIvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjMzQ5OGRiIi8+PHN0b3Agb2Zmc2V0PSIzMCUiIHN0b3AtY29sb3I9IiMyOTgwYjkiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1jb2xvcj0iIzliNTliNiIvPjxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjOGU0NGFkIi8+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiMzNDQ5NWUiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzJjM2U1MCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZjFjNDBmIi8+PHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiNmMzljMTIiLz48c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iI2U2N2UyMiIvPjxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjZDM1NDAwIi8+PHN0b3Agb2Zmc2V0PSI3MCUiIHN0b3AtY29sb3I9IiNlNzRjM2MiLz48c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2MwMzkyYiIvPjxzdG9wIG9mZnNldD0iODAlIiBzdG9wLWNvbG9yPSIjZWNmMGYxIi8+PHN0b3Agb2Zmc2V0PSI5MCUiIHN0b3AtY29sb3I9IiNiZGMzYzciLz48c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iIzk1YTVhNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdmOGM4ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #1abc9c), color-stop(10%, #16a085), color-stop(10%, #2ecc71), color-stop(20%, #27ae60), color-stop(20%, #3498db), color-stop(30%, #2980b9), color-stop(30%, #9b59b6), color-stop(40%, #8e44ad), color-stop(40%, #34495e), color-stop(50%, #2c3e50), color-stop(50%, #f1c40f), color-stop(60%, #f39c12), color-stop(60%, #e67e22), color-stop(70%, #d35400), color-stop(70%, #e74c3c), color-stop(80%, #c0392b), color-stop(80%, #ecf0f1), color-stop(90%, #bdc3c7), color-stop(90%, #95a5a6), color-stop(100%, #7f8c8d)); background: -moz-linear-gradient(left, #1abc9c 0%, #16a085 10%, #2ecc71 10%, #27ae60 20%, #3498db 20%, #2980b9 30%, #9b59b6 30%, #8e44ad 40%, #34495e 40%, #2c3e50 50%, #f1c40f 50%, #f39c12 60%, #e67e22 60%, #d35400 70%, #e74c3c 70%, #c0392b 80%, #ecf0f1 80%, #bdc3c7 90%, #95a5a6 90%, #7f8c8d 100%); background: -webkit-linear-gradient(left, #1abc9c 0%, #16a085 10%, #2ecc71 10%, #27ae60 20%, #3498db 20%, #2980b9 30%, #9b59b6 30%, #8e44ad 40%, #34495e 40%, #2c3e50 50%, #f1c40f 50%, #f39c12 60%, #e67e22 60%, #d35400 70%, #e74c3c 70%, #c0392b 80%, #ecf0f1 80%, #bdc3c7 90%, #95a5a6 90%, #7f8c8d 100%); background: linear-gradient(to right, #1abc9c 0%, #16a085 10%, #2ecc71 10%, #27ae60 20%, #3498db 20%, #2980b9 30%, #9b59b6 30%, #8e44ad 40%, #34495e 40%, #2c3e50 50%, #f1c40f 50%, #f39c12 60%, #e67e22 60%, #d35400 70%, #e74c3c 70%, #c0392b 80%, #ecf0f1 80%, #bdc3c7 90%, #95a5a6 90%, #7f8c8d 100%); left: 0; right: 0; content: ''; top: 0; height: 10px; position: absolute; transition: all .4s ease; -moz-box-shadow: inset 10px 0 8px -5px rgba(0, 0, 0, 0.1), inset -10px 0 8px -5px rgba(0, 0, 0, 0.1), inset 0 0 100px 10px rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 10px 0 8px -5px rgba(0, 0, 0, 0.1), inset -10px 0 8px -5px rgba(0, 0, 0, 0.1), inset 0 0 100px 10px rgba(0, 0, 0, 0.2); box-shadow: inset 10px 0 8px -5px rgba(0, 0, 0, 0.1), inset -10px 0 8px -5px rgba(0, 0, 0, 0.1), inset 0 0 100px 10px rgba(0, 0, 0, 0.2);
}
div:hover:after { height: 5px;
}
h1 { text-align: center;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div><h1>Lorem</h1><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span></div> <script src="js/index.js"></script>
</body>
</html>
A simple box with multicolor header - Script Codes CSS Codes
body { background: #222;
}
div { font-color: #444; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dddddd)); background: -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%); background: -webkit-linear-gradient(top, #ffffff 0%, #dddddd 100%); background: linear-gradient(to bottom, #ffffff 0%, #dddddd 100%); line-height: 1.6em; border: 1px solid #8A8A8A; margin: 50px auto; padding: 40px; width: 50%; min-width: 300px; max-width: 800px; position: relative; border-radius: 3px; background: white; -moz-box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.6), inset 10px 0 8px -5px rgba(0, 0, 0, 0.1), inset -10px 0 8px -5px rgba(0, 0, 0, 0.1), inset 0 0 100px 10px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.6), inset 10px 0 8px -5px rgba(0, 0, 0, 0.1), inset -10px 0 8px -5px rgba(0, 0, 0, 0.1), inset 0 0 100px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.6), inset 10px 0 8px -5px rgba(0, 0, 0, 0.1), inset -10px 0 8px -5px rgba(0, 0, 0, 0.1), inset 0 0 100px 10px rgba(0, 0, 0, 0.2);
}
div:after { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFhYmM5YyIvPjxzdG9wIG9mZnNldD0iMTAlIiBzdG9wLWNvbG9yPSIjMTZhMDg1Ii8+PHN0b3Agb2Zmc2V0PSIxMCUiIHN0b3AtY29sb3I9IiMyZWNjNzEiLz48c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iIzI3YWU2MCIvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjMzQ5OGRiIi8+PHN0b3Agb2Zmc2V0PSIzMCUiIHN0b3AtY29sb3I9IiMyOTgwYjkiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1jb2xvcj0iIzliNTliNiIvPjxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjOGU0NGFkIi8+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiMzNDQ5NWUiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzJjM2U1MCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZjFjNDBmIi8+PHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiNmMzljMTIiLz48c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iI2U2N2UyMiIvPjxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjZDM1NDAwIi8+PHN0b3Agb2Zmc2V0PSI3MCUiIHN0b3AtY29sb3I9IiNlNzRjM2MiLz48c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2MwMzkyYiIvPjxzdG9wIG9mZnNldD0iODAlIiBzdG9wLWNvbG9yPSIjZWNmMGYxIi8+PHN0b3Agb2Zmc2V0PSI5MCUiIHN0b3AtY29sb3I9IiNiZGMzYzciLz48c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iIzk1YTVhNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdmOGM4ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #1abc9c), color-stop(10%, #16a085), color-stop(10%, #2ecc71), color-stop(20%, #27ae60), color-stop(20%, #3498db), color-stop(30%, #2980b9), color-stop(30%, #9b59b6), color-stop(40%, #8e44ad), color-stop(40%, #34495e), color-stop(50%, #2c3e50), color-stop(50%, #f1c40f), color-stop(60%, #f39c12), color-stop(60%, #e67e22), color-stop(70%, #d35400), color-stop(70%, #e74c3c), color-stop(80%, #c0392b), color-stop(80%, #ecf0f1), color-stop(90%, #bdc3c7), color-stop(90%, #95a5a6), color-stop(100%, #7f8c8d)); background: -moz-linear-gradient(left, #1abc9c 0%, #16a085 10%, #2ecc71 10%, #27ae60 20%, #3498db 20%, #2980b9 30%, #9b59b6 30%, #8e44ad 40%, #34495e 40%, #2c3e50 50%, #f1c40f 50%, #f39c12 60%, #e67e22 60%, #d35400 70%, #e74c3c 70%, #c0392b 80%, #ecf0f1 80%, #bdc3c7 90%, #95a5a6 90%, #7f8c8d 100%); background: -webkit-linear-gradient(left, #1abc9c 0%, #16a085 10%, #2ecc71 10%, #27ae60 20%, #3498db 20%, #2980b9 30%, #9b59b6 30%, #8e44ad 40%, #34495e 40%, #2c3e50 50%, #f1c40f 50%, #f39c12 60%, #e67e22 60%, #d35400 70%, #e74c3c 70%, #c0392b 80%, #ecf0f1 80%, #bdc3c7 90%, #95a5a6 90%, #7f8c8d 100%); background: linear-gradient(to right, #1abc9c 0%, #16a085 10%, #2ecc71 10%, #27ae60 20%, #3498db 20%, #2980b9 30%, #9b59b6 30%, #8e44ad 40%, #34495e 40%, #2c3e50 50%, #f1c40f 50%, #f39c12 60%, #e67e22 60%, #d35400 70%, #e74c3c 70%, #c0392b 80%, #ecf0f1 80%, #bdc3c7 90%, #95a5a6 90%, #7f8c8d 100%); left: 0; right: 0; content: ''; top: 0; height: 10px; position: absolute; transition: all .4s ease; -moz-box-shadow: inset 10px 0 8px -5px rgba(0, 0, 0, 0.1), inset -10px 0 8px -5px rgba(0, 0, 0, 0.1), inset 0 0 100px 10px rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 10px 0 8px -5px rgba(0, 0, 0, 0.1), inset -10px 0 8px -5px rgba(0, 0, 0, 0.1), inset 0 0 100px 10px rgba(0, 0, 0, 0.2); box-shadow: inset 10px 0 8px -5px rgba(0, 0, 0, 0.1), inset -10px 0 8px -5px rgba(0, 0, 0, 0.1), inset 0 0 100px 10px rgba(0, 0, 0, 0.2);
}
div:hover:after { height: 5px;
}
h1 { text-align: center;
}
A simple box with multicolor header - Script Codes JS Codes
/* colors are from http://flatuicolors.com/
*/
| Developer | Jonathan De Montalembert |
| Username | roine |
| Uploaded | July 10, 2022 |
| Rating | 4 |
| Size | 5,240 Kb |
| Views | 72,828 |
Do you need developer help for A simple box with multicolor header?
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!
Jonathan De Montalembert (roine) Script Codes
| Name | Size |
| A Pen by jonathan de montalembert | 13,600 Kb |
| An angular directive to set same height | 3,125 Kb |
| Slide windows | 8,187 Kb |
| Tooltip in table | 3,713 Kb |
| Alternative text on image not loaded with placehold.it | 2,493 Kb |
| A Pen by jonathan de montalembert | 1,792 Kb |
| Very basic test on firebase | 2,021 Kb |
| Demo jqueryy ui | 2,534 Kb |
| Neat form | 4,298 Kb |
| A simple pricing table | 4,107 Kb |
Create amazing love letters 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 |
| Minimal Menu | Achudars | 3,430 Kb |
| Lecture 1 | Law | 0 Kb |
| Draggables in pure angular | Rlo206 | 5,167 Kb |
| Twitch | SarahDunlap | 2,937 Kb |
| Blog Concept - Single Post | Marionebl | 9,603 Kb |
| CSS Donut Charts | Seanstopnik | 2,908 Kb |
| Twitch TV | Natester13 | 4,488 Kb |
| Yuliya v krylova | Rafszul | 37,351 Kb |
| Electric worm | Jeffibacache | 2,377 Kb |
| A Pen by Alexandru Pora | Axpro | 1,615 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!