Carlos Sánchez carlos-sanchez
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Muchos desarrolladores se olvidan de la etiqueta HTML cuando tratan de dar estilo a su aplicación, pero dar estilo a la etiqueta HTML puede ser una de las cosas más importantes. | |
| Este fragmento de código CSS se asegura de que la barra de desplazamiento siempre aparezca (por lo que no hay ningún "salto" cuando cambia el tamaño de página) e impide que los navegadores móviles ajusten el tamaño de la fuente de la página. | |
| */ | |
| html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } | |
| /* | |
| Cambiar el color de resaltado o selección |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* enlaces externos | |
| ^= indica que queremos dar estilo a aquellos enlaces que comiencen por http:// | |
| */ | |
| a[href^="http://"]{ | |
| padding-right: 20px; | |
| background: url(external.gif) no-repeat center right; | |
| } | |
| /* emails | |
| ^= indica que queremos dar estilo a aquellos enlaces que comiencen con mailto: | |
| */ |
carlos-sanchez
/ replace-h1-for-logo.css
Created
November 14, 2013 04:08
Replace h1 for logo for SEO reasons.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| h1 { | |
| text-indent:-9999px; | |
| margin:0 auto; | |
| width:400px; | |
| height:100px; | |
| background:transparent url("images/logo.jpg") no-repeat scroll; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* CSS text gradients */ | |
| h2[data-text] { | |
| position: relative; | |
| } | |
| h2[data-text]::after { | |
| content: attr(data-text); | |
| z-index: 10; | |
| color: #e3e3e3; | |
| position: absolute; | |
| top: 0; |
carlos-sanchez
/ normalize.css
Created
November 14, 2013 04:01
Normalize.css 3.0.1 https://github.com/necolas/normalize.css/blob/master/normalize.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*! normalize.css v3.0.1 | MIT License | git.io/normalize */ | |
| /** | |
| * 1. Set default font family to sans-serif. | |
| * 2. Prevent iOS text size adjust after orientation change, without disabling | |
| * user zoom. | |
| */ | |
| html { | |
| font-family: sans-serif; /* 1 */ |
carlos-sanchez
/ print.css
Created
November 14, 2013 03:59
Print.
Okay, there are many things to note here. Let’s start with the color stuff. You have probably understood the point of turning everything into black and white: saving money. Do you know how much a color ink cartridge costs? :D The first four lines take care of 75% of the job by turning the font color to black and removing backgrounds and s…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media print { | |
| * { | |
| background: none !important; | |
| color: black !important; | |
| box-shadow: none !important; | |
| text-shadow: none !important; | |
| /* Images, vectors and such */ | |
| filter: Gray(); /* IE4-8: depreciated */ | |
| filter: url('desaturate.svg#grayscale'); /* SVG version for IE10, Firefox, Safari 5 and Opera */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Smartphones (portrait and landscape) ----------- */ | |
| @media only screen | |
| and (min-device-width : 320px) | |
| and (max-device-width : 480px) { | |
| /* Styles */ | |
| } | |
| /* Smartphones (landscape) ----------- */ | |
| @media only screen | |
| and (min-width : 321px) { |
carlos-sanchez
/ form-selectors.css
Last active
March 8, 2022 00:39
Form Selectors. More info: http://tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| input[type="text"] { | |
| /* */ | |
| } | |
| input[type="submit"]{ | |
| /* */ | |
| } | |
| input[type=button]{ | |
| /* */ | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* SELECTORES DE ATRIBUTOS */ | |
| /*info ampliada en http://www.netmagazine.com/tutorials/discover-power-css3-selectors */ | |
| /* | |
| elemento[atributo^="valor"]{...} | |
| selecciona todos los elementos que disponen de ese atributo y cuyo valor comienza exactamente por la cadena de texto indicada. | |
| Ejemplo: Selecciona todos los enlaces que apuntan a una dirección de correo electrónico | |
| */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| A CSS preprocessor allows you to use variables, mixins, functions, | |
| operations, nesting, importing and much more. For that concern, | |
| I personally use LESS but there are also Sass or Stylus which might fit your needs. | |
| Anyway, I’m only going to talk about mixins here. Mixins are like variables but for whole classes. | |
| The best point of mixins is that they can behave like functions and have parameters. | |
| Let’s start with something very simple: a mixin to handle all vendor prefixes whenever |