Pues me di un tiempo para crear algunos estilos diferentes para que puedas usar. Además ya antes me habían comentado que querían crear bordes que simulen estar hundidos y otros con relieve usando CSS, así que voy a aprovechar para tratar de explicar esto.
Usando algunas propiedades como bordes, outline, margen, padding, y una buena combinación de colores, podemos crear efectos interesantes sin usar imágenes, creando un look moderno y/o elegante. Con algunas limitaciones en versiones viejas de Internet explorer en algunos casos, pero, sin que se estropee tanto el resultado.
Cómo aplicar el estilo.
Bueno, echa un vistazo a los tres estilo, y lo único que tendrás que hacer es sustituir el CSS (que está dentro de la etiqueta <style>), en el código de este widget. La resaltaré de azul (principio y final), para que puedas identificarla fácilmente. Claro que si quieres cambiar los colores deberás entender cómo crear los efectos, pero, eso yo te lo voy a decir ;)
Veamos de qué se trata...
1. Estilo "Elegante". Un estilo elegante, que simula bordes hundidos debajo de cada comentario.
CSS
<style type="text/css">
ul.w2b_recent_comments{width:100%;margin:2px 0 15px 0;padding:0; background:#f2f2f2;border:5px solid #fefefe; outline:thin solid #efefef}.w2b_recent_comments li{background:none !important;padding: 0 !important;margin: 4px 4px 4px; display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #fff}.w2b_recent_comments li:last-child{border-bottom:none}.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 7px 0;position:relative;overflow:hidden} .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;} .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block}.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;padding:2px 4px 6px 4px;line-height: 1.2;border-bottom:1px solid #dfdddd}.w2b_recent_comments li:last-child span{border-bottom:none} .w2b_recent_comments li a{color:#676f6f; font-weight:bold;text-shadow:0px 1px 1px #fff}.w2b_recent_comments li a:hover{margin-left:4px;color:#2e9798}</style>
Nota: para eliminar los bordes al fondo del "último comentario", utilizo un selector llamado :last-child, que no soporta IE8 y versiones anteriores, sólo la versión 9, por lo que ese borde será visible en versiones viejas de IE.
El truco: Para crear este efecto en el borde, usamos un borde de 1px en cada elemento de lista (.w2b_recent_comments li), y otro debajo de cada elemento de lista que contiene la etiqueta span, que es donde está el texto del comentario (.w2b_recent_comments li span) y hacemos los ajustes con el margen y el padding para que se junten y queden uno arriba de otro y además se separe de los extremos derecho e izquierdo. Es muy importante que tomes en cuenta los colores que vas a usar, y el borde que queda arriba, debe de ser más obscuro que el de abajo. El segundo borde que queda debajo, debe de ser más claro que el fondo, para los tonos grises el blanco queda muy bien. Los "tonos" de los tres colores deben de ser, de preferencia del mismo orden de colores monocromáticos. Por ejemplo si usamos grises, usas un gris obscuro, otro más claro y otro más claro, hasta llegar al blanco. Si inviertes el orden de los colores en el borde, entonces obtendrás el efecto contrario, es decir, con relieve o levantado.
Lo que puedes editar lo resalté de rojo, y esta es la explicación:
En: .w2b_recent_comments li, puedes cambiar el color de fondo en: background:#f2f2f2.
El borde claro y grueso alrededor del widget lo cambias en: border:5px solid #fefefe, y el último borde (gris) que lo envuelve en: outline:thin solid #efefef.
Para cambiar el color de los bordes que están debajo de cada comentario, buscas: .w2b_recent_comments li, ahí, en: border-bottom:1px solid #fff cambias el color del borde de arriba. Ese es el primer borde. El segundo borde y que está debajo del anterior, está en: .w2b_recent_comments li span y lo editas en: border-bottom:1px solid #dfdddd.
2. Estilo "Recto y elegante". Otro estilo elegante, que separa los comentarios en cajitas, con bordes dobles que logramos con la ayuda de las propiedades border y outline, para lograr ese efecto. La propiedad outline, es soportada por IE8 y versiones siguientes, y la propiedad border por todas las versiones de ese navegador; con el resto de navegadores no tenemos problemas, el latoso, generalmente es Internet Explorer.
CSS
<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0 0 15px 0;padding:0;background:#f3f3f3;border:1px solid #fff;outline:thin solid #ececec; width:100%}
.w2b_recent_comments li{background:#f7f7f7 !important;padding:3px !important;display:block;clear:both;overflow:hidden;list-style:none;margin:5px;border:1px solid #fff; outline:
thin solid #e7e7e7}.w2b_recent_comments li .avatarImage{padding:2px;background:#fff;border:1px solid #e7e7e7;float:left;margin:0 4px 7px 3px;position:relative;overflow:hidden}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block}.w2b_recent_comments li span{text-shadow:1px 1px 1px #fff;margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;padding:2px 0 6px 0;line-height: 1.2}
.w2b_recent_comments li a{color:#1f9495;text-shadow:1px 1px 1px #fff}.w2b_recent_comments li a:hover{margin-left:4px;}
</style>
El truco: en este caso, usamos borde alrededor de cada elemento de lista de los comentarios (.w2b_recent_comments li), este debe de ser más claro que los fondos usados, y como usamos tonos grises, el blanco queda perfecto: border:1px solid #fff; también tiene fondo gris: background:#f7f7f7 que es más claro que el del contenedor.
Luego usamos la propiedad outline, que agrega también borde en el exterior del widget, y está declarado así: outline:thin solid #e7e7e7.
Hacemos lo mismo con el contenedor de los elementos de lista de los comentarios (ul.w2b_recent_comments), ponemos un fondo color gris más obscuro que el de cada elemento de lista, (citado anteriormente), background:#f3f3f3 y agregamos borde blanco:border:1px solid #fff y un segundo borde alrededor de éste, usando la propiedad outline: outline:
thin solid #e7e7e7.
Los efectos que se logran en este ejemplo es mixto, es decir, algunos bordes lucen hundidos y otros con relieve, pero siguiendo un patrón, y esto depende de cómo quedó colocado el borde blanco y obscuro respectivamente arriba, a la izquierda, a la derecha y abajo.
A ver, a ver, entonces, ¿cómo se forman los bordes dobles?
Es simple, sólo juntamos dos bordes y dependerá de la estructura del elemento donde queremos aplicarlo, si usamos sólo bordes (la propiedad borde), o también necesitemos usar el borde con la propiedad outline.
Este es una imagen que muestra los dos distintos tipos de borde que podemos formar, cuando están en posición horizontal:
3. Estilo "Corrugado". En este caso usamos borde discontinuo (dashed) para crear esa apariencia como de ondas, o como un ticket recortado.
CSS
<style type="text/css"> ul.w2b_recent_comments{list-style:none;margin:0 0 15px 0;padding:0; background:none;width:100%} .w2b_recent_comments li{background:#c4dcdc !important;padding:3px 4px 3px 0!important;display:block;clear:both;overflow:hidden;list-style:none;margin:5px 0; border:1px dashed #fafafa} .w2b_recent_comments li .avatarImage{padding:2px;border:1px solid #e7e7e7;background:#fff;float:left;margin:0 4px 7px 3px;position:relative;overflow:hidden}.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;} .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block} .w2b_recent_comments li span{text-shadow:1px 1px 1px #fff;margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;padding:2px 0 6px 0;line-height: 1.2} .w2b_recent_comments li a{color:#064f4c;text-shadow:1px 1px 1px #fff}.w2b_recent_comments li a:hover{margin-left:4px;}</style>
El truco. Es muy fácil crear este efecto con el borde, simplemente, usamos un color de borde, en cada elemento de lista (.w2b_recent_comments li) del mismo color que usa el fondo donde está puesto el widget. Si por ejemplo el fondo del blog, "donde lo colocas", es blanco, pues usamos blanco.
Entonces, para cambiar el fondo de cada comentario, buscas:.w2b_recent_comments li y en background:#c4dcdc editas el valor (#c4ddcd). Recuerda conservar la almohadilla.
En border:1px dashed #fafafa editas el color de borde que deberá ser del mismo color de fondo donde lo pongas.
¿fácil, verdad? Para que puedas ahondar en el uso de algunas propiedades que usé, te dejo algunas referencias para que puedas consultar:
Propiedad outline
Propiedad borde
Selector :last-child
No hay comentarios:
Publicar un comentario