Centrando texto verticalmente III: flexbox

Centrando texto verticalmente III: flexbox Leer

No he escrito nada sobre la propiedad flexbox debido a su poco alcance en los browsers pero creo que ya es el momento. Se puede utilizar display: flex desde IE10+ (con prefijo -ms-) y Firefox / Chrome / Opera lo soportan bastante bien.

Centrando texto verticalmente II

Centrando texto verticalmente II Leer

Recuerdas las tablas? Sabes que aún son útiles? No como etiqueta HTML, sino la propiedad CSS display: table. Aquí presento una técnica sencilla y rápida que permite centrar verticalmente cualquier bloque de texto dado cierto elemento HTML con alto fijo.

Familias tipográficas web-safe

Familias tipográficas web-safe Leer

No hay cosa peor de que transfieras un diseño para web y que se vea mal en el computador de tu cliente que justo tiene una tipografía mala o una versión de sistema operativo que no te imaginabas aún existía. Para eso hay 2 muy buenas soluciones: Utilizar una fuente web-safe, es decir, que funciona [...]

Aleatoriedad en LESS

Aleatoriedad en LESS Leer

Una de las muchas ventajas de los CSS pre-processors es permitir utilizar JavaScript nativamente -bueno, el pre-processor mismo está escrito en JavaScript- y con ello extender su uso antes de procesar el archivo y transformarlo en nuestro querido .css. En este artículo mostraré varios mixins que permiten generar algún grado de aleatoriedad (random) dado cierto [...]

Estilos para IE9, IE10 e IE11

Estilos para IE9, IE10 e IE11 Leer

Desde IE10 quer ya no existen los comentarios condicionales, ese útil invento de Microsoft para que nosotros desarrolladores front-end pudiéramos lidiar con los estilos específicos para IE5, 6, 7, 8…. y 9. Los quitaron porque creían que con IE10 todo estaba solucionado y volvían a abrazar los estándares, lo que fue en parte cierto. Pero [...]

Triángulos con CSS: LESS Mixin

Triángulos con CSS: LESS Mixin Leer

Crear formas geométricas con puro CSS y 1 elemento HTML ha sido una tarea creada hace años ya y que tiene recopilaciones varias de métodos y usos. Personalmente para crear triángulos con CSS uso un generador genial que espero nunca lo bajen: CSS triangle generator. A raíz de su constante uso, creé un mixin para [...]

3D CSS3 transform con bordes dentados en Firefox

3D CSS3 transform con bordes dentados en Firefox Leer

Sucede que creamos lindos estilos para elemento con CSS3 y queremos aplicar la propiedad transform para darle profundidad 3D. Observamos que ocurre lo siguiente en Firefox:

Automatización de tareas para proyectos en Front-End

Automatización de tareas para proyectos en Front-End Leer

GruntJS es la herramienta de automatización de tareas escrita en JavaScript que más crece actualmente. Es robusta y está activamente siendo mejorada, y sólo requiere NodeJS para funcionar. Su fortaleza está en crear rutinas automatizadas para procesos repetitivos, como por ejemplo: compilar un archivo LESS/SCSS/HAML/Handlebars/Liquid, minificar archivos .css y .js, concatenar librerías .js, comprimir imágenes, [...]

Animaciones CSS3 al fin del ciclo

Animaciones CSS3 al fin del ciclo Leer

Existe una propiedad CSS3 muy tímida y poco manejada pero que cumple un papel esencial cuando estamos trabajando con animaciones CSS3. Supongamos que estamos creando una animación simple, que no necesitamos sea cíclica, por lo tanto, la ejecutaremos sólo 1 vez. La escribimos y la aplicamos, como a continuación:

Checkboxes con estilo

Los formularios son una de las razones de porque el mundo corporativo entró a Internet: captura de datos de usuarios. Es la forma más fácil y rápida de obtener ese ansiado contacto, con el cual puedo convertir a ese usuario en mi cliente. Para los fabricantes de browsers, la visualización de los campos de formularios [...]

