Como pueden observar, el cuadro muestra 4 bordes, 2 de ellos en 3D, lo que hace que se mire horrible!. Para solucionar este problema, en Firefox y Opera simplemente agregamos el atributo background-color:transparent; a los un iframe en nuestro archivo style.css (o como le llamen ustedes).

iframe{background-color:transparent;border: 0; overflow: 0;}

Esto solo funciona en Opera, Firefox, Chrome y Safari, pero en internet explorer, no. Así que tenemos que agregar estas propiedades para que en IE se quiten esos bordes horribles.

<iframe src="URL"  frameborder='0' marginwidth='0' marginheight ='0' border="0" scrolling="no"></iframe>

Ahora si, una ves agregadas las propiedades marginwidth, marginheight y frameborder, el resultado es el siguiente.

• marginwidth = Son los margenes izquierdo y derecho del iframe.
• marginheight = Son los margenes del top y bottom del iframe, o sea, el de arriba y el de abajo.
• frameborder = Con este se activan o desactivan los bordes, 1 y 0 son sus valores.
• scrolling = Con este se activa el scroll del iframe, Yes para activar y No para desactivar.
• border= Determina el ancho del borde en pixeles.

Y asi de facil, una ves mas le hemos pateado el trasero a Internet Explorer por sus reveldias :/.

1.- Crear Div con esquinas redondeadas 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 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

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)

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

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) ;
}

5.- Cambiar la escala de un Div con css3 (ideal para utilizar con un hover para hacer zoom)

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: scale(0.478, 0.613); /* El primer valor es en escala de X y el segundo de Y */
-moz-transform: scale(0.478, 0.613);  
-o-transform: scale(0.478, 0.613); 
}

6.-Cambiar perspectiva de un objeto con CSS3

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: skew(36deg, -164deg); /* El primer valor es para X y el segundo de Y los valores son de -180 al 180*/
-moz-transform: skew(36deg, -164deg);
-o-transform: skew(36deg, -164deg);
}

7.- Mover o trasladar objetos con CSS3. (esta no se va notar gráficamente así que simplemente pondré el código). Con esto podrás mover un objeto 300px a la derecha o izquierda o 300px arriba o abajo a partir del lugar en donde se encuentra.

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: translate(2px, 7px); /* Primer valor de X y el segundo de Y, ambos tienen valor desde -300 a 300px*/
-moz-transform: translate(2px, 7px);
-o-transform: translate(2px, 7px);
}

Si eres uno a los que no les gusta tener mucho código, puedes hacer una combinación de los 4 anteriores(7,6,5 y 4) de la siguiente forma.

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(28deg) scale(0.478) skew(-57deg) translate(17px);
-moz-transform: rotate(28deg) scale(0.478) skew(-57deg) translate(17px);
-o-transform: rotate(28deg) scale(0.478) skew(-57deg) translate(17px);
}

8.- Bordes degradados con css3 (en este caso es solo para mozilla firefox).

1
2
3
4
5
6
7
8

div {
width:300px;height:90px;margin:0 auto;color:#000;
border:solid 9px #333;
-moz-border-bottom-colors: #333 #444 #ccc #000;
-moz-border-top-colors:    #333 #444 #ccc #000;
-moz-border-left-colors:   #333 #039 #ccc;
-moz-border-right-colors:  #333 #039 #ccc;
}

Mas información sobre -moz-border-#-colors
9.- Colocar sombra a un div con CSS3.

1
2
3
4
5
6
7

div {
width:300px;height:90px;margin:0 auto;color:#000;
border:solid 1px #ddd;
-moz-box-shadow:7px 8px 2px #333;
-webkit-box-shadow:7px 8px 2px #333;
box-shadow:7px 8px 2px #333;
}

10.- Posibilidad de incrementar el tamaño de un Div( Hasta ahora solo funciona en Chrome y Safari).

1
2
3
4
5
6

div{
width:300px;height:90px;margin:0 auto;color:#000;
border:solid 1px #ddd;
resize: both; /*Activa resize para agrandar o disminuir el tamaño de un div*/
overflow: auto; /* Activa el scroll*/
}

Para colocar un limite en el incremento o decremento del tamaño se puede utilizar max-width, min-width, max-height y min-height, de esta forma un div crecerá o reducirá hasta donde especifiquemos.
Lo anterior también se puede aplicar en campos input y textareas.

11.- Texto con sombra en CSS3

SoyCachanilla.com

1

