Tutorial HTML CSS - (page 3) - Tutorial, CSS, HTML

Par GloriaV le 18 Février 2016 à 12:25

Posición de texto, imagen

HTML con CSSS

<div id="container">Posición de texto, imagen</div>
<style></style>
Par GloriaV le 21 Mars 2016 à 16:36

Generador de las tablas
1. http://dezzi.ru/Tables%20generator.html
2. http://www.askthecssguy.com/kotatsu/index.html
3. http://extenebris.alfamoon.com/tools/tablecreator.html

Tablas con fondo
http://www.quackit.com/html/html_table_generator.cfm

Tablas
1. http://azumbawe.blogspot.com.es/2012/08/html-tablas-1.html
2. http://www.tutorialmonsters.com/ejemplo-con-tablas-en-html/#cellpadding

Recuadro curioso con HTML

Este es el interior del recuadro. Esperamos que os resulte elegante... es muy sencillo.

HTML

<table width="150" cellspacing="1" cellpadding="3" border="0" bgcolor="#00FFFF"><tr><td bgcolor="#66CCFF"><font size="1" face="verdana, arial, helvetica"><b>Recuadro curioso con HTML</b></font></td></tr><tr><td bgcolor="#99FFFF"><font face="verdana, arial, helvetica" size="1">Este es el interior del recuadro. Esperamos que os resulte elegante... es muy sencillo.</font></td></tr></table>
Par GloriaV le 21 Mars 2016 à 17:39

Fuente

a. Crear un formulario de contacto para el blog
Generador

Powered byEMF Online Survey

Par GloriaV le 18 Avril 2016 à 12:39

Car.	¡Codes	Car.	Codes	Car.	Codes	Car.	Codes
.	.	.	.	.	.	.	.
ß	ß	µ	µ	¶	¶	¦	¦
©	©	‚	****	¡	¡	¿	¿
<	<	>	>	·	·	¨	¨
Þ	Þ	ø	ø	´	´	¸	¸
£	£	«	«	¯	¯	¬	¬
»	»	±	±	°	°	¢	¢
×	×	€	€		****	÷	÷
¤	¤	¥	¥	ƒ	****	„	****
º	º	¹	¹	&	&	…	****
²	²	³	³	†	****	Ø	Ø
ª	ª	§	§	‡	****	¾	¾
¼	¼	½	½	þ	þ	ˆ	****
‰	****	‹	****	Š	****	Ž	****
	****	Œ	****	Ÿ	****	space
Œ	****	ž	****	œ	****		****
	****	™	****	š	****	›	****
‘	****	’	****	˜	****	—	****
“	****	”	****	•	****	–	****

Par GloriaV le 13 Août 2016 à 10:40

Image Sprites Demo
Par GloriaV le 13 Août 2016 à 10:42

Fuente: http://learn.shayhowe.com/advanced-html-css/css-transforms/
Par GloriaV le 13 Août 2016 à 10:52

♣ ♥

Juntos o separados.

<aligh=center><font color="red" size=7>&clubs; &clubs; &hearts; &hearts;</font>

Par GloriaV le 13 Août 2016 à 10:56

Hacer texto:

<u>Texto</u> - Texto;

<s>Texto</s> - Texto;

<b>Texto</b> - Texto;

<i>Texto</i> - Texto;

        - espacio;

<br/> - Espacio entre las líneas;

<center>Texto</center> - Texto en centro.

Tablas:

<table border=0 wight=52%> - Inicio de tabla;

<tr> - Inicio de la linea;

</tr> - Final de la linea;

<td> и </td> - entre estos caracteres es una celda de la tabla;

</table> - Final de la tabla.

Más sobre las tablas - aquí

Referencia:<a href="URL de página">Texto</a>

<a href="Link de página"><img src="URL de imagen"></a> - Imagen,

<a href="Link de página" target="_blank">Texto</a> - se abre otra pestaña. leer más - aquí

Ventana para instalar un código:
1.<textarea rows="2" cols="60"> Código </textarea> , cols - ancho px, а rows - cantidad de las líneas en ventana.

2.<input size="35" value="Código"h-text"><div class="b-text" leer más- aquí

Cortar texto: <cut text="Leer más">Tеxto primario</cut> los detalles - aquí

