Skip to content

Instantly share code, notes, and snippets.

View pixelchar's full-sized avatar

Charlie Cathcart pixelchar

1 follower · 3 following
View GitHub Profile
@pixelchar
pixelchar / invalid-html5-input-reset.css
Last active December 22, 2015 22:39
Reset Default Styling of HTML5 Invalid Form Inputs
:invalid {
box-shadow: none; /* FF */
outline: 0; /* IE 10 */
}
@pixelchar
pixelchar / disable-text-selection-for-buttons.css
Last active December 22, 2015 22:39
Disable Text Selection on Buttons
button {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@pixelchar
pixelchar / pdf-labeling.css
Last active December 22, 2015 22:39
Label PDF links automatically with CSS
a[href$=".pdf"]:after {
content: " (PDF)";
}
@pixelchar
pixelchar / zebra-striped-table.css
Last active December 22, 2015 23:59
Zebra striped tables in CSS
table tr:nth-child(even) {
background: rgba(0,0,0,0.1);
}
@pixelchar
pixelchar / img-replacement.css
Last active December 22, 2015 23:59
Image replacement
.ir {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
@pixelchar
pixelchar / visually-hidden.css
Last active December 22, 2015 23:59
Visually hide content in a way that is safe for screen readers
.visually-hidden {
position: absolute;
width: 1px; /* Setting this to 0 makes it invisible for VoiceOver */
height: 1px; /* Setting this to 0 makes it invisible for VoiceOver */
padding: 0;
margin: -1px;
border: 0;
clip: rect(0 0 0 0);
overflow: hidden;
}
@pixelchar
pixelchar / print-styles.css
Last active December 22, 2015 23:59
Print Styles
@media print {
* {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
@pixelchar
pixelchar / transform-mixin.scss
Last active December 22, 2015 23:59
Sass transform mixin to avoid writing vendor prefixes
@mixin transform(@string) {
-webkit-transform: @string;
-moz-transform: @string;
-ms-transform: @string;
-o-transform: @string;
transform: @string;
}
@pixelchar
pixelchar / rotate-mixin.scss
Last active December 22, 2015 23:59
Sass rotate mixin to avoid writing vendor prefixes
@mixin rotate(@deg) {
-webkit-transform: rotate(@deg);
-moz-transform: rotate(@deg);
-ms-transform: rotate(@deg);
-o-transform: rotate(@deg);
transform: rotate(@deg);
}
@pixelchar
pixelchar / scale-mixin.scss
Last active December 22, 2015 23:59
Sass scale mixin to avoid writing vendor prefixes
@mixin scale(@factor) {
-webkit-transform: scale(@factor);
-moz-transform: scale(@factor);
-ms-transform: scale(@factor);
-o-transform: scale(@factor);
transform: scale(@factor);
}