+ Reply to Thread
Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Responsive Icons

 
  1. #1
    Senior Member
    Join Date
    May 2011
    Posts
    908
    Rep Power
    259

    Default Responsive Icons

    Ultimamente estoy viendo esto por muchos lados, y etsa muy asociado conel SVG (otro post), alguein tiene idea que utilizadad tienen estos.
    Gracias

  2. #2
    Moderator danield's Avatar
    Join Date
    Dec 2013
    Age
    31
    Posts
    563
    Rep Power
    308

    Default Re: Responsive Icons

    Responsive significa que se adapta a la resolucion de pantalla donde se visualice, los formatos son vectoriales por tanto son muy recomendables para usar en la web.

  3. #3
    Moderator
    Join Date
    Mar 2012
    Age
    29
    Posts
    982
    Rep Power
    920

    Default Re: Responsive Icons

    Hola tamaramf, conozco el concepto de Responsive Icons aplicado al diseño web, el uso de CSS3 permite detectar características del usuario como las dimensiones su pantalla y el dispositivo que está usando, y en base a eso modificar los estilos de la página, en el caso de un icono puede ser una imagen de fondo cuya posición va variando, éste sería un ejemplo:

    Responsive Icons

    al redimensionar la ventana de nuestro navegador podemos ver como cambia el icono, que realmente siempre es la misma imagen pero cambia la posición dentro de la misma, ésta es la imagen:

    icon

  4. #4
    Senior Member
    Join Date
    May 2011
    Posts
    908
    Rep Power
    259

    Default Re: Responsive Icons

    Gracias por sus respuestas!!
    parece ser algo muy útil. Esto se tiene que setear desde el diseño del icono, o es algo que se maneja desde el maquetado o ya es mas de programación?

  5. #5
    Moderator
    Join Date
    Mar 2012
    Age
    29
    Posts
    982
    Rep Power
    920

    Default Re: Responsive Icons

    Bueno, primeramente la imagen debe contener todas las posibles formas del icono, como una tira de imágenes en una sola, luego en el maquetado CSS de la página se decide cual "pedacito" de la imagen se muestra en función de detalles como pueden ser las dimensiones de la ventana del navegador del usuario.

  6. #6
    Senior Member
    Join Date
    May 2011
    Posts
    908
    Rep Power
    259

    Default Re: Responsive Icons

    Ahhh! entonces en el ilustrator se hace un imagen/dibujo con los tamaños posibles, osea progresivo de más pequeno a más grande y luego eso se exporta y la configuracion se hace desde el maquetado?

  7. #7
    Moderator danield's Avatar
    Join Date
    Dec 2013
    Age
    31
    Posts
    563
    Rep Power
    308

    Default Re: Responsive Icons

    se llaman "sprite" y es exactamente eso una tira de imagenes de todos los tamaños posibles a visualizar. icono-svg-illustrator.jpg

  8. #8
    Moderator
    Join Date
    Mar 2012
    Age
    29
    Posts
    982
    Rep Power
    920

    Default Re: Responsive Icons

    Así mismo, luego la persona que maqueta en CSS establece las reglas para que de acuerdo a condiciones del dispositivo desde el que el usuario ve la página se muestre uno u otro pedacito de esa tira de imagenes.

  9. #9
    Senior Member
    Join Date
    May 2011
    Posts
    908
    Rep Power
    259

    Default Re: Responsive Icons

    Ahh buenismo, esta genial que el icono se adapte segun el tamaño. Después lo voy a probar con una página que tengo que hacer.
    Muchas Gracias

  10. #10
    Senior Member
    Join Date
    Mar 2007
    Posts
    1,148
    Rep Power
    525

    Default Re: Responsive Icons

    Hay alguna regla en tamaño a respetar a la hora de diseñarlos?

+ Reply to Thread
Page 1 of 2 12 LastLast

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •