JMiur [E]

3D Raised

Esquinas redondeadas con bordes salientes.


<style type="text/css">
.raised {background: transparent; width:40%; margin:0 auto;}
.raised h1, .raised p {margin:0 10px;}
.raised h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.raised p {padding-bottom:0.5em;}
.raised .top, .raised .bottom {display:block; background:transparent; font-size:1px;}
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden;}
.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}
.raised .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}
.raised .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}
.raised .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}
.raised .b4b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #999;}
.raised .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999;}
.raised .b2b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999;}
.raised .b1 {margin:0 5px; background:#fff;}
.raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}
.raised .b3, .raised .b3b {margin:0 2px;}
.raised .b4, .raised .b4b {height:2px; margin:0 1px;}
.raised .b1b {margin:0 5px; background:#999;}
.raised .boxcontent {display:block; background:#ccc; border-left:1px solid #fff; border-right:1px solid #999;}
</style>

<div class="raised">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1>3D Raised</h1>
<p>Esquinas redondeadas con bordes salientes.</p>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>

3D Inset

Esquinas redondeadas con bordes entrantes.


<style type="text/css">
.inset {background: transparent; width:40%; margin:0 auto;}
.inset h1, .inset p {margin:0 10px;}
.inset h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.inset p {padding-bottom:0.5em;}
.inset .top, .inset .bottom {display:block; background:transparent; font-size:1px;}
.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {display:block; overflow:hidden;}
.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {height:1px;}
.inset .b2 {background:#ccc; border-left:1px solid #999; border-right:1px solid #aaa;}
.inset .b3 {background:#ccc; border-left:1px solid #999; border-right:1px solid #ddd;}
.inset .b4 {background:#ccc; border-left:1px solid #999; border-right:1px solid #eee;}
.inset .b4b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #fff;}
.inset .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #fff;}
.inset .b2b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #fff;}
.inset .b1 {margin:0 5px; background:#999;}
.inset .b2, .inset .b2b {margin:0 3px; border-width:0 2px;}
.inset .b3, .inset .b3b {margin:0 2px;}
.inset .b4, .inset .b4b {height:2px; margin:0 1px;}
.inset .b1b {margin:0 5px; background:#fff;}
.inset .boxcontent {display:block; background:#ccc; border-left:1px solid #999; border-right:1px solid #fff;}
</style>

<div class="inset">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1>3D Inset</h1>
<p>Esquinas redondeadas con bordes entrantes.</p>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>

Chamfer Border

Bordes a 45 grados.


<style type="text/css">
.chamfer {background: transparent; width:40%; margin:0 auto;}
.chamfer h1, .chamfer p {margin:0 10px;}
.chamfer h1 {font-size:2em; color:#000; letter-spacing:1px;}
.chamfer p {padding-bottom:0.5em;}
.chamfer .top, .chamfer .bottom {display:block; background:transparent; font-size:1px;}
.chamfer .b1, .chamfer .b2, .chamfer .b3, .chamfer .b4, .chamfer .b5 {display:block; overflow:hidden; height:1px; background:#eca; border-left:1px solid #000; border-right:1px solid #000;}
.chamfer .b1 {margin:0 5px; background:#000;}
.chamfer .b2 {margin:0 4px;}
.chamfer .b3 {margin:0 3px;}
.chamfer .b4 {margin:0 2px;}
.chamfer .b5 {margin:0 1px;}
.chamfer .boxcontent {display:block; background:#eca; border-left:1px solid #000; border-right:1px solid #000;}
</style>

<div class="chamfer">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><b class="b5"></b></b>
<div class="boxcontent">
<h1>Chamfer Border</h1>
<p>Bordes a 45 grados.</p>
</div>
<b class="bottom"><b class="b5"></b><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b>
</div>

Square cutout Border

Bordes recortados 1.


<style type="text/css">
.square {background: transparent; width:40%; margin:0 auto;}
.square h1, .square p {margin:0 10px;}
.square h1 {font-size:2em; color:#00c; letter-spacing:1px;}
.square p {padding-bottom:0.5em;}
.square .top, .square .bottom {display:block; background:transparent; font-size:1px;}
.square .b1t {margin:0 6px; display:block; overflow:hidden; height:5px; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c; border-top:1px solid #00c;}
.square .b2 {display:block; height:1px; margin:0; background:#9ce; border-left:7px solid #00c; border-right:7px solid #00c; overflow:hidden;}
.square .b1b {margin:0 6px; display:block; overflow:hidden; height:5px; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c; border-bottom:1px solid #00c;}
.square .boxcontent {display:block; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c;}
</style>

<div class="square">
<b class="top"><b class="b1t"></b><b class="b2"></b></b>
<div class="boxcontent">
<h1>Square cutout Border</h1>
<p>Bordes recortados 1.</p>
</div>
<b class="bottom"><b class="b2"></b><b class="b1b"></b></b>
</div>

Curved cutout Border

Bordes recortados 2.


<style type="text/css">
.curved {background: transparent; width:40%; margin:0 auto;}
.curved h1, .curved p {margin:0 10px;}
.curved h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.curved p {padding-bottom:0.5em;}
.curved .top, .curved .bottom {display:block; background:transparent; font-size:1px;}
.curved .b1, .curved .b2, .curved .b3, .curved .b4 {display:block; overflow:hidden; height:1px;}
.curved .b2, .curved .b3, .curved .b4 {background:#e0cea3; border-left:1px solid #fff; border-right:1px solid #fff;}
.curved .b1 {margin:0 4px; background:#fff;}
.curved .b2 {margin:0 4px; height:2px;}
.curved .b3 {margin:0 3px;}
.curved .b4 {margin:0; height:1px; border-width:0 3px 0 3px;}
.curved .boxcontent {display:block; background:#e0cea3; border:0 solid #fff; border-width:0 1px;}
</style>

<div class="curved">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>Curved cutout Border</h1>
<p>A Bordes recortados 2.</p>
</div>
<b class="bottom"><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b>
</div>

Flared shape

Esquinas con efecto serif.


<style type="text/css">
.serif {background: transparent; width:40%; margin:0 auto;}
.serif h1, .serif p {margin:0 10px;}
.serif h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.serif p {padding-bottom:0.5em;}
.serif .top, .serif .bottom {display:block; background:transparent; font-size:1px;}
.serif .b1, .serif .b2, .serif .b3, .serif .b4 {display:block; overflow:hidden;}
.serif .b1, .serif .b2, .serif .b3 {height:1px;}
.serif .b2, .serif .b3 {background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff;}
.serif .b4 {background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff;}
.serif .b1 {margin:0; background:#fff;}
.serif .b2 {margin:0 1px; border-width:0 2px;}
.serif .b3 {margin:0 3px;}
.serif .b4 {height:2px; margin:0 4px;}
.serif .boxcontent {display:block; background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 5px;}
</style>

<div class="serif">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1>Flared shape</h1>
<p>Esquinas con efecto serif.</p>
</div>
<b class="bottom"><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b>
</div>

Pillar shape

Esquinas con efecto pilar.


<style type="text/css">
.pillar {background: transparent; width:40%; margin:0 auto;}
.pillar h1, .pillar p {margin:0 10px;}
.pillar h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.pillar p {padding-bottom:0.5em;}
.pillar .top, .pillar .bottom {display:block; background:transparent; font-size:1px;}
.pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4 {display:block; overflow:hidden;}
.pillar .b1, .pillar .b2, .pillar .b4 {height:1px;}
.pillar .b2, .pillar .b3 {background:#d66; border-left:1px solid #fff; border-right:1px solid #fff;}
.pillar .b4 {background:#d66; border-left:4px solid #fff; border-right:4px solid #fff;}
.pillar .b1 {margin:0 2px; background:#fff;}
.pillar .b2 {margin:0 1px; border-width:0 1px;}
.pillar .b3 {height:2px; margin:0;}
.pillar .b4 {margin:0 2px;}
.pillar .boxcontent {display:block; background:#d66; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 5px;}
</style>

<div class="pillar">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1>Pillar shape</h1>
<p>Esquinas con efecto pilar.</p>
</div>
<b class="bottom"><b class="b4"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b>
</div>

Barrel shape

Bordes estilo barril.


<style type="text/css">
.barrel {background: transparent; width:40%; margin:0 auto;}
.barrel h1, .barrel p {margin:0 10px;}
.barrel h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.barrel p {padding-bottom:0.5em;}
.barrel .top, .barrel .bottom {display:block; background:transparent; font-size:1px;}
.barrel .b1, .barrel .b2, .barrel .b3, .barrel .b4, .barrel .b5 {display:block; overflow:hidden; height:1px; background:#e0cea3;}
.barrel .b1 {border-left:10px solid #dfd5c0; border-right:10px solid #dfd5c0;}
.barrel .b2 {border-left:5px solid #dfd5c0; border-right:5px solid #dfd5c0;}
.barrel .b3 {border-left:3px solid #dfd5c0; border-right:3px solid #dfd5c0;}
.barrel .b4 {border-left:2px solid #dfd5c0; border-right:2px solid #dfd5c0;}
.barrel .b5 {border-left:1px solid #dfd5c0; border-right:1px solid #dfd5c0;}
.barrel .b1 {margin:0 33%;}
.barrel .b2 {margin:0 20%;}
.barrel .b3 {margin:0 12%;}
.barrel .b4 {margin:0 5%;}
.barrel .b5 {margin:0 1px;}
.barrel .boxcontent {display:block; background:#e0cea3; border-left:1px solid #fff; border-right:1px solid #999;}
</style>

<div class="barrel">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><b class="b5"></b></b>
<div class="boxcontent">
<h1>Barrel shape</h1>
<p>Bordes estilo barril.</p>
</div>
<b class="bottom"><b class="b5"></b><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b>
</div>

REFERENCIAS:
  • CSSplay
  • 40 comentarios:

    k_nelita  

    Aviso que no se como se escribe pero fue lo primero que me vino a la mente y a la boca, cuando vi ese pedazo de código: Achalay!! :O y donde hay que poner semejante código??

    Se pone en la plantilla y queda para todas las imagenes? O no es para imagenes? :o
    Se pone en el editor de las entradas?
    No entiendo nada :S

    Responder
    Bonzu Pipinpadaloxicopolis III  

    Los Style van antes del ]]></b:skin> de la plantilla, y el Div en el post.

    Responder
    Bonzu Pipinpadaloxicopolis III  

    me equivoqué, creo que es después

    Responder
    Graciela de Palomas  

    JMIUR voy por el paso 2, mi alegría cuando veo que sí queda!!! (Magazine)
    Muy buena la entrada, me encanta!!!...Nelita creo si no me equivoco, para hacer bordes en la cabecera, título de los post, cuerpo de los post y más...solo usar la imaginación.
    Si no es así J te lo dirá...mis besos!!

    Responder
    Mamots  

    y bien, como has podido colocar los dos estilos de agregar comentarios?

    saludos

    Responder
    sølrαc  

    Buenísimo JM :O sobre todo por que evita usar imágenes que sobrecargue la página ;)

    Responder
    Gem@  

    Con esto se resuelve el problema de esquinas redondeadas con Explorer ¡ que gran descubrimiento! :)
    Si no me equivoco los estilos pueden añadirse entre <head> y </head>
    El Div lo añadimos en la plantilla justo donde deseamos añadir el bloque aunque sería necesario modificar el tamaño en los estilos claro está.
    Para las entradas sería necesario añadir unos estilos y un nombre, yo hablo sola luego tu me corriges |O

    Responder
    Gem@  

    Quería poner esta carita :S pero me salió el enojado.

    Responder
    LacraX  

    Oh no , es una ilusión :O , NO. Bordes redondeados en Internet Explorer :)!!!!!!

    Muy bueno , lo voy a usar pronto-

    Responder
    JMiur  

    Sin duda son interesantes, realmente me asombraron :)

    Si se quiere tener alguna de estas clases para usarlas en todo el sitio, por ejemplo, para los títulos, lo razonable es colocar el código del estilo antes de </head> y el DIV, donde quiera mostrarse el texto.

    Si se quiere colocar junto con el resto de los estilos, es decir, entre <b:skin> y </b:skin>, entonces, colocamos sólo el contenido y eliminamos las etiquetas <style> y </style>

    Lo de los comentarios puede verse en este post

    Responder
    k_nelita  

    No termino de entender, si por ejemplo lo quiero poner en el footer de los post, el css ya se donde va, en la parte de estilos, pero y lo otro donde? O sea la parte de los div? :O
    Estoy un poco mas estúpida que de costumbre porque estoy muy congestionada :S

    Responder
    Σ=o) Pau  

    Hola J, por ahora me remito a decirte que se ve genial, luego lo probaré y te cuento si tengo dudas porque esta semana ha sido un poco atareada :)
    Que tengas un lindo fin de semana :)

    besos ronroneados

    Responder
    JMiur  

    k_nelita: Los DIVS van donde quieras que se vea. Hacé la prueba en un post, por ejemplo.

    Pau: Me alegra que te gusten, espero ver la prueba :)

    Responder
    k_nelita  

    En un post?? En el editor de entradas? atchiiiiss... (resfrío) :S Un día 34º y al otro 17º, estoy apestadísimaaaa :'(
    O en la parte de post en la plantilla?

    Responder
    JMiur  

    En el editor de entradas. Es lo que ves en este post. Todo está en el mismo post. Depende mucho de para qué querés utilizarlo.

    Responder
    k_nelita  

    No se para que lo quiero pero me gustaba... ya probé en blog de pruebas y no le veo mucha utilidad, pero quizás en algún momento sepa para que :o

    Responder
    jose m.  

    Se puede poner un enlace para usar como un botón? Y donde poner dicho enlace?

    Responder
    JMiur  

    Para no tener que luchar con las propiedades que es algo engorroso de hacer, lo mejor, sería usar el evento onclick en el primer DIV. Por ejemplo, en el primer botón:

    <div class="raised" onclick="location.href='http://google.com/';" >

    Responder
    Tigremen  

    Hola Jmiur,
    Yo tengo los post con un fondo diferente BLOG DE PRUEBAS y me gustaria redondear las esquinas en donde tengo que meter el codigo CSS? ahora como ves en la plantilla que estoy haciendo es un rectangulo.

    Saludos master.

    Responder
    JMiur  

    El CSS siempre se coloca entre <b:skin> y </b:skin> o bien, entre etiquetas <style> y </style>

    Las propiedades seguramnete son las que corresponden a la clase post:

    .post {
    ...........
    }

    Responder
    Tigremen  

    El CSS ya lo agregue arriba de ]]><[/b:skin] actualmente en .post tengo solo un borde inferior "border-bottom:1px dotted $bordercolor;".
    El CSS que quiero emplear es "chamfer border" entiendo que la clase es chamfer.

    Disculpa mi ignoracia pero no se como agregar este clase dentro de .post. ¿podras decirme como?

    Saludos JMiur.

    Responder
    JMiur  

    Es que, para hacer eso, no sólo hay que usar las clases CSS sino también modificar la plantilla y el HTML. No es poca cosa :)

    Responder
    Tigremen  

    Estoy leyendo algo de los post resumidos, por ahi voy a ver si encuentro algo, bueno voy a intentarlo.

    Saludos JMiur :D

    Responder
    rene israel  

    estas bonita tu web me gusto tienes muchos codigos uttiles para mi sisito web muscghas gracias por compartir

    Responder
    JMiur  

    Gracias por el comentario, rene :D

    Responder
    Francisco Cauich Pat  

    Estimado JM,

    Podrias indicarme en algun ejemplo en codigo de las plantillas como colocar el codgio que presentas aqui?

    Es que la verdd no entiendo nada ,y al modificar mi plantilla me marca error....

    Te lo agradeceria, muchisimo!!!

    Saludos.

    Responder
    JMiur  

    Los códigos son esos esos que se muestran en la entrada. Deebría saber qué colocas o dónde lo quieres colocar y que error te indica la plantilla.

    Responder
    Weed  

    Hola JMiur:

    Me parece genial tú blog he aprendido varias cosas gracias ti. Sigo siendo un negado para programar y todo eso, pero algo me entero ya =)

    Me ha gustado mucho este post, que encontre. El problema es que no tengo ni idea de donde colocar los codigos para que quede bien. He intentado con varias de las cosas que ponen en los comments, pero nada. La idea es poner los post y las sidebar, redondeadas pero no me entero de donde colocarlos.

    Me lo puedes explicar para negados (es decir para mi) ??

    Te lo agradeceria mucho

    Gracias de antemano

    JMiur  

    Tendría que saber qué quieres hacer o que has hecho y en que blog puede verse.

    Weed  

    Hola, vaya rapido que eres gracias =)

    La idea seria, poner el 3D Raised para los post, y el 3D Inset, para las sidebar (son dos).

    mi blog es http://futbolbarsayotrashistorias.blogspot.com.es/
    y tengo uno de pruebas porque como soy bastante negado para el html evito meter la fata de manera fatal =) ( el de purebas es http://weedlandblog.blogspot.com.es/).

    He intentado lo que dices tú y otras personas, pero en mi plantilla no tengo el #side-wrapper (o algo así) que comentais aquí y en otros post que revise de tú pagina.

    Si puedes explicar como a los niños tontos: el codigo grande lo pones encima de tal linea, y el codigo pequeño encima de tal otra.. ( o como tu veas que es mas facil vamos). La ídea es que, me expliques que tengo que poner exactamente y en donde, entiendo que existen cuerpos y divisiones en la estructura del html, pero ni se cuales son ni como reconocerlos, por eso me pierdo cuando os referis a ellos.

    Soy muy competente para otras cosas, pero aqui me siento un poco el atontado jeje, y eso que voy mejorando.

    No se si te hace falta más info de la plantilla, pero no se me ocurre que decirte.

    Muchas gracias por tu respuesta y por la velocidad

    Un saludo

    JMiur  

    El blog de pruebas está creado con el nuevo diseñador de plantillas así que las cosas, con ese tipo de plantillas se complican. En este caso, la regla de estilo para las entradas sería:
    .date-outer {}
    si buscas eso,, verás que tiene propiedades como color de fondo negro, borde, etc.

    La sidebar sería esta otra regla:
    .main-inner .widget{}

    Ahora bien; ¿qué es l oque quieres aplicar? ¿el borde redondeado? En ese caso, es inncesario hacer algo así ya que si miras la regla de estilo .date-outer {} verás que tiene una propiedad que dice algo así:
    border-radius: 0;
    algo así porque puede decir más cosas. Diga lo que diga, puedes usar esa propiedad para redondear los bordes con facilidad; por ejemplo:

    border-radius: 10px;

    algo que no funcionará en versiones viejas de IE aunque en ese tipo de plantillas, Blogger permite agregar un código especial para crear ese redondeado en ese navegador:

    -goog-ms-border-radius: 10px;

    Responder
    Weed  

    Hola again, La ídea es ponerlos tal cual aparece en tú post, es decir con el redondeado de las esquinas y el relieve (hacia afuera y hacia adentro) Dado el caso que sea muy complicado por lo que me comentas de las plantillas,(creo que las dos son la misma, pero no me hagas mucho caso) Me conformaria con los bordes redondeados `por ahora.

    El caso es, que me he ido como me dices y busque las lineas indicadas para cada uno (post y sidebar), encotre lo de border radius con el simbolo $, lo cambie por varios valores (10, 15, 25) y al darle a visualizar seguian iguales, bordes rectos.

    Te pongo, los codigos de los dos apartados,a ver si estoy en el sitio correcto o si tengo que modificar algo más.

    Responder
    Weed  

    De nuevo mil gracias por tú tiempo y paciencia =)
    *********************************
    .date-outer {
    position: relative;
    margin: $(date.space) 0 20px;
    padding: 0 15px;

    background-color: $(post.background.color);
    border: 1px solid $(post.border.color);

    -moz-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
    -goog-ms-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
    box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);

    -moz-border-radius: $(widget.border.radius);
    -webkit-border-radius: $(widget.border.radius);
    -goog-ms-border-radius: $(widget.border.radius);
    border-radius: $(widget.border.radius);
    }

    .date-outer:first-child {
    margin-top: 0;
    }

    .date-outer:last-child {
    margin-bottom: $(date.last.space.bottom);

    -moz-border-radius-bottomleft: $(date.last.border.radius.bottom);
    -moz-border-radius-bottomright: $(date.last.border.radius.bottom);
    -webkit-border-bottom-left-radius: $(date.last.border.radius.bottom);
    -webkit-border-bottom-right-radius: $(date.last.border.radius.bottom);
    -goog-ms-border-bottom-left-radius: $(date.last.border.radius.bottom);
    -goog-ms-border-bottom-right-radius: $(date.last.border.radius.bottom);
    border-bottom-left-radius: $(date.last.border.radius.bottom);
    border-bottom-right-radius: $(date.last.border.radius.bottom);

    *************************************************
    .main-inner .widget {
    background-color: $(widget.background.color);
    border: 1px solid $(widget.border.color);
    padding: 0 $(widget.padding.side) 15px;
    margin: 20px -16px;

    -moz-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
    -goog-ms-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
    box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);

    -moz-border-radius: $(widget.border.radius);
    -webkit-border-radius: $(widget.border.radius);
    -goog-ms-border-radius: $(widget.border.radius);
    border-radius: $(widget.border.radius);
    }

    .main-inner .widget h2 {
    margin: 0 -$(separator.outdent);
    padding: .6em $(separator.outdent) .5em;
    border-bottom: 1px solid $(widget.border.bevel.color);
    }

    .footer-inner .widget h2 {
    padding: 0 0 .4em;

    border-bottom: 1px solid $(widget.border.bevel.color);
    }

    .main-inner .widget h2 + div, .footer-inner .widget h2 + div {
    border-top: $(title.separator.border.size) solid $(widget.border.color);
    padding-top: $(widget.padding.top);
    }

    .main-inner .widget .widget-content {
    margin: 0 -$(separator.outdent);
    padding: 7px $(separator.outdent) 0;
    }

    .main-inner .widget ul, .main-inner .widget #ArchiveList ul.flat {
    margin: -$(widget.padding.top) -15px 0;
    padding: 0;

    list-style: none;
    }

    .main-inner .widget #ArchiveList {
    margin: -$(widget.padding.top) 0 0;
    }

    .main-inner .widget ul li, .main-inner .widget #ArchiveList ul.flat li {
    padding: .5em 15px;
    text-indent: 0;

    color: $(widget.alternate.text.color);

    border-top: $(list.separator.border.size) solid $(widget.border.color);
    border-bottom: 1px solid $(widget.border.bevel.color);
    }

    .main-inner .widget #ArchiveList ul li {
    padding-top: .25em;
    padding-bottom: .25em;
    }

    .main-inner .widget ul li:first-child, .main-inner .widget #ArchiveList ul.flat li:first-child {
    border-top: none;
    }

    .main-inner .widget ul li:last-child, .main-inner .widget #ArchiveList ul.flat li:last-child {
    border-bottom: none;
    }

    .post-body {
    position: relative;
    }

    .main-inner .widget .post-body ul {
    padding: 0 2.5em;
    margin: .5em 0;

    list-style: disc;
    }

    .main-inner .widget .post-body ul li {
    padding: 0.25em 0;
    margin-bottom: .25em;

    color: $(body.text.color);

    border: none;
    }

    .footer-inner .widget ul {
    padding: 0;

    list-style: none;
    }

    .widget .zippy {
    color: $(widget.alternate.text.color);
    }

    JMiur  

    Un ejemplo.

    Primero, en esta regla:

    .date-outer:last-child {
    ...........
    }

    deberias eliminar todo esto que lo que hace es NO redondear el primer post:

    -moz-border-radius-bottomleft: $(date.last.border.radius.bottom);
    -moz-border-radius-bottomright: $(date.last.border.radius.bottom);
    -webkit-border-bottom-left-radius: $(date.last.border.radius.bottom);
    -webkit-border-bottom-right-radius: $(date.last.border.radius.bottom);
    -goog-ms-border-bottom-left-radius: $(date.last.border.radius.bottom);
    -goog-ms-border-bottom-right-radius: $(date.last.border.radius.bottom);
    border-bottom-left-radius: $(date.last.border.radius.bottom);
    border-bottom-right-radius: $(date.last.border.radius.bottom);

    segundo, en .date-outer {} elimina los códigos de Blogger:

    border: 1px solid $(post.border.color);

    -moz-border-radius: $(widget.border.radius);
    -webkit-border-radius: $(widget.border.radius);
    -goog-ms-border-radius: $(widget.border.radius);
    border-radius: $(widget.border.radius);

    y usa CSS simple; por ejemplo:

    -goog-ms-border-radius: 15px;
    border-radius: 15px;
    border-top: 1px solid #444;
    border-left: 1px solid #444;
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;

    No uses las variables con signo $ ya que son datos definidos en el editor de plantillas y no lo estás usando sino havcièndolo manualmente.

    Lo mismo ocurrirá con la sidebar; elimina todo ese engendro que pone Blogger y simplifica la tarea; obviamente los valores y colores que coloqué son a tu gusto, cámbialos por los que quieras.

    Para hacer una copia exacta de los modelos de esta entrada, deberías modificar la plantilla de modo sustancial, agergando DIVs y estableciendo reglas de estilo que sólo harán que las cosas se compliquen demasiado.

    Responder
    Weed  

    Jm eres una maquina =)

    Entiendo lo que dices de las plantillas, cuando inicie el blog no entendia nada de nada, menos que ahora que ya es decir... Tire por lo facil y logico, que era poner lo que habia en blogger, asumiendo que era lo más completo, craso error. Puede que en un futuro me lo piense y sutituya la plantilla, pero entiendo que eso es un trabajo grande, al tener que estar pendiente de todas las modificaciones que tengo realizadas en esta. O eso creo yo vamos.


    Hice lo que me indicaste y salio bien, salvo un detallito que no he podido corregir, en las esquinas superiores de las sidebar, se redondean pero no cogen el color del borde, revise cosas en el codigo, pero no he encontrado que puede ser lo que lo evita. Alguna ídea?...

    http://ensayosdeweed.blogspot.com.es/

    Aqui estan las modificaciones y puedes ver lo de las esquinas que faltan...

    Ahora bien, el titulo lo sustitui por un diseño mio, si quisiera redondearlo tambien (la cabecera o como se llame) en que apartado deberia buscar los codigos??

    Te tengo que hacer otra pregunta de otro apartado, e imagino que prefieres que te la haga alli para no mezclar temas, espero no estar dandote mucho la lata =)

    Saludos y muchas gracias

    Responder
    Weed  

    Hola again, para que no pienses que soy tarado cuando leas mi comentario anterior, ya solucione el asunto de los bordes que no se curvaban, era un asunto con el titulo de de cada winget, que ya tenia una relieve y sobresalia. Lo que hice fue aumentar el grosor de la curvatura que le ponia y así quedan los títulos dentro del area. No se si me explico vamos, pero pienso que sí.

    Thaks otra vez, de este tema ya solucione todo, a falta de ver la zona donde buscar lo de redondear el título. Luego te pregunto sobre los menus de pestañas y los gadgets que tienes, pero eso es en otro lado.

    JMiur  

    El problema del redondeo de los ángulos superiores de la sidebar se debe a las definiciones que tiene la etiqueta H2 que es la que controla los títulos de modo genérico. Tienen un color de fondo y entonces, ese rectángulo se superpone tapando parcialmente la curva.

    A mi entender, deberían eliminarse:

    las propiedades background-color y width de h2 {}
    las propiedades border-bottom y margin de .main-inner .widget h2 {}

    Responder
    Weed  

    Jm

    Chico que barbaro!! =)

    Solucionado, lo habia apañado en el principal haciendo mas ancho en borde de la sidebar, pero creo que esta solucion es mas limpia. Así todo al modificarlo uno de los titulos del sidebar izquierdo sobre sale del cajon, lo acortare, pero no deberia ser... no??

    Según entiendo todas estas propiedades con $, en realidad no hacen nada, sencillamente son como "candados" que eviatan que se hagan cambios... ¿ es así o me equivoco?

    el principal esta casi listo, a falta de pasar estos cambios que me acabas de decir, ahora esta con el apaño que le hice yo, pero los sidebar se ven un poco demasiado gruesos.

    Me falta agragar los menus de pestañas, que me dan problemas, al no poder poner bien los gadgets "residentes" (los de bloger que agregas desde alli mismo), pero eso te lo escribo luego en su sitio, para no mezclartelo todo.

    Muchas gracias otra vez..

    JMiur  

    Lo que ves en el CSS que comienza con el signo $ son variables y si hacen cosas; en una plantilla normal hay pocas y son evidentes, definen el color, las fuentes, etc (más información)

    En las nuevas plantillas como esa, algunas son evidentes y otras son críticas, inentendibles y difícilmente configurables; son los datos que se agregan cuando se usa el Diseñador y otros datos internos.

    Weed  

    Oks visto... pero las aplicaciones que explicas ahí, ya quedan muy lejos para mi. Primero gateamos, y luego ya correremos cuando sea grande =)

    Vaya truño esto del html, con explorer algunas cosas no se ven bien de como las tengo. En principio nada grave, con el codigo que me diste solucione los bordes del sidebar y los post. Pero los avatares siguen cuadrados, cosa que en principio me da igual. Por IE solo me visita el 15% y en realidad lo ven solo que cuadrado. Así que no me doy mala vida con ello.

    Si tube que quitar el título que se pone dentro en las casillas de el panel de control de blogger, pq se filtraba y quedaba encima de la imagen que puse. Es una locura, eso es de ellos mismos, como es posible que les de ese tipo de fallos??? (retorica jajaja)

    Yo veo a Blogger y a Twitter con los millones de fallos que tienen, y me pregunto como es posible que tengan tanto exito y usuarios ¿?, entiendo que nada es perfecto y que tiene su complejidad, pero unas plataformas con tantisimo exito deberian ser mas cuidadosas....

    Te envie un mail, pq no encontre de nuevo el post en el que estaba interesado, si puedes decirme algo al respecto te lo agradecere. Pero con calma que te he exprimido bastante =)

    Gracias again

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
    De todos modos, también puede accederse a ellos a través de SkyDrive

    Nota: sólo los miembros de este blog pueden publicar comentarios.

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

     
    CERRAR