Auto-prefix en Sass

Utilizar pre-procesadores CSS se ha vuelto una necesidad en la actualidad, ya que sus múltiples ventajas hacen que no exista excusa para seguir escribiendo CSS puro. Lo mejor es que no intervenimos el lenguaje, sólo lo escribimos más eficiente. Ahora les presento un útil mixin para Sass que ayuda a lidiar con los prefijos propietarios [...]

jQuery geoRegionalización

jQuery geoRegionalización Leer

Este sencillo plugin permite generar dependencia entre 2 <select> y entre ellos mostrar la relación region / comuna que conforma la distribución geopolítica de la República de Chile.

Pseudo contenido con CSS

La propiedad CSS content: “”; viene siendo utilizada para entregar más estilos donde no necesitas extra marcado con HTML. Su soporte es amplio (IE8+ y demases browsers modernos). Su uso está atado a los pseudo-elementos :after y :before y permite generar contenido (de tipo texto) en dicho pseudo-elemento. Un ejemplo básico:

CSS3: calc()

CSS3: calc() Leer

Calc() es una propiedad CSS3 que permite realizar operaciones matemáticas simples sustituyendo un valor fijo por una expresión dinámica de medida, por ejemplo, sumando o dividiendo anchos de un contenedor.

Dando estilos a placeholder

Con HTML5 llegaron muchas nuevas etiquetas y atributos, y se nota que en la W3C se esforzaron en la captura de datos. Los formularios tuvieron muchas mejoras y en este artículo mostraré como manipular un útil atributo: placeholder. Placeholder permite integrar un texto predefinido dentro de un campo de texto (<input>). En general este texto [...]

HTML5: el atributo download

HTML 5 trae el nuevo atributo download para enlaces. Cuando utilizado dentro de un <a>, este atributo puede ir definiéndose a sí mismo (lo que causará que se descargue solamente el archivo) ó puede contener el nombre del archivo a ser descargado, sin la ruta asociada la que va como de costumbre dentro del atributo [...]

overflow: scroll en iOS

En desktop, para tener un elemento escroleable basta con que declares un alto fijo y defines overflow: auto | overflow: scroll y si el contenido interior es mayor que el alto aparecerá la barra de scroll automáticamente. En browsers móviles y tablets ocurre lo mismo pero la sensación es muy inferior ya que el touch/drag [...]

Web y especialización

Web y especialización Leer

Oye Jorge, tengo ganas tomar un diplomado. ¿Sabes de alguno que me recomiendes? Hey, voy a hacer un postgrado en XXX de YYY en la Universidad ZZZ, ¿Qué te parece?

Íconos y pantallas iPhone/iPad

Íconos y pantallas iPhone/iPad Leer

Para un proyecto espontáneo que se me ocurrió hacer, utilicé los íconos y pantallas que recomienda Apple para todos los sitios que requieran ser visualizados en sus teléfonos y tabletas. En mis tiempos mozos, cuando comencé a jugar con web móvil sólo existía 1 tamaño y 1 resolución. Años han pasado y a continuación está [...]

IE v/s console

¿Cansado de soportar IE? Te entiendo, pero aún hay clientes que piden que sus proyectos se vean en estos browsers antiguos. Frustraciones aparte, cuando escribes Javascript y usas console.log() para debuggear tu código en la consola del browser, es usual que éstas funcionalidades se quiebren en IE8-.

Giveaway Books

Giveaway Books Leer

Sorteo realizado, los libros fueron enviados por correo. Espero sean aprovechados. Gracias por interesarse, apenas tenga más leídos los vuelvo a distribuir. Pantone Web ColorEdgar Méndez, México The Psychology Of…Pato Mas, Chile No Me Hagas PensarLeticia Chamorro, Paraguay [ES] Tengo unos libros que acumulan polvo y seguro será más útil a otras personas que a [...]