Fuente, tamaño, color del texto: <span style="font-family:Monotype Corsiva;color:fuchsia;font-size:25px">Texto</span> leer más - aquí

Botón:

Imagen con texto:

Colores HTML:

Detalles HTML:

Par GloriaV le 20 Août 2016 à 10:32

Si entiendes de html te dejo estas instrucciones que te ayudaran a modificarlas a tu estilo

-( Back Ground-color ): color de fondo del recuadro

- Color: color de texto

-( Border-Stule ): estilo del borde (none | dotted | dashed | solid | double | groove | ridge | inset | outset)

-( Border-Color ): color del borde

-( Overflow ): tipo de Text box: visible { overflow: visible; } hidden { overflow: hidden; }scroll { overflow: scroll; } auto { overflow: auto}

-( Scrollbar-face-color ): color de la cara de la barra de desplazamiento

-( Scrollbar-highlight-color ): brillo de la barra de desplazamiento

-( Scrollbar-shadow-color ): color de la sombra de la barra de desplazamiento

-( Scrollbar-3dlight-color ): color del efecto 3D de la barra de desplazamiento

-( Scrollbar-arrow-color ): color de la flecha de la barra de desplazamiento

-( Scrollbar-darkshadow-color ): la parte oscura de la sombra de la barra de desplazamiento

-( Border-bottom ): estilo (none | dotted | dashed | solid | double | groove | ridge | inset | outset) y color del borde inferior

Par GloriaV le 16 Septembre 2016 à 17:21

Reloj calendario estático Un estupendo reloj con día, mes, año y nos indica si es de día o de noche.

<CENTER><SCRIPT LANGUAGE="JAVASCRIPT"> 
<!-- Begin Digital Watch 
document.write('<!-- Begin Hiding Script -->') 
/* 
###################################################################### 
################ SCRIPT BY BURNBLADE ##################### 
################ Visit My Site At ##################### 
################ http://www.burning.net ##################### 
################ © copywrite 1997 ##################### 
modificado por www.creatupropiaweb.com 
This script may be used as long as the above lines are not changed 
in any way. 
*/ 
var watchID = null 
var watchRun = false 
function stopwatch(){ 
if(watchRun) 
clearTimeout(watchID) 
watchRun = false 
} 
function startwatch(){ 
stopwatch() 
dayTime() 
} 

function dayTime() { 
day = new Date(); 
hour = day.getHours(); 
minute = day.getMinutes(); 
second = day.getSeconds(); 

if (hour > 12) { 
hours = hour - 12; 
part = 'Del Dia'} 
else { 
part = 'De la Noche'; 
if (hour == 0) { 
hours = 12 
} 
else { 
hours = hour 
} 
} 
if (minute < 10) {minutes = 0} 
else {minutes = ""} 
if (second < 10) {seconds = 0} 
else {seconds =""} 
date = ('' +"Mes "+(day.getMonth() + 1)+" Dia "+day.getDate()+ " del año "+day.getYear()+ ''); 
time = ('' + hours + ":"+minutes+""+minute+ ":"+seconds+""+second+ '') 
parts = ('' +part+ '') 
document.timedate.time.value = time 
document.timedate.date.value = date 
document.timedate.parts.value = parts 
watchID = setTimeout("dayTime()",1000) 
watchRun = true 
} 
document.write('<!-- End Hiding Script -->') 
// End Digital Watch--> 
</script> 

<BODY onLoad="startwatch()"> 
<form name="timedate" onSubmit="0"> 
<table cellspacing=0 cellpadding=0> 
<tr align=center> 
<td><INPUT TYPE="text" NAME="time" SIZE=6 VALUE ="..Starti"></td> 
<td><INPUT TYPE="text" NAME="parts" SIZE=12 VALUE ="ng.."></td> 
<td colspan=2><INPUT TYPE="text" NAME="date" SIZE=28 VALUE ="........"></td> 
</tr> 
</table> 
</form></CENTER> 
<!-- Simba says Roar. -->

Par GloriaV le 16 Septembre 2016 à 17:23

Efectos llamativos para link

//Rainbow Links 
var ok=100 //delay time in milliseconds 
//Do not modify anything below this line. 
var color=0 