p{text-shadow:0px 1px 1px #000000; /* Primer valor indica la posición de la sombra en X y el segundo en Y, el tercer valor es el efecto blur de la sombra y por ultimo es el color de la sombra*/}

12.- Rotar texto con CSS 3

1
2
3
4
5
6

p{ height: 5em;line-height: 3em;color:#000;
-webkit-transform: rotate(90deg); /* los valores van del 0 al 360 */
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
writing-mode: bt-lr;
}

13.- Crear imagen transparente con CSS3 estilo rollover.
En el CSS utilizamos opacity combinado con a:hover, en mi caso yo lo probé con firefox e IE y funciono perfecto, en safari y chrome no, cada que pasemos el mouse por encima de la imagen se hará semi transparente.

1
2
3

img{border:0px;}
a:link img{opacity:0.4;filter:alpha(opacity=100);  -moz-opacity: .75; } /* El primero es CSS3, el segundo filter:alpha es solo para IE y el ultimo -moz es solo para firefox*/
a:hover img{opacity:0.4;filter:alpha(opacity=20);-moz-opacity: .30; }

HTML

1

<a href="http://twitter.com/danielmd"><img src="http://i27.tinypic.com/r6y0kx.jpg" alt="Imagen transparente con CSS3" /></a>

14.-Efecto mascara en imágenes con CSS 3 y gradientes (solo funciona en safari)

CSS

1

img{-webkit-border-radius: 10px; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));}

HTML

1

 <img src="http://i29.tinypic.com/2zi81uo.jpg" alt="Imagen transparente con CSS3" />

Mas efectos mask webkit

15.- Efecto hover a un Div.
Ya para terminar les dejo el siguiente código combinando algunos de los trucos de anteriores, se trata de un div que al pasar el mouse por arriba de el cambia su apariencia, su tamaño y su posición.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<!DOCTYPE html>
<html>
<head> 
<title> Efecto Hover en un div</title>
<style type="text/css">
<!--
body{font-family: verdana,serif;}
#contenido{margin:0 auto; padding:70px; text-align:center;}
.ejemplo{
width:300px;height:90px;margin:0 auto;color:#000;
border:solid 1px #ddd;
color:#333;
-moz-box-shadow:7px 8px 2px #333;
-webkit-box-shadow:7px 8px 2px #333;
box-shadow:7px 8px 2px #333;
}
.ejemplo:hover{
width:340px;height:100px;margin:0 auto;color:#000;
border:solid 1px #ddd;
background:#333;
color:#fff;
-webkit-transform: skew(36deg, -33deg);
-moz-transform: skew(36deg, -33deg);
-o-transform: skew(36deg, -33deg);
-moz-border-radius-topleft: 45px; 
-moz-border-radius-topright:46px;
-webkit-border-top-left-radius:45px;
-webkit-border-top-right-radius:46px;
border-top-left-radius:45px;
border-top-right-radius:46px;
}
.ejemplo p{ height: 5em;line-height: 3em;}
-->
</style>
</head>
<body>
<div id="contenido">
<div class="ejemplo">
<p>SoyCachanilla.com</p>
</div>
</div>
</body>
</html>

Y todavía hay muchos mas como el uso de animaciones sin javascript o flash, pero la verdad yo no los se utilizar muy bien.

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

Mario Bros 8 Bits CSS

Y bueno, si estas igual que yo y estas buscando una solución para eliminar este tipo de comentarios en wordpress(sin borrarlos o editarlos manualmente).
Por ejemplo:

Te recomiendo alguna de estas 3 soluciones que seguramente te ayudarán a evitar comentarios de ese tipo en tu blog.

Mata Mayúsculas

La primera es utilizar un pluging para wordpress llamado “Mata Mayúsculas” este me lo tope gracias a este post (Link) de Cristhian. Se trata de un plugin de wordpress que mediante programación PHP hace un reemplazo de cada comentario original y lo transforma a minúsculas.


Para utilizarlo solo debes subirlo a la carpeta de tus plugins mediante FTP o desde el mismo manejador de plugins de wordpress y activarlo para que empiece a funcionar.

Utilizarlo solo si: no sabes nada de programación, edición de themes de wordpress o si no recibes muchos comentarios en tu blog.

Desventajas: Este plugin transforma uno por uno los comentarios, lo que significa que hace varios llamados a tu servidor para transformarlos, por lo que gasta muchos recursos cuando tienes muchísimos comentarios.

