Atomo con animacion CSS3

ver el codigo utilizado

<div style="background-color: #3e3b66;
  background-image: -webkit-gradient(radial, 50%, 0, 50%, 100, color-stop(0%, #3e3b66), color-stop(100%, #000000));
  background-image: -webkit-radial-gradient(center, ellipse cover, #3e3b66 0%, #000000 100%);
  background-image: -moz-radial-gradient(center, ellipse cover, #3e3b66 0%, #000000 100%);
  background-image: -o-radial-gradient(center, ellipse cover, #3e3b66 0%, #000000 100%);
  background-image: radial-gradient(center, ellipse cover, #3e3b66 0%, #000000 100%);position: relative;height: 500px;width: 100%;">

<atom><div class="center"></div><div class="atomo1"><div></div></div><div class="atomo2"><div></div></div><div class="atomo3"><div></div></div></atom></div>

<style>
[class*="atomo"], .center {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}
atom {
  cursor: pointer;
}

[class*="atomo"] {
  animation: glow 3s linear infinite;
  border-radius: 50%;
  border: 0.6em solid rgba(255, 255, 255, 0.8);
  border-top: 1.5em solid rgba(255, 255, 255, 0.8);
  border-bottom: 1.5em solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.3);
  height: 30em;
  transition: 1s transform ease-in-out;
  width: 30em;
}
[class*="atomo"] div {
  animation: rotate 2s linear infinite;
  border-radius: 50%;
  height: 100%;
  position: relative;
  width: 100%;
}
[class*="atomo"] div:after {
  animation: squash 2s linear infinite;
  -webkit-transform: scale(3, 1);
  -moz-transform: scale(3, 1);
  -ms-transform: scale(3, 1);
  -o-transform: scale(3, 1);
  transform: scale(3, 1);
  border-radius: 50%;
  content: '';
  left: 50%;
  height: 3em;
  margin-left: -1.5em;
  opacity: 0.8;
  position: absolute;
  top: -1.2em;
  width: 3em;
}

.atomo1 {
  transform: rotate(120deg) scale(0.333, 1);
}
.atomo1 div:after {
  background: #2ecc71;
  box-shadow: 0 0 20px #2ecc71;
}
atom:hover .atomo1 {
  border: 0.6em solid rgba(255, 255, 255, 0.8);
  transform: rotate(0deg) scale(0.33333, 0.33333) perspective(600px) rotateX(60deg);
}
atom:hover .atomo1 div:after {
  animation: none;
  top: -1.6em;
  transform: scale(1, 1);
}

.atomo2 {
  transform: rotate(240deg) scale(0.333, 1);
}
.atomo2 div:after {
  background: #3498db;
  box-shadow: 0 0 20px #3498db;
}
atom:hover .atomo2 {
  border: 0.6em solid rgba(255, 255, 255, 0.8);
  transform: rotate(0deg) scale(0.66667, 0.66667) perspective(600px) rotateX(60deg);
}
atom:hover .atomo2 div:after {
  animation: none;
  top: -1.6em;
  transform: scale(1, 1);
}

.atomo3 {
  transform: rotate(360deg) scale(0.333, 1);
}
.atomo3 div:after {
  background: #e74c3c;
  box-shadow: 0 0 20px #e74c3c;
}
atom:hover .atomo3 {
  border: 0.6em solid rgba(255, 255, 255, 0.8);
  transform: rotate(0deg) scale(1, 1) perspective(600px) rotateX(60deg);
}
atom:hover .atomo3 div:after {
  animation: none;
  top: -1.6em;
  transform: scale(1, 1);
}
.center {
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  height: 3em;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.3);
  transition: 1s transform ease-in-out;
  width: 3em;
}
atom:hover .center {
  transform: translate(0, 0.5em);
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 0 rgba(255, 255, 255, 0.2), 0 0 10px rgba(255, 255, 255, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.3);
  }

  50% {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2), 0 0 30px rgba(255, 255, 255, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.3);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes squash {
  0%,50%, 100% {
    transform: scale(1, 1);
    top: -2.6em;
  }

  25%, 75% {
    transform: scale(2, 1);
    top: -1.2em;
  }
}
</style>

Girar imagenes con un click

COMO HACER QUE GIRE UNA IMAGEN CODIGO CSS CON JAVASCRIPT

<

img src="URL DE LA IMAGEN" id="girar"><script>

//<![CDATA[
$('#girar').on("click", function(e) {
  e.preventDefault();
  $('#girar').addClass('giro');

  var t1 = setTimeout(function() {
  $('#girar').removeClass('giro');
  }, 1000);
});
  //]]>
</script>
<style>
#girar {
  position: relative;cursor:pointer;
  -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
}

#girar.giro {
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
    zoom: 1;
}
</style>

© REDEANDO Blog 

Lista de CSS es muy útil y vital en el diseño web. Hay muchos usos de) Lista desordenada (como la navegación horizontal, vertical de navegación, la creación de una caja o cualquier tipo de lista. En este post te mostramos algunos métodos de listas CSS realmente útiles que puede utilizar para crear, lista vertical horizontal o cuadro de lista de CSS. puede descargar todos los métodos utilizados en este blog en un solo archivo comprimido.
Antes de crear cualquier cosa Vamos a ver cómo se utilizan listas de CSS:



 

Por cada lista aquí es el diseño HTML básico

<div id="the name of the id">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
<li> Item 4</li>
</ul>
</div>

Ahora vamos aplicar algunas propiedades CSS para convertirlo en una lista, 

que se utiliza para la navegación o simplemente una simple lista.

display: inline

La primera propery CSS que vamos a utilizar es en línea.  

Esta es la propiedad CSS display de forma predeterminada y  

generará una caja de línea. 

 No habrá descanso antes o después y fluyó como una caja de 

línea única. En palabras simples, se muestra en una línea, en 

lugar de dos líneas. 
Aquí está la CSS estamos aplicando la creación de la primera 

lista horizontal 

#horizontal_list {
 height: 20px;
 font-family: Helvetica, Arial, sans-serif;
 font-size: 18px;
 line-height: 1.45em;
 color: #8e9090;
}
#horizontal_list ul {
 margin: 0;
 padding: 0;

}
#horizontal_list ul li {
 display: inline;
 padding-left: 5px;
}

Así es como debe ser similar después de 

aplicar el id CSS = "horizontal_list" para el código HTML

lista Vertical 

Lista vertical son más fáciles de crear, pero le mostrará dos 

técnicas diferentes que son útiles. En primer lugar vamos a ver  

el resultado y el CSS:

/*-------------------Vertical List 1---------------------*/

#vertical_list_1 {
 margin-left: 30px;
}
#vertical_list_1 ul {
 margin: 0;
 padding: 0;
 font-family: Helvetica, Arial, sans-serif;
 font-size: 18px;
 font-style: normal;
 font-weight: normal;
 text-transform: normal;
 letter-spacing: normal;
 line-height: 1.45em;
 color: #8e9090;
}
#vertical_list_1 ul li {
 padding-left: 8px;
 margin-left: 0;
 list-style-image: url("bullet_green.png");
}
/*-------------------Vertical List 2---------------------*/

#vertical_list_2 {
 margin-left: 5px;
}
#vertical_list_2 ul {
 margin: 0;
 padding: 0;
 font-family: Helvetica, Arial, sans-serif;
 font-size: 18px;
 font-style: normal;
 font-weight: normal;
 text-transform: normal;
 letter-spacing: normal;
 line-height: 1.45em;
 color: #8e9090;
}
#vertical_list_2 ul li {
 padding-left: 20px;
 margin-left: 0;
 list-style-image: none;
 list-style-type: none;
 background: url("bullet_orange.png") no-repeat;
 background-position: 0 4px;
}

La diferencia aquí es que la imagen-list-style tiene 

una distancia por defecto de la imagen con el texto de 

lista y no se puede cambiar, además de dentro y fuera 

de valor. Considerando que, con el uso de antecedentes 

y background-position de la imagen puede ser movido de 