function rain() 
{ 
color=color+1; 
if(color==1){document.linkColor='red';} 
if(color==1){document.vlinkColor='red';} 
if(color==1){document.alinkColor='red'; setTimeout("rain();",ok);} 

if(color==2){document.linkColor='orange';} 
if(color==2){document.vlinkColor='orange';} 
if(color==2){document.alinkColor='orange'; setTimeout("rain();",ok);} 

if(color==3){document.linkColor='yellow';} 
if(color==3){document.vlinkColor='yellow';} 
if(color==3){document.alinkColor='yellow'; setTimeout("rain();",ok);} 

if(color==4){document.linkColor='green';} 
if(color==4){document.vlinkColor='green';} 
if(color==4){document.alinkColor='green'; setTimeout("rain();",ok);} 

if(color==5){document.linkColor='blue';} 
if(color==5){document.vlinkColor='blue';} 
if(color==5){document.alinkColor='blue'; setTimeout("rain();",ok);} 

if(color==6){document.linkColor='A209F4';} 
if(color==6){document.vlinkColor='A209F4';} 
if(color==6){document.alinkColor='A209F4'; setTimeout("rain();",ok);} 

if(color==7){document.linkColor='purple';} 
if(color==7){document.vlinkColor='purple';} 
if(color==7){document.alinkColor='purple'; setTimeout("rain();",ok);} 

if(color==8){document.linkColor='pink';} 
if(color==8){document.vlinkColor='pink';} 
if(color==8){document.alinkColor='pink'; setTimeout("rain();",ok);} 

if(color==9){color=0; setTimeout("rain();",ok);} 
} 
setTimeout("rain();",ok); 
// --></script> 
<a href="http://www.creatupropiaweb.com">Javascripts</a> <br> 
<a href="http://www.creatupropiaweb.com">creatupropiaweb</a><br> 
<a href="http://www.creatupropiaweb.com">Juegos</a> 
<!-- Simba says Roar. -->

Par GloriaV le 16 Septembre 2016 à 17:25

Rainbow Links
Fuente: http://www.dynamicdrive.com/dynamicindex5/

<script src="rainbow.js">

 /*

 Rainbow Links Script- TAKANASHI Mizuki

 For full source code, 100's more DHTML scripts, and TOS, 

 Visit http://www.dynamicdrive.com

 */

 </script>

Par GloriaV le 22 Décembre 2016 à 16:27

Fuente: http://www.dynamicdrive.com/dynamicindex6/dcalendar2.htm

<script language="JavaScript">

