Estructura

La estructura de la propiedad resize es esta:

resize: [valor];

Los valores posible son:

• none
• both: Ambas redimensiones, tango vertical como horizontal.
• horizontal: Únicamente redimensión horizontal
• vertical:  Únicamente redimensión vertical
• inherit: Desactivar redimensión.

Un ejemplo sería este, primero la estructura HTML:

<textarea name="caja" id="caja" rows="5" cols="50"></textarea>

.textarea {

overflow: auto ;
resize: both ;
 moz-resize: both ;
 -webkit-resize: both ;
}

Ejemplo de su funcionamiento

Si lo deseáis podéis ver otro método para redimensionar. Espero que os haya gustado el artículo, si tenéis dudas podéis escribirlas en los comentarios o mejor, preguntarlas en el foro de la comunidad.

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• CSS: position, propiedad

• Lista de trucos con CSS3

• CSS: Box-shadow, propiedad

Os recomiendo probar también la herramienta Basekit, muy útil para diseñar sitios de forma cómoda y rápida.

Os muestro el enlace a continuación, espero que os guste:

Si tenéis alguna duda podéis escribirla en los comentarios.

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• ¿Cuánto vale tu diseño? La importancia de valorar tu trabajo

• Carrousel realizado con Basekit (CSS y HTML)

• Encuesta: Tú decides lo que podría mejorarse

Esta es una propiedad CSS3 que aún no está finalizada, puedes seguir su progreso por la W3C. La propiedad background-size te permite ajustar el fondo, estirarlo hasta donde deseemos, por lo que se puede llamar también background stretch.

Podemos usarla, aunque únicamente determinadas versiones de navegadores son soportadas hasta ahora. Sería:

• -moz-background-size (Firefox 3.6)
• -o-background-size en (Opera 9.5)
• -webkit-background-size (Safari, Google Chrome)
• -khtml-background-size (Konqueror 3.5.4)

Admite valores de ancho y alto tanto en píxeles como en porcentajes. Los valores, obviamente, pueden ser cambiados a los que deseemos.

Ejemplo

Un ejemplo muy sencillo sería este (debajo el código):

div#bgsize {  
  width: 100%;  
 background: url(http://www.misitio.es/imagenes/imagen.gif) no-repeat;  
 background-size: 100%;  
-moz-background-size: 100%;  
 -o-background-size: 100%;  
 -webkit-background-size: 100%;  
 -khtml-background-size: 100%;
}

Puedes ver más ejemplos como este en esta dirección externa.

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• CSS: Color y Background

• Firefox 3.6 añade background clipping

• Varios Background en Firefox 3.5

¿Sabías que únicamente con un símbolo antes de la propiedad CSS puedes enfocar el estilo que desees hacia Internet Explorer 6 o 7? Para IE 6 exclusivamente tendrás que añadir un guión bajo al principio de la propiedad, mientras que para IE 7 y las demás versiones en adelante, tendremos que incluir un ascerisco. Con un ejemplo lo podréis comprobar mejor:

#elemento {
color: black; /* navegadores modernos */
*color: white; /* IE 7 y versiones superiores */
_color: pink; /* Únicamente IE6 */
}

Nettuts también tiene un vídeo al respecto, que muestra cómo hacerlo, con la diferencia de que la propiedad en vez de ser “color” es backgound, y los valores también cambian:

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Sobreescribir estilos en línea en CSS

• Resetear estilos CSS

• Estilos solo para determinados navegadores

Existen una lista interminable de tipografías, pero sólo unas cuantas encajarán con el estilo que tenemos en el sitio web. Desde aquí os mostraré algunos puntos que os pueden resultar útiles para distinguir entre una tipografía aceptable y otra que no es buena para nuestro sitio.

En las tipografías para títulos, se podrían seguir estos criterios:

¿Pequeña o grande?

Los títulos son algo que deben verse rápidamente, sin esforzarse mucho, así que es altamente recomendable que sean lo suficientemente grandes como para que el lector no tenga que fijarse mucho en ellos para verlos. Eso sí, los extremos también son malos, yo recomiendo establecer un mínimo de 17 píxeles a la tipografía de los títulos.

¿Fina o ancha?

Normalmente, las tipografías finas se utilizan para sitios con una combinación de tonos claros, debido a la ligereza que supone. Los sitios oscuros tienden a utilizar estilos de tipografías más anchas.

¿Colores claros u oscuros?

En los sitios con combinaciones de colores oscuros, se usa mayoritariamente tipografías claras, debido a que destacan más. Las tipografías oscuras se deberían utilizar en sitios con combinación de colores claros, por el mismo motivo que el anterior.

¿Estilo elegante o desenfadado?

Esto ya puede depender de cada persona, aunque personalmente concuerdo con que en sitios claros se utilicen tipografías más firmes, mientras que en sitios con colores oscuros se apliquen tipografías más divertidas y amigables, aunque, como digo, depende de cada persona.

¿Sans serif o serif?

Sans serif significa sin serifa, o terminación en las letras, como queramos llamarlo. En sitios con temáticas actuales, como diseño web, nuevas tecnologías, recomiendo usar fuentes sans-serif. En sitios con temas como viajes, museos, podría ser una buena opción utilizar fuentes serif.

(Imagen de Wikipedia)

¿Aplico text-shadow, degradados…?

