Tutorial Not-Terrible Image Resizing in IE

by in , 0 

img {
       -ms-interpolation-mode: bicubic;
}

If you scale down an image with width and/or height attributes, it's going to look terrible in IE unless you use this.

Tutorial Non-Form Fieldset Look

by in , 0 

<section class="fieldset">
 <h1>This is not a fieldset</h1>
 <p>Booyah!</p>
</section>
.fieldset {
  position: relative;
  border: 1px solid #ddd;
  padding: 10px;
}

.fieldset h1 {
  position: absolute;
  top: 0;
  font-size: 18px;
  line-height: 1;
  margin: -9px 0 0; /* half of font-size */
  background: #fff;
  padding: 0 3px;
}

Reference URL

Tutorial Noise Data URI Image

by in , 0 

background-image: url(data:image/png;base64,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);

Reference URL

CSS3 Treeview Without any JavaScript | Nested, Expandable Folders

by in , 0

This is the css, html code for displaying Treeview Without any JavaScript
Demo: Course folder at http://www.liketly.com/course/features/ 

.css-treeview ul,
.css-treeview li
{
 padding: 0;
 margin: 0;
 list-style: none;
}

.css-treeview input
{
 position: absolute;
 opacity: 0;
}

.css-treeview
{
 font: normal 11px "Segoe UI", Arial, Sans-serif;
 -moz-user-select: none;
 -webkit-user-select: none;
 user-select: none;
}

.css-treeview a
{
 color: #00f;
 text-decoration: none;
}

.css-treeview a:hover
{
 text-decoration: underline;
}

.css-treeview input + label + ul
{
 margin: 0 0 0 22px;
}

.css-treeview input + label + ul
{
 display: none;
}

.css-treeview label,
.css-treeview label::before
{
 cursor: pointer;
}

.css-treeview input:disabled + label
{
 cursor: default;
 opacity: .6;
}

.css-treeview input:checked:not(:disabled) + label + ul
{
 display: block;
}

.css-treeview label,
.css-treeview label::before
{
 background: url("icons.png") no-repeat;
}

.css-treeview label,
.css-treeview a,
.css-treeview label::before
{
 display: inline-block;
 height: 16px;
 line-height: 16px;,
 vertical-align: middle;
}

.css-treeview label
{
 background-position: 18px 0;
}

.css-treeview label::before
{
 content: "";
 width: 16px;
 margin: 0 22px 0 0;
 vertical-align: middle;
 background-position: 0 -32px;
}

.css-treeview input:checked + label::before
{
 background-position: 0 -16px;
}

/* webkit adjacent element selector bugfix */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
 .css-treeview 
 {
  -webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s;
 }
 
 @-webkit-keyframes webkit-adjacent-element-selector-bugfix 
 {
  from 
  { 
   padding: 0;
  } 
  to 
  { 
   padding: 0;
  }
 }
}
<div class="css-treeview">
 <ul>
  <li><input type="checkbox" id="item-0" /><label for="item-0">This Folder is Closed By Default</label>
   <ul>
    <li><input type="checkbox" id="item-0-0" /><label for="item-0-0">Ooops! A Nested Folder</label>
     <ul>
      <li><input type="checkbox" id="item-0-0-0" /><label for="item-0-0-0">Look Ma - No Hands!</label>
       <ul>
        <li><a href="./">First Nested Item</a></li>
        <li><a href="./">Second Nested Item</a></li>
        <li><a href="./">Third Nested Item</a></li>
        <li><a href="./">Fourth Nested Item</a></li>
       </ul>
      </li>
      <li><a href="./">Item 1</a></li>
      <li><a href="./">Item 2</a></li>
      <li><a href="./">Item 3</a></li>
     </ul>
    </li>
    <li><input type="checkbox" id="item-0-1" /><label for="item-0-1">Yet Another One</label>
     <ul>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
     </ul>
    </li>
    <li><input type="checkbox" id="item-0-2" disabled="disabled" /><label for="item-0-2">Disabled Nested Items</label>
     <ul>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
     </ul>
    </li>
    <li><a href="./">item</a></li>
    <li><a href="./">item</a></li>
    <li><a href="./">item</a></li>
    <li><a href="./">item</a></li>
   </ul>
  </li>
  <li><input type="checkbox" id="item-1" checked="checked" /><label for="item-1">This One is Open by Default...</label>
   <ul>
    <li><input type="checkbox" id="item-1-0" /><label for="item-1-0">And Contains More Nested Items...</label>
     <ul>
      <li><a href="./">Look Ma - No Hands</a></li>
      <li><a href="./">Another Item</a></li>
      <li><a href="./">And Yet Another</a></li>
     </ul>
    </li>
    <li><a href="./">Lorem</a></li>
    <li><a href="./">Ipsum</a></li>
    <li><a href="./">Dolor</a></li>
    <li><a href="./">Sit Amet</a></li>
   </ul>
  </li>
  <li><input type="checkbox" id="item-2" /><label for="item-2">Can You Believe...</label>
   <ul>
    <li><input type="checkbox" id="item-2-0" /><label for="item-2-0">That This Treeview...</label>
     <ul>
      <li><input type="checkbox" id="item-2-2-0" /><label for="item-2-2-0">Does Not Use Any JavaScript...</label>
       <ul>
        <li><a href="./">But Relies Only</a></li>
        <li><a href="./">On the Power</a></li>
        <li><a href="./">Of CSS3</a></li>
       </ul>
      </li>
      <li><a href="./">Item 1</a></li>
      <li><a href="./">Item 2</a></li>
      <li><a href="./">Item 3</a></li>
     </ul>
    </li>
    <li><input type="checkbox" id="item-2-1" /><label for="item-2-1">This is a Folder With...</label>
     <ul>
      <li><a href="./">Some Nested Items...</a></li>
      <li><a href="./">Some Nested Items...</a></li>
      <li><a href="./">Some Nested Items...</a></li>
      <li><a href="./">Some Nested Items...</a></li>
      <li><a href="./">Some Nested Items...</a></li>
     </ul>
    </li>
    <li><input type="checkbox" id="item-2-2" disabled="disabled" /><label for="item-2-2">Disabled Nested Items</label>
     <ul>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div>

