Ex-designz.net: Plantillas XHTML/CSS

1 COMENTARIO -  Publicado hace 38 meses -  Clasificado en: , ,

Ex-designz.net es un portal donde entre otras cosas podemos descargar plantillas web realizadas en XHTML y CSS. Hay una gran cantidad y, aunque en general la calidad de las mismas no es muy alta, siempre podemos encontrar una plantilla que se ajuste a nuestras necesidades o que nos sirva como punto de partida.

Templates

Algunas entradas relacionadas:

 

El soporte de HTML y CSS de Outlook 2007

0 COMENTARIOS -  Publicado hace 38 meses -  Clasificado en: , ,

Microsoft la ha vuelto a liar. Ha anunciado que su próxima versión de Outlook, cuyo lanzamiento está previsto en breve, no utilizará el motor de Internet Explorer para renderizar los emails en formato HTML sino que utilizará el motor de Microsoft Word.

Esto significa que Outlook 2007 no admitirá etiquetas potencialmente peligrosas como applet, object o script. Pero no sólo eso, derivado de lo anterior, nada de Flash, además no soportará las imágenes de fondo, no soportará float y position (lo que impedirá cualquier layout basado en CSS), etc.

Más información:

 

CSS en Flash

0 COMENTARIOS -  Publicado hace 38 meses -  Clasificado en: , ,

Flash admite unas cuantas propiedades de la especificación CSS1 original. Las propiedades CSS admitidas son:

  • text-align: Los valores reconocidos son left, center, right y justify.
  • font-size: Sólo se utiliza la parte numérica del valor. Las unidades (px, pt) no se analizan; los píxeles y los puntos son equivalentes.
  • text-decoration: Los valores reconocidos son none y underline.
  • margin-left: Sólo se utiliza la parte numérica del valor. Las unidades (px, pt) no se analizan; los píxeles y los puntos son equivalentes.
  • margin-right: Sólo se utiliza la parte numérica del valor. Las unidades (px, pt) no se analizan; los píxeles y los puntos son equivalentes.
  • font-weight: Los valores reconocidos son normal y bold.
  • kerning: Los valores reconocidos son true y false.
  • font-style: Los valores reconocidos son normal e italic.
  • letterSpacing: Sólo se utiliza la parte numérica del valor. Las unidades (px, pt) no se analizan; los píxeles y los puntos son equivalentes.
  • text-indent: Sólo se utiliza la parte numérica del valor. Las unidades (px, pt) no se analizan; los píxeles y los puntos son equivalentes.
  • font-family: Lista de fuentes que se deben utilizar, separadas por comas, en orden descendente de conveniencia. Se puede utilizar cualquier nombre de familia de fuentes. Si especifica un nombre de fuente genérico, se convertirá a una fuente de dispositivo adecuada. Hay disponibles las siguientes conversiones de fuentes: mono se convierte en _typewriter, sans-serif se convierte en _sans y serif se convierte en _serif.
  • color: Sólo se admiten valores de color hexadecimales. No se admiten los nombres de los colores (como blue). Los colores se escriben en el siguiente formato: #FF0000.

En el siguiente ejemplo vamos a cargar un texto externo dentro de una instancia de texto y le vamos a aplicar un css, también externo.

1.- Creamos una caja de texto dinámico, multilínea al que damos el nombre de instancia "miTexto".
2.- Por otro lado deberemos tener un documento de texto, con el nombre de "texto.txt" que contiene algo como: 

<span class="cuerpo"><span class="titulo">Accesibilidad:</span> Conjunto de características de un sitio web que facilitan su uso por parte de personas con algún tipo de discapacidad. En este sentido, desde el W3 Consortium se esta promoviendo el programa WAI. En coordinación con todo tipo de organizaciones internacionales, la WAI persigue promover la accesibilidad a través de cinco áreas de trabajo tecnología; guías de ayuda, herramientas, formación e investigación y desarrollo.</span>

3.- Además deberemos tener una hoja de estilos con nombre "styles.css", en la que definimos los estilos: 