Descargar: Mata Mayúsculas

Utilizando el método toLowerCase de JavaScript

La segunda opción es utilizar javascript y uno de sus métodos llamado toLowerCase, este método transforma un texto que contenga mayúsculas a minúsculas.

Para usarlo debemos copiar este código dentro de las etiquetas < head > y < /head > de nuestro archivo header.php.

<SCRIPT LANGUAGE="JavaScript">
function convierte_minusculas(field) {
    field.value = field.value.toLowerCase()
}
</SCRIPT>

Ahora abrimos nuestro archivo comments.php y agregamos el método para transformar a nuestro textarea.

 <textarea name="comment" cols="10" rows="5" tabindex="4" onChange="convierte_minusculas(this)" >Comenta</textarea>

Es rápido ya que la transformación se lleva a cabo al momento de enviar el mensaje y se guarda en la base de datos ya transformado en minúsculas.

Desventajas: Si el usuario tiene javascript desactivado no sirve esta opción porque no se ejecuta la transformación.

Esta fue mi fuente, yo la implemente para wordpress y utilice el método contrario nomas. Resetting a Text Object to Default Value

Utilizando CSS

Esta tercera opción es la mejor para mi y es la que he implementado en algunos de mis sitios. Se trata de una propiedad de algunos elementos HTML llamada text-transform.
Para utilizarla debemos identificar cual es el ID o CLASE de los comentarios en nuestro blog, por ejemplo en soycachanilla es
ol.commentlist li p la que se encarga de darle formato a los párrafos, abrimos nuestro archivo styles.css y agregamos “text-transform: lowercase;” que se encargara de transformar las mayúsculas en minúsculas de los comentarios.

ol.commentlist li p
{
text-transform: lowercase; 
font-family: helvetica,arial,sans-serif;
font-style: normal;
font-size: 12px;
}

Personalmente es la opción mas apropiada para hacer esta transformación. No consume recursos y la transformación se hace desde el navegador, no importa que el usuario escriba puras mayúsculas. CSS RULES!

Desventajas: Si no sabes editar tu theme batallaras un poco, pero no desesperes, es la mejor

Aquí pueden ver otros valores que tiene esta propiedadCSS text-transform Property, también se puede utilizar capitalize para que las mayúsculas iniciales de cada palabra queden en mayúscula y no se transformen.

Cualquier error u otra forma de hacerlo, me dicen

En este ejemplo utilizare listas “padre” <ul> </ul> que pueden tener “hijos” <li></li> y estos hijos a su ves pueden tener otro padre y ese padre puede tener mas hijos <li> y así consecutivamente, por eso se llaman listas anidadas.  El uso que se le puede dar a esto es en los menús, estos menús pueden tener subcategorías y esas subcategorías pueden tener mas subcategorías.

Ejemplo:

<ul class="ul">
    <li> Home
         <ul>
          <li>Sub 1 Home </li>
          <li>Sub 1 Home </li>
         </ul>
      </li>
  <li> Themes</li>
</ul>

Resultado:

• Home
  • Sub 1 Home
  • Sub 1 Home
• Themes

Como podrán observar la categoría Home tiene un submenú ul y de la misma forma se pueden ir agregando mas submenús.

Bien, ahora para darle formato CSS a estas listas debemos definir una clase que le de estilo al primer padre y a sus hijos (ul y li), el nombre de la lista es .ul.

.ul li {
	list-style:none;
	color:#02A5C8;
        background:#FC9;
	width:365px;
}

Y en el html asignamos la clase .ul a nuestra lista

<ul class="ul">
   <li>Home</li>
   <li>Contact</li>
   <li>About</li>
</ul>

Resultado:

Ahora, para darle color a los padres que estan dentro de los hijos del padre principal, debemos definirlo en nuestra hoja de estilos CSS de la siguiente forma y en orden.

.ul li {
	list-style:none;
	color:#02A5C8;
        background:#FC9;
	width:365px;
}
.ul li ul li{
	list-style:none;
	color:#333;
	background:#eaeed2;
	width:280px;
}

Si se dan cuenta .ul li el primer rectángulo y los siguientes ul li son el rectángulo verde.
Código HTML

<ul class="ul">
   <li>Home</li>
   <li>
    <ul>
    <li>Home 2</li>
    <li>Contact 2</li>
    <li>About 2</li>
    </ul>
   </li>
   <li>About</li>
</ul>

Resultado:

