BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Manipulando CSS con jQuery

Manipulando CSS con jQuery

17/OCT/2015 1.855 visitas Ver comentarios

Es un orgullo participar por segundo año consecutivo en esta excelente idea que es Octuweb. Si el año pasado hablábamos de como maquetar una tabla en webs adaptativas, este año vamos un poco más allá y veremos como manipular nuestro CSS mediante uso de jQuery.

Propongo diferentes opciones para manipular nuestra hoja de estilos CSS o cambiarla completamente mediante el uso de javascript.

LEER ENTRADA

Responsive Tables o tablas adaptativas en CSS

Responsive Tables o tablas adaptativas en CSS

20/OCT/2014 10.197 visitas Ver comentarios

Este es un pequeño resumen de un artículo que escribí para el blog Octuweb sobre las diferentes opciones que tenemos los diseñadores para maquetar datos en una tabla HTML en una web adaptativa sin que se vean afectadas ni la usabilidad ni el sentido de la tabla en sí.

Propongo diferentes opciones sin utilizar frameworks, todas soluciones mediante CSS y, al final, sí hay una pequeña recopilación de recursos ya cocinados si basas la maquetación de tu web en algún sistema, tal como Bootstrap, Foundation, etc...

LEER ENTRADA

Efecto fotos apiladas únicamente con CSS3

Efecto fotos apiladas únicamente con CSS3

07/NOV/2013 5.128 visitas Ver comentarios

Esto que traigo es un minitutorial para crear un bonito efecto de fotos apiladas utilizando exclusivamente CSS3 sin plugins ni agregados externos ni nada que te complique la vida para aplicarlo.

El efecto, se puede ver en la captura que aparece aquí arriba o en la demo (pulsando en el botón azul) y, básicamente, lo que hace es crear capas similares a la que muestra la imagen utilizándolas como sombras de la capa principal.

LEER ENTRADA

Grid CSS adaptativo sin frameworks

Grid CSS adaptativo sin frameworks

13/SEP/2013 9.946 visitas Ver comentarios

Empezando por el principio, tengo que decir que un Grid es una rejilla o sistema de columnas que, generalmente tienen como límite 12 o 16 bloques verticales definidos en nuestra hoja de estilos CSS.

Si bien hay muchísimos frameworks CSS que nos dan grids hechos, en opciones de columna de tamaño fijo o variable, yo soy de los que le gusta hacerse sus propios sistemas, entonces, aunque te dé una lista de frameworks que deberías mirar si te interesa la maquetación en base a una rejilla, te dejo un grid hecho en casa, sencillo, con las opciones básicas, es decir, las columnas.

LEER ENTRADA

Mantener el cabecero de una tabla fijo con jQuery

Mantener el cabecero de una tabla fijo con jQuery

22/ABR/2013 18.917 visitas Ver comentarios

Si eres de los que usan las tablas para lo que realmente son, es decir, para mostrar datos tabulares y no para maquetación, este plugin te vendrá bien si tus tablas contienen muchas filas y corres el riesgo de perder los cabeceros de las columnas al hacer scroll.

Si usas Excel, sabrás que puedes fijar el contenido de las cabeceras para mantenerlas siempre visibles en la parte superior y así saber siempre qué columna estás viendo. Pues bien, este plugin hace lo mismo pero en una tabla de HTML.

LEER ENTRADA

Solución al espacio extra en los divs sin alto especificado con CSS

Solución al espacio extra en los divs sin alto especificado con CSS

15/FEB/2013 8.526 visitas Ver comentarios

A menudo te puede pasar de crear un DIV para poner únicamente una imagen (pensemos en una estructura header y 2 columnas) y no sabemos el alto que debe tener cada sección. Lo que tenemos claro es que no queremos que haya separación entre el header y las columnas.

Pues bien, lo que debería ser un simple trámite, de crear un div y meter la imagen dentro se complica por la aparición de un extraño espacio a mayores a base de margen o padding que sólo notarás si juntas las capas, ya sea con distintos fondos o (como en mi ejemplo, poniendo un borde y un fondo dorado).

LEER ENTRADA

Adapt.js para Responsive Web Design con javascript

Adapt.js para Responsive Web Design con javascript

11/SEP/2012 5.941 visitas Ver comentarios

Adapt.js es un archivo JavaScript muy livianito (848 bytes minified) que determina qué archivo CSS debe cargarse antes de que el navegador renderice o muestre tu página. Si el navegador se inclina o se cambia el tamaño, Adapt.js simplemente comprueba su ancho, y sirve sólo el CSS que se necesita, cuando se necesita.

