nice widget box styling

4:20 am, October 8, 2018

bit of style testing on list items, using svg and png as fallback. use this svg instead: https://kruxor.com/codepad/?p=/view/notes/l4yUh/svg-circle-arrow-green-with-mouse-over-fill-state/

Code

html

<div class="widget" id="w1"><h2><i class="far fa-file-alt"></i> Utilities</h2><ul>tools<li><a href="/view/utilities/RWgwv/code-beautifier/">Code Beautifier</a></li><li><a href="/view/utilities/GHKVQ/extract-image-links-from-youtube-videos/">Extract image links from youtube videos</a></li><li><a href="/view/utilities/kWPrB/replace-in-string/">replace in string</a></li></ul><ul>text formatting<li><a href="/view/utilities/Ll2kP/convert-text-string-to-lower-case/">Convert text string to lower case</a></li><li><a href="/view/utilities/EmrRu/excess-spaces-and-line-break-removal/">Excess spaces and Line Break Removal</a></li></ul><ul>code<li><a href="/view/utilities/zs5R7/using-contenteditable-tag-to-make-content-editable/">Using contenteditable tag to make Content Editable</a></li></ul><ul><li><a href="/view/utilities/QrvnJ/ai-mind-js/">AI Mind JS</a></li><li><a href="/view/utilities/fFyOq/css-margin-and-padding-framework-generator/">CSS Margin and Padding Framework Generator</a></li><li><a href="/view/utilities/1VUAr/showdown-markdown-converter/">showdown markdown converter</a></li></ul><ul>power<li><a href="/view/utilities/LjU8N/watts-to-kwh-power-cost-converter/">watts to kwh power cost converter</a></li></ul></div>

css

@import url('https://fonts.googleapis.com/css?family=Play:400,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
.widget {
    background: #FFF;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
    width: 100%;
    margin-bottom: 20px;
}
.widget h2 {
    background: #333333 linear-gradient(#2d2d2d,#525252);
    background: linear-gradient(90deg, #2d2d2d, #4b6194);
    padding: 5px 10px;
    font-size: 20px;
    margin-bottom: 5px;
    color: #FFF;
    text-shadow: 0px 1px 2px #000;
    border-radius: 5px 5px 0px 0px;
    font-family:"Play","Open Sans", sans-serif;
}
.widget {
	background: linear-gradient(45deg, #FFF, #EEE);
}
.widget li:before {
  content: '';
  display: inline-block;
  height: 1em;
  width: 1em;
  background-image: url(https://placehold.it/32?text=fallback);
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/9/93/Tango-bullet.svg);
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 0.5em;
}
.widget ul {
  list-style: none;
  padding-left: 1em;
}

scripts

Download & Run

Download File Run Demo Re-load Preview