Tutorial Gradient Underlines

by in , 0 

a {
   position: relative;
   padding-bottom: 6px;
   }

a:hover::after {
   content: "";
   position: absolute;
   bottom: 2px;
   left: 0;
   height: 1px;
   width: 100%;
   background: #444;
   background: -webkit-gradient(linear, left top, right top, color-stop(0%,transparent), color-stop(50%,#444), color-stop(100%,transparent));
   background: -webkit-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
   background: -moz-linear-gradient(left, transparent 0%, #444 50%, #transparent 100%);
   background: -ms-linear-gradient(left, transparent 0%,#444 50%,#transparent 100%);
   background: -o-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
   background: linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
   }

Reference URL

Tutorial Gradient Text

by in , 0

This is WebKit only, but is the cleanest way to accomplish it as the text remains editable and selectable web text.

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Example

Tutorial Glowing Blue Input Highlights

by in , 0

Like mid-2012 Twitter.

input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
 
input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}

See the Pen Glowing Blue Inputs by Chris Coyier (@chriscoyier) on CodePen

Reference URL

Tutorial Give Clickable Elements a Pointer Cursor

by in , 0 

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
       cursor: pointer;
}

Some elements that are clickable mysteriously don't trigger a pointer cursor in browsers. This fixes that, and provides a default class "pointer" for applying it to other clickable things as needed.

Tutorial Forcing Grayscale Printing

by in , 0

At the time of this writing, this will only work in Chrome 18+, but it's standardized so support will eventually come to everywhere.

@media print {
  body {
    /* IE4-8 and 9 (deprecated). */
    filter: Gray();
    /* SVG version for IE10, Chrome 17, FF3.5, 
       Safari 5.2 and Opera 11.6 */
    filter: url('#grayscale'); 
    /* CSS3 filter, at the moment Webkit only. Prefix it for
       future implementations */
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%); /* future-proof */
  }
}

Reference URL

Tutorial Force Vertical Scrollbar

by in , 0 

html {
       overflow-y: scroll;
}

This is invalid CSS, but it works in everything except Opera. The reason for this is to prevent "centering jumps" when navigating back and forth between pages with enough content to have a vertical scroll bar and pages that do not.

Tutorial Force File Upload Input Button To Right Side In WebKit

by in , 0

Firefox and IE have the "choose file" button to the right of the filepath, while Webkit puts it on the left. This makes WebKit put it on the right as well.

<input type="file">
input[type="file"]{
   -webkit-appearance: none;
   text-align: left;
   -webkit-rtl-ordering:  left;
}
input[type="file"]::-webkit-file-upload-button{
   -webkit-appearance: none;
   float: right;
   margin: 0 0 0 10px;
   border: 1px solid #aaaaaa;
   border-radius: 4px;
   background-image: -webkit-gradient(linear, left bottom, left top, from(#d2d0d0), to(#f0f0f0));
   background-image: -moz-linear-gradient(90deg, #d2d0d0 0%, #f0f0f0 100%);
}

Reference URL