8 Técnicas para crear esquinas con CSS

JMiur [E]

3D Raised

Esquinas redondeadas con bordes salientes.

3D Inset

Esquinas redondeadas con bordes entrantes.

Chamfer Border

Bordes a 45 grados.

Square cutout Border

Bordes recortados 1.

Curved cutout Border

Bordes recortados 2.

Flared shape

Esquinas con efecto serif.

Pillar shape

Esquinas con efecto pilar.

Barrel shape

Bordes estilo barril.

REFERENCIAS:

CSSplay

40 comentarios:

Admin: 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
Bonzu Pipinpadaloxicopolis III: Los Style van antes del ]]></b:skin> de la plantilla, y el Div en el post.
Bonzu Pipinpadaloxicopolis III: me equivoqué, creo que es después
Anónimo: 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!!
Mamots: y bien, como has podido colocar los dos estilos de agregar comentarios?

saludos
sølrαc: Buenísimo JM :O sobre todo por que evita usar imágenes que sobrecargue la página ;)
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
Gem@: Quería poner esta carita :S pero me salió el enojado.
Anónimo: Oh no , es una ilusión :O , NO. Bordes redondeados en Internet Explorer :)!!!!!!

Muy bueno , lo voy a usar pronto-
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
Admin: 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
Unknown: 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
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 :)
Admin: 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?
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.
Admin: 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
Anónimo: Se puede poner un enlace para usar como un botón? Y donde poner dicho enlace?
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/';" >
Usuario10: 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.
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 {
...........
}
Usuario10: 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.
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 :)
Usuario10: Estoy leyendo algo de los post resumidos, por ahi voy a ver si encuentro algo, bueno voy a intentarlo.

Saludos JMiur :D
rene: estas bonita tu web me gusto tienes muchos codigos uttiles para mi sisito web muscghas gracias por compartir
JMiur: Gracias por el comentario, rene :D
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.
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.
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
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.
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);
}
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
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.
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..

¿Quiere dejar un comentario?

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

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 ...

Suscribirse a los comentarios

Vagabundia