CSS minifier
Input
/* ## What is the min.css? "min.css" is a tiny, fast and efficient JavaScript library for minifying CSS files that really makes your website faster. https://github.com/w3core/min.css/ */ html, body { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background: red; height: 100%; font-family: sans-serif, Arial; background: hsla(198, 71%, 53%, 1); background: rgba(51, 170, 221, 1); } /* .scrollbar */ .scrollbar { resize: none; } .scrollbar::-webkit-scrollbar { width: 10px; } .scrollbar::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 5px; background: rgba(0, 0, 0, 0); background-clip: padding-box; } .scrollbar:hover::-webkit-scrollbar-thumb { border: 3px solid transparent; background: rgba(100, 100, 100, 0.5); background-clip: padding-box; } #header { position: relative; height: 46px; line-height: 46px; margin: 0px 0px 0px 0px; padding: 0px 20px 0px; background: #333333; color: #eeeeee; font-size: 20px; box-shadow: inset 0px -8px 8px #222222; text-shadow: 0px -1px 0px #000000; } #body { position: absolute; top: 46px; bottom: 0px; left: 0px; right: 0px; overflow: auto; } .box { display: block; position: relative; box-sizing: border-box; height: 50%; } @media all and (min-width: 800px), all and (orientation: landscape) { #body:before { content: ""; display: block; position: absolute; left: 50%; width: 1px; height: 100%; margin-left: -1px; z-index: 100; background: #33aadd; box-shadow: inset 0px 0px 1px #000000; } #body:after {content: ""; display: block; float: none; clear: both;} #body > .box { float: left; height: 100%; width: 50%; } } .box > .head { z-index: 2; display: block; position: relative; box-sizing: border-box; width: 100%; height: 32px; line-height: 32px; padding: 0px 20px 0px 20px; background: #33aadd; color: #ffffff; text-shadow: 0px -1px #0077aa; box-shadow: 0px 2px 2px -1px #111111; } .box > .body { display: block; position: absolute; box-sizing: border-box; top: 32px; left: 0px; width: 100%; height: 100%; margin: -32px 0px 0px; padding: 42px 20px 10px; overflow: auto; outline: 0px none; border: 0px none; background: #222222; color: #33aadd; text-shadow: 0px -1px 0px #111111; } .box > .body::selection { background: #999999; color: #ffffff; } .box .head[title]:not([title=""]):after { content: attr(title); position: absolute; right: 20px; font-style: normal; font-size: 14px; vertical-align: top; color: #333333; text-shadow: 0px 1px #55ccff; } .ribbon { display: block; position: fixed; z-index: 100; width: 250px; height: 28px; bottom: 0px; right: 0px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border-radius: 4px 0px 0px; transform: rotate(-45deg) translate3d(78px,42px,0); box-shadow: 0px 0px 10px #ffffff, inset 0px 0px 0px 2px #ffffff; background: #eeeeee; color: #111111; text-shadow: 0px 1px #ffffff; font: normal bold 12px/28px Arial, Helvetica, Tahoma, Verdana, sans-serif; text-align: center; text-decoration: none; white-space: nowrap; transition: all 0.1s linear; } .ribbon:before { content: ""; display: block; position: absolute; top: 2px; bottom: 2px; left: 2px; right: 0px; border: 0px dotted #cccccc; border-width: 2px 0px 2px 2px; border-radius: 4px 0px 0px; } .ribbon:hover { background: #0099ee; box-shadow: 0px 0px 15px #000000; color: #ffffff; text-shadow: 0px -1px #004488; } .ribbon:hover:before {border-color: #22bbff}
Output
Documentation