Mis recursos virtuales: 2012

Degradado con CSS3

Tenemos un etiqueta div en nuestra pagina por ejemplo, y le ponemos un color rojo por ejemplo de fondo, no nos agrada y deseamos ponerle un degradado(rojo y negro).
Para hacer un degradado tenemos que escribir el siguiente código en una hoja de estilo:

.degradado_01{
/* navegadores sin soporte */
background: black url(images/cabecera_degradado.jpg) repeat-x;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C33030), to(black));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(top,#C33030 , black );
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #C33030 , black);
/* Opera 11.10+ */
background: -o-linear-background(top, #C33030, black);
/* IE 10 */
background: -ms-linear-background(top, #C33030, black);
/* estándar */
background: linear-background(top, #C33030, black);
}

Luego llamarlo desde el div con la siguiente linea:

<div class="degradado_01" id="Artistas_Generos">

Nota Importante:
Solo funciona en navegadores actuales; si desea para un navegador antiguo mire la primera linea.
Antes tienes que llamar a la hoja de estilo donde esta el degradado con la siguiente linea, este deberá situarse entre las etiquetas <Head> ... </Head>:

<LINK REL=StyleSheet HREF="../recursos/style.css" TYPE="text/css" MEDIA=screen>

[Ejemplo]

[Fuente] : http://www.genbetadev.com/desarrollo-web/fondos-con-degradados-en-css3

Quitar y personalizar subrayado a un link

Aplicar los siguientes códigos dentro de las etiquetas: <style type="text/css"> ... </style>

a {
text-decoration:none;
color:#FFF;
}
a:hover{
color:#000;
}

Ejemplo:

Efecto 01 Alfa para Texto en Flash

Abrir Flash CS4

Crear un documento y agregar los textos como se observa en el ejemplo:

PREPARANDO NUESTRAS LETRAS PARA APLICARLES EFECTOS

Selecciona el texto (KNITWEAR por ejemplo) y presiona Ctrl + B

Seleccionar una vez mas y presionar Ctrl + B, asi ya tenemos nuestra letras transformadas a vectores

en el ejemplo utilizamos "marga" se haria lo mismo con "knitwear"

Convertir a símbolo cada letra (Utilizar F8)

en el ejemplo seleccionamos la letra "m"

Una vez terminado, debemos seleccionar toda la letras del texto “marga” y lo distribuimos en capas, lo mismo hacemos con “knitwear”

a la izquierda se distribuye el texto "marga" y la derecha "knitwear"

Ahora somos libres de hacer cualquier efectos a nuestras letras.

QUE HAREMOS?

En esta ocasión haremos un efecto sencillo, usando alfa

Si se observa la imagen de abajo, las letras marga_M, marga_A, marga_R ya tiene el efecto, pero ahora vamos hacerlo con la letra G

Por cuestiones propias de mi diseño, yo lo he hecho de la siguiente forma, ustedes son libres de hacerlo como deseen.

COMENCEMOS:

Les daré unas pautas de como hacerlo, lo demás es su imaginación

Arrastremos el fotograma al Nro.30 de la linea de tiempo, clic derecho y seleccionar: crear interpolacion clásica

Rápidamente dirigirnos a la línea de tiempo 40 y presionar F6

durante ese periodo(30 - 40) la letra o otro objeto puede cambiar de posición,

aparecer o desaparecer, cambiar de forma, etc; se le puede aplicar muchas cosas.

Ahora aplicaremos un efecto Alpha a a letra

Situemonos en el comienzo de la interpolación clásica de la letra

Seleccionar la letra y dirigirse al panel de propiedades de la izquierda

Efectos de color: Alfa = 0%

Ahora, situémonos en el final de la interpolación clásica de la letra

Efectos de color: Alfa = 100%

Listo ahora veras como la letra hace el efecto de aparecer y desaparecer, pon a prueba tu imaginación y no copies, mejoralo y se original

[Ver Ejemplo]

Advertencia: Todos los trabajos están reservados con derecho de autor.

Redondear bordes de un elemento con CSS

Para poder redondear un borde de algun elemento como se muestra aqui :

Tenemos la siguiente propiedad : border-radius

Cabe mencionar que el efecto bordado no funciona para todos los navegadores, pero si para : chrome, mozilla firefox, safari.

A continuación un ejemplo de como redondear un DIV

DIV{
border: 1px solid #000000;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
padding: 10px;
}

Donde :

border: tamaño(px) y color
-moz : para Mozilla;
-webkit: para navegador que utilicen webkit(Chrome, Safari);
padding : Espaciado

Pero el atributo border-radius tiene otras posibles configuraciones, en la que se pueden definir los valores para el radio de las cuatro esquinas por separado. De esta manera:

-moz-border-radius: 7px 10px 100px 50px;

Como centrar y poner estático en fondo en HTML

Es simple y sencillo, tenemos que dirigirnos al head y poner o modificar la parte del body.

body {
background-attachment: fixed;
background-color: #FFFFFF;
background-image: url(imagenes/seguro/fondo_pagina3.png);
background-repeat: no-repeat;
background-position: center;
}

Donde :
fixed: sirve para poner estático el fondo
center: centrar la imagen

Como poner un SWF detras de un DIV

Buenas, aveces cuando ponemos una película .swf y arriba de el existe un menú desplegable, hay ocasiones en la cual los submenus no se ven, porque el swf lo obstruye.

Para evitarlo debemos hacer lo siguiente :

Con Flash

El archivo HTML para una película flash se puede crear usando Publish Settings donde está la opción de ajustar WMODE. Las opciones seleccionadas se agregarán a la página HTML publicada automáticamente. File > Publish Settings. Seleccionamos HTML

Elegimos "Transparent" en WMODE y publicamos.

Con Dreamweaver

Insertamos el archivo .swf en la página y seleccionamos la película Flash en la vista de diseño.

En el panel Properties panel, elegimos Parameters y para el parámetro ponemos "wmode". Para el valor en Value, "transparent". Guardamos el documento.