Un posible inconveniente de Adapt.js es la posibilidad de ver un breve destello de contenido sin estilo mientras se cambia de fichero CSS (piensa en ello como "Ajax" para CSS) aunque nos avisan desde su web que se hizo todo lo posible por evitar el destello creando hojas CSS de 3kb de peso.

LEER ENTRADA

Entendiendo el concepto de Media Queries en CSS3

Entendiendo el concepto de Media Queries en CSS3

01/AGO/2012 7.608 visitas Ver comentarios

Para entender el concepto de Media Query, nada mejor que la definición oficial del W3C que dice: "Una media query consiste en un tipo de dispositivo (media) y cero o más expresiones que comprueban  el estado de las características particulares de ese dispositivo. Entre las características que pueden utilizarse en una media query están las propiedades  "ancho", "alto" y "color". Mediante el uso de media queries, la presentación del contenido puede adaptarse a un rango específico de dispositivos de salida sin necesidad de modificar el propio contenido".

Traduciéndolo al idioma ´martiniano´, una Media Query es una serie de condiciones que pueden aplicarse a nuestras hojas de estilo CSS para que, según el tamaño y resolución del dispositivo, adopte una u otra forma.

LEER ENTRADA

Mis primeros pasos en el Responsive Web Design

Mis primeros pasos en el Responsive Web Design

06/JUN/2012 10.437 visitas Ver comentarios

En esto del desarrollo web como en la vida, siempre toca evolucionar. Y evolucionar, en términos de informática, quiere decir incorporar nuevas prácticas, nuevos conocimientos y técnicas para optimizar el flujo de trabajo, consiguiendo un producto final de mejor calidad en el menor tiempo posible.

Esta vez, le ha tocado el turno al Responsive Web Design, o diseño web responsivo... o, en cristiano, el diseño web que se adapta a todos los dispositivos, según tamaño de pantalla u orientación, sin tener distintas versiones de tu web... Qué quiere decir ésto? Que partiendo de la base de un sólo código, es decir una única página web, mediante algunos .JS y muchas líneas de CSS, obtendrás la versión adecuada para el tamaño de la pantalla de tu visitante.

LEER ENTRADA

Animated jQuery Menu. Menú multinivel animado con jQuery

Animated jQuery Menu. Menú multinivel animado con jQuery

05/MAY/2011 11.119 visitas Ver comentarios

Breve explicación de como montar un menú multinivel con distintas animaciones con jQuery. Si buscas montar un menú multinivel (o multilevel in english) con 2 líneas de código... esta es tu solución.

Realmente es tan fácil de hacer que la web de su creador no tiene ni explicación más que 2 trozos de código de como implementarlo... así que no te quejarás de su facilidad de uso.

LEER ENTRADA

Tiny Scrollbar... la alternativa a jScrollPane para jQuery

Tiny Scrollbar... la alternativa a jScrollPane para jQuery

10/MAR/2011 20.985 visitas Ver comentarios

Si lo que quieres es personalizar las barras de scroll de tu navegador o usar capas o elementos con scrollbars y que no sean las simples barras que incluyen los navegadores, Tiny Scrollbar es tu opción. Permite personalizar las barras de desplazamiento de los elementos de tu web con un script de tan solo 2.29 kb.

Tiny Scrollbar puede utilizarse para aplicar barras de desplazamiento a tu contenido. Fue construido usando la biblioteca jQuery. Es una herramienta dinámica, ligera que da a los diseñadores web una forma eficaz de mejorar una interfaz de usuario web.

LEER ENTRADA

CSS reset... reseteando los estilos en CSS

CSS reset... reseteando los estilos en CSS

08/ENE/2011 4.593 visitas Ver comentarios

Cada elemento que utilizamos en nuestra hoja CSS tiene sus valores predeterminados, y, por ende, cada navegador los interpreta a su manera.

Antes de empezar un proyecto web, es muy útil resetear todos los elementos que vamos a utilizar mediante CSS y para ello, podemos usar 2 métodos.

LEER ENTRADA

Evitar el redimensionado de los textearea en webkit

Evitar el redimensionado de los textearea en webkit

31/AGO/2010 13.572 visitas Ver comentarios

Si eres un usuario habitual de los Navegadores Safari o Chrome, sabrás que éstos permiten que un usuario pueda cambiar su tamaño simplemente arrastrando su esquina inferior derecha.

Normalmente ésto no afecta el funcionamiento ni estética de tu web, pero si ese es tu caso, existe una propiedad CSS que evita que los usuarios de estos navegadores puedan cambiarle el tamaño a tus textearea.

LEER ENTRADA