Si queremos una tercer lista anidada se agregaría una nueva clase agregando otro ul li para indicarle a nuestro navegador que cuando encuentre 3 listas anidadas a la tercera le aplique este formato.

.ul li ul li ul li{
	list-style:none;
	color:#fff;
	background:#BFE5FF;
	width:200px;
}

Ya para terminar les dejo el ejemplo con cuatro niveles que da como resultado el rectángulo de colores que puse al inicio. Tan solo guardan el código en un archivo html y lo abren con su navegador para que vean el resultado.

<HTML>
<HEAD>
 <TITLE>Listas de colores con CSS by danielmd soycachanilla.com</TITLE>
<style type="text/css">
.ul li {
	list-style:none;
	color:#02A5C8;
    background:#FC9;
	width:365px;
}
.ul li ul li{
	list-style:none;
	color:#333;
	background:#eaeed2;
	width:280px;
}
.ul li ul li ul li{
	list-style:none;
	color:#fff;
	background:#BFE5FF;
	width:200px;
}
.ul li ul li ul li ul li{
	list-style:none;
	color:#333;
	background:#FFC0C0;
	width:120px;
}
 
</style>
 
</HEAD>
<BODY>
<ul class="ul">
    <li> Home
         <ul>
          <li>Sub 1 Home </li>
          <li>Sub 1 Home </li>
            <li>
             <ul>
               <li>Sub 2 Home </li>
               <li>Sub 2 Home </li>
               <li>
                 <ul>
                   <li>Sub 3 Home </li>
                   <li>Sub 3 Home </li>
                 </ul>
               </li>
             </ul>
            </li>
         </ul>
      </li>
  <li> Themes</li>
</ul>
</BODY>
</HTML>

El resultado de usar este ejemplo es el siguiente:

Ahora si ustedes quieren dar otro formato a estas listas simplemente editan el CSS, yo lo hice de esta forma para que distinguiera cada sublista.

Y aquí termina este minitutorial, espero les sea de mucha utilidad

Hace un par de días leía un foro y me encontré un tema donde un morro pregunto que si como se podía dividir su blogroll en dos columnas, iba responderle como hacerlo pero alguien mas se me adelanto. Por ese motivo hoy decidí publicar lo que le iba responder, pero lo siguiente no solo sirve para dividir el blogroll, si no también para las tags, categorías y paginas, incluso sirve para paginas que no utilizan wordpress ya que se hace con CSS y listas html ul, li y divs.

Para empezar guarden el siguiente código en un archivo html y modifiquen las propiedades(medio lo explique para que le entiendan).

ejemplo.html

<html>
<head>
<title>Dividir categorías en 2</title>
<style type="text/css">
 