/*
Dynamic Calendar II (By Jason Moon at http://www.jasonmoon.net)
Permission granted to Dynamicdrive.com to include script in archive
For this and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

var ns6=document.getElementById&&!document.all
var ie4=document.all

var Selected_Month;
var Selected_Year;
var Current_Date = new Date();
var Current_Month = Current_Date.getMonth();

var Days_in_Month = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var Month_Label = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

var Current_Year = Current_Date.getYear();
if (Current_Year < 1000)
Current_Year+=1900


var Today = Current_Date.getDate();

function Header(Year, Month) {

   if (Month == 1) {
   Days_in_Month[1] = ((Year % 400 == 0) || ((Year % 4 == 0) && (Year % 100 !=0))) ? 29 : 28;
   }
   var Header_String = Month_Label[Month] + ' ' + Year;
   return Header_String;
}



function Make_Calendar(Year, Month) {
   var First_Date = new Date(Year, Month, 1);
   var Heading = Header(Year, Month);
   var First_Day = First_Date.getDay() + 1;
   if (((Days_in_Month[Month] == 31) && (First_Day >= 6)) ||
       ((Days_in_Month[Month] == 30) && (First_Day == 7))) {
      var Rows = 6;
   }
   else if ((Days_in_Month[Month] == 28) && (First_Day == 1)) {
      var Rows = 4;
   }
   else {
      var Rows = 5;
   }

   var HTML_String = '<table><tr><td valign="top"><table BORDER=4 CELLSPACING=1 cellpadding=2 FRAME="box" BGCOLOR="C0C0C0" BORDERCOLORLIGHT="808080">';

   HTML_String += '<tr><th colspan=7 BGCOLOR="FFFFFF" BORDERCOLOR="000000">' + Heading + '</font></th></tr>';

   HTML_String += '<tr><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sun</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Mon</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Tue</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Wed</th>';

   HTML_String += '<th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Thu</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Fri</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sat</th></tr>';

   var Day_Counter = 1;
   var Loop_Counter = 1;
   for (var j = 1; j <= Rows; j++) {
      HTML_String += '<tr ALIGN="left" VALIGN="top">';
      for (var i = 1; i < 8; i++) {
         if ((Loop_Counter >= First_Day) && (Day_Counter <= Days_in_Month[Month])) {
            if ((Day_Counter == Today) && (Year == Current_Year) && (Month == Current_Month)) {
               HTML_String += '<td BGCOLOR="FFFFFF" BORDERCOLOR="000000"><strong><font color="red">' + Day_Counter + '</font></strong></td>';
            }
            else {
               HTML_String += '<td BGCOLOR="FFFFFF" BORDERCOLOR="000000">' + Day_Counter + '</td>';
            }
            Day_Counter++;    
         }
         else {
            HTML_String += '<td BORDERCOLOR="C0C0C0"> </td>';
         }
         Loop_Counter++;
      }
      HTML_String += '</tr>';
   }
   HTML_String += '</table></td></tr></table>';
   cross_el=ns6? document.getElementById("Calendar") : document.all.Calendar
   cross_el.innerHTML = HTML_String;
}


function Check_Nums() {
   if ((event.keyCode < 48) || (event.keyCode > 57)) {
      return false;
   }
}



function On_Year() {
   var Year = document.when.year.value;
   if (Year.length == 4) {
      Selected_Month = document.when.month.selectedIndex;
      Selected_Year = Year;
      Make_Calendar(Selected_Year, Selected_Month);
   }
}

function On_Month() {
   var Year = document.when.year.value;
   if (Year.length == 4) {
      Selected_Month = document.when.month.selectedIndex;
      Selected_Year = Year;
      Make_Calendar(Selected_Year, Selected_Month);
   }
   else {
      alert('Please enter a valid year.');
      document.when.year.focus();
   }
}


function Defaults() {
   if (!ie4&&!ns6)
   return
   var Mid_Screen = Math.round(document.body.clientWidth / 2);
   document.when.month.selectedIndex = Current_Month;
   document.when.year.value = Current_Year;
   Selected_Month = Current_Month;
   Selected_Year = Current_Year;
   Make_Calendar(Current_Year, Current_Month);
}


function Skip(Direction) {
   if (Direction == '+') {
      if (Selected_Month == 11) {
         Selected_Month = 0;
         Selected_Year++;
      }
      else {
         Selected_Month++;
      }
   }
   else {
      if (Selected_Month == 0) {
         Selected_Month = 11;
         Selected_Year--;
      }
      else {
         Selected_Month--;
      }
   }
   Make_Calendar(Selected_Year, Selected_Month);
   document.when.month.selectedIndex = Selected_Month;
   document.when.year.value = Selected_Year;
}

</script>

<div id=NavBar style="position:relative;width:286px;top:5px;" align="left">
<form name="when"><table>
<tr>
   <td><input type="button" value="<-- Last" onClick="Skip('-')"></td>
   <td> </td>
   <td><select name="month" onChange="On_Month()">

<script language="JavaScript1.2">
if (ie4||ns6){
   for (j=0;j<Month_Label.length;j++) {
      document.writeln('<option value=' + j + '>' + Month_Label[j]);
   }
}
</script>

       </select>
   </td>
   <td><input type="text" name="year" size=4 maxlength=4 onKeyPress="return Check_Nums()" onKeyUp="On_Year()"></td>
   <td> </td>
   <td><input type="button" value="Next -->" onClick="Skip('+')"></td>
</tr></table></form></div>
<div id=Calendar style="position:relative;width:238px;top:-2px;" align="left"></div>

Par GloriaV le 17 Janvier 2017 à 12:45

Fondo, bordes, color de texto para contenido de los modulos.

.module_contenu_block
{ background-color: #;
    color: #000;
    line-height:6.0em;
    padding: 20px 20px 20px 20px;
    box-shadow: 0px 0px 5px #000;
    border-radius: 10px;
    border: 4px double #fff;
    background-image: url('http:6gif');}
 .module_contenu_block 
 a:hover
  {line-height:6.0em;
  border-radius: 5px;
  border: 1px dotted #fff;
}

Par GloriaV le 20 Janvier 2017 à 12:59

Bordes y márgenes

Éste es un párrafo sin margen.

<p style="background-color: #99ccff; margin: 0;"><span style="color: #000000;">Éste es un párrafo sin margen.</span></p>

Éste es un párrafo con margin:20px.

<p style="background-color: #99ccff; margin: 20px;"><span style="color: #000000;">Éste es un párrafo con margin:20px.</span></p&gt

Éste es un párrafo con margin:20px y padding:10px.

<p style="background-color: #99ccff; margin: 20px; padding: 10px;"><span style="color: #000000;">Éste es un párrafo con margin:20px y padding:10px.</span></p>

Éste es un párrafo con margin:20px, padding:10px y border: cyan 4px inset

<p style="background-color: #99ccff; margin: 20px; padding: 10px; border: cyan 4px inset;"><span style="color: #000000;">Éste es un párrafo con margin:20px, padding:10px y border: <span style="color: #000000;">cyan</span> 4px inset</span></p>

Éste es un párrafo con margin-right:25%.

<p style="background-color: #99ccff; margin-right: 25%;"><span style="color: #000000;">Éste es un párrafo con margin-right:25%.</span></p>
Par GloriaV le 10 Février 2017 à 17:17
Original Hover

transition-timing-function
Define el ritmo de la transición: a saltos, lenta al principio y más rápida al final, etcétera. Resultará familiar a las personas que han trabajado con Flash, Premiere, After Efects o cualquier otro programa en el que se manejen keyframes. Los principales valores que puede tener son:
linear: lineal.
ease: lento al principio, luego rápido y finalmente lento.
ease-in: muy lento al principio y muy rápido al final.
ease-out: muy rápido al principio y muy lento al final.
ease-in-out: lento al principio, rápido entremedias y lento al final.
steps (nº): por pasos, entre paréntesis se indica el número de saltos que debe dar.
cubic-bezier (n,n,n,n): definiendo los puntos de una curva bleizer.

Sintaxis alternativa

Estos cuatro parámetros se pueden escribir también por separado:

a { transition-property: text-decoration; transition-duration: 0.8s; transition-timing-function: linear; transition-delay: 0.2s; }

Cada parámetro es:

transition-poperty: propiedad a la que se le va a aplicar el efecto de transición. Cualquier propiedad CSS es válida: width, height, color, border, etc.

transition-duration: duración del efecto. Puede ser en segundos (s) o milisegundos (ms).

trasition-timing-function: define la curva de velocidad a la que se produce el efecto. Puede ser:

ease: este es el valor por defecto. Tiene un comienzo lento, luego rápido y termina de nuevo lentamente. Es equivalente a cubic-bezier(0.25,0.1,0.25,1).

linear: la misma velocidad durante toda la duración de la transición. Equivalente a cubic-bezier(0,0,1,1).

ease-in: efecto de transición con comienzo lento. Equivalente a cubic-bezier(0.42,0,1,1).

ease-out: efecto de transición con comienzo rápido y final lento. Equivalente a cubic-bezier(0,0,0.58,1).

ease-in-out: efecto de transición con comienzo y final lento; más rápido en medio. Equivalente a cubic-bezier(0.42,0,0.58,1).

cubic-bezier(n,n,n,n): define tus propios valores para la curva de Bezier. Cada valor es entre 0 y 1.

initial: establece esta propiedad a su valor por defecto.

inherit: hereda esta propiedad del elemento padre.

transition-delay: retraso en el comienzo de la transición. Puede ser en segundos (s) o milisegundos (ms).

transition-timing-function y transition-delay se pueden omitir. En este caso se tomará el valor ease y 0 respectivamente. Por ejemplo:

a { transition: text-decoration 0.8s; }

Además, se pueden especificar varias transiciones a la vez separando el grupo de parámetros por una coma:

a { transition: text-decoration 0.8s, color 1s, font-weight 0.5s ease-out 0.1s; }

Y también se puede aplicar a todas las propiedades CSS del elemento (en el siguiente ejemplo el cambio de cualquier propiedad de estilo del elemento a tendría una transición de 0.8s):

a { transition: all 0.8s; }

Compatilidad navegadores

IE soporta la propiedad transition desde la versión 10; olvídate de IE 9 y versiones anteriores. En los demás navegadores es soportada desde versiones tempranas si se añaden los prefijos propios de cada uno. La versión de transition con mayor compatibilidad sería, por ejemplo:

.ejemplo { /*Chrome, Safari*/ -webkit-transition: width 8ms linear 1s; /*Firefox*/ -moz-transition: width 8ms linear 1s; /*Opera*/ -o-transition: width 8ms linear 1s; /*Standard*/ transition: width 8ms linear 1s; }