Tutorial Named Colors and Hex Equivalents

by in , 0

Color Name HEX Color

Tutorial Multiple Columns

by in , 0

Here is an example of a simple three-column class:

.three-col {
       -moz-column-count: 3;
       -moz-column-gap: 20px;
       -webkit-column-count: 3;
       -webkit-column-gap: 20px;
}

Of which you would apply to a block of text like so:

<p class="three-col">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

Example

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Note that the height of each column is auto-balanced, as per the spec.

Also note this demo and sample code is using moz and webkit vendor prefixes, should only work in Gecko (Firefox 1.5+, et al.) and Webkit (Safari 3+, Chrome, et al.) browsers. No native support in Internet Explorer or Opera yet that I know of.

All Related Properties

.three-col {
       -moz-column-count: 3;
       -moz-column-gap: 20px;
       -webkit-column-count: 3;
       -webkit-column-gap : 20px;
       -moz-column-rule-color:  #ccc;
       -moz-column-rule-style:  solid;
       -moz-column-rule-width:  1px;
       -webkit-column-rule-color:  #ccc;
       -webkit-column-rule-style: solid ;
       -webkit-column-rule-width:  1px;
}

You can also set the column-width (with prefixes) but it generally makes more sense to let it auto calculate that.

The rule ("rule", as in, a line) will split the gap down the middle. You can use the same values as you would a border.

Take care not to have your text blocks be so enormously tall that they are taller than a (fairly small) browser window, otherwise it's the same problem as text being wider than the browser window (scrolling back and forth to read = sucks). Also consider text-align: justify;

JavaScript Fallback

Is presented in this A List Apart article.

Tutorial Multiple Borders

by in , 0

Doing it with pseudo elements


Using pseudo elements for multiple borders has fairly deep browser support as it's CSS 2.1 (not 3).

The element needing multiple borders should have its own border and relative positioning.

#borders {
   position: relative;
   border: 5px solid #f00;
}

The secondary border is added with a pseudo element. It is set with absolute positioning and inset with top/left/bottom/right values. This will also have a border and is kept beneath the content (preserving, for example, selectability of text and clickability of links) by giving it a negative z-index value.

#borders:before {
   content: " ";
   position: absolute;
   z-index: -1;
   top: 5px;
   left: 5px;
   right: 5px;
   bottom: 5px;
   border: 5px solid #ffea00;
}

You can do a third border by using the :after pseudo class as well. Take special note that Firefox 3 (pre 3.6) screws this up by supporting :after and :before, but not allowing them to be absolutely positioned (so it looks weird).

Other Ways

Don't forget about the outline property. While it's a bit more limited than border (goes around entire element no matter what) it's an extra free border if that's what you need.

outline: 5px solid red;

If you are down with CSS3, you can use box-shadow (one of the deepest supported properties of CSS3) to get infinite (!) box shadows, by comma separating values.

box-shadow:
  0 0 0 10px hsl(0, 0%, 80%),
  0 0 0 15px hsl(0, 0%, 90%);

View Demo

AliceBlue  #F0F8FF  
AntiqueWhite  #FAEBD7