Características de esta página:

Favicon en la barra del título del navegador.

El menu horizontal que aparece debajo del encabezado es un menú-lista con comportamiento hidden-visible. El submenú es una lista ordenada.

Encima de estos párrafos hay un menú-lista vertical.

Esta página tiene diseño responsivo adaptado a multiples tamaños de pantalla:
- Escritorio: 1024px.
- Tablet: 768px.
- Smartphone: 480px.
- Smartphone: 320px.
- Teléfono gama baja: 240px.

Cada vez que la pantalla del monitor se reduce a estos estandares el color del #header cambia.


Ejemplo de lista ordenada:
  1. Frutas:
    1. Manzanas.
    2. Peras.
    3. Naranjas.
  2. Verduras:
    1. Judías.
    2. Rábanos.
    3. Pepinos.
  3. Pescados:
    1. Sardina.
    2. Atún.
    3. Salmonete.
  4. Carnes:
    1. Pollo.
    2. Ternera.
    3. Pavo.

Abajo en la esquina inferior izquierda aparece un widget flotante.
Ejemplo de widget insertado

Reproductor audio

Slideshow image script: Slideshow Image Script


TEXTO VERTICAL ejemplo

Código QRcodigoqr

Font face
Google Font
Texto con sombra
capa con border-radius + background con radial gradient + box-shadow + propiedad hover

Al hacer clic en esta imagen se abre una pequeña ventana.

Al hacer clic en esta imagen se mostrará un mensaje emergente.
  Esta imagen de una casa puede ser arrastrada con el ratón a cualquier posición de la web gracias al comportamiento Arrastrar elemento PA
Edge web font Adobe
Texto producido con un generador de texto
Texto con sombra y en dos columnas. Colocar aquí el contenido para id "demo"
Ejemplo de formulario
Email:
DD/MM/AAAA

Edad del grupo:





Caja con overflow y barra personalizada

sumario >>
Número 274
Junio/Julio2012


sumario >>
Número 273
Abril / Mayo2012


sumario >>
Número 272
Febrero / Marzo2012


sumario >>
Número 271
Febrero / Marzo2012


sumario >>
Número 270
Febrero / Marzo2012


sumario >>
Número 269
Febrero / Marzo2012


sumario >>
Número 268
Febrero / Marzo2012


sumario >>
Número 267
Febrero / Marzo2012



<a href="http://slideful.com/v20130211_2017248337077485_pf.htm">View the slide show</a>
PAGINA CON RESPONSIVE-IMG JQUERY. HACER CLIC EN IMAGEN.
Al reducir el tamaño de la ventana, las imagenes también se reducen. Y al aumentar el tamaño de la ventana, las imagenes se agrandan.

Ejemplo de tabla con reglas css:

CLASIFICACION P1 P2 P3 P4 P5
1 barcelona 10 12 14 15 16
2 atl. madrid 10 12 14 15 16
3 real madrid 10 12 14 15 16

aLf Ejemplo de texto + imagen

Texto justificado e imagen flotada a la izquierda y con rollover (imagen de sustitución).

Además está desactivada la opción de copiar o guardar la imagen: menú contextual. También el cursor que se muestra sobra la imagen es un cursor crosshair (cruz).

dj g jgf hjgd fdf h jfd hgdf hgd hgd fgh dshk gf hjd hjd hg dhg df hjgd hyug dfjh gd jhgd jdjh d jyhgd hg dfjh dg jhygd hjgd hgd hj dg hgf hjd ghj dg hgd jhgd hj gd hgd jhg dh gd jhgd hg djh gdhg d hgd hgd h gdh gdgf dgf s gdhfj hghkjh lkhj kgj fhjd fs gfsd hf jg kjg jf hggd gfgf hdfjh glk jlñ jkj gjh fhgdf gs gfd hf jg kh knh hjh vghgf gf dxgd hgf vjb kmhb gjhf hgdgf dg dhg fjh gj gkj gjhg hgf gfd gfd gfdgf dg dgh dfhg fhjf ghj fgh gfh fh gfh gfhg gf hf hf hgdfgf fgds g fdh gfgf dhj gkhkjh kjgh jhjhggjg jjg jgj hfg hfh fhf .
CAPA CON 3 COLUMNAS DE TEXTO. ddddddddddd dfdfdf sdfsdf sd fsd f sdf sd f sdf sdf sd fds f sdf sdf sd f sdf dsf ds fds f dsf dsf ds f sdf sdf ds f sdf sf sd f sf dsf ds f dsf sd fds f dsf sd f dsf sdf ds f sdf sd f sdf f df sdf ds f dsf sdf ds f dsf sdf sd f f ds fd f dsf ds f dsf dsf ds f dsf dsf d f dsf dsf f f ds fs df df d f dsf s f sdf sdf ds f dsf ds fd sf dsf ds f f ds fd sf ds f sdf dsf sd f dsf sd fsd f sdf sd f dsf ds f d fs df fd dsf ds f sdf sd fs df sdf ds f sdf sd f sdf ds fsd f sd fsd f sdf sd fs df sd f sdf sdf ds f sdf ds f sdf sd f sdf sd f sdf ds f sdf sd f sdf sdf ds fs df sd f dsf ds f dsf ds f sdf.

Imagen 1

Al pasar el cursor por cada texto cambia la imagen. Se ha utilizado para ello el comportamiento Intercambiar imagen.

Imagen 2

Al pasar el cursor por cada texto cambia la imagen. Se ha utilizado para ello el comportamiento Intercambiar imagen.

Imagen 3

Al pasar el cursor por cada texto cambia la imagen. Se ha utilizado para ello el comportamiento Intercambiar imagen.

Imagen 4

Al pasar el cursor por cada texto cambia la imagen. Se ha utilizado para ello el comportamiento Intercambiar imagen.

Al hacer click en alguna de las miniaturas se mostrará su correspondiente imagen en grande en la parte izquierda gracias al comportamiento Mostrar-Ocultar.  

Propiedad transition:En todos los navegadores modernos (excepto IE9), este color de fondo debe desaparecer de rojo a azul cuando se pasa sobre ella.

Animación css3 con propiedad transition: al colocar el cursor sobre el rectángulo, la capa, que está rotada, disminuye de tamaño.

3D CSS Ribbon