Como hacer un juego de naves en CSS3 puro

Para ver en youtube clic aquí

(No olvides suscribirte)

Hacer juegos en CSS3 puro es teoricamente posible, pero es justo aclararle a los principiantes que

este no es el propósito de CSS3 por lo que hacerlo realmente se convierte en, un reto, un ejercicio interesante o una forma divertida de mostrar tus habilidades. En el tutorial de arriba haremos un juego de naves en CSS3 puro

Descargas

Imágenes usadas en el tutorial

Codigo fuente finalizado

Enlaces sociales

Facebook

Twitter

Como usar la notifications API en Javascript

Para ver en youtube clic aquí
(No olvides suscribirte)

Notifications API

   Las notificaciones se han convertido en un elemento ubicuo de cualquier aplicación web, mostrarlas nos permite tener un contacto mas directo y personalizado con nuestros usuarios. En este tutorial aprenderemos lo básico necesario para mostrar notificaciones en nuestro sitio web

Descargas

  Descarga el código fuente del tutorial

  

Que es y como usar la Web Animations API

Para ver en youtube clic aquí

(No olvides suscribirte)

  En este nuevo tutorial del canal, aprenderemos a utilizar la Web Animations API, que nos permite animar los elementos del DOM, accediendo a las mismas características disponibles en las animaciones CSS3, esto se logra combinando el modelo de tiempo con el modelo de animación. Como veremos la sintaxis a utilizar recuerda mucho a los "@Keyframes" usados en CSS3, pero la potencia de un lenguaje de programación nos permitirá un mayor control de la misma

¿Que diferencia tiene con requestAnimationFrame?

  Esa es una buena pregunta, si te la estas haciendo felicidades, básicamente Web Animations API va de la mano con el DOM, por lo que sirve exclusivamente para animar elementos presentes en el DOM, no podremos usarla para animar pixeles dentro del Canvas.

  En el video de la próxima semana se hablará mas profundamente sobre esto así que te recomiendo pasarte por el canal y suscribirte

Descargas

Plantilla de inicio HTML

Código fuente completo del tutorial

Como usar Variables en CSS3

Para ver en youtube clic aquí

(No olvides suscribirte)

  Las variables CSS son entidades definidas por autores CSS que contienen valores específicos que se pueden volver a utilizar en un documento. Se establecen mediante la notación de propiedades personalizadas (por ejemplo, --main-color: black;) y se accede mediante la función var () (por ejemplo, color: var (- main-color);). Sitios web complejos tienen cantidades muy grandes de CSS, a menudo con una gran cantidad de valores repetidos. Por ejemplo, el mismo color se puede utilizar en cientos de lugares diferentes, que requieren búsqueda global y reemplazar si ese color necesita cambiar.

    Fuente MDN

Descargas

Descarga el código fuente hecho en el tutorial

Animación Cubo 3D CSS3

Para ver en Youtube clic aquí
Para ir a mi canal de Youtube clic aquí (No olvides Suscribirte)
Para ver más videos de CSS3 clic aquí

Animación de Cubo 3D rotando

    En el tutorial que acabas de ver aprenderás a hacer un efecto 3D bastante atractivo, con elementos "DIV" ubicados de forma estratégica lograremos crear un Cubo y le daremos una efecto de rotación en 3D.

  A continuación podrás descargar el código fuente, y más abajo te recomiendo que leas una explicación escrita acerca de la propiedad "perspective" ya que algunas cosas se me pudieron pasar por alto.

Acerca de los enlaces para descargar: Tienen un pequeño anuncio publicitario, patrocinado por "adfly" luego de hacer clic puedes undir en saltar publicidad para ir al código fuente. Este patrocinio me ayuda a poder producir este material, si la publicidad te parece muy molesta comentalo inmediatamente para yo buscar una mejor forma de trabajar, ya que ante todo está tu comodidad

Código fuente

Clic aquí para descargar el código fuente del tutorial

Perspectivas en CSS3

  Este es un concepto muy difícil de entender, ya en el video explique como funciona, ahora aquí voy a resaltar algunos detalles a tener en cuenta

1. La perspectiva se aplica al objeto PADRE no al objeto al que quieras modificar, esta es una de las cosas que mas confunde. Si quieres mostrar un "div" con efecto de perspectiva, deberás poner este "div" dentro de otro "div" padre, y es a este "div" al que se le va a pasar la propiedad "perspective"
2. Dentro del universo CSS las leyes de la física son parecidas pero no iguales, el valor en pixeles que se le pasa a la propiedad "perspective" significa "distancia" te estas alejando del objeto en cuestión, pero a diferencia del mundo real no se va a ver aparentemente mas pequeño, si no que siempre va a encajar en las medidas "width" y "height" que hayamos predefinido
3. "perspective-origin" con esta propiedad podemos definir desde donde los estamos viendo, se le pasan dos valores, un "x" y un "y", este va a ser nuestro "punto de vista"