Generalmente las propiedades CSS3 todavía no han sido aplicadas en todos los navegadores web. Si la temática que estamos tratando es sobre desarrollo web, diseño, el uso de propiedades CSS3 puede estar aceptado (hablando en la actualidad, ya que la mayoría de los navegadores no han conseguido todavía la compatibilidad con todas las propiedades CSS3). En otros sitios con temáticas como viajes, hoteles, restaurantes, deportes, todavía no encaja mucho aplicar este tipo de propiedades, según mis criterios.

Consejos de fuentes para los parrafos:

• No utilices tipografías demasiado finas, dificultará su lectura. Tampoco muy pequeñas, como mínimo 10 píxeles de tamaño.
• Intenta seguir el mismo estilo que en los encabezados, aunque varíe un poco. No cambies a otra tipografía totalmente distinta, intenta usar la misma.
• La tipografía debe verse bien por sí misma, no puedes usar efectos como text-shadow u otros para que se visualice bien. Debe mostrarse correctamente sin usar estos efectos. Esto se puede aplicar a las tipografías en los títulos también.
• Utiliza distintos tamaños de tipografía, dependiendo que sea un párrafo de contenido, bloque en la barra lateral o título. Debe diferenciarse. Generalmente el tamaño más grande lo tiene el título, seguido por el título en los bloques laterales y el texto en los párrafos.
• Debes distinguir los enlaces de texto en los párrafos. Generalmente se aplica otro color al enlace (por ejemplo, azul, frente al negro  del texto) o una decoración subrayado, especialmente).

Conclusión

Si sigues estos consejos darás una estructura más organizada a tu sitio, a la vez que ayudarás al lector a que se sienta bien leyendo tus artículos o lo que muestres. Todo depende de cada uno, así que si estás en desacuerdo con alguno de estos puntos, no lo sigas, quizás tengas otra idea mejor. Pero ante todo, recuerda, el contenido es el rey. Si deseas aplicar a tu página tipografías que no tengan los usuarios, utiliza la propiedad CSS3 @font-face. Ya sabes que tienes una lista de recursos muy útiles en este blog para desarrollar inspiración u obtener tipografías, texturas y fondos.

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Novedosas tipografías gratis para diseñar sitios y logotipos

• 11 tipografías gratis para diseñar tu sitio web

• 16 tipografías estándares para usar con CSS

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Consejo CSS #3

• Consejo CSS #1

• Consejo CSS #2

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Consejo CSS #2

• Consejo CSS # 7 – Protocolos relativos de direcciones en CSS

• Consejo CSS #1

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Consejo CSS #1

• Consejo CSS #3

• Consejo CSS # 7 – Protocolos relativos de direcciones en CSS

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Consejo CSS #3

• Contenidos exclusivos para lectores de Twitter y RSS Feed

• Consejo CSS # 7 – Protocolos relativos de direcciones en CSS

Cuando empezamos a usar CSS, como todo en la vida, cometemos errores. Pero estos errores son beneficiosos, ya que, si reflexionamos pregúntandonos el porqué los hemos cometido, estaremos aprendiendo. Si crees que tus errores no son comunes, mira estos errores con su respectiva solución que voy a mostrar a continuación y, a lo mejor, puedes que te lleves una sorpresa y que tu error aparezca allí:

1. No cerrar los corchetes

#container {
width: 50%;margin:0 auto;
 /* Falta cerrar el corchete */

Si abrimos una clase o id pero después nos olvidamos de cerrarla, el código siguiente no tendrá efecto. Para ello es necesario ser muy meticuloso y fijarse si hemos cerrado todos los corchetes en nuestra hoja de estilos.

2. No definir los atributos con la estructura correcta

#header {

background-color: #000

/* Falta el punto y coma con el que termina un atributo, por lo tanto el siguiente atributo no se leerá */

font-size: 1em;
}

Es necesario cerrar los atributos con punto y coma. Si no lo hacemos así, el siguiente atributo no será leído.

3. Escribir mal el nombre del selector o clase

#haedr {

/* regularmente la cabecera se escribe #header, no #haedr. Si lo definimos correctamente en el documento HTML, puede valer, pero es complicarse la vida.  */

background-color: #000;

font-size: 1em;

}

Si enlazamos en el documento HTML a la id #header, pero después en el código HTML escribimos #haedr, estaremos cometiendo un grave error que tendrá como consecuencia la incapacidad de leer dicho selector.

4. Escribir incorrectamente el nombre de un atributo

Bastante parecido al anterior pero equivocándose esta vez en el atributo, lo que trae como consecuencia que no se pueda aplicar.

#header {

background-color: #000;

fton-sezi: 1em;

/* El atributo "fton-sezi" no podrá ser leido porque no existe, es font-size */

}

5. Confundir el valor de los atributos

Todos los atributos tienen sus valores específicos y no deben ser confundidos con los de otro. Si nos confundimos, el atributo no podrá ser leído.

#header {

background-color: #000;

font-size: 1em;

float: center;

/* El atributo float no permite "center", si no únicamente "left" o "right" */

}

6. Caracteres y tildes del español en los selectores y las clases

Vale, el idioma español es muy usado, pero no cuando se manejan códigos CSS. No se pueden poner tildes ni símbolos del español en los selectores, clases o en los valores, ya que si lo hacemos, no podrán ser ejecutados correctamente.

#cajón {

/* No se puede poner tilde en el selector, debería ser "#cajon" */

clear: both;

font-size: 1em;

}

Estos son algunos errores que comete mucha gente que se inicia en el mundo de CSS, espero que os hayan servido para aprender.

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Solucionar errores comunes de CSS con Javascript

• Los peores errores CSS de David Walsh

• Lista de errores en el uso de CSS