Flat CSS Color Names
How do I make an flat css color names?
A small collection of named CSS colors I like to use. . What is a flat css color names? How do you make a flat css color names? This script and codes were developed by Andréas Lundgren on 01 December 2022, Thursday.
Flat CSS Color Names Previews
Flat CSS Color Names - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat CSS Color Names</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <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! */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
*::before, *::after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
::selection { background-color: white; color: black; text-shadow: none;
}
html { color: #2d2d3f; font: normal 16px/1.5 "Open Sans", sans-serif;
}
body { background-color: #f9f9f9; -moz-transition: background-color 0.25s; -o-transition: background-color 0.25s; -webkit-transition: background-color 0.25s; transition: background-color 0.25s;
}
.container { margin: 3rem auto; width: 42rem;
}
h1 { margin: 0 0 3rem; position: relative; line-height: 1; cursor: default; -moz-transition: color 0.25s; -o-transition: color 0.25s; -webkit-transition: color 0.25s; transition: color 0.25s;
}
h1.text-light { color: #f9f9f9;
}
.text-colors,
.close { display: block; float: right; margin-left: 1.5rem; overflow: hidden; position: relative; top: -.5rem; width: 3rem; height: 3rem; border: 1px solid #2d2d3f; border-radius: 50%; background-color: #f9f9f9; color: #2d2d3f; font-size: 2rem; font-weight: 700; line-height: 45px; text-align: center; cursor: pointer; opacity: .5; -moz-transition-property: background-color, border-color, opacity, -moz-transform; -o-transition-property: background-color, border-color, opacity, -o-transform; -webkit-transition-property: background-color, border-color, opacity, -webkit-transform; transition-property: background-color, border-color, opacity, transform; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; -webkit-transition-duration: 0.25s; transition-duration: 0.25s;
}
.text-colors:hover,
.close:hover { opacity: 1;
}
.close.text-light,
.text-colors.text-light { border-color: #f9f9f9; background-color: #2d2d3f; color: #f9f9f9;
}
.close.plus { -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.colors { width: 100%; height: 32rem; text-align: center; -moz-transition: color 0.25s; -o-transition: color 0.25s; -webkit-transition: color 0.25s; transition: color 0.25s;
}
.colors.text-light { color: #f1f1f1;
}
.colors div { float: left; width: 33.33%; height: 25%; font-weight: 700; line-height: 8rem; cursor: pointer;
}
.current-color { display: none; margin: 10rem 0 0; font-size: 5rem; font-weight: 700; line-height: 1.25; text-align: center; -moz-transition: color 0.25s; -o-transition: color 0.25s; -webkit-transition: color 0.25s; transition: color 0.25s;
}
.current-color.text-light { color: #f9f9f9;
}
body.Tomato,
.colors div:nth-child(1) { background-color: Tomato;
}
body.Gold,
.colors div:nth-child(2) { background-color: Gold;
}
body.Teal,
.colors div:nth-child(3) { background-color: Teal;
}
body.LightCoral,
.colors div:nth-child(4) { background-color: LightCoral;
}
body.DodgerBlue,
.colors div:nth-child(5) { background-color: DodgerBlue;
}
body.SpringGreen,
.colors div:nth-child(6) { background-color: SpringGreen;
}
body.LightGreen,
.colors div:nth-child(7) { background-color: LightGreen;
}
body.FloralWhite,
.colors div:nth-child(8) { background-color: FloralWhite;
}
body.Plum,
.colors div:nth-child(9) { background-color: Plum;
}
body.PeachPuff,
.colors div:nth-child(10) { background-color: PeachPuff;
}
body.LightSlateGray,
.colors div:nth-child(11) { background-color: LightSlateGray;
}
body.SandyBrown,
.colors div:nth-child(12) { background-color: SandyBrown;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <h1>Flat CSS Color Names</h1> <div class="colors" title="Set as background"> <div>Tomato</div> <div>Gold</div> <div>Teal</div> <div>LightCoral</div> <div>DodgerBlue</div> <div>SpringGreen</div> <div>LightGreen</div> <div>FloralWhite</div> <div>Plum</div> <div>PeachPuff</div> <div>LightSlateGray</div> <div>SandyBrown</div> </div><!-- / .colors --> <div class="current-color">No color selected</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Flat CSS Color Names - Script Codes CSS Codes
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
*::before, *::after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
::selection { background-color: white; color: black; text-shadow: none;
}
html { color: #2d2d3f; font: normal 16px/1.5 "Open Sans", sans-serif;
}
body { background-color: #f9f9f9; -moz-transition: background-color 0.25s; -o-transition: background-color 0.25s; -webkit-transition: background-color 0.25s; transition: background-color 0.25s;
}
.container { margin: 3rem auto; width: 42rem;
}
h1 { margin: 0 0 3rem; position: relative; line-height: 1; cursor: default; -moz-transition: color 0.25s; -o-transition: color 0.25s; -webkit-transition: color 0.25s; transition: color 0.25s;
}
h1.text-light { color: #f9f9f9;
}
.text-colors,
.close { display: block; float: right; margin-left: 1.5rem; overflow: hidden; position: relative; top: -.5rem; width: 3rem; height: 3rem; border: 1px solid #2d2d3f; border-radius: 50%; background-color: #f9f9f9; color: #2d2d3f; font-size: 2rem; font-weight: 700; line-height: 45px; text-align: center; cursor: pointer; opacity: .5; -moz-transition-property: background-color, border-color, opacity, -moz-transform; -o-transition-property: background-color, border-color, opacity, -o-transform; -webkit-transition-property: background-color, border-color, opacity, -webkit-transform; transition-property: background-color, border-color, opacity, transform; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; -webkit-transition-duration: 0.25s; transition-duration: 0.25s;
}
.text-colors:hover,
.close:hover { opacity: 1;
}
.close.text-light,
.text-colors.text-light { border-color: #f9f9f9; background-color: #2d2d3f; color: #f9f9f9;
}
.close.plus { -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.colors { width: 100%; height: 32rem; text-align: center; -moz-transition: color 0.25s; -o-transition: color 0.25s; -webkit-transition: color 0.25s; transition: color 0.25s;
}
.colors.text-light { color: #f1f1f1;
}
.colors div { float: left; width: 33.33%; height: 25%; font-weight: 700; line-height: 8rem; cursor: pointer;
}
.current-color { display: none; margin: 10rem 0 0; font-size: 5rem; font-weight: 700; line-height: 1.25; text-align: center; -moz-transition: color 0.25s; -o-transition: color 0.25s; -webkit-transition: color 0.25s; transition: color 0.25s;
}
.current-color.text-light { color: #f9f9f9;
}
body.Tomato,
.colors div:nth-child(1) { background-color: Tomato;
}
body.Gold,
.colors div:nth-child(2) { background-color: Gold;
}
body.Teal,
.colors div:nth-child(3) { background-color: Teal;
}
body.LightCoral,
.colors div:nth-child(4) { background-color: LightCoral;
}
body.DodgerBlue,
.colors div:nth-child(5) { background-color: DodgerBlue;
}
body.SpringGreen,
.colors div:nth-child(6) { background-color: SpringGreen;
}
body.LightGreen,
.colors div:nth-child(7) { background-color: LightGreen;
}
body.FloralWhite,
.colors div:nth-child(8) { background-color: FloralWhite;
}
body.Plum,
.colors div:nth-child(9) { background-color: Plum;
}
body.PeachPuff,
.colors div:nth-child(10) { background-color: PeachPuff;
}
body.LightSlateGray,
.colors div:nth-child(11) { background-color: LightSlateGray;
}
body.SandyBrown,
.colors div:nth-child(12) { background-color: SandyBrown;
}Flat CSS Color Names - Script Codes JS Codes
$( '<span>', { 'class': 'close', 'html': '×', 'title': 'Toggle color palette'
}).appendTo( 'h1' ).on( 'click', function(e) { $(this).toggleClass( 'plus' ); $( '.colors' ).slideToggle( 250 ); $( '.current-color' ).slideToggle( 250 );
});
$( '<span>', { 'class': 'text-colors', 'title': 'Change text color'
}).appendTo( 'h1' ).on( 'click', function(e) { $( 'h1' ).toggleClass( 'text-light' ); $(this).toggleClass( 'text-light' ); $( '.close' ).toggleClass( 'text-light' ); $( '.colors' ).toggleClass( 'text-light' ); $( '.current-color' ).toggleClass( 'text-light' );
});
$( '.colors' ).on( 'click', 'div', function(e) { $( 'body' ) .removeClass() .addClass( $(this).text() ); $( '.current-color' ).html( $(this).text() ).slideDown( 250 ); $(this).parent().slideUp( 250 ); $( '.close' ).addClass( 'plus' );
});
| Developer | Andréas Lundgren |
| Username | adevade |
| Uploaded | December 01, 2022 |
| Rating | 3 |
| Size | 4,806 Kb |
| Views | 16,192 |
Do you need developer help for Flat CSS Color Names?
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!
Andréas Lundgren (adevade) Script Codes
| Name | Size |
| Simple Login Form | 2,535 Kb |
| Hamburger Menu Icon Animation | 2,832 Kb |
| Stack of Cards - SASS Mixin | 3,426 Kb |
| Simple Note | 5,355 Kb |
| Single Element Hamburger Icon - SASS Mixin | 3,542 Kb |
| CSS Vignette | 2,015 Kb |
| Fill Button - CSS Hover Animation | 2,552 Kb |
| Custom -webkit Scrollbars | 3,059 Kb |
| CSS 3D button | 2,870 Kb |
| CSS Loading Boxes Animation | 2,639 Kb |
Create amazing art & images 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 |
| 700 Synapses Per Second | Silentkrange | 2,138 Kb |
| SVG email test v2.0 | M_J_Robbins | 2,090 Kb |
| Alter bg opacity on hover... | Chrisboon27 | 2,054 Kb |
| Expandable Left Side Bar with jQuery animate | Retrofuturistic | 2,483 Kb |
| Animated skewed panes | NyX | 4,462 Kb |
| The Fly | GianlucaGuarini | 3,405 Kb |
| Flexbox playground | Enxaneta | 5,418 Kb |
| A Pen by aleen42 | Aleen42 | 11,473 Kb |
| Board Site | IndianaLuft | 10,542 Kb |
| IE11 Test | Boostnewmedia | 4,998 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!