Más información acerca de las perspectivas clic aquí para ir al sitio de MDN

  Esta explicación de aquí arriba me parece muy buena y está en español

Animación de Planeta y luna rotando CSS3

Para ver en youtube click aquí
Para ir a mi canal click aquí (No olvides suscribirte)
Para ver una lista de reproducción de tutoriales CSS3 click aquí

Sobre "linear"

  Este es uno de los valores que podemos definir en nuestra propiedad "animation", si queremos definir este parámetro de forma independiente debemos usar la propiedad "animation-timing-function" y podemos darle los siguientes valores :

• linear : La animación tiene la misma velocidad desde el inicio hasta el final
• ease  : Empieza lento, luego acelera la velocidad y antes del final, lento nuevamente
• ease-in : Comienza lentamente
• ease-out : Termina lentamente
• ease-in-out: Comienza y termina lentamente
• steps(int, start|end) : Permite personalizar, hasta cierto punto la velocidad, el primer parametro es la cantidad de intervalos y el segundo es donde ocurrirá el cambio de velocidad, al inicio (start) o al final (end)
• step-start : Equivalente a colocar steps(1, start)
• step-end : Equivalente a colocar steps(1, end);
• cubic-bezier(n,n,n,n) : Permite personalizar completamenta la función de tiempo, a continuación te enseño a establecer los valores

Función cubic-bezier

  Se le deben pasar 4 parámetros numéricos que describen una "curva de bezier" sigue este enlace para saber lo que es :

http://adf.ly/1cuY4q

  Definir sus parametros de forma manual es un poco dificil, por suerte tenemos este sitio web en donde podemos crear visualmente nustra propia curva :

http://adf.ly/1cuY6D

Acerca de los enlaces: Tienen un pequeño anuncio publicitario, esto lo hago para poder tener un mejor apoyo y así poder seguir produciendo más material como este, si te parecen muy molestos, escríbeme en los comentarios y yo buscaré una mejor forma de trabajar. Luego de hacer clic en ellos debes hacer clic en donde dice: "Saltar publicidad"

Código fuente del tutorial

.tierra {
   position: absolute;
   width: 100px;
   height: 100px;
   background-image: url('tierra.jpg');
   background-size: 200%;
   border-radius: 50%;
   top: 50px;
   left: 350px;
   animation: rotartierra 2s infinite linear;
  }
  .luna {
   position: absolute;
   width: 25px;
   height: 25px;
   background-image: url('luna.jpg');
   background-size: 200%;
   border-radius: 50%;
   top: 80px;
   left: 250px;
   animation: rotarluna 2s infinite linear, traslacion1 3s infinite linear, traslacion2 3s infinite linear;
  }

  @keyframes rotartierra {
  from {
   background-position: 0px;
  }
  to {
   background-position: 200px;
  }
  }

  @keyframes
  rotarluna {from {
   background-position: 0%;
  }
  to {
   background-position: 200%;
  }
  }

  @keyframes traslacion1 {
  0%{
  left: 250px;
  z-index: 2;
  }
  49%{
  z-index: 2;
  }
  50%{
  left: 550px;
  z-index: -3;
  }
  99%{
  z-index: -3;
  }
  100%{
  left: 250px;
  z-index: 2;
  }
  }

  @keyframes traslacion2{
  0%{
   width: 35px;
   height: 35px;
  }
  15%{
   width: 50px;
   height: 50px;
  }
  35%{
   width: 50px;
   height: 50px;
  }
  50%{
            width: 35px;
   height: 35px;
  }
  65%{
   width: 25px;
   height: 25px;
  }
  85%{
   width: 25px;
   height: 25px;
  }
  100%{
   width: 35px;
   height: 35px;
  }
  }

Imagenes para descargar

En el siguiente enlace podrás descargar las imágenes de la superficie lunar y el mapa mundi de la tierra, ambas están en un archivo de winrar así que solo tienes que descargar un archivo, dentro de él están las dos imágenes:

https://drive.google.com/open?id=0B1iGBZlMDbzbRjdPR0pnTjFBNTA 

Botones animados CSS3

Para ver en youtube click aquí
Para ver la lista de reproducción de CSS3, click aquí 
Dame like en facebook, click aquí

Código fuente del video

Parte CSS :

