Skip to content

Instantly share code, notes, and snippets.

Avatar

James Doyle james2doyle

View GitHub Profile
@james2doyle
james2doyle / .hide-text
Created Apr 10, 2012
New version of image replacement
View .hide-text
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}​
@james2doyle
james2doyle / inline img loader
Created Apr 10, 2012
loading gif before inline images load
View inline img loader
img {
background: url(loader.gif) no−repeat 50% 50%;
}
View font shorthand.css
/* shorthand notation for font properties */
font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
@james2doyle
james2doyle / css buttons
Created Apr 10, 2012
quick buttons for prototyping
View css buttons
a.button {
cursor: pointer;
color: white;
font-size: 0.9em;
text-shadow: 1px 1px 0px rgba(0,0,0,0.4);
padding: 6px 20px;
border-radius: 5px;
box-shadow: inset 0px 1px rgba(255,255,255,0.3),
inset 0px -5px 20px rgba(0,0,0,0.4);
}
@james2doyle
james2doyle / Short Animation
Created Apr 15, 2012
Shorthand CSS3 animation
View Short Animation
.animate {
/* name duration delay iteration-count direction fill-mode timing-function */
animation: test 1s 2s 3 alternate backwards ease;
}
@james2doyle
james2doyle / Blink Animation
Created Apr 15, 2012
blink css3 animation
View Blink Animation
@james2doyle
james2doyle / Media Queries Boilerplate
Created Apr 15, 2012
Media Queries Boilerplate for smartphones(landscape/portrait), ipad(landscape/portrait), desktop/laptops and iphone4
View Media Queries Boilerplate
/*Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
@james2doyle
james2doyle / Touch Pseudo Class
Created Apr 18, 2012
add touch style pseudo class to touch-ed elements
View Touch Pseudo Class
//remove tap-highlight-color from all in css
// a[data-active] { /* here are your styles */ }
element.addEventListener("touchstart", function (event) {
if (event.target.setAttribute) {
event.target.setAttribute("data-active", "");
}
}, true);
element.addEventListener("touchend", function (event) {
if (event.target.removeAttribute) {
@james2doyle
james2doyle / conditional content
Created Apr 30, 2012
Easy conditional loading of assets with css and javascript
View conditional content
/* THE CSS */
@media all and (min-width: 45em) {
body:after {
content: 'widescreen';
display: none;
}
}
// THE JS
var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
@james2doyle
james2doyle / small touch detectreplace
Created Apr 30, 2012
Touch detection and replacement of event listeners
View small touch detectreplace
var isTouch = function() {
return !!('ontouchstart' in window) ? true : false;
}
if(isTouch()) {
var fireEvent = ['touchstart','touchend'];
} else {
var fireEvent = ['mousedown','mouseup'];
}
elem.addEventListener(fireEvent[0],function(){