/* CSS Document */
.cuerpo {
  font-family: "_sans";
  color: #336699;
}
.titulo{
  font-family: "_typewriter";
  color: #FF0000;
  font-size:14px;
  font-weight:bold;
}

4.- En este ejemplo, tanto el CSS como el texto y el documento Flash deben estar en la misma carpeta.
5.- Ahora tan sólo nos queda cargar tanto el documento de texto como la hoja de estilos y asignarlos a la caja de texto. 

miTexto.html = true;

//Carga del CSS y
//asignacion a la caja de texto
var miEstilo = new TextField.StyleSheet();
miEstilo.onLoad = function(cargado:Boolean):Void {
    if (cargado) {
         miTexto.styleSheet = this;
    } else {
        trace("Error cargando el CSS.");
    }
};
miEstilo.load("styles.css");

//Carga del texto y
//asignacion a la caja de texto
var CargaTexto = new LoadVars();
CargaTexto.load("texto.txt");
CargaTexto.onData = function(src) {
	if (src != undefined) {
		miTexto.htmlText = src;
	} else {
		trace("No se pudo cargar el texto.");
	}
};

Algunas entradas relacionadas:

 

Transparencia con CSS

1 COMENTARIO -  Publicado hace 38 meses -  Clasificado en: ,

Para implementar transparencia con CSS, debido a las diferencias entre navegadores, deberemos utilizar varias propiedades para definirla sobre un elemento:
- La especificación CSS3 tiene la propiedad opacity, la cual toma valores entre 0 (invisible) y 1 (opaco).
- Los navegadores Mozilla poseen la propiedad -moz-opacity que toma los mismos valores que la propiedad anterior.
- Internet explorer posee el filtro opacity que toma valores entre 0 y 100.

Así pues, para definir la transparecia: 

#caja {
opacity: 0.2;
-moz-opacity: 0.2;
filter: alpha(opacity=20);
}
Ejemplo:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis rutrum dolor in tellus. Proin massa leo, sollicitudin et, semper quis, laoreet non, dui. Ut ante. Maecenas aliquet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Algunas entradas relacionadas:

 

Tip: Resaltar el campo activo de un formulario

0 COMENTARIOS -  Publicado hace 38 meses -  Clasificado en: , ,

Resaltar el campo de formulario en el que está el foco se puede hacer de varias formas. Una muy sencilla sería: 

<input type="text" onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='white'">
Ejemplo:

Algunas entradas relacionadas:

 

Dando estilo a los formularios con CSS

0 COMENTARIOS -  Publicado hace 38 meses -  Clasificado en: , , ,

Styling form controls with CSS, revisited | 456 Berea Street, probablemente sea la mejor aproximación al problema de dar formato a los controles de un formulario de un modo atractivo pero que al mismo tiempo sea válido para los distintos navegadores y sistemas operativos con los que nos podemos encontrar. Realmente muy completo. Con una página de demostración sobre cada uno de los distentos elementos (inputs, checkboxes, fieldsets,...), encontramos tanto el código XHTML como el CSS, así como distintas muestras de como se vería el elemento en cuestión en los navegadores. En mi opinión un post de lectura obligatoria y directo a favoritos.

Dando estilo a los formularios con CSS » »

Algunas entradas relacionadas:

 

Hack para utilizar min-height en Internet Explorer

0 COMENTARIOS -  Publicado hace 38 meses -  Clasificado en: , , 
/* Regla para IE */
* html #caja{
  height:100px;
  border:1px solid #2b3854;
  background:#ffcc99;
}
#caja{
  min-height:100px;
  border:1px solid #2b3854;
  background:#ffcc99;
}

Creo que IE7 ya soporta min-height y min-width, aunque no sé si es porque mi release es una alpha pero a mí no me funcionan. En cualquier caso, habrá que seguir haciendo uso de este o similares hacks mientras hayan usuarios de IE6.

Algunas entradas relacionadas:

 
Páginas: < Anterior 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Siguiente >