CSS Shapes Transiciones

Hola! Hoy les voy a enseñar como hacer que las figuras cambien de forma así: (pongan el mouse encima de la figura)

Para ello necesitan tener una figura, en este caso un cuadrado así:

Y eso se logra con este texto:
<style>
.cuadrado {
   height: 30px;
   width: 30px;
   border: solid 1px grey;
}
</style>
<div class="cuadrado"></div>

Ahora, necesitan una figura a la que se transforme. Yo quiero que se transforme a un rectángulo así:

Pero, si yo quiero que el cuadrado se transforme en rectangulo, solamente le tengo que decir que el ancho se agrande (ancho = width).

<style>
.cuadrado:hover {
   width: 60px;
}
</style>

¿Por qué dice "cuadrado:hover"?
"Hover" significa "cuando-pones-el-mouse-encima"
Y le dije que cambie el ancho a 60 píxeles.
Queda así:

Pero... ¿por que es tan "duro"? Por que falta decirle que se agrande de a poco, y no de golpe! Eso se hace agregando esto:

-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;

Al texto!!! Nos queda:


<style>
.cuadrado {
   height: 30px;
   width: 30px;
   border: solid 1px grey;

-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;

}

.cuadrado:hover {
   width: 60px;
}

</style>
<div class="cuadrado"></div>

Y el resultado:

Ahora solo hay que seguir probando!!!

Introducción a las CSS shapes

Lo primero que tienen que aprender es cómo se forma una figura de CSS:


<style>
texto, muucho texto
</style>

El "texto, muucho texto" es esto:

.triangulo {
   border-color: transparent transparent red transparent;
   border-width: 0px 30px 30px 30px;
   border-style: solid;
   height: 0px;
   width: 0px;
}

Ahora vamos a analizarlo:
.triangulo <--- el nombre de la figura, le podés poner "AAA" si querés!
 { <--- el corchete de apertura, obligatorio


   border-color: transparent transparent red transparent;
   border-width: 0px 30px 30px 30px;                               <------ Las propiedades, dicen como va a ser la
   border-style: solid;                                                                      figura, en este caso un triángulo
   height: 0px;
   width: 0px;

} <--- corchete de "cerramiento", como yo le digo. Obligatorio

Bueno, en total nos queda:
<style>

.triangulo {
   border-color: transparent transparent red transparent;
   border-width: 0px 30px 30px 30px;
   border-style: solid;
   height: 0px;
   width: 0px;
}
</style>

Todo eso es solo para describir la figura: Un triángulo isóceles!!!
Ahora viene la parte de INSERTAR la figura! Le decís donde querés que esté... no se asusten, es fácil!

<div class="triangulo"></div>

Que es eso? Esto:

<div <--- El comienzo de la etiqueta "DIV"

class="triangulo" <--- Le decís que querés que sea todo lo que escribimos antes. Si en todo el texto de antes, donde dice "triangulo" pones "cacasfd", ahora acá tenés que escribir "class="cacasfd"

> <--- Cierra el comienzo de la etiqueta "DIV"

  <--- Nada, ahi dentro puede ir un texto, pero en este caso no.

</div> <--- El final de la etiqueta "DIV"

Bueno, ahora solo hay que crear un gadget llamado "HTML/JAVASCRIPT", y escribir toodo, o sea:

<style>

.triangulo {
   border-color: transparent transparent red transparent;
   border-width: 0px 30px 30px 30px;
   border-style: solid;
}
</style>


<div class="triangulo"></div>

El resultado:

Espero que hayan entendido!! La semana que viene, o mañana viene como hacer que se transformen!!
Hasta mañana, u otro día, quien sabe!

CSS Shapes

Bueno, estas son las figuras de CSS: Pongan el mouse sobre el círculo o sobre el triángulo. Todo eso lo hice solo con texto!!! Para más información vean: Esto y Esto

Espero que les haya gustado

Un reto de códigos...fácil Variación de llamame36

Bueno, el método de cifrado consiste en:

Elegir una clave (en este ejemplo voy a usar "RICH_VALV")
Armar un abecedario con esa clave, primero, a la clave se la hace un proceso que elimina todas las letras repetidas:
RICH_VAL (Ahora no se repite ninguna letra)
Luego, se le agrega el "abececlave" (ABCDEFGHIJJKLMNOPQRSTUVWXYZ_123456789), pero sin las letras que ya están en la clave:
Y nos queda el abececlave final:
RICH_VALBDEFGJKMNOPQSTUWXYZ_1234567890

Luego se escribe el abececlave final al revéz:

0987654321ZYXWUTSQPONMKJGFEDCBLAV_HCIR

Y se le agrega el otro, arriba y queda:
1) 0987654321ZYXWUTSQPONMKJGFEDCBLAV_HCIR
2) RICH_VALBDEFGJKMNOPQSTUWXYZ_1234567890

Ahora, el mensaje a cifrar es "Me voy a china"
El mensaje se transforma a "ME_VOY_A_CHINA"

