3D CSS3 transform con bordes dentados en Firefox
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
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, recargar el browser cada vez que hayan nuevos cambios entre muchos otros que se te puedan ocurrir.
Animaciones CSS3 al fin del ciclo
Existe una propiedad CSS3 muy tímida y poco manejada pero que cumple un papel esencial cuando estamos trabajando con [animaciones CSS3][1]. 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 no ha sido normalizada y cada uno lo hace a su criterio, incluso con diferencias entre el mismo browser pero en diferentes plataformas.
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 de algunas propiedades CSS3. Mientras de a poco los fabricantes de browsers los van eliminando, aún tenemos que utilizarlos por compatibilidad retroactiva.
jQuery geoRegionalización
Este sencillo plugin permite generar dependencia entre 2 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()
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 (). En general este texto ya tiene un estilo según el browser que utilizamos y se acomoda a utilizar este estilo preexistente:
HTML5: el atributo download
HTML 5 trae el nuevo atributo download para enlaces. Cuando utilizado dentro de un , 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 href="". Con esto definido el archivo linkeado será forzado a ser descargado.
<a href="archivos/pdf/informe.pdf" download>Descargar informe.