Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 94 vistas

    Cómo Mostrar Imágenes Pixeladas Con CSS 3

    Cargado por

    kolp12
    Cómo Mostrar Imágenes Pixeladas Con CSS 3 es un pequeño tutorial que explica, además de los pasos para pixelear imagenes, el por que es aveces necesario pixelear imagenes.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd

    Cómo Mostrar Imágenes Pixeladas Con CSS 3

    Cargado por

    kolp12
    94 vistas3 páginas
    Cómo Mostrar Imágenes Pixeladas Con CSS 3 es un pequeño tutorial que explica, además de los pasos para pixelear imagenes, el por que es aveces necesario pixelear imagenes.

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Cómo Mostrar Imágenes Pixeladas Con CSS 3 es un pequeño tutorial que explica, además de los pasos para pixelear imagenes, el por que es aveces necesario pixelear imagenes.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    94 vistas3 páginas

    Cómo Mostrar Imágenes Pixeladas Con CSS 3

    Cargado por

    kolp12
    Cómo Mostrar Imágenes Pixeladas Con CSS 3 es un pequeño tutorial que explica, además de los pasos para pixelear imagenes, el por que es aveces necesario pixelear imagenes.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    Está en la página 1de 3

    Cmo mostrar imgenes pixeladas con CSS 3

    Las imgenes son una de las partes ms importantes del diseo web.
    Normalmente dejamos que sean los navegadores los que redimensionen y
    escalen las imgenes para que encajen bien en el diseo y se vean lo mejor
    posible. No obstante, en ocasiones es mejor controlar explcitamente cmo se
    escalan las imgenes.
    Por ese motivo, la versin 41 de Google Chrome aadi soporte para el nuevo
    valor pixelated de la propiedad image-rendering de CSS 3. Gracias a esta
    propiedad, podrs definir el algoritmo utilizado para ampliar las imgenes.
    En concreto, el valor pixelated permite desactivar el suavizado de
    imgenes cuando se amplia su tamao. Este suavizado normalmente se
    realiza mediante una interpolacin bilineal. El valorpixelated hace que el
    algoritmo utilizado sea el denominado "nearest neighbor", que consigue
    imgenes perfectamente pixeladas (ms adelante vers por qu a veces nos
    interesan las imgenes pixeladas en vez de suavizadas).
    La siguiente imagen muestra el resultado de ampliar una imagen pequea
    mediante el algoritmo por defecto de los navegadores:

    Utilizando el algoritmo asociado al valor pixelated, el resultado de ampliar la


    misma imagen es el siguiente:

    Para aplicar este algoritmo, simplemente utiliza la propiedad imagerendering con el nuevo valorpixelated:
    <img style="image-rendering: pixelated;" width="100" height="100" src=
    "...">

    Si tu navegador es Google Chrome 41 u Opera 26, puedes probar la demo del


    funcionamiento de esta propiedad.
    Adems de las imgenes, esta propiedad se puede aplicar tambin a los
    siguientes elementos:

    <canvas>

    cualquier elemento con una propiedad background-image

    Cundo es til mostrar las imgenes pixeladas?


    Obviamente, si tu sitio incluye fotografas, nunca deberas aplicar esta
    propiedad porque se veran muy mal.
    El primer caso de uso de esta propiedad son los juegos, ya que normalmente
    redimensionas el elemento <canvas> del juego para que ocupe toda la anchura
    del navegador. Antes el juego poda llegar a verse ligeramente borroso al
    ampliar la imagen, pero ahora se ver perfecto.
    El otro caso de uso ms til es el de las aplicaciones que muestran cdigos
    QR, cdigos de barras y grficos similares. En estas aplicaciones es normal
    que el usuario amplie la imagen del cdigo hasta ocupe toda la pantalla del
    mvil, as que es muy importante mantener la pixelacin de la imagen para que
    se reconozca el cdigo sin problemas.

    Esta es la imagen de un cdigo QR ampliado y suavizado:

    Esta es la imagen de un cdigo QR ampliado y pixelado (slo lo vers bien en


    Google Chrome 41 y Opera 26):

    Recursos tiles

    Especificacin oficial de la propiedad image-rendering

    Sobre el autor
    Este artculo fue publicado originalmente por Paul Kinlan y ha sido traducido
    con permiso por Javier Eguiluz.

    También podría gustarte