Como hacer texto con sombra con CSS

Hola! Hoy les voy a enseñar como hacer texto con sombra como en este post.
Primero necesitan un texto:

TEXTO

Que se hace con:
<div style="position: relative; font-size: 30px; font-family: Verdana;">TEXTO</div>
Y otro, de otro color:
TEXTO
Se hace con:
<span style="color: maroon; font-family: Verdana; font-size: 30px; position: absolute;">TEXTO</span>
Ahora a juntarlos, agregando esto:
<span style="color: maroon; font-family: Verdana; font-size: 30px; top: 2px; left: 2px;">TEXTO</span>
Queda:

TEXTO
  TEXTO

Y así es como se hace. Reemplazar "TEXTO" por lo que quieran!!
Hasta otro día!

Textos con sombra CSS

Esto es solo una demostración:

PRUEBA DE SOMBRA PRUEBA DE SOMBRA

El tutorial viene mañana...

CSS Shapes Border-radius

Hola! Hoy les voy a enseñar como hacer bordes redondeados con CSS, para ello necesitan la propiedad "Border-radius"
 Si ustedes quieren hacer un círculo (por ejemplo) de 100 píxeles de diámetro, primero tienen que hacer un cuadrado de 100 píxeles de diámetro!
Así:
<style>
.circulo {
   width: 100px;
   height: 100px;
   background-color: black;
}
</style>

Y después le tienen que decir que los bordes estén redondeados, así:

<style>
.circulo {
   width: 150px;
   height: 100px;
   background-color: black;
   border-radius: 50px;
}
</style>

Listo! Pero, por qué en "border-radius" puse "50px"? Por que tiene que ser la mitad de la longitud del diámetro!!!
Y si querés hacer un óvalo? Le agrandas la "width" a 150!!!

<style>
.ovalo {
   width: 150px;
   height: 100px;
   background-color: black;
   border-radius: 50px;
}
</style>

Y si querés que cada borde sea distinto? Fácil, le agregas distintas medidas:

<style>
.bordesdistintos {
   width: 150px;
   height: 100px;
   background-color: black;
   border-radius: 50px 10px 40px 30px;
}
</style>

Eso fue todo por hoy! Gracias por leer, ojalá lo hayan entendido!
Tengan un recagorrigodía

Día PI! Pi Day

Hoy es el día PI!!!! Ya saben, del número 3.14!!! Yo me sé 333 decimales del número PI, y son:

3,141592653589793238462643383279502884197169399375105820974944592307816406286208998628034825342117067982148086513282306647093844609550582231725359408128481117450284102701938521105559644622948959430381964428810975665933446128475648233786783165271201909145648566923460348610454326648213373607260249141273724587006606315588174881520920962

Genial, no? Todo de memoria!!! Bueno, como hoy es el día PI, les quería mostrar esto:
 El símbolo de PI
 π
 Y esto:
  CLICK (video)

Y esto:
http://pi.3.14159265358.org/
Se muestran 105.423 decimales (ciento cinco mil cuatrocientos veintitrés)

Y un dato curioso: Solamente con 38 decimales de pi (3.14159265358979323846264338327950288) se puede medir el diámetro del universo ovserbable, con un error de 1 milímetro!!!!!

Y si saben algo más, escribanlo en los comentarios :D

Ha nacido un nuevo blog

Mi amigo dumbledore me prestó su varita: (Pongan el mouse arriba y veran que hace magia! Excepto que tengan INTERNET EXPLORER)

Y me dijo que le haga un blog para él. Acá está su blog: http://elblogdedumbledore.blogspot.com/ Veanlo! Acá les explica de que se va a tratar el blog... BUEN DÍA!!

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!