Skip to content

Instantly share code, notes, and snippets.

View yorkfx's full-sized avatar

Miguel yorkfx

8 followers · 23 following
  • Mexico
View GitHub Profile
@yorkfx
yorkfx / gist:5499633
Created May 2, 2013 01:34
Regla para Retina Display
@media (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi),
(min-resolution: 1.5dppx) {
/* Retina rules! */
}
@yorkfx
yorkfx / gist:5499836
Created May 2, 2013 02:49
Detectar Orientación del Dispositivo
document.body.onorientationchange = (function(){
document.body.className =
orientation % 180 == 0 ? 'vertical' : 'horizontal';
return arguments.callee;
})();
@yorkfx
yorkfx / gist:5499896
Created May 2, 2013 03:04
Hacks IE6, IE7, IE8
* html div.blah { /* something for IE6 */ }
*+html div.blah { /* something for IE7 */ }
div.blah { color: #0FC\0/; /* IE8 */ }
<!--[if lte IE 8]>
<![endif]-->
@yorkfx
yorkfx / gist:5499926
Created May 2, 2013 03:11
Adaptar imagenes segun resolución /* no testeado */
@media (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi),
(min-resolution: 1.5dppx) {
img{
image-resolution: 1.5dppx;
@yorkfx
yorkfx / gist:5534439
Created May 7, 2013 17:28
Selector Hacks
/***** Selector Hacks ******/
/* IE6 e inferiores */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
@yorkfx
yorkfx / gist:5608646
Created May 19, 2013 19:16
Renderizar fuentes web fonts en Google Chrome
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@yorkfx
yorkfx / Estilos Placeholder
Created July 7, 2013 00:22
Estilos Placeholder
::-webkit-input-plaecholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder{
color:red;
}
@yorkfx
yorkfx / Pure CSS Background Noise
Created July 10, 2013 01:27
Pure CSS Background Noise
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1
@yorkfx
yorkfx / Fullscreen Backgrounds With CSS3
Created July 10, 2013 01:31
Fullscreen Backgrounds With CSS3
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;
}
@yorkfx
yorkfx / Vertically Centered Content
Created July 10, 2013 01:31
Vertically Centered Content
.container {
min-height: 6.5em;
display: table-cell;
vertical-align: middle;
}