Y se sustituye primero la "M", buscamos la M en el primer abececlave, y miramos abajo a ver que letra es. En este caso: T
Y así con todas las letras, nos queda:
TZ65QF646879S4
Para más seguridad se puede escribir en columnas:
TF7
Z69
64S
564
Q8

Y se lee en filas:
TF7Z6964S564Q8

Y PARA MAS SEGURIDAD:

Se reemplazan las letras por números:
T F Z S Q
4 1  5  3 2
La primera en el abecedario (normal, abcdefghijklmnopqrstuvwxyz) de las que está arriba es la F, la segunda la Q, tercera la S, cuarta T y quinta Z.
Luego se hace el cubo de cada número:
4= 64
1= 1
5= 125
3= 27
2= 8

Se divide por 10:
64= 6R4
1=0R1
125=12R5
27=2R7
8=0R8
Y se vuelven a agregar al mensaje clave:
6R4 0R1 7 12R5 6964 2R7 564 0R8 8
Y se une:
6R40R1712R569642R75640R88 = Me voy a china

Bueno, ahora decifren este mensaje:
Solo está cifrado por los primeros 2, SIN hacer el proceso de "hacer el cubo, y dividir por 10":
XNZ4MTNZPMMQ49

Les doy el tiempo que quieran!
Tengan un 2ZKS día!!

Trucos Cubo Rubik Rubik's cube patterns

Saben armar el cubo rubik?
Si la respuesta es SI: Sigan leyendo
Si la respuesta es NO: Vayan a ver otra entrada


Bueno!!
Ahora, acá hay unos trucos geniales para el cubo rubik!!!
Si saben notacion completa, entonces... acá esta!:
Truco 1: R u2 U2 r2 R2 B2 r2 R2 u2 U2 F2 R'
Truco 2: R u2 U2 r2 R2 B2 r2 R2 u2 U2 F2 R' R u2 U2 r2 R2 B2 r2 R2 u2 U2 F2 R'

Eso es todo!!!
Si no saben notación ni nada por el estilo, pero tienen un cubo rubik (cubo mágico) pueden ver este video:
http://www.youtube.com/watch?v=wx49JuANCK8

PD: El video no es mío

ES TODO!!!
Que tengan un día recagorrigoerrotacobarrenicoecheisifiquisimo!!

Trollink de twitter

Este es el número 6.670.903.752.021.072.936.960 pero en letras:

Seis mil seiscientos setenta trillones novecientos tres mil setecientos cincuenta y dos billones veintiun mil setenta y dos millones novecientos treinta y seis mil novecientos sesenta.

Palíndromos! Mejor conocidos como "frases capicúas"

Un palíndromo es una frase que se lee igual de los dos lados. Ejemplos:

Roma la luz azul ama luz azul al amor
Sin anis
Reconocer
Sometemos
Alli por la tropa portado traído a ese paraje de maniobras una tipa como capitan usar boina me dejara pese a odiar toda tropa por tal ropilla
Si es nueve ve un seis
¿Subo tu auto o tu autobus?
Anita la gorda no toma, amotona droga latina!
La ruta nos aporto otro paso natural
A mama roma le aviva el amor a papa y a papa roma le aviva el amor a mama
 Se verla al revés
Yo soy augur uruguayo voy allá allá yo voy augur uruguayo soy
entre otros.

Yo los creo y me gusta crearlos! 2 de los que están arriba los creé yo! (los rojos)
Acá hay otros que yo creé:
Enil, no. Adan nada online!
Yo soy alguien que reconoce. Reuqneiugla yo soy!
Palindromo o mordni lap...
Frases... esas "a... se... se... sarf"
A! Ni tocinno! Creo o er con nicotina?
Etel libro orbillete
Adivina ya, nivida!
O yutares encargo o "gracne" sera tuyo.
Ogno perro yo rrepongo
La ruta na droga rto otro paso nos aporto otra gorda natural.
Palindrome emordnilap (que original :P)
Reconocemos some conocer!
Internet... ten, retni
Raluc ricardo, podra circular? (lo hice con mi nombre, si quieren uno con SU nombre, mandanme su nombre por mail o por twitter! mi mail: rickyvalvao@gmail.com)
Ras escribo o bir csesar
Yo vivo o vivo yo?
Eva, sometemos, adan, reconocer nada sometemos ave. Sometemos nada, adan sometemos! Adan, nada nada, adan. Sometemos nada, adan sometemos! Eva sometemos, adan, reconocer nada sometemos ave.

Como dije antes: SI QUIEREN UN PALÍNDROMO, mandenme un mail a rickyvalvao@gmail.com diciendo de que quieren que se trate el palíndromo, y yo voy a ver si lo logro ;)
Si no lo logro, les avisaré y les diré que me manden su nombre a ver si puedo hacer un palíndromo con su nombre.
Estoy deseando que no se llamen brhadaranyakopanishadvivekachudamani ;)

Tengan un buen dia, aid ne ubnu nagnet!