Aplicación

Resumiendo, para aplicar transition hay que seguir estos pasos:

Definir el estilo básico de un elemento

Definir un estilo diferente para algunas acciones, generalmente :hover, :focus y similares.

Definir la regla transition como se ha explicado anteriormente.

Ejemplos

En el siguiente ejemplo se puede ver como, al poner el ratón encima de cada div, hay una transición de las propiedades width y background con la misma duración pero con diferente curva de velocidad:

Ejemplo: cambio de tamaño y de forma:

Efecto fade-in

Par GloriaV le 10 Février 2017 à 18:21

Fuente

Recuadro 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,

Recuadro 2

HTML 1

<div id="recuadro1"> <h3>Recuadro 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p>
</div> 

 HTML 2

<div id="recuadro2"> <h3>Recuadro 2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p>
</div>



CSS 1

<style type="text/css"> 

#recuadro1{
  border-radius: 20px;  
  background-color:#ddd;
  width:200px;
  padding:10px;
}

#recuadro1:hover{
  width:300px;
}

</style>

CSS 2

<style type="text/css"> 

#recuadro2{
  border-radius: 20px;  
  background-color:#ff0;
  width:200px;
  padding:10px;
  transition:width 1s;
  -moz-transition:width 1s;
  -ms-transition:width 1s;
  -webkit-transition:width 1s;
  -o-transition:width 1s;
}

