Skip to content

Instantly share code, notes, and snippets.

@owlsky
owlsky / Converting Photoshop Letter Spacing to CSS.scss
Last active December 17, 2017 18:36
Converting Photoshop Letter Spacing to CSS
// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----
// Converting Photoshop Letter Spacing to CSS
@function getLetterSpacing($num) {
@return ($num / 1000) + em;
}
@owlsky
owlsky / gist:0420c6220e62d2ba51a3
Created September 13, 2014 04:31
Style Placeholder Text
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
@owlsky
owlsky / A New CSS Image Replacement Technique.css
Last active October 6, 2016 13:48
CSS: A New CSS Image Replacement Technique
.logo a {
display: block;
width: 52px;
height: 52px;
background: url(../img/logo.jpg) 0 0 no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
@owlsky
owlsky / Cross Browser Box-Shadow.css
Created October 12, 2013 03:22
Cross Browser Box-Shadow
.box-shadow {
-moz-box-shadow: 2px 2px 3px #969696; /* for Firefox 3.5+ */
-webkit-box-shadow: 2px 2px 3px #969696; /* for Safari and Chrome */
box-shadow: 2px 2px 3px #969696; /* W3C */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
}
@owlsky
owlsky / perfectly-justified-css-grid-technique-using-inline-block.css
Created October 12, 2013 03:15
perfectly-justified-css-grid-technique-using-inline-block
.wrapper{
width: 550px;
text-align: justify;
background: firebrick;
font-size: 0;
font-size: 12px\9; /* IE6-9 only hack */
}
.wrapper div{
background: white;
@owlsky
owlsky / Simple Scroll Up
Created October 7, 2013 06:14
Simple Scroll Up jQuery
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
@owlsky
owlsky / Image Polaroid Effect.css
Created October 7, 2013 02:58
Image Polaroid Effect
img.polaroid {
background:#000; /*Change this to a background image or remove*/
border:solid #fff;
border-width:6px 6px 20px 6px;
box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */
-webkit-box-shadow:1px 1px 5px #333;
-moz-box-shadow:1px 1px 5px #333;
height:200px; /*Set to height of your image or desired div*/
width:200px; /*Set to width of your image or desired div*/
}
@owlsky
owlsky / Glowing Blue Input Highlights.css
Created September 24, 2013 08:28
Glowing Blue Input Highlights
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;
}
@owlsky
owlsky / Full Page Background
Last active December 23, 2015 16:59
Full Page Background
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.jpg', sizingMethod='scale')";
}
@owlsky
owlsky / Resetting Default Table Styles
Created September 20, 2013 01:14
Resetting Default Table Styles
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 0.25rem;
text-align: left;
border: 1px solid #ccc;
}