Entradas

Mostrando las entradas etiquetadas como CSS

CSS puede hacer eso?

Imagen
Una lista de cosas increíbles que CSS puede hacer! EDITAR: algunas de estas propiedades no funcionarán en algunos navegadores debido a la compatibilidad.  Podemos verificar el uso del navegador  @supports y agregar estilos de  respaldo  según corresponda.  Por favor use Chrome para ver los ejemplos 🙂 1.  box-decoration-break Esta propiedad CSS especifica cómo se deben representar los fragmentos de un elemento cuando se dividen en varias líneas, columnas o páginas. 2.  attr() Podemos recuperar los valores del elemento seleccionado en CSS utilizando  attr() .  Este método podría ser realmente útil con fines de accesibilidad. 3.  backface-visibility Esta propiedad CSS establece si la cara posterior de un elemento es visible cuando se gira hacia el usuario.  Pensando en una tarjeta de inversión de la interfaz de usuario? 4.  conic-gradient Los gradientes son una cosa maravillosa  Es posible que ...

CSS3 y sus capacidades

Imagen
En este bloque hablaremos de CSS, profundizando de una manera profesional y a fondo sobre sus nuevas capacidades y extensiones que te ayudarán a escribir código y entender conceptos clave. CSS  son las hojas de estilo en cascada, es decir, es el encargado de generar los estilos de nuestro documento HTML. Si tu eres de las personas que dice que programa al momento de hacer un documento en CSS, te doy la triste y mala noticia de que esto es falso ya que tu  nunca programas en CSS o en HTML, sino tu diseñas y modelas datos. CSS3 siendo parte de la estrategia de marketing para las nuevas tecnologías HTML5, viene a ser la actualización milagrosa de CSS2 en donde nuestra vida es más bella y divertida al momento de pasar un diseño de Fireworks o Illustrator a la web real. ¿Te acuerdas cuando tenías que poner un código asqueroso lleno de imágenes para tan solo colocar un borde redondeado? O quizás recuerdes cuando una sombra en un diseño era una pesadilla y la mejor de to...

Icomoon: usar iconos como fuentes

Imagen
1. Ingresamos a  http://icomoon.io/app/  y seleccionamos los íconos que queremos:  2. Presionamos el botón Font  para generar la fuente:  : 3. Presionamos Download: 4. Al extraer los archivos, nos encontramos con estos: license.txt:  un archivo con la información de la licencia. Ite-ie7.js:  es para que funcione en navegadores menores a Internet Explorer 7. Read Me.txt:  un archivo con instrucciones. Styles.css:  archivo de estilos. La fuente está creada con un div vacío y un atributo propio llamado data-icon y genera  un valor unicode para cada ícono: En el archivo styles.css tenemos inicialmente el código que llama a cada archivo en la carpeta fonts y define otros parámetros: Para las clases toman cada ícono y le define la fuente y otros parámetros: Posteriormente, antes del contenido de la clase, agrega un  content  con la letra  unicode  correspondiente a cada ícono, como most...

LESS vs Sass vs Stylus

Imagen
El primer preprocesador que usé fue LESS. Lo elegí porque la documentación tiene ejemplos fáciles de entender y rápidamente las ventajas de los pre-procesadores de CSS me convencieron de que son una potente herramienta de desarrollo front-end. Empecé a investigar sobre la sintaxis de Less, Sass y Stylus . Usé Stylus en un proyecto web y luego Sass. ¿Cuál es mejor? Características de LESS LESS es un pre-procesador que se mantiene fiel a la naturaleza declarativa de CSS. Te da algunas herramientas para que el CSS te resulte más fácil de mantener, pero no intenta ser un lenguaje de programación 1 . La documentación es concisa y los ejemplos muy claros. Podés aprender e inclusive dominar LESS en muy poco tiempo. No tiene mucho misterio, leyendo la documentación alcanza y sobra. Aunque no es recomendable para producción, podés empezar a usarlo en segundos simplemente linkeando un JavaScript, sin necesidad de instalar absolutamente nada. Framework front-end: Bootsrap . Bootstrap es ...

Que es PhoneGap

Imagen
PhoneGap  es una de las mejores opciones (y mi favorita) que existen en el mercado para crear aplicaciones para móviles utilizando HTML5 + CSS3 + JS. Vamos a intentar dejar claras en este post 10 ideas fundamentales sobre PhoneGap. PhoneGap es una tecnologia contenedora de aplicaciones que nos permite crear, utilizando HTML, CSS y Javascript, aplicaciones para móviles que se instalan nativamente La interfaz de una aplicación PhoneGap se crea utilizando HTML, CSS y Javascript . Esta interfaz nos la muestra PhoneGap a traves de un componente que es un navegador que toma el 100% del ancho y el 100% del alto de nuestro dispositivo. La vista web utilizada por PhoneGap es la  misma vista web utilizada por el sistema operativo nativo . Asi, en  iOS , esta vista será la clase  UIWebView  de Objective C; en Android  será el componente  android.webkit.WebView . Al haber diferencias en los motores de renderizado web entre sistemas operativos, tendre...