#recuadro2:hover{
  width:300px;
}

body {
  background:white;
  margin:50px;
}

</style>

Par GloriaV le 25 Février 2017 à 15:38

HTML- http://html-color-codes.info/colors-from-image/

HTML

<p>HTML-&nbsp;<a href="" target="_blank" title="http://html-color-codes.info/colors-from-image/">Texto</a></p>

<META http-equiv=Page-Enter content=RevealTrans(Duration=4,Transition=23)>
 	<STYLE>A:hover {
 	Font-Stile: Edwardian Script ITC
 	}
 	</STYLE>
 	 
 	<STYLE type=text/css>BODY {
 	Color: #000; Font-Family: Edwardian Script ITC; font-size: 23px;  
 	}
 	A:link {
 	Cursor: ne-resize; Color: #1A4FE5; Text-Decoration: none
 	}
 	A:visited {
 	Cursor: ne-resize; Color: #1A4FE5; Text-Decoration: none
 	}
 	A:active {
 	Cursor: ne-resize; Color: #E619B5; Text-Decoration: none
 	}
 	A:hover {
 	Cursor: ne-resize; Color: #E619B5
 	}
 	</STYLE>
 	 
 	<STYLE fprolloverstyle>A:hover {
 	Font-Weight: bold
 	}
 	</STYLE>

Par GloriaV le 3 Mai 2017 à 11:23

Fuegos artificiales

