Blog personal de un mexicalense informático que hablará de Mexicali, Tecnologías, SEO, Humor, Fotografía, Diseño web, Juegos y un poco de su vida en Mxl.

15 trucos CSS 3 en divs, texto e imágenes

August 3rd, 2010 por danielmd 4 Comentarios »

Para todos aquellos a los que les guste el diseño web o tienen ganas de aprender, hoy les dejo algunos trucos de CSS3 que he aprendido gracias a muchos sitios que leo por Internet.

1.- Crear Div con esquinas redondeadas con CSS3:
redondear esquinas con css3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
div{ width:300px;height:90px;margin:0 auto;color:#333;background:#D9E7F0;padding-top:30px;
border:solid 4px #B1CDE0;
-moz-border-radius-topleft: 45px; /* Valores de 0 a 75 */
-moz-border-radius-topright:46px;
-moz-border-radius-bottomleft:75px;
-moz-border-radius-bottomright:75px;
-webkit-border-top-left-radius:45px;
-webkit-border-top-right-radius:46px;
-webkit-border-bottom-left-radius:75px;
-webkit-border-bottom-right-radius:75px;
border-top-left-radius:45px;
border-top-right-radius:46px;
border-bottom-left-radius:75px;
border-bottom-right-radius:75px;

2.- Div con gradientes CSS3, lineal y circular.
gradiente con css3
Gradiente lineal con CSS3

1
2
3
4
5
div{ width:300px;height:90px;margin:0 auto;color:#333;
border:solid 1px #333;
background:-moz-linear-gradient(73% 11% 177deg, #1128AA, #004EFF 64%);  /* firefox */
background:-webkit-gradient(linear, 80% 20%, 33% 14%, from(#3924D1), to(#4166FF)) /* chrome */
}

Gradiente circular con CSS3
crear gradiente circular con css3

1
2
3
4
5
div { width:300px;height:90px;margin:0 auto;color:#333;
border:solid 1px #333;
background:-moz-radial-gradient(51% 13% 314deg, #0000FF, #000043 71%);
background:-webkit-gradient(radial, 165 0, 0, 220 -257, 465, from(#0364CF), to(#000000));
}

Explicación detallada de moz-radial-gradient y linear.
Explicación detallada de webkit-gradient.
3.- Transparencias con CSS3 (en este caso se aplica a un DIV)
div transparente con css3

1
2
3
4
5
div { width:300px;height:90px;margin:0 auto;color:#333;
border:solid 1px #333;
background:#000;
opacity: 0.4; /* los valores van desde 0.1 hasta 1.0 */
}

4.- Rotar objetos con css3
girar un objeto con css

1
2
3
4
5
6
7
div { width:300px;height:90px;margin:0 auto;color:#333;
border:solid 1px #333;
background:#000;
-webkit-transform: rotate(180deg) ; /* los valores van desde el 0 al 360 */
-moz-transform: rotate(180deg) ;
-o-transform: rotate(180deg) ;
}

Continuar leyendo

Ravesound, Foam Party

July 29th, 2010 por danielmd Comentar »

Para todos a los que les gusten los raves, aquí les dejo un flayer de un evento que esta organizando un amigo de mi bro, el evento se llama Foam Party y va ser el próximo 7 de Agosto en la Mision Dragon.

El boleto va costar 30 pesos en preventa y 50 pesos en taquilla, supuestamente va haber una exposición de arte urbano  y musica en vivo.

Los boletos los venden en las tiendas Zaiko, tienda Vicious que esta en el tianguis el caballito y en el telcel de la plaza nuevo Mexicali que esta enfrente de una Guadalupana.

Pues ahí esta la info para quienes quieran ir a divertirse un rato la próxima semana.

raves mexicali

Video Hoobastank – Ghostbusters

July 26th, 2010 por danielmd 4 Comentarios »

Se acuerdan o conocen a este grupo llamado Hoobstank que cantan rolas como las de Crawling in the dark, The Reason, Inside of You y Running Away ?.

Si no los conocen les dejo este video que me paso una amiga, es un video en donde tocan su propia versión de la canción de los caza fantasmas,  el video tiene casi un año pero yo no lo había visto hasta el día de hoy, esta curada.

Hoobastank – Ghostbusters

YouTube Preview Image

Sitio nuevo de recetas de cocina

July 25th, 2010 por danielmd 13 Comentarios »

Hace unos días se me ocurrió hacer un sitio nuevo con alguna temática especifica, estuve pensando en varias temáticas y después de estar piense y piense me decidí por hacer un sitio de  recetas de cocina. Busque algunos nombres de dominio con ayuda de mi registrar name.com, pero casi todos los que quería ya estaban ocupados, para mi suerte ese día leí una noticia donde decía que ya estaban a la venta los dominios colombianos .CO. Como en name.com no había opción de comprar ese tipo de dominios (hasta el día de hoy), pues me fui a godaddy.com y lo compre ahí por 29.99 el día 20 pero hasta el día 21 me lo aprobaron.

Aun no les diré la dirección exacta del sitio porque aun no lo termino, pero aquí en esta entrada le iré dando seguimiento al desarrollo de esa web, por ahora esto es una especie de lista de lo que he hecho hasta el momento.

- El dia 20 de julio compre el dominio y registre las cuentas de analytics, twitter, feedburner, correo@dominio.co y la pagina de facebook par mandar actualizaciones ahí también.

- Ese mismo día me puse a buscar algunos themes de wordpress gratuitos para utilizarlo como framework y crear uno personalizado para no tener que empezar  de cero, el elegido fue uno llamado Trista,  lo primero que hice fue eliminar todas las imágenes que tenia y reemplazarlas por CSS, por lo que en los navegadores recientes se mira muy bien con bordes redondos y sombras, pero en los viejos como IE se mira todo cuadrado.

Les dejo el theme original y el modificado.

trista theme para wordpress
Continuar leyendo

El baile de la quebradita le queda a todas las canciones

July 24th, 2010 por danielmd 4 Comentarios »

O por lo menos eso fue lo que piensa un tipo que me encontré en un party ayer. Resulta que me fui de colado a una reunión de trabajadores del INEGI con unos amig@s que me invitaron. Y pues había un conjuntillo rockeron que estaba tocando la rola de Manuel Santillan el León (Fabulosos Cadillacs). Y en eso que un señor saca a bailar a una morra alias “La de rosa“, el Sr. la tomo de la cintura, tomo el control del baile y se puso a bailar bien sabroso acá tipo quebradita y repegando el chilorio, ya se imaginaran.

Tal ves piensen que nada que ver la quebradita con “Manuel Santillan”, pero hasta eso que el Sr. tenia bastante ritmo y no se miraba tan sarra, total que ellos y otra parejilla eran los únicos en “la pista de baile” y todo el mundo bien atento a la pareja del Sr y la de rosa, porque entre quebrada y quebrada había momentos en los que pensabas que iban a caerse, sobre todo porque parecía que el Sr. ya andaba pedo.

En fin, la canción siguió y se acercaba su final segundo a segundo, mis amig@s y yo estábamos viendo muy atentos con cara de la va quebrar, la va quebrar, y en eso que un amigo dijo antes que terminara la canción “falta que la quiebre”  y si!, el Sr toma de la cintura a la morra y la echa para atrás, la empieza a bajar poco a poco hasta que pierde el balance, la suelta y tooomala!!! que se le cae y se va de espalda contra el suelo como costal de papa, neta que nomas le falto poner la rodilla al Sr. para hacerle una quebradora de esas de la lucha libre.

Lo cura fue que en el tiempo en que la morra se le salio de las manos al Sr., como que pensó “Ya la cague, yo también me voy a tirar” y al final se cayeron los dos y ahí se quedaron un rato en el suelo, luego como que el Sr dijo, “de aquí soy” y la abrazaba y la sobaba ahí tirado en el piso, bien mamón porque a la morra la querían levantar pero ese wey andaba bien coqueton y  no la dejaba hasta que se la quitaron de sus garras.

Pensaran ustedes, después de eso seguramente ya nadie quiso bailar con el Sr., pero no!. Al contrario, prendió como a 2-3 doñas del party con su estilo único de todas se bailan como quebradita.

Y bueno, creo que este puede ser un ejemplo de lo que es bailar una rola con otro estilo de baile al de los demás.

YouTube Preview Image

Mario Bros 8 bits con CSS

July 15th, 2010 por danielmd Comentar »

mario bros en 8 bitsNo se si se acuerden, pero hace unos 2 meses hice un dibujo solo con HTML y CSS3 de un personaje que invente llamado “Sir culito”, si no se acuerdan pueden dar click en el nombre que deje arriba para que lo vean.

Bueno, para practicar un poco sobre algunos atributos de los DIV como los margin y los position, que a veces me hacen batallar en IE, decidí hacer otro dibujo, esta vez es un personaje muy conocido y que seguramente la mayoría conoce, Mario Bros, esta muy sencillo pero me gusto el resultado.

Esta vez el dibujo es muy cuadrado, así que se mirara bien en todos los navegadores, el único problema es que solo se mira idénticamente a la imagen que puse arriba en IE8,IE9, Firefox, Chrome y Opera, ya no probé mas porque son los únicos que tengo. En IE7,6,5 el Mario se mira como si estuviera metiéndose al tubo :P

Mario Bros 8 Bits CSS

Lo mejor del mundial después de que México quedo fuera

July 8th, 2010 por danielmd 2 Comentarios »

Después de que México quedara eliminado del mundial ante la selección de Argentina (por segunda vez consecutiva), esto ha sido lo único bueno que quedo en el mundial. :(


Ojala gane Holanda, mi pronostico para la final Holanda vs España es de 2-1 a favor de Holanda, Alemania queda en tercero y Uruguay en cuarto.