CSS Sprite Generator

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>CSS Sprite Generator</title> <meta name="description" content="A tool for generating image sprites and CSS for your web site. Using this tool can help you dramatically reduce the number of HTTP requests made for higher performance."> <meta name="keywords" content="css sprites, css, sprites, sprite, tool, generate, http requests, http, request"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <link rel="shortcut icon" href="//dpidudyah7i0b.cloudfront.net/favicon.ico" type="image/x-icon"> <link rel="icon" href="//dpidudyah7i0b.cloudfront.net/favicon.ico" type="image/x-icon"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="google-site-verification" content="ZkllBXM0YaGbvtbUBWPeMrRH7sJOHSKErKPJ_bQA9zM" /> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" href="/bootsnipp-layout/bootsnipp.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script async src="//netdna.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>  <script> window.onload = function() { setTimeout(function() { var ad = document.querySelector("ins.adsbygoogle[data-ad-slot='5700240528']"); var promos = document.querySelectorAll(".fr7a9z"); for (var i = 0; i < promos.length; i++) { var promo = promos[i]; if (ad && ad.innerHTML.replace(/\s/g, "").length == 0) { // ad.style.cssText = 'display:block !important'; ad.parentElement.style.cssText = 'display:none !important'; promo.innerHTML = '<center>\ <div class="fr7a9z2" style="background-color:#FCFCFC;width: 728px;height:90px;padding:10px;border:1px solid #cccccc;text-align:left;">\ <h4 style="margin-top:0px;margin-bottom:2px">\ <i class="fa fa-screenshot"></i> <a href="https://www.bidnapper.com/?refuser=danstools">Win More eBay Auctions</a></h4>\ Bid in the final seconds on eBay. Win more, save money, fast, and free.\ </div>\ </center>'; promo.style.maxWidth= ''; } else if (promo) { promo.innerHTML = '<center>\ <div class="fr7a9z2" style="background-color:#FCFCFC;width: 728px;height:90px;padding:10px;border:1px solid #cccccc;text-align:left;">\ <h5 style="margin-top:0px;margin-bottom:2px">\ <i class="fa fa-screenshot glyphicon glyphicon-screenshot"></i> <a href="https://www.bidnapper.com/?refuser=danstools">Win More eBay Auctions</a></h5>\ Bid in the final seconds on eBay. Win more, save money, fast, and free.\ </div>\ </center>'; var promotwo = document.querySelector(".fr7a9z2"); promotwo.style.width= ''; } } }, 1000); }; </script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-55581850-1', 'auto', {'allowLinker': true}); ga('require', 'linker'); ga('require', 'GTM-PKH6F4B'); ga('linker:autoLink', ['danstools.com','unixtimestamp.com','url-encode-decode.com','cssfontstack.com','hexcolortool.com','htaccessredirect.net','jspretty.com','jsmini.com','jsobfuscate.com','md5hashgenerator.com','regextester.com','cleancss.com','favicon-generator.org','website-performance.org','permissions-calculator.org','conversoes.org','convertissez.fr','convertitore.net','elconvertidor.com','files-conversion.com','henkan-muryo.com','konvertirung.org','konvertor.org','tahwil.net','zhuan-huan.com','bootsnipp.com'] ); ga('send', 'pageview'); </script> <script data-ad-client="ca-pub-8815422507798180" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> </head> <body> <nav class="navbar navbar-fixed-top navbar-bootsnipp animate" role="navigation" style="z-index: 9999999"> <div class="container">  <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="animbrand"> <a style="padding-top:10px;" class="navbar-brand animate" href="https://spritegen.website-performance.org">CSS Sprite Generator</a> <span class="text-muted" style="font-size:.75em; position:absolute; bottom:3px; left:30px">From <strong>Dan's Tools</strong></span> </div> </div>  <script> $(document).ready(function(){ $('.dropdown-submenu a.submenutest').on("click", function(e){ $(this).next('ul').toggle(); e.stopPropagation(); e.preventDefault(); }); }); </script> <style> .dropdown-submenu { position: relative; } .dropdown-submenu>.dropdown-menu>li>a:hover { background-color: #F5F5F5; border-left-width: 5px; padding-left: 15px; } .dropdown-submenu>.dropdown-menu>li>a { border-left: 0 solid #5FB0E4; color: #787878; font-size: 16px; font-weight: 400; padding: 10px 20px; white-space: nowrap; } .dropdown-submenu .dropdown-menu { min-width: 220px; top: 0; left: 100%; margin-top: -1px; } </style>  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="caret"></i> <span>Web Dev</span> </a> <ul class="dropdown-menu" role="menu"> <li><a href="http://bootsnipp.com" rel="nofollow">HTML/JS/CSS Playground</a></li><li><a href="http://www.hexcolortool.com" rel="nofollow">HTML Color Codes</a></li><li><a href="http://www.cssfontstack.com" rel="nofollow">CSS Fonts</a></li><li><a href="http://www.cleancss.com/diff-compare-merge" rel="nofollow">Online Diff Tool</a></li><li><a href="http://www.htaccessredirect.net" rel="nofollow">.htaccess Generator</a></li><li><a href="http://www.regextester.com" rel="nofollow">RegEx Testing</a></li><li><a href="http://www.rgbtohex.net" rel="nofollow">RGB & HEX Color Explorer</a></li><li><a href="http://www.rgbtohex.net" rel="nofollow">RGB to HEX Color Converter</a></li><li><a href="http://www.unixtimestamp.com" rel="nofollow">TimeStamp Converter</a></li><li><a href="http://website-performance.org" rel="nofollow">Website Speed Test</a></li><li><a href="http://www.favicon-generator.org" rel="nofollow">Favicon.ico & App Icon Generator</a></li><li><a href="http://www.favicon-generator.org/image-editor" rel="nofollow">Online Image Editor</a></li><li><a href="http://spritegen.website-performance.org" rel="nofollow">CSS Sprite Generator</a></li><li><a href="http://www.cleancss.com/keyword-tool" rel="nofollow">Keyword Tool</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="caret"></i> <span>Conversion</span> </a> <ul class="dropdown-menu" role="menu"> <li class="dropdown-submenu"> <a href="#" tabindex="-1" class="submenutest"> <span>Data</span> <i class="glyphicon glyphicon-triangle-right pull-right" style="font-size:75%"></i> </a> <ul class="dropdown-menu"> <li><a href="http://www.cleancss.com/CSV-to-HTML" rel="nofollow">CSV To HTML Converter</a></li><li><a href="http://www.cleancss.com/CSV-to-JSON" rel="nofollow">CSV To JSON Converter</a></li><li><a href="http://www.cleancss.com/CSV-to-TSV" rel="nofollow">CSV To TSV Converter</a></li><li><a href="http://www.cleancss.com/CSV-to-XML" rel="nofollow">CSV To XML Converter</a></li><li><a href="http://www.cleancss.com/JSON-to-CSV" rel="nofollow">JSON To CSV Converter</a></li><li><a href="http://www.cleancss.com/JSON-to-HTML" rel="nofollow">JSON To HTML Converter</a></li><li><a href="http://www.cleancss.com/JSON-to-TSV" rel="nofollow">JSON To TSV Converter</a></li><li><a href="http://www.cleancss.com/JSON-to-XML" rel="nofollow">JSON To XML Converter</a></li><li><a href="http://www.cleancss.com/XML-to-CSV" rel="nofollow">XML To CSV Converter</a></li><li><a href="http://www.cleancss.com/XML-to-HTML" rel="nofollow">XML To HTML Converter</a></li><li><a href="http://www.cleancss.com/XML-to-JSON" rel="nofollow">XML To JSON Converter</a></li><li><a href="http://www.cleancss.com/XML-to-TSV" rel="nofollow">XML To TSV Converter</a></li><li><a href="http://www.files-conversion.com" rel="nofollow">Convert Files</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#" tabindex="-1" class="submenutest"> <span>Numbers</span> <i class="glyphicon glyphicon-triangle-right pull-right" style="font-size:75%"></i> </a> <ul class="dropdown-menu"> <li><a href="http://www.cleancss.com/binary-converter" rel="nofollow">Binary Converter</a></li><li><a href="http://www.cleancss.com/binary-to-decimal" rel="nofollow">Binary To Decimal Converter</a></li><li><a href="http://www.cleancss.com/binary-to-hex" rel="nofollow">Binary To Hex Converter</a></li><li><a href="http://www.cleancss.com/binary-to-octal" rel="nofollow">Binary To Octal Converter</a></li><li><a href="http://www.cleancss.com/convert-units" rel="nofollow">Unit Converter</a></li><li><a href="http://www.cleancss.com/decimal-to-binary" rel="nofollow">Decimal To Binary Converter</a></li><li><a href="http://www.cleancss.com/decimal-to-hex" rel="nofollow">Decimal To Hex Converter</a></li><li><a href="http://www.cleancss.com/decimal-to-octal" rel="nofollow">Decimal To Octal Converter</a></li><li><a href="http://www.cleancss.com/hex-to-binary" rel="nofollow">Hex To Binary Converter</a></li><li><a href="http://www.cleancss.com/hex-to-decimal" rel="nofollow">Hex To Decimal Converter</a></li><li><a href="http://www.cleancss.com/hex-to-octal" rel="nofollow">Hex To Octal Converter</a></li><li><a href="http://www.cleancss.com/how-many-bytes" rel="nofollow">Data Size Converter</a></li><li><a href="http://www.cleancss.com/octal-to-binary" rel="nofollow">Octal To Binary Converter</a></li><li><a href="http://www.cleancss.com/octal-to-decimal" rel="nofollow">Octal To Decimal Converter</a></li><li><a href="http://www.cleancss.com/octal-to-hex" rel="nofollow">Octal To Hex Converter</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#" tabindex="-1" class="submenutest"> <span>Strings</span> <i class="glyphicon glyphicon-triangle-right pull-right" style="font-size:75%"></i> </a> <ul class="dropdown-menu"> <li><a href="http://www.cleancss.com/binary-to-string" rel="nofollow">Binary To String Converter</a></li><li><a href="http://www.cleancss.com/hex-to-string" rel="nofollow">Hex To String Converter</a></li><li><a href="http://www.cleancss.com/html-escape" rel="nofollow">HTML Entities Escape</a></li><li><a href="http://www.cleancss.com/html-unescape" rel="nofollow">HTML Entities Unescape</a></li><li><a href="http://www.cleancss.com/string-to-binary" rel="nofollow">String To Binary Converter</a></li><li><a href="http://www.cleancss.com/string-to-hex" rel="nofollow">String To Hex Converter</a></li><li><a href="http://www.cleancss.com/strip-html" rel="nofollow">Strip and Remove HTML Tags</a></li><li><a href="http://www.cleancss.com/strip-xml" rel="nofollow">Strip and Remove XML Tags</a></li><li><a href="http://www.cleancss.com/word-counter" rel="nofollow">Word Counter</a></li><li><a href="http://www.cleancss.com/xml-escape" rel="nofollow">XML Entities Escape</a></li><li><a href="http://www.cleancss.com/xml-unescape" rel="nofollow">XML Entities Unescape</a></li> </ul> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="caret"></i> <span>Encode/Decoders</span> </a> <ul class="dropdown-menu" role="menu"> <li><a href="http://www.cleancss.com/base64-decode" rel="nofollow">Base64 Decode</a></li><li><a href="http://www.cleancss.com/base64-encode" rel="nofollow">Base64 Encode</a></li><li><a href="http://www.md5hashgenerator.com" rel="nofollow">MD5 Hash Generator</a></li><li><a href="http://www.cleancss.com/sha1-generator" rel="nofollow">SHA-1 Hash Generator</a></li><li><a href="http://www.cleancss.com/sha256-hash-generator" rel="nofollow">SHA-256 Hash Generator</a></li><li><a href="http://www.cleancss.com/sha512-hash-generator" rel="nofollow">SHA-512 Hash Generator</a></li><li><a href="http://www.url-encode-decode.com" rel="nofollow">URL Encode/Decode</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="caret"></i> <span>Formatters</span> </a> <ul class="dropdown-menu" role="menu"> <li><a href="http://www.cleancss.com/css-beautify" rel="nofollow">CSS Formatter</a></li><li><a href="http://www.cleancss.com/go-beautify" rel="nofollow">GO Formatter</a></li><li><a href="http://www.cleancss.com/html-beautify" rel="nofollow">HTML Beautifier & Formatter</a></li><li><a href="http://www.cleancss.com/javascript-beautify" rel="nofollow">Javascript Formatter</a></li><li><a href="http://www.cleancss.com/javascript-obfuscate" rel="nofollow">Javascript Obfuscate</a></li><li><a href="http://www.cleancss.com/json-beautify" rel="nofollow">JSON Formatter & Beautifier</a></li><li><a href="http://www.cleancss.com/json-editor" rel="nofollow">JSON Editor</a></li><li><a href="http://www.cleancss.com/json-validator" rel="nofollow">JSON Validator</a></li><li><a href="http://www.cleancss.com/perl-beautify" rel="nofollow">Perl Formatter</a></li><li><a href="http://www.cleancss.com/php-beautify" rel="nofollow">PHP Formatter</a></li><li><a href="http://www.cleancss.com/python-beautify" rel="nofollow">Python Formatter</a></li><li><a href="http://www.cleancss.com/ruby-beautify" rel="nofollow">Ruby Formatter</a></li><li><a href="http://www.cleancss.com/sql-beautify" rel="nofollow">SQL Formatter</a></li><li><a href="http://www.cleancss.com/xml-beautify" rel="nofollow">XML Formatter & Beautifier</a></li><li><a href="http://www.cleancss.com/css-minify" rel="nofollow">CSS Minify</a></li><li><a href="http://www.cleancss.com/javascript-minify" rel="nofollow">Javascript Minify</a></li><li><a href="http://www.cleancss.com/json-minify" rel="nofollow">JSON Minify</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="caret"></i> <span>Internet</span> </a> <ul class="dropdown-menu" role="menu"> <li><a href="http://www.cleancss.com/email-validator" rel="nofollow">Email Validator</a></li><li><a href="http://www.cleancss.com/is-it-up-or-down" rel="nofollow">Is It Up Or Down</a></li><li><a href="http://www.cleancss.com/router-default" rel="nofollow">Default Router Settings</a></li><li><a href="http://www.cleancss.com/user-manuals" rel="nofollow">User Manuals</a></li><li><a href="http://www.cleancss.com/what-is-my-ip" rel="nofollow">What is my IP</a></li> </ul> </li> <li><a data-toggle="modal" href="#JoinModal">Join</a></li><li><a data-toggle="modal" href="#LoginModal">Login</a></li> </ul> </div> </div>  </nav> <div class="container" style="margin-top:30px;margin-bottom:20px;"> <div class="col-md-9 col-xl-10"> <h3 class="text-center hidden-xs hidden-sm hidden">CSS Sprite Generator</h3> <br/> <link rel="stylesheet" href="/oldsites/spritegen/htdocs/css/default.css" type="text/css"> <link rel="stylesheet" href="/oldsites/spritegen/htdocs/css/reset.css" type="text/css">  <div class="box"> <div class="box-content"> <script type="text/javascript"> var SPRITEGEN = { locale : { aspectRatio : "Maintain aspect ratio:" }, formFields : { aspectRatio : 'checked' } }; </script> <div id="favcontent"> <ul id="favnav"> <li class="selected"><a href="/oldsites/spritegen/htdocs/">Home</a></li> </ul> <div id="frame"> <div id="lang-bar"> <ul> <li><a href="/oldsites/spritegen/htdocs/?lang=af">Afrikaans</a></li> <li><a href="/oldsites/spritegen/htdocs/?lang=cn">中文</a></li> <li><a href="/oldsites/spritegen/htdocs/?lang=cs">čeština</a></li> <li><a href="/oldsites/spritegen/htdocs/?lang=nl">Nederlands</a></li> <li><a href="/oldsites/spritegen/htdocs/?lang=en" class="selected">English</a></li> <li><a href="/oldsites/spritegen/htdocs/?lang=fr">français</a></li> <li><a href="/oldsites/spritegen/htdocs/?lang=de">Deutsch</a></li> <li><a href="/oldsites/spritegen/htdocs/?lang=it">italiano</a></li> <li><a href="/oldsites/spritegen/htdocs/?lang=ja">日本語</a></li> <li><a href="/oldsites/spritegen/htdocs/?lang=ko">한국어/조선말</a></li> <li><a href="/oldsites/spritegen/htdocs/?lang=pl">polski</a></li> <li><a href="/oldsites/spritegen/htdocs/?lang=pt">português</a></li> <li><a href="/oldsites/spritegen/htdocs/?lang=ro">Română</a></li> <li><a href="/oldsites/spritegen/htdocs/?lang=ru">Pyccĸий</a></li> <li><a href="/oldsites/spritegen/htdocs/?lang=es">Español</a></li> <li><a href="/oldsites/spritegen/htdocs/?lang=se">svenska</a></li> <li><a href="/oldsites/spritegen/htdocs/?lang=tr">Türkçe</a></li> <li><a href="/oldsites/spritegen/htdocs/?lang=tw">臺灣話</a></li> </ul> </div> <div id="favmain"> <form action="/oldsites/spritegen/htdocs/" method="post" enctype="multipart/form-data" id="options"> <fieldset> <legend>Source Files</legend> <input type="hidden" name="MAX_FILE_SIZE" value="1048576"> <label for="path">Upload Images (ZIP):</label> <div id="file-container"> <input type="file" name="path" id="path"><span>Max Upload Size: 1MB</span> </div> </fieldset> <fieldset class="duplicates"> <legend>Image Duplicates</legend> <label for="duplicates1"><input type="radio" name="ignore-duplicates" value="ignore" id="duplicates1" checked="checked">Ignore duplicate images</label> <label for="duplicates2"><input type="radio" name="ignore-duplicates" value="merge" id="duplicates2">Remove duplicate images but merge CSS rules</label> </fieldset> <fieldset id="resize"> <legend>Resize Source Images</legend> <div> <label for="width-resize">Width: </label> <input type="text" name="width-resize" value="100" id="width-resize" size="3" maxlength="3" > <span>%</span> </div> <div> <label for="height-resize">Height: </label> <input type="text" name="height-resize" value="100" id="height-resize" size="3" maxlength="3" > <span>%</span> </div> </fieldset> <fieldset> <legend>Sprite Output Options</legend> <div> <label for="build-direction">Build Direction:</label> <select name="build-direction" id="build-direction"> <option value="horizontal"> Horizontal</option> <option value="vertical" selected="selected"> Vertical</option> </select> </div> <div> <label for="horizontal-offset">Horizontal Offset: </label> <input type="text" name="horizontal-offset" value="50" id="horizontal-offset" size="5" maxlength="5" > <span>px</span> </div> <div> <label for="vertical-offset">Vertical Offset: </label> <input type="text" name="vertical-offset" value="50" id="vertical-offset" size="5" maxlength="5" > <span>px</span> </div> <label for="wrap-columns">Wrap columns to fix Opera bug:</label><input type="checkbox" name="wrap-columns" id="wrap-columns" checked="checked"> <div> <label for="background" class="optional">Background / Transparency Colour # (optional): </label> <input type="text" name="background" value="" id="background" size="7" maxlength="7" > <span class="help">If left blank white will be used for non-transparent images, black for transparent</span> </div> <label for="use-transparency">Use Background Colour for Transparency:</label><input type="checkbox" name="use-transparency" id="use-transparency" checked="checked"> <div> <label for="image-output">Output Format:</label> <select name="image-output" id="image-output"> <option value="PNG"> PNG</option> <option value="GIF"> GIF</option> <option value="JPG"> JPG</option> </select> </div> <div> <label for="image-num-colours">Number of Colours:</label> <select name="image-num-colours" id="image-num-colours"> <option value="2"> 2</option> <option value="4"> 4</option> <option value="8"> 8</option> <option value="16"> 16</option> <option value="32"> 32</option> <option value="64"> 64</option> <option value="128"> 128</option> <option value="256"> 256</option> <option value="512"> 512</option> <option value="1024"> 1024</option> <option value="2048"> 2048</option> <option value="4096"> 4096</option> <option value="8192"> 8192</option> <option value="16384"> 16384</option> <option value="32768"> 32768</option> <option value="65536"> 65536</option> <option value="true-colour" selected="selected"> True Colour</option> </select> </div> <div> <label for="image-quality">Image Quality: </label> <input type="text" name="image-quality" value="75" id="image-quality" size="3" maxlength="3" > <span>%</span> </div> <label for="use-optipng">Compress Image with OptiPNG:</label><input type="checkbox" name="use-optipng" id="use-optipng"> </fieldset> <fieldset> <legend>CSS Output Options</legend> <div> <label for="selector-prefix" class="optional">CSS Prefix (optional): </label> <input type="text" name="selector-prefix" value="" id="selector-prefix" > <span class="help">CSS to insert before the class name</span> </div> <div> <label for="file-regex" class="optional">Filename Pattern Match (optional): </label> <input type="text" name="file-regex" value="" id="file-regex" > <span class="help">e.g. icon-([0-9]+).png - matches the numeric part of each filename and uses this for the class names in the generated CSS</span> </div> <div> <label for="class-prefix" class="optional">Class Prefix (optional): </label> <input type="text" name="class-prefix" value="sprite-" id="class-prefix" > <span class="help">cannot start with a number</span> </div> <div> <label for="selector-suffix" class="optional">CSS Suffix (optional): </label> <input type="text" name="selector-suffix" value="" id="selector-suffix" > <span class="help">CSS to insert after the class name</span> </div> <label class="optional" for="add-width-height-to-css">Display width and height (optional):</label><input type="checkbox" name="add-width-height-to-css" id="add-width-height-to-css" checked="checked"> <span class="help">Provides the height and width of each sprite in the CSS.</span> </fieldset> <p><input class="submit" type="submit" name="sub" value="Create Sprite Image & CSS"></p> </form> </div> </div> </div> </div> </div> <script type="text/javascript" src="/oldsites/spritegen/htdocs/js/dom.js"></script> <script type="text/javascript" src="/oldsites/spritegen/htdocs/js/event.js"></script> <script type="text/javascript" src="/oldsites/spritegen/htdocs/js/tool.js"></script> <script type="text/javascript" src="/oldsites/spritegen/htdocs/js/yahoo.js"></script>  </div> <div class="col-md-3 col-xl-2" style="margin-top:30px;"> <h4 class="text-muted">Related Tools: </h4><p><i class="fa fa-chevron-right"></i> <strong><a href="https://www.hexcolortool.com">HTML Color Codes</a></strong></p><p><i class="fa fa-chevron-right"></i> <strong><a href="https://www.cssfontstack.com">CSS Fonts</a></strong></p><hr/> <script> $( document ).ready(function() { if (1==0 && window.canRunAds === true) { $('#blocker').hide(); } else { $('#blocker').show(); } }); </script> </div> </div> <div class="clearfix"></div> <footer class="bs-footer" role="contentinfo"> <div class="container"> <div class="bs-social"> <ul class="bs-social-buttons"> <li class="follow-btn"> <a id="js-twitter-follow" href="https://twitter.com/danstools00" class="twitter-follow-button" data-show-count="false">Follow @danstools00</a> </li> </ul> </div> <p>© 2014-2019 <a href="https://www.danstools.com" target="_blank">Dan's Tools</a> | <a href="/about.php">About</a> | <a href="/privacy.php" target="_blank">Privacy</a> | <a href="https://www.cleancss.com/tesla/">Tesla Referral Code</a></p> </div> </footer> <div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> <div class="modal-dialog" style="margin-top:200px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h1 class="modal-title" id="lineModalLabel">Login</h1> </div> <div class="modal-body"> <p> If you don't already have an account, <a data-toggle="modal" href="#JoinModal">Register Now</a> </p> <form method="POST" action="/login.php"> <input class="form-control" type="text" name="username" placeholder="Email Address"><br /> <input class="form-control"type="password" name="password" placeholder="Password"><br /> <input class="form-control btn btn-primary" type="submit" value="Login"> </form> </div> <div class="modal-footer"> <div class="btn-group btn-group-justified" role="group" aria-label="group button"> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="JoinModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> <div class="modal-dialog" style="margin-top:200px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h1 class="modal-title" id="lineModalLabel">Join</h1> </div> <div class="modal-body"> <p> Join to access discussion forums and premium features of the site. </p> <form method="POST" action="/join.php"> <input class="form-control" type="text" name="email" placeholder="Email Address"><br /> <input class="form-control"type="password" name="password" placeholder="Password"><br /> <input class="form-control btn btn-primary" type="submit" value="Join Now"> </form> <br /> </div> <div class="modal-footer"> <div class="btn-group btn-group-justified" role="group" aria-label="group button"> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="ShareModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> <div class="modal-dialog" style="margin-top:200px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h1 class="modal-title" id="lineModalLabel">Please Share!</h1> </div> <div class="modal-body">  <strong><span id="sharetxt">Thank you for using my tool. If you could share this tool with your friends, that would be a huge help:</span></strong> <br /> <a href="https://twitter.com/share" class="twitter-share-button" data-via="twitterapi" data-lang="en" data-count="horizontal" data-url="http://spritegen.website-performance.org">Tweet</a> <br /> <a href="//www.reddit.com/submit" onclick="window.location = '//www.reddit.com/submit?url=' + encodeURIComponent(window.location); return false"> <img src="//www.redditstatic.com/spreddit7.gif" alt="submit to reddit" border="0" /> </a> <p /> <br/> <strong>Or follow us to learn about our latest tools:</strong> <br /> <a href="https://twitter.com/danstools00" class="twitter-follow-button" data-show-count="false">Follow @danstools00</a> </div> <div class="modal-footer"> <div class="btn-group btn-group-justified" role="group" aria-label="group button"> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button> </div> </div> </div> </div> </div> </div> <script async src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script async src="/js/ads.js"></script> </body> </html>

CINXE.COM

CSS Sprite Generator