<script type='text/javascript'>
 	//<![CDATA[
 	// Fuegos artificiales
 	var bits=200; // Número de puntos
 	var intensity=10; // Intensidad de la explosión (recomendado entre 3 y 10)
 	var speed=20; // Velocidad (a menor numero, mas rapido)
 	var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cc", "#f93");
 	// Colores de los fuegos
 	var dx, xpos, ypos, bangheight;
 	var Xpos=new Array();
 	var Ypos=new Array();
 	var dX=new Array();
 	var dY=new Array();
 	var decay=new Array();
 	var colour=0;
 	var swide=800;
 	var shigh=600;
 	function write_fire() {
 	var b, s;
 	b=document.createElement("div");
 	s=b.style;
 	s.position="absolute";
 	b.setAttribute("id", "bod");
 	document.body.appendChild(b);
 	set_scroll();
 	set_width();
 	b.appendChild(div("lg", 3, 4));
 	b.appendChild(div("tg", 2, 3));
 	for (var i=0; i<bits; i++) b.appendChild(div("bg"+i, 1, 1));
 	}
 	function div(id, w, h) {
 	var d=document.createElement("div");
 	d.style.position="absolute";
 	d.style.overflow="hidden";
 	d.style.width=w+"px";
 	d.style.height=h+"px";
 	d.setAttribute("id", id);
 	return (d);
 	}
 	function bang() {
 	var i, X, Y, Z, A=0;
 	for (i=0; i<bits; i++) {
 	X=Math.round(Xpos[i]);
 	Y=Math.round(Ypos[i]);
 	Z=document.getElementById("bg"+i).style;
 	if((X>=0)&&(X<swide)&&(Y>=0)&&(Y<shigh)) {
 	Z.left=X+"px";
 	Z.top=Y+"px";
 	}
 	if ((decay[i]-=1)>14) {
 	Z.width="3px";
 	Z.height="3px";
 	}
 	else if (decay[i]>7) {
 	Z.width="2px";
 	Z.height="2px";
 	}
 	else if (decay[i]>3) {
 	Z.width="1px";
 	Z.height="1px";
 	}
 	else if (++A) Z.visibility="hidden";
 	Xpos[i]+=dX[i];
 	Ypos[i]+=(dY[i]+=1.25/intensity);
 	}
 	if (A!=bits) setTimeout("bang()", speed);
 	}
 	function stepthrough() {
 	var i, Z;
 	var oldx=xpos;
 	var oldy=ypos;
 	xpos+=dx;
 	ypos-=4;
 	if (ypos<bangheight||xpos<0||xpos>=swide||ypos>=shigh) {
 	for (i=0; i<bits; i++) {
 	Xpos[i]=xpos;
 	Ypos[i]=ypos;
 	dY[i]=(Math.random()-0.5)*intensity;
 	dX[i]=(Math.random()-0.5)*(intensity-Math.abs(dY[i]))*1.25;
 	decay[i]=Math.floor((Math.random()*16)+16);
 	Z=document.getElementById("bg"+i).style;
 	Z.backgroundColor=colours[colour];
 	Z.visibility="visible";
 	}
 	bang();
 	launch();
 	}
 	document.getElementById("lg").style.left=xpos+"px";
 	document.getElementById("lg").style.top=ypos+"px";
 	document.getElementById("tg").style.left=oldx+"px";
 	document.getElementById("tg").style.top=oldy+"px";
 	}
 	function launch() {
 	colour=Math.floor(Math.random()*colours.length);
 	xpos=Math.round((0.5+Math.random())*swide*0.5);
 	ypos=shigh-5;
 	dx=(Math.random()-0.5)*4;
 	bangheight=Math.round((0.5+Math.random())*shigh*0.4);
 	document.getElementById("lg").style.backgroundColor=colours[colour];
 	document.getElementById("tg").style.backgroundColor=colours[colour];
 	}
 	window.onscroll=set_scroll;
 	function set_scroll() {
 	var sleft, sdown;
 	if (typeof(self.pageYOffset)=="number") {
 	sdown=self.pageYOffset;
 	sleft=self.pageXOffset;
 	}
 	else if (document.body.scrollTop || document.body.scrollLeft) {
 	sdown=document.body.scrollTop;
 	sleft=document.body.scrollLeft;
 	}
 	else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
 	sleft=document.documentElement.scrollLeft;
 	sdown=document.documentElement.scrollTop;
 	}
 	else {
 	sdown=0;
 	sleft=0;
 	}
 	var s=document.getElementById("bod").style;
 	s.top=sdown+"px";
 	s.left=sleft+"px";
 	}
 	window.onresize=set_width;
 	function set_width() {
 	if (typeof(self.innerWidth)=="number") {
 	swide=self.innerWidth;
 	shigh=self.innerHeight;
 	}
 	else if (document.documentElement && document.documentElement.clientWidth) {
 	swide=document.documentElement.clientWidth;
 	shigh=document.documentElement.clientHeight;
 	}
 	else if (document.body.clientWidth) {
 	swide=document.body.clientWidth;
 	shigh=document.body.clientHeight;
 	}
 	}
 	window.onload=function() { if (document.getElementById) {
 	set_width();
 	write_fire();
 	launch();
 	setInterval('stepthrough()', speed);
 	}}
 	//]]>
 	</script>