.divide { color:#FF8000; /*Color de las letras*/ }
 
.divide ul {
	width: 175px; /*ancho del cuadro ul*/
	height: 160px; /*alto del cuadro ul*/
	background:#333;/* fondo del ul */
	list-style-type:none; /*para quitar los estilos de la lista*/
	text-align:center; /*alineamos todo su contenido al centro del cuadro ul*/
	padding-left:5px; /*Esto separa 5 pixeles el contenido dentro del cuadro ul*/
	}
 
.divide li {
    background:#fff; /*fondo blanco de cada elemento li*/
	width:80px; /* es el ancho de las li para poner el texto */
	margin:10px 5px 0 0; /* son los margenes de li con respecto a ul*/
	padding:0 10px 0 5px; /* estos son las medidas dentro de cada elemento li (cuadro blanco)*/
	line-height:15px; /* esta es la separación de cada categoría hacia abajo*/
	float:left;
}
</style>
</head>
<body>
<div class="divide">
     <ul>
    <li>Categorias</li>
    <li>Categorias</li>
    <li>Categorias</li>
    <li>Categorias</li>
    <li>Categorias</li>
    <li>Categorias</li>
    <li>Categorias</li>
    <li>Categorias</li>
    <li>Categorias</li>
    <li>Categorias</li>
    <li>Categorias</li>
    <li>Categorias</li>
    </ul>
</div>
 
</body>
 
</html>

El resultado debe ser igual a este:

Como verán el resultado es bastante feo, pero utilice esos colores para que se den cuenta que es lo que se modifica al editar el CSS, a ustedes les toca dejarlo bonito, si quieren mas de una columna es cuestión de modificar el ancho del cuadro de los ul width: 175px;.

Ahora, para implementar ese código en las categorías, tags, paginas y links de wordpress, debemos copiar el contenido que esta dentro de las etiquetas < style > y < /style > y pegarlo dentro del archivo style.css de nuestro theme.
Hecho eso utilizaremos las funciones que llaman las listas de paginas, tags etc.. y las colocamos donde queremos que se vizualicen.

Para dividir en varias columnas las paginas de wordpress se hace así

<div class="divide">
	<ul>
 	<?php wp_list_pages(); ?>
  </ul>
</div>

Para dividir las categorías en varias columnas

<div class="divide">
	<ul>
	<?php wp_list_categories(); ?>
	</ul>
</div>

Para dividir las tags en varias columnas

<div class="divide">
  <ul>
  <?php wp_tag_cloud(); ?>
  </ul>
</div>

Para dividir los bookmarks, links , blogroll o como quieran llamarle

<div class="divide">
  <ul>
   <?php wp_list_bookmarks(); ?>
  </ul>
</div>

FIN!, espero les sea útil

1
2
3
4

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

Con esas propiedades definimos que esquina vamos a redondear y le colocamos la medida del radio: 5px, 10px, 15px o lo que queramos. Pero como no todo en la vida es tan fácil, resulta que estas propiedades no jalan todavía en los navegadores actuales y estos tienen “sus propias propiedades propias de ellos” :O!! Por ejemplo, para redondear bordes con CSS para firefox y todos sus hijos (seamonkey,mozilla etc..) necesitamos estas:

1
2
3
4
5

-moz-border-radius
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft

Para redondear esquinas con CSS para Chrome y Safari que utilizan esa onda del karatekit llamada webkit se utilizan estas:

1
2
3
4
5

-webkit-border-radius
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius

Para IE8 supuestamente existe -ms-border-radius, pero nel!! no jala y tienes que utilizar hacks o fixes como iepngfix.htc o border-radius.htc
Ejemplo bordes redondos para Firefox y sus hijos.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
 <title>Bordes redondos</title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
 <style type="text/css">
 body { text-align:center; }
.cajita {
width:200px;
padding:5px;
margin:0 auto 0 auto;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
background:#FF0000;
color:#fff;
text-align:left;
}
.cajita p{
padding 0px;
margin 0px;
background:#fff;
color:#000;
text-align:center;
}
 
</style>
</HEAD>
<BODY>
   <div class="cajita">
   <p>Titulo noticia</p>
   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged..
</div>
</BODY>
</HTML>

Resultado:

Para los demás navegadores(excepto IE) se hace de la misma forma, solo que debemos cambiar la propiedad -moz-border-radius-bottomright por las que sirven para los otros navegadores o simplemente agregar esas propiedades para que nuestra web se vea con bordes redondos en todos los navegadores no importa con cual se acceda.

Ahora, esta es la forma fea de crear bordes redondos a una web con IE(sin css), no importa si es ie6,ie7,ie8 etc..
Lo primero que tenemos que hacer es crear una imagen con los bordes ya dibujados, debe ser del mismo ancho que nuestra cajita y debe tener el mismo fondo para que no se note que es una imagen.
Por ejemplo:

Para esto vamos a ocupar 3 Divs, uno que sirva como contenedor, otro que es el que tiene la información y un tercero donde vamos a meter nuestra imagen que sirve de borde.
Este ejemplo esta hecho para que los bordes se vean en firefox, chrome, safari e ie.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
 <title>Bordes redondos</title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
 <style type="text/css">
 body { text-align:center; }
.cajita {
width:200px;
padding:5px;
margin:0 auto 0 auto;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
background:#FF0000;
color:#fff;
text-align:left;
}
.cajita p{
padding 0px;
margin 0px;
background:#fff;
color:#000;
text-align:center;
}
.bordeie8{
background:#FF0000;
}
</style>
</HEAD>
<BODY>
<div>
   <div class="cajita">
   <p>Titulo noticia</p>
   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged..
   </div>
  <!--[if IE ]> <div class"bordeie8">
   <img src="bottom.png" border="0">
   </div>
   <![endif]-->
</div>
</BODY>
</HTML>

Si se dan cuenta utilice una condición que solo reconocen los navegadores explorer < !--[if IE ]> < ![endif]--> esta condición significa que si el navegador con el que entro X persona es IE(cualquiera) mostrara un div que contiene dentro de el una imagen que es la que tiene los bordes redondos, si no es IE no hara nada y mostrara los bordes como se definieron en las propiedades de la clase cajita.
Este es el resultado en IE8

Comentarios?, por si no los hay y creen que entendieron todo, pss a ver quien puede hacer un circulo dentro de otro circulo con puro CSS .

Para hacer esto es muy sencillo, tan solo deben colocar este pedazo de código donde quieren que aparezca la imagen.

<?php if(is_category('CELULARES')) { ?>
<a href="http://rutadelacategoria.com/CELULARES"><img src="http://rutadelaimagen.com/img.png" tag="Siempre llenen este campo con un texto alterno" border="0"></a>
<?php }?>

En la primer linea preguntamos if/si la categoría es CELULARES, si lo es entonces coloca la imagen de la ruta que colocamos, si no es igual a esa categoría no hace nada. Si ustedes quieren cambiar la categoría solo deben reemplazar la palabra CELULARES por la categoría deseada.

Ahora un poco mas avanzado y combinado con mi tutorial de Colocar Imágenes Aleatorias

<?php if(is_category('CELULARES')) { ?>
<a href="http://rutadelacategoria.com/CELULARES"><img src="<?php bloginfo('template_url'); ?>/CELULARES/<?php $num=rand(1, 8); echo ''.$num; ?>.png" tag="Se asignara 1 de 8 imágenes posibles a la categoría de celulares" border="0"></a>
<?php }?>

El código de arriba dice que si la categoría es CELULARES pondrá una de entre 8 imágenes aleatorias contenidas en la carpeta CELULARES
bloginfo(‘template_url’) <---Nos lanza la ruta del blog hasta el theme que usamos ejemplo: miblog.com/wp-content/freshtheme y se agrega /CELULARES/ porque es una subcarpeta dentro de la carpeta del theme y quedaría así.
miblog.com/wp-content/freshtheme/CELULARES

$num=rand(1, 8 ) es el que se encarga de generar un número aleatorio desde el 1 hasta el 8 (obvio las imágenes se llamaran 1.png,2.png…. 8.png y debe haber 8, si no están las 8 puede marcar error)

Otra cosa que pueden hacer es que al momento de hacer el random establezcan limites para mostrar varias categorías con imagen, por ejemplo, si solo crean una carpeta de imágenes pueden decir que de la 1 a la 4 son imágenes de celulares, de la 5 a la 8 imágenes de tecnología, así al momento del random modifican por algo así.

 <?php if(is_category('CELULARES')) { ?>
<a href="http://google.com"><img src="<?php bloginfo('template_url'); ?>/IMAGENES/<?php $num=rand(1, 4); echo ''.$num; ?>.png" tag="se colocara una imagen aleatoria entre 1 y 4" border="0"></a>
<?php }?>
 
<?php if(is_category('tecnologia')) { ?>
<a href="http://google.com"><img src="<?php bloginfo('template_url'); ?>/IMAGENES/<?php $num=rand(5, 8); echo ''.$num; ?>.png" tag=" se colocara una imagen aleatoria entre 4 y 8" border="0"></a>
<?php }?>

Ahora que si quieren poner todas las categorías con imagen sin que se vea feo su theme pueden hacer algo como esto.
Tan solo copien este código y lo guardan en un archivo html para que vean como funciona, luego de eso reemplazan el contenido de cada div por el código necesario para colocar una imagen con link para cada categoría como se hizo arriba.

<HTML>
<HEAD>
 <TITLE>Slide Imagenes by Daniel de soycachanilla.com</TITLE>
</HEAD>
  <style>
.divslide
{
float: center;
position: relative;
overflow-x: scroll;
width: 720px;
height: 120px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 10px;
background-color: #000000;
 
}
.divslide .imagenes
{
float: left;
overflow-x: hidden;
overflow-y: hidden;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
width: 100px;
background-color: #0000FF;
height: 80px;
}
 </style>
<BODY>
 
<div class="divslide">
 
<div style="float: none; position: absolute; left: 0px;" class="imagenes">
<img src="http://i32.tinypic.com/2a6vw2w.jpg" tag=" TEXTO ALTERNATIVO A IMAGEN" border="0" height="80" width="100">
</div>
 
<div style="float: none; position: absolute; left: 120px;" class="imagenes">
<img src="http://i32.tinypic.com/2a6vw2w.jpg" tag=" TEXTO ALTERNATIVO A IMAGEN" border="0" height="80" width="100">
</div>
 
<div style="float: none; position: absolute; left: 240px;" class="imagenes">
<img src="http://i32.tinypic.com/2a6vw2w.jpg" tag=" TEXTO ALTERNATIVO A IMAGEN" border="0" height="80" width="100">
</div>
 
<div style="float: none; position: absolute; left: 360px;" class="imagenes">
<img src="http://i32.tinypic.com/2a6vw2w.jpg" tag=" TEXTO ALTERNATIVO A IMAGEN" border="0" height="80" width="100">
</div>
 
<div style="float: none; position: absolute; left: 480px;" class="imagenes">
<img src="http://i32.tinypic.com/2a6vw2w.jpg" tag=" TEXTO ALTERNATIVO A IMAGEN" border="0" height="80" width="100">
</div>
 
<div style="float: none; position: absolute; left: 600px;" class="imagenes">
<img src="http://i32.tinypic.com/2a6vw2w.jpg" tag=" TEXTO ALTERNATIVO A IMAGEN" border="0" height="80" width="100">
</div>
 
<div style="float: none; position: absolute; left: 720px;" class="imagenes">
<img src="http://i32.tinypic.com/2a6vw2w.jpg" tag=" TEXTO ALTERNATIVO A IMAGEN" border="0" height="80" width="100">
</div>
 
</div>
 
</BODY>
</HTML>

Así es como lo van a ver una ves implementado de esta manera.

Para usarlo en wordpress copian el contenido de < style > < / style> y lo guardan en el archivo style.css de su theme, y así ya pueden colocar los DIV del slide en cualquier parte de su blog y modificarlo a su gusto

Si algo no entendieron o quieren complementar algo me dicen, si me equivoque en algo también

Para quienes no sepan que es ie6 les informo, es el Internet Explorer en su versión 6 que viene con Windows XP, un explorador viejo que no cumple con los estándares w3c, es inseguro y es odiado por muchos diseñadores web. ¿Por que? pues porque actualmente existen muchos tipos de navegadores como lo son Firefox, Opera, Chrome,Safari,ie8 entre otros. Y que todos estos navegadores cumplen con la mayoría si no es que todos los estándares que propone la w3c que le hacen  la vida mas  fácil al diseñador  al momento de diseñar una web, una buena hoja de estilos CSS hace que tu página se vea muy bonita, acomodada como tu quieres y muy fácil de editar sin modificar casi nada para que funcione perfectamente en todos los navegadores actuales.  Pero, esta felicidad se acaba cuando te das cuenta que no solo tienes que dejar bonita tu página para los navegadores actuales, si no que tienes que regresarte en el tiempo y también tienes que adaptarla a versiones viejas del navegador ie6 porque  todavía lo utiliza mucha gente, sobre todo quienes tienen XP sin actualizar.

Esto hace que tengas que trabajar doble, pierdas tiempo y lo bonito que habías hecho lo tengas que volver hacer, solo y exclusivamente para ie6. Y la cosa es que tienes que hacerlo así, porque cada persona que entre a tu web puede ser un posible  cliente que no puede ser descartado y al entrar no se puede topar con un desastre que hace que no pueda visualizar correctamente la pagina y podría perder el interés en lo que ofreces.

Hace unos días estuve trabajando en una web de @anabarb que pase de un PSD(archivo de photoshop) a XHTML/CSS, hice la conversión del archivo y antes de entregar la primera versión probé la pagina con 4 Navegadores (ie8,Firefox,Chrome y Opera) la página se visualizaba muy bien en mi pc, pero @anabarb se topo con algunos errores porque su monitor era widescreen y el mio no, por eso no detecte esos errores.

Nuevamente me puse a corregir el css para que se visualizara bien en todos los navegadores y listo, entregue la versión 2 para que me la revisara y toma!! el cliente tenía instalado internet explorer 6 y 7 y Pwned!!. No había hecho pruebas con esa versión del ie porque ninguna de mis pc lo tiene instalado :S, la página se miraba mal gracias a que muchas de las propiedades de los elementos no las reconoce y pues no las tomaba en cuenta.

Y otra ves me puse a corregir, busque una victima con ie6 instalado en su compu y la agarre de beta tester , después de varias pruebas a la página se miraba correctamente según mi victima, pero necesitaba otra victima para comprobar, después de un rato @anabarb me consiguió otra victima amigo suyo e hice pruebas con el nuevo beta tester y su ie6. Luego con un par de ajustes quedo la web y el beta tester ya la miraba bonita, el cliente lo aprobó diciendo que ya se miraba bien en todas las computadoras de su trabajo y barbara y yo terminamos felices ^^ .

Gracias a todo esto aprendí cosillas nuevas. Por ejemplo, para resolver este problema mi solución fue crear 3 archivos de estilos CSS uno para ie6 otro para ie7 y uno para el resto de los navegadores, de esta manera si había un error en ie6 solo modificaba la hoja de estilos que cree para ese navegador. Y si tenia problemas con los demás, pues corregía la otra y no alteraba los cambios de una y otra.

Y bueno, para todos los que quieran jugar con CSS les recomiendo que investiguen sobre esta etiqueta de IExplorer, seguramente les facilitara la vida muchísimo <!–[if  IE 6]>.

Estamos a Jueves, lo se. Pero han pasado tantas cosas buenas y malas que he decidido publicar desde hoy esta entrada antes de que se me olvide todo , así ya solo voy editando y agregando lo que suceda de aquí al sábado.

1.- Me pagaron 2 trabajos ^^ y tengo dinerin.
2.- He aprendido mas de CSS
3.- IE6 es el diablo
4.- IE6 suckea
5.- Odio a IE6
6.- Se descompuso mi carro.
7.- Le robaron la bicicleta a mi hermano.
8.- Me estoy haciendo mas pro en PSD to XHTML/CSS.
9.- Me ofrecieron hacer otro trabajin de una web de Mexicali.
10.- Compre mi boleto para los fabulosos cadillacs.
11.- Conocí a @anabarb por un trabajo que le hice ^^.
12.- Una empresa de hosting me ofreció patrocinarme host+dominio por un año para sortear entre mis lectores !! (estén pendientes).
13.- Retome la construcción de mi portafolio de diseño web.
14.- Se murió Michael Jackson!!
15.- No pude ir a ver transformers 2 porque mi carro no sirve U_U’.
16.- Corregí un error de mi mod de SMF.
17.- Gane 3.34 dlls con infolinks en un solo día, ja!!.. Todo un récord para mi.
18.- 2 Mexicalenses mas se unieron a labajaenred.com
19.- Descubrí una nueva serie llamada el “Aguila Roja“, es española, esta chila y por lo menos me entretiene mientras salen capítulos nuevos de mis series favoritas.
20.- Me puse de acuerdo con Melissa y Karla para ir a los fabulosos cadillacs el próximo jueves !! ¿Alguien mas se apunta? para ir con nosotros?
21.- Últimamente el blog esta recibiendo cerca de 400 visitas diarias.
22.- Mexicali se quedo sin equipo en primera división
23.- Odio a la Federación Mexicana de Fútbol.
24.- 2 Mexicalenses me mandaron saludos desde San Diego y Alemania ^^, que les gusto el blog !!
25.-Tendré hosting gratis en ZP por un año gracias a todos los problemas que me ha causado el servidor Plesk, tienen un nuevo servidor a donde me tengo que mudar para compensarme todo eso. Lo malo, el traspaso lo tengo que hacer yo :S, tengo que mudar casi 2 gigas entre contenido y base de datos :/.
26.-Saldrá un juego para xbox360 y PS3 de la triple AAA!! al fin podre pelear con super porki!!
27.- También saldrá un nuevo juego de King Of Figthers!!
28.- La selección de Estados Unidos le gano a España 2-0.
29.- Increíblemente después de mucho tiempo!! México GOLIO!! 4 – 0 a Venezuela, cosa que en el pasado sería algo común, pero en la actualidad México solo mete goles de milagro, así que 4 son raros.
30.-Extrañas búsquedas llegan a mi blog:

• Fotos de Masajistas en Mexicali
• Fotos de Gorditas de Mexicali.
• Busco novia de Mexicali
• Como quitarle la ropa a una mujer
• Mujeres de Mexicali
• Baleados en Mexicali
• Venecia Mexicali
• Cual es la pagina del Cobach de Mexicali
• Mujer+webcam+chat+mexicali

31.-Baja California en 3er lugar en el medallero de la olimpiada Nacional 2009
32.-También se murió Farrah Fawcett que no se ni quien chingados es, pero dicen que es famosa.
33.- Iniciaron las inscripciones para entrar al Torneo de los Barrios de Mexicali(fútbol).
34.- 3 Jugadores de los Soles de Mexicali fueron llamados a la Pre-Selección Mexicana de Basquetbol(Horacio Llamas,Anthony Pedroza y Héctor Hernández)

Continuara…