a {
  display : inline-block;
  background-color: black;
  padding: 15px;
  color: white;
  position: absolute;
  top: 20px;
  left: 20px;
  border-radius : 5px;
  text-decoration: none;
 }
 .anim2 {
  top: 100px;
 }
 .trans {
  top : 300px;
  transition: background-color 1s;
 }
 .anim3 {
  top: 200px;
 }
 
 @keyframes anim1 {
  0%{
   top: 20px;
  left: 20px;
  }
  25%{
   top: 10px;
  left: 20px;
  }
  50%{
   top: 30px;
  left: 10px;
  }
  100%{
   top: 20px;
  left: 30px;
  }
 }
 
 @keyframes anim2 {
  0%{
   background-color: black;
  }
  25%{
   background-color: red;
  }
  50%{
   background-color: blue;
  }
  100%{
   background-color: black;
  }
 }
 
 @keyframes anim3 {
  0%{
   padding : 15px;
  }
  50%{
   padding : 8px;
  }
  100%{
   padding : 15px;
  }
 }
 .anim1:hover {
  animation : anim1 1s infinite;
 }
 .anim2:hover {
  animation-name: anim2;
  animation-duration: 1s;
  animation-iteration-count : infinite;
 }
 
 .anim3:hover {
  animation : anim3 1s infinite;
 }
 .trans:hover {
  background-color: red;
 }

Parte HTML :

<a href="#" class="anim1" onclick="alert('hola');">Boton1</a>
<a href="#" class="anim2" onclick="alert('hola');">Boton2</a>
<a href="#" class="anim3" onclick="alert('hola');">Boton3</a>
<a href="#" class="trans" onclick="alert('hola');">Transisión</a>
  

Tooltips en CSS

Para ver en Youtube haz click aquí (Recuerda Suscribirte)
Para ver en Youtube (segundo video) haz click aquí 
Para ver más videos de CSS click aquí
Dame like en facebook, click aquí

¿Que es un "Tooltip" ?

 Los tooltip son usados para mostrar información extra acerca de un elemento, justo cuando el usuario pasa el mouse por encima. Los podemos ver como una forma mas moderna del antiguo atributo "alt", para los que no lo saben, anteriormente este atributo nos permitía mostrar un texto cuando el usuario posaba el mouse encima, actualmente este atributo tiene otra funcionalidad totalmente diferente.

Tooltip de texto

  En el primer video (El segundo estará disponible mas tarde o mañana) les muestro como hacer un tooltip animado de texto, a continuación el código fuente :

La parte CSS :

<style type="text/css">

.tooltip {

background-color: black;

color: white;

padding : 5px;

position: absolute;

border-radius: 5px;

top: 15px;

visibility: hidden;

transition: opacity 1s, visibility 1s, top 1s;

opacity: 0;

}

.tooltip::after {

content: " ";

position: absolute;

top: 100%;

left: 50%;

border-style: solid;

border-width: 5px;

border-color: black transparent transparent transparent;

}

.txt:hover + .tooltip {

visibility: visible;

opacity: 1;

top: 10px;

}

</style>

El HTML:

<br>

<br>

<span class="txt">mi texto</span>

<div class="tooltip">

Información

</div>

  Las etiquetas <br> las coloco para que "mi texto" no quede muy arriba y poder colocar el tooltip arriba de este

Tooltip con imagenes

  En el segundo video, les enseño también a crear un toolttip, pero ahora este no esta compuesto de texto sino de imágenes.

EL CSS :

<style type="text/css">

.tooltip img{

width: 350px;

box-shadow: 5px 5px 10px black;

}

.nav {

list-style-type: none;

margin: 0;

padding: 0;

}

.tooltip {

position : absolute;

visibility: hidden;

opacity: 0;

transition : opacity 1s, visibility 1s;

}

.hori {

display: inline-block;

}

.hori a{

display: block;

padding: 8px;

color: white;

background-color: gray;

text-decoration: none;

}

.hori:hover a{

background-color: black;

}

.hori:hover .tooltip{

visibility: visible;

opacity: 1;

}

</style>

El html :

<ul class="nav">

<li class="hori">

<a href="#">Cuzco</a>

<div class="tooltip">

<img src="Cuzco.jpg" />

</div>

</li>

<li class="hori">

<a href="#">Louvre</a>

<div class="tooltip">

<img src="Louvre.jpg" />

</div>

</li>

<li class="hori">

<a href="#">El puente de la torre</a>

<div class="tooltip">

<img src="Puentetorre.jpg" />

</div>

</li>

<li class="hori">

<a href="#">Venecia</a>

<div class="tooltip">

<img src="Venecia.jpg" />

</div>

</li>

</ul>

  

  Si te gustó este tutorial recuerda suscribirte a mi canal de Youtube y darme like en Facebook