Par GloriaV le 4 Juillet 2017 à 16:31

Fireworks

<SCRIPT language=JavaScript1.2>
  
/*
 
Document firework script (By Kurt Gregg, kurt.grigg@virgin.net)
 
Modified/ perm. granted to Dynamic Drive to feature script in archive
 
For full source and 100's more DHTML scripts, visit http://dynamicdrive.com
 
*/
 
 
 
var ns=document.layers?1:0
 
var ie4=document.all?1:0
 
var ns6=document.getElementById&&!document.all?1:0
 
 
 
amount=100;
 
if (ns){
 
for (i=0; i < amount; i++)
 
document.write("<LAYER NAME='nsstars"+i+"' LEFT=0 TOP=0 BGCOLOR='#666' CLIP='0,0,1,1'></LAYER>");
 
}
 
else if (ie4||ns6){
 
document.write("<div id='ieCov' style='position:absolute;top:0px;left:0px'>");
 
document.write("<div style='position:relative'>");
 
for (i=0; i < amount; i++)
 
document.write("<div id='iestars"+i+"' style='position:absolute;top:0px;left:0px;width:1;height:1;background:#ffffff;font-size:1;z-index:10'></div>");
 
document.write("</div></div>");
 
}
 
Clrs=new Array('ffffff','7afeda','e7878c','7b0d0d','ff80ff','7d5549','5d85d7','3f7d6b','ffffff')
 
sClrs=new Array('ddceb1','ddceb1','ddceb1','ddceb1','ddceb1')
 
Xpos=300;
 
Ypos=150;
 
initialStarColor='00ff00';
 
step=5;
 
currStep=0;
 
explosionSize=120;
 
function Fireworks(){
 
var WinHeight=(ns||ns6)?window.innerHeight-100:window.document.body.clientHeight-100;
 
var WinWidth=(ns||ns6)?window.innerWidth-100:window.document.body.clientWidth-100;
 
var Yscroll=(ns||ns6)?window.pageYOffset:document.body.scrollTop;
 
for (i=0; i < amount; i++){
 
if (ie4||ns6)
 
var layer=ns6?document.getElementById("iestars"+i).style : eval("iestars"+i).style;
 
else if (ns)
 
var layer=document.layers["nsstars"+i]
 
var randCol=Math.round(Math.random()*8);
 
var randSz=Math.round(Math.random()*2);
 
layer.top = Ypos + explosionSize*Math.sin((currStep+i*5)/3)*Math.sin(currStep/100)
 
layer.left= Xpos + explosionSize*Math.cos((currStep+i*5)/3)*Math.sin(currStep/100)
 
if (currStep < 110){
 
 if (ns){layer.bgColor=initialStarColor;layer.clip.width=1;layer.clip.height=1}
 
 else{layer.background=initialStarColor;layer.width=1;layer.height=1;layer.fontSize=1}
 
 }
 
else{
 
 if (ns){layer.bgColor=Clrs[randCol];layer.clip.width=randSz;layer.clip.height=randSz}
 
 else{layer.background=Clrs[randCol];layer.width=randSz;layer.height=randSz;layer.fontSize=randSz}
 
 }
 
}
 
if (currStep > 220) 
 
{
 
 currStep=0;
 
 Ypos = 50+Math.round(Math.random()*WinHeight)+Yscroll;
 
 Xpos = 50+Math.round(Math.random()*WinWidth);
 
 for (i=0; i < sClrs.length; i++)
 
  {
 
  var newIcol=Math.round(Math.random()*i);
 
  }
 
initialStarColor=sClrs[newIcol];
 
explosionSize=Math.round(80*Math.random()+100);
 
}
 
currStep+=step;
 
setTimeout("Fireworks()",20);
 
}
 
Fireworks();
 
// -->
 
</SCRIPT>

1 2 3

Image Sprites Demo

Sintaxis alternativa

Compatilidad navegadores

Aplicación

Ejemplos

Ejemplo: cambio de tamaño y de forma:

Efecto fade-in

Recuadro 1

Recuadro 2