izquierda a valor justo (valor x), de arriba a abajo  

(valor de y). También hay algún otro valor, tales como: 

 arriba, abajo y más. Compruebe la especificación W3  

para todo el valor. 
Caja utilizando Lista CSS 

Lista de CSS también son útiles para la caja de la 

creación. Lo más común es la caja CSS se utiliza para 

el pie de página de los sitios web. El truco detrás de  

la creación de una caja está teniendo un ancho 

establecido y la altura de cada elemento <li>. También 

utilizamos desbordamiento: propiedad oculta por lo que

 cualquier texto no va a salir de la caja. Así que aquí está la CSS:

/*-------------- Verticle box -------------------*/
#vertical_list_box {
 margin-left: 5px;
}
#vertical_list_box ul {
 margin: 0;
 padding: 0;
 font-family: Helvetica, Arial, sans-serif;
 font-size: 18px;
 line-height: 1.45em;
 color: #8e9090;
}
#vertical_list_box ul li {
 display: inline-block;
 clear: none; /* no floating *?
 background: #e7f4f8;
 width: 280px;
 height: 200px;
 overflow: hidden; /* hide if the text is too long *?
 margin-left: 4px;
 padding: 4px;
 list-style-image: none;
 list-style-type: none;
 -moz-border-radius: 5px;
       -webkit-border-radius: 5px;

}

Los estilos adicionales están en el archivo incluido y así es como debe ser similar.

 

Son muchas más las técnicas que se pueden utilizar para crear listas hermosas. 

 

Telefono movil CSS 3D

Vamos a ver otro increible ejemplo de diseño con animacion 3D incluida utilizando solamente codigo CSS3. Como podeis observar, se trata de un telefono movil de ultima generacion que no para de girar sobre si mismo en el que, ademas podemos poner una imagen para que aparezca en pantalla de vez en cuando, en este caso he puesto como ejemplo una del logo principal de REDEANDO. Si te ha gustado y quieres insertarlo en tu pagina, copia el codigo que veras abajo. Sustituye la linea de color rojo por la direccion url de la imagen que desees que aparezca en la pantalla del movil.

Nota: Informacion Oculta 

Aqui les dejo el codigo Css para que su cel se mueva:

<div style="perspective: 1500px;padding: 0;margin: 0;background-size: cover;"><div class="telefono movil"><span class="back"></span>  <span class="sides">    <span class="left"></span>    <span class="right"></span>    <span class="top"></span>    <span class="bottom"></span>  </span><span class="corners">    <span class="bottom-left">      <span class="c c0"></span>      <span class="c c1"></span>      <span class="c c2"></span>      <span class="c c3"></span>      <span class="c c4"></span>      <span class="c c5"></span>      <span class="c c6"></span>      <span class="c c7"></span>      <span class="c c8"></span>      <span class="c c9"></span>    </span>    <span class="bottom-right">                          <span class="c c0"></span>      <span class="c c1"></span>      <span class="c c2"></span>      <span class="c c3"></span>      <span class="c c4"></span>      <span class="c c5"></span>      <span class="c c6"></span>      <span class="c c7"></span>      <span class="c c8"></span>      <span class="c c9"></span>    </span>    <span class="top-left">                          <span class="c c0"></span>      <span class="c c1"></span>      <span class="c c2"></span>      <span class="c c3"></span>      <span class="c c4"></span>      <span class="c c5"></span>      <span class="c c6"></span>      <span class="c c7"></span>      <span class="c c8"></span>      <span class="c c9"></span>    </span>    <span class="top-right">                          <span class="c c0"></span>      <span class="c c1"></span>      <span class="c c2"></span>      <span class="c c3"></span>      <span class="c c4"></span>      <span class="c c5"></span>      <span class="c c6"></span>      <span class="c c7"></span>      <span class="c c8"></span>      <span class="c c9"></span>    </span>  </span> <span class="screen"></span>  <span class="screen2">  </span>  <span class="front"></span></div></div><style>.telefono {  position: relative;  margin: 50px auto;  transform-origin: center;  transform-style: preserve-3d;  animation: 26s rotate ease infinite;}.telefono .front {  width: 100%;  height: 100%;  position: absolute;  top: 0;  left: 0;  background-position: center center;  background-repeat: no-repeat;  transform: rotateX(0deg) translateZ(10px);}.telefono .screen {  width: 290px;  height: 520px;  position: absolute;  top: 55px;  left: 14px;  background-position: center center;  background-repeat: no-repeat;  background-color: #222;  transform: rotateX(0deg) translateZ(9px);}.telefono .screen2 {  width: 290px;  height: 520px;  position: absolute;  top: 55px;  left: 14px;  overflow: hidden;  background-repeat: no-repeat;  transform: rotateX(0deg) translateZ(9px);  opacity: 0;  animation: 26s screen ease infinite;  background-color: #000000;  border-radius: 4px;    background-position: center center;  background-image: url(http://urldetuimagen);}.telefono .back {  width: 100%;  height: 100%;  position: absolute;  top: 0;  left: 0;  background-position: center center;  background-repeat: no-repeat;  background-color: #eee;  box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.1);  transform: rotateY(180deg) translateZ(10px);}.telefono .front,.telefono .back {  border-radius: 35px;}.telefono .sides span {  position: absolute;  background: #dddddd;}.telefono .sides .left {  transform: rotateY(90deg) translateZ(-10px) translateY(43px);  left: 0;}.telefono .sides .right {  transform: rotateY(-90deg) translateZ(-10px) translateY(43px);  right: 0;}.telefono .sides .top {  transform: rotateX(-90deg) rotateZ(-90deg) translateZ(-127px) translateX(0px) translateY(149px);  left: 0;  top: 0;}.telefono .sides .bottom {  transform: rotateX(-90deg) rotateZ(-90deg) translateZ(128px) translateX(0px) translateY(149px);  left: 0;  bottom: 0;}.telefono .corners {  width: 100%;  height: 100%;  position: absolute;}.telefono .corners .bottom-left {  position: absolute;  left: 1px;  bottom: 1px;  transform-style: preserve-3d;  transform: rotateY(-90deg) translateX(-10px);}.telefono .corners .bottom-right {  position: absolute;  right: 1px;  bottom: 1px;  transform-style: preserve-3d;  transform: rotateY(90deg) translateX(-10px);}.telefono .corners .top-right {  position: absolute;  right: 1px;  top: 1px;  transform-style: preserve-3d;  transform: rotateY(90deg) rotateX(90deg) translateX(-10px);}.telefono .corners .top-left {  position: absolute;  left: 1px;  top: 1px;  transform-style: preserve-3d;  transform: rotateY(-90deg) rotateX(90deg) translateX(-10px);}.telefono .corners .c {  position: absolute;  width: 20px;  height: 6px;  background-color: #dddddd;}.telefono .corners .c0 {  transform: translateY(-42px) translateZ(0px) rotateX(-3deg);  height: 16px;}.telefono .corners .c1 {  transform: translateY(-30px) translateZ(-1px) rotateX(-8deg);}.telefono .corners .c2 {  transform: translateY(-25px) translateZ(-2px) rotateX(-14deg);}.telefono .corners .c3 {  transform: translateY(-20px) translateZ(-4px) rotateX(-22deg);}.telefono .corners .c4 {  transform: translateY(-15px) translateZ(-7px) rotateX(-36deg);}.telefono .corners .c5 {  transform: translateY(-12px) translateZ(-10px) rotateX(-50deg);}.telefono .corners .c6 {  transform: translateY(-9px) translateZ(-14px) rotateX(-56deg);}.telefono .corners .c7 {  transform: translateY(-6px) translateZ(-19px) rotateX(-67deg);}.telefono .corners .c8 {  transform: translateY(-4px) translateZ(-24px) rotateX(-74deg);}.telefono .corners .c9 {  transform: translateY(-3px) translateZ(-29px) rotateX(-90deg);}.telefono .corners .top-left .c0,.telefono .corners .top-right .c0 {  transform: translateY(-7px) translateZ(-34px) rotateX(-88deg);}.telefono.movil {  width: 319px;  height: 658px;}.telefono.movil .front { border-radius: 35px;}.telefono.movil .sides span {  width: 20px;  height: 573px;}.telefono.movil .sides .top,.telefono.movil .sides .bottom {  height: 255px;}@keyframes rotate {  0% {    transform: rotateX(0) rotateY(0) rotateZ(0);  }  10% {    transform: rotateX(0) rotateY(0) rotateZ(0);  }  15% {    transform: rotateX(320deg) rotateY(0deg) rotateZ(10deg);  }  20% {    transform: rotateX(360deg) rotateY(360deg) rotateZ(0deg);  }  25% {    transform: rotateX(320deg) rotateY(320deg) rotateZ(-10deg);  }  30% {    transform: rotateX(360deg) rotateY(0deg) rotateZ(0deg);  }  40% {    transform: rotateX(390deg) rotateY(370deg) rotateZ(-92deg);  }  45% {    transform: rotateX(390deg) rotateY(370deg) rotateZ(-92deg);  }  55% {    transform: rotateX(390deg) rotateY(350deg) rotateZ(-92deg);  }  60% {    transform: rotateX(390deg) rotateY(350deg) rotateZ(-92deg);  }  70% {    transform: rotateX(-20deg) rotateY(-26deg);  }  75% {    transform: rotateX(-20deg) rotateY(-26deg);  }  85% {    transform: rotateX(20deg) rotateY(26deg);  }  95% {    transform: rotateX(20deg) rotateY(26deg);  }}@keyframes screen {  0% {    opacity: 0;  }  32% {    opacity: 0;  }  35% {    opacity: 1;    transform: rotateX(0deg) translateZ(11px);    box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);  }  99% {    opacity: 1;    transform: rotateX(0deg) translateZ(11px);    box-shadow: 0 0 12px rgba(255, 255, 255, 0.7);  }}.telefono.movil .front {  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAT8AAAKSCAYAAACkzNwGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3MkU1NTU0QzkwQ0VFMjExOUU3RDgxN0FERTkwRENBNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBNjEyMDBFNEYyODMxMUUyOTlBOTk5M0NENkU4ODRGRiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBNjEyMDBFM0YyODMxMUUyOTlBOTk5M0NENkU4ODRGRiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk5ODNFNDIxNTlDRkUyMTE4RUNCODU3OURDRjJFNjAyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjcyRTU1NTRDOTBDRUUyMTE5RTdEODE3QURFOTBEQ0E1Ii8+IDwvcmRmOkRlc2NyaXB0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H4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AHiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+gPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgB4mcTAOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AHiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+gPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB8gfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiB4gfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgB4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4geIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AeIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH6A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIHyB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AHiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiB4ifTQCIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIHyB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AHiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+gPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB8gfgDiByB+AOIHIH4A4gcgfgDiB1Av8RsbG2uy+YAK6ZiYmKhM/EZHR//e3d3d4D4AymnLli2xO38/c+ZMZeI3Pj6+9uTJk0+7K4Aye3pyr2/tiRMnSvomma6urqL3HbPZbFi5cuUrixYt6pnU5z4BLuAe39/ih8nwPdXf3x9OnTpVufgl3yCTCW1tbaGlpSU0Nja6h4ALYvJoMwwPD4ehoaEwMjJS8vfLlfoN4tBxcHAw+QVQK1zqAogfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+FWxXC4XOjo6bAhqUny+/YMPPph8pMDj2yYo7JprrgkbN25MfnBeeumlcPjwYRuFmrFixYqwadOm0NraGq6//vrw5ptvhiNHjtgw9vxmF1+l5s477wxPPvlkEr6jR4+GY8eO2TDUjFWrViU/vzF88ZVQ4se4jl/nTw2dnZ3P2Qz/s3jx4vDYY4+FW265JYngnj17wttvvx1ftdrGoSbcfPPN4dFHHw1NTU1h37594dVXXw3Lly9Pxjdr1qwJ8QVA7QGK3zRXX3112Lx5c3xx1iR2H374Yejt7Y3vVWLjUBPWrVsX7rvvvuRFhvv6+sI777yTvP7dDz/8EC655JJwxRVXhBtuuCG57U8//ZT67ZX6mV/cw7vtttvChg0bkh+agYGB5IcmvlIs1JK77ror+fjVV1+Fzz//POTf4Cf+B/7BBx8ke31xpBNv9+WXX6Z+e6V+5rd69epw9913J+E7ffp02LZtm/BR077++utw7jubxfWuXbtsHPH7UzwkiIe38YdjyZIl4fHHHw+XXnqpnwwQv/oXDwFef/31ZM8vzvy6u7vDddddZ8OA+NW/vXv3hp6ennDw4MHQ3NycXCMV54BxJgiIX107fvx42L59e/jmm2+SdRwOxzPA8ZkeQH3xqD5HPDO2c+fOcODAgfDwww+Hzs7O5DqpQ4cO2TjUhGeffdZGEL/i/fjjj2H//v3JtVEuCoX6U/KblgPUIjM/QPwAxA9A/ADED0D8AMQPQPwAxA9A/ADED0D8AMQPQPwAxA9A/ADmL7d+/XpbAUidzODgoFdyBsQPQPwAxA9A/ADED0D8AMQPQPwAxA+gkjy3d9L4+Li1dWrX4pdSvb29YceOHdbWqVynWcPWrVufS/MGWLp0aWhubg7t7e3W1qlbm/kBOOw187O2NvMTPzM/a2szPzM/Mz9razM/Mz8Ah71mftbWZn7iZ+ZnbW3mVxMzv+cnP6Z27mcGZG3ml86RX5z5xU/M/YBUxc/Mz8zH2swv1TO/jJmftbWZX1r2+vIzv/wXUjn3MwOyNvNLneeTAv5/5mfuB6Rqz29q/AQQSEX4xA8QPwEE0hI+8QPETwCBtITvfPETQKBuwyd+gPgJIJCW8M0lfgII1F345ho/AQTqKnzziZ8IAnURvWLjJ4BAzYev2PiJIFCz0VuI+IkgUHPRW8j4CSFQE8G7kPETQqBqgzfVfwUYAKoHpJTPsvocAAAAAElFTkSuQmCC");}</style>

Lata de Coca Cola con scroll y efecto 3D con CSS

Esto es un ejemplo de las maravillas que se pueden hacer con los estilos CSS. El diseñador Roman Cortes explica como realizo este efecto: "Con una combinación de las propiedades CSS1 background-attachment y background-position, se pueden crear mapas de desplazamiento y, mediante barras de scroll, estos mapas pueden moverse y aplicarse a diferentes partes de una textura (una imagen de fondo). Con los mapas de desplazamientos se pueden hacer una gran cantidad de efectos interesantes, pero la complejidad del mapa afecta directamente al tamaño del código HTML y CSS. Encontrar un ejemplo apropiado cuya tamaño de código no fuese muy grande pero que produjese un efecto interesante me llevó algo de tiempo. Tras pensar en reflejos de olas, distorsiones submarinas, efecto lupa, la Tierra rotando, finalmente encontré el mejor ejemplo justo encima de mi mesa: una lata de Cola-Cola (mi bebida favorita). Debido a la forma cilíndrica de la lata, el mapa de desplazamiento es sencillo con la proyección paralela que hice en el ejemplo, y por tanto el código es muy pequeño (menos de 5kb)."

Mueve la barra de desplazamiento par a ver el efecto.

Mueve el scroll aqui abajo o da click en este enlace

TecnoEstrés

 Si quieres saber mas checa el siguiente enlace

como conectar un base de datos para MySQL desde PHP

Conectarse a una base de datos MySql desde PHP es sencillo. En un pequeño ejemplo vamos a ver cómo hacerlo.

1- Creamos un primer archivo llamado por ejemplo “conexion.php”.

2- Incluimos en “conexion.php” el siguiente código.
1    <?
2    $link=mysql_connect("localhost", "usuario", "clave");
3    mysql_select_db("nombrebd",$link) OR DIE ("Error: No es posible establecer la conexión");
4    ?>

Localhost: Indíca a donde se conecta con la DB. Si la conexión es en el mismo servidor, este es el valor que debe ir. Si la conexión se da en otro servidor, debemos incluir la Ip del servidor. En este último caso, el servidor deberá tener las conexiones remotas abiertas.

Usuario: Es el usuario de la base de datos. En general lleva el siguiente formato usuariocpanel_usuariodb

Clave: Es la clave que se corresponde con ese usuario.

Nombrebd: Se corresponde con el nombre de la base de datos.

3- Finalmente para incluir la conexión en cualquier archivo desde el que querramos conectarnos, sólo se debe incluir el siguiente código.
1    <?
2    include("conexion.php");
3    ?>

Dia Diagram Editor

Dia Diagram Editor

Sofware dia

 

Visión general

Dia es un programa para dibujar diagramas de estructura.


Puedesdescargarlo gratis desde su página oficial ya que cuenta con la licencia GPL

"los mejores videos para adroid

CSS

CSS

Las hojas de estilo en cascada o (Cascading Style Sheets, o sus siglas CSS) hacen referencia a un lenguaje de hojas de estilos usado para describir la presentación semántica (el aspecto y formato) de un documento escrito en lenguaje de marcas. Su aplicación más común es dar estilo a páginas webs escritas en lenguaje HTML y XHTML, pero también puede ser aplicado a cualquier tipo de documentos XML, incluyendo SVG y XUL.

• Utilizando una hoja de estilo externa que estará vinculada a un documento a través del elemento <link>, el cual debe ir situado en la sección <head>.

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
  <html>
    <head>
      <title>Título</title>
      <link rel="stylesheet" type="text/css" href="http://www.w3.org/css/officeFloats.css" />
    </head>
    <body>
    .
    .
    .
    .
    </body>
  </html>
  

• Utilizando el elemento <style>, en el interior del documento al que se le quiere dar estilo, y que generalmente se situaría en la sección <head>. De esta forma los estilos serán reconocidos antes de que la página se cargue por completo.

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
  <html>
    <head>
      <title>hoja de estilo interna</title>
      <style type="text/css">
    
        body {
          padding-left: 11em;
          font-family: Georgia, "Times New Roman", serif;
          color: red;
          background-color: #d8da3d; 
        }
      
        h1 {
          font-family: Helvetica, Geneva, Arial, sans-serif;
        }
      
      </style>
    </head>
    <body>
      <h1>Aquí se aplicará el estilo de letra para el Título</h1>
    </body>
  </html>
  

• Utilizando estilos directamente sobre aquellos elementos que lo permiten a través del atributo <style> dentro de <body>. Pero este tipo de definición del estilo pierde las ventajas que ofrecen las hojas de estilo al mezclarse el contenido con la presentación.

Algunas normas básicas a la hora de crear una CSS son las siguientes:

• En el siguiente ejemplo, h1{color: red;}, el selector, <h1>, le dice al navegador la parte del documento que se verá afectada por esa regla. Los selectores pueden aparecer individualmente o agrupados, separándolos con comas:

  h1, h2, h3 {
    color: red;
  }
  

  o lo que es lo mismo

  h1 {color: red;}
  h2 {color: red;}
  h3 {color: red;}
  

• La propiedad, que en este caso sería color, especifica qué aspecto se va a cambiar. En este ejemplo la propiedad cambiada será el color. Las propiedades que se desean modificar en una CSS para un mismo selector pueden agruparse, pero será necesario separar cada una de ellas con un punto y coma.

  p {text-align:center;color:red}

  Normalmente se describe una propiedad por línea, de la siguiente manera:

  h1 {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",Times, serif;
    color: red;
    background-color: #d8da3d;
  }
  

• El valor, representado a la derecha de los dos puntos (:), establece el valor de la propiedad. Es importante recordar que si el valor está formado por más de una palabra, hay que ponerlo entre comillas.

  p {font-family: "sans serif";}