Archivo de la etiqueta: CSS

Eliminar ajuste de tamaño en textarea con CSS

Algunos navegadores como Chrome permiten realizar un ajuste de tamaño de los textarea de nuestros formularios. Aunque esta función es de utilidad para el usuario, puede suponernos problemas de diseño si nuestro formulario se encuentra enmarcado o estamos usando algún background. Para evitar el poder dimensionar nuestros textareas basta con asignar la siguiente propiedad CSS:

textarea {resize: none;}

Si queremos eliminar el redimensionado a determinados textareas aplicaremos la propiedad a alguna clase o identificador.

Typetester – Previsualización de formato de texto

Typetester es una aplicación web con la que podemos previsualizar el formato de texto que vamos a utilizar en nuestro diseño web y comparar en la misma pantalla hasta un máximo de tres candidatos con diferentes opciones de configuración.

Permite además generar el CSS de cada uno de los formatos candidatos.

Typetester

Typetester

Typetester

Em Calculator – De unidades absolutas a relativas

Em Calculator es una aplicación web que nos presenta una calculadora para pasar de píxeles a la unidad relativa em. Además permite añadir hijos al contenedor calculado y volver a calcular la unidad relativa del hijo.

Lo mejor es que lo probéis para entenderlo :).

Em Calculator

Em Calculator

Em Calculator

Referencia XHTML Strict y CSS 2.1

En los dos siguientes enlaces puedes otener una lista detallada de los elementos permitidos en XHTML Strict (así como los atributos de cada uno), y las propiedades de CSS 2.1.

La lista de XHTML está categorizada por semántica de los tags, y la del CSS por funcionalidad.

Cada tag y propiedad es ampliada con diversa información y ejemplos. No obstante, si estás dando tus primero pasos en la validación de código XHTML según los estandars marcados por la W3C, te recomiendo encarecidamente que empieces validando XHTML Transitional.

Referencia XHTML estricto.

Referencia CSS 2.1.

The Grid System

Gracias a WebIntenta (que por cierto parece que ha cojido el buen ritmo de nuevo) descubro un interesante enlace de maquetación CSS. Entre framework y reset CSS encontramos una interesante técnica para facilitarnos la maquetación si nuestra página va adquirir forma de rejilla. Nada complicado por cierto.

The Grid System

Fuente: webintenta

Lo mejor en diseño CSS del 2008

Una vez cargadas las pilas con el pasado puente volvemos a la carga con una interesante entrada que nos proporciona WebDesignerWall, los mejores diseños (según su criterio) de este año. Envidia sana señores.

Lo mejor del 2008 en CSS

Lo mejor del 2008 en CSS

Lo mejor en diseño CSS del 2008

CSSiPhone – Ejemplos de desarrollo web para iPhone

Pues ahora que estoy dándole por mi cuenta al desarrollo para dispositivos móviles aparece CSSiPhone. Esta página que recopila ejemplos de websites maquetados en CSS de excelente calidad para iPhone. Útil para iniciarse y como fuente de inspiración.

Gracias a webintenta por la información.

CSS Propiedad Position

Puede que seamos capaces de no usar la propiedad position de CSS al desarrollar páginas corporativas, pero a la hora de desarrollar aplicaciones webs, se hace casi imprescindible su uso (capas de mensajes, contenido emergente, simulación de frames con CSS…). No es fácil entender cómo funciona esta propiedad hasta que se usa con relativa frecuencia. En BarelyFitz tienen el mejor manual que he encontrado hasta la fecha, permitiéndonos ver el comportamiento de distintas capas según los valores de position que se les asigne.

Manual BarelyFitz

Maquetar con capas – CSS Layouts

Si llevas algunos años maquetando con tablas y vas a empezar a hacerlo con capas… vete preparando.

Al principio te costará una barbaridad entender realmente el funcionamiento de esta técnica (capas flotantes, clear, position…) . Para que esta tarea te sea mas sencilla de aprender, te recomiendo que descargues algunas plantillas (layouts) básicas, observes primero el código HTML/XHTML de éstas y entiendas que hace el CSS con cada capa del código. Una vez que lo entiendas, entonces intenta crear la plantilla desde cero.

En TJKDesign nos ofrecen algunas de estas plantillas.

Simular Frames con CSS

Obviamente necesitaríamos implementar el comportamiento pero en cuanto a maquetación se refiere en Dynamic Drive podemos encontrar varios layouts de distintos ejemplos de frames simulados con CSS y compatibles con distintos navegadores.

CSS Frames.