jueves, 5 de julio de 2012

Redondear las esquinas del blog y ponerle sombra

Sobre este tuto me han estado preguntando muchisimo y bueno aqui se los dejo mis blogueras:



ve a diseno >>elementos de pagina>> edicion de html

y busca este codigo:

.main-outer {


y elimina lo que esta abajito de el.. osea este codigo:

-moz-border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;
-webkit-border-top-left-radius: $(main.border.radius.top);
-webkit-border-top-right-radius: $(main.border.radius.top);
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
-goog-ms-border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;
border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;

-moz-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
}


aqui graficamente



cuando lo elimines agrega este en su lugar

-moz-border-radius-topleft: 25px;
-moz-border-radius-bottomright: 25px;
-moz-border-radius-topright: 25px;
-moz-border-radius-bottomleft: 25px;
-webkit-border-top-left-radius: 25px;
-webkit-border-top-right-radius: 25px;
-webkit-border-bottom-left-radius: 25px;
-webkit-border-bottom-right-radius: 25px;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;

-moz-box-shadow: 0 0 5px 5px #F5A9F2;
-webkit-box-shadow: 0 0 5px 5px #F5A9F2;
box-shadow: 0 0 5px 5px #F5A9F2;
}


asi quedaria:


da vista previa para que veas el resultado ^^

si no quieres que haya sombra solo quita el ultimo pedacito de codigo osea este:

-moz-box-shadow: 0 0 5px 5px #F5A9F2;
-webkit-box-shadow: 0 0 5px 5px #F5A9F2;
box-shadow: 0 0 5px 5px #F5A9F2;

Rosa es el color de la sombra
Azul es lo grueso del borde

33 comentarios:

  1. Genial!! annyz,me dirias como haces para poner la cabezera Transparente? osea que,x ejemplo vos,que tenes las letras ANNYZ y el fondito transparente!! me decis pliss!!! Gracias :3

    ResponderEliminar
    Respuestas
    1. Yo se ponerlo! :) en photoshop vas ah --> ah Nuevo arribita, y abajo pones que tamaño quieres y eso entoces hay abajo pone blanco y le pones trasparente le das ah aceptar y listo! la cabezera trasparente! pasate por mi blog si quieres muchas gracias ^^

      Eliminar
  2. buen tuto annyz, yo tengo otro parecido pero intentare acer este, gracias por tu trabajo, besos :)

    ResponderEliminar
    Respuestas
    1. hola!
      jajaja er apara pedirte de como ponerle sombra XDDD fenomenal! e smejor asi que ponerle una imagen lo digo porque imageshack me esta dando problemas ¬.¬

      me voy aguardar el codigo :P

      besitoss

      Eliminar
  3. hola,me pasarias el link para descargar?? plis porque lo busco y me aparece una ventana de abrir secion y eso no entiendop :S explicame pliss! y gracias x el tuto :3

    ResponderEliminar
  4. hola.una cosita chiquitita,yo encuentro el codigo todo bn,pero no me aparece el otro codigo abajo,el que tenes que reemplazar,lo busco pero no aparece! que ago :S

    ResponderEliminar
  5. Disculpa, como haces para que quede exactamente así? http://2.bp.blogspot.com/-Wt-DQ00Uv6U/T_XxdEvi4RI/AAAAAAAAEvs/wppGMAMYz3Q/s1600/esquinas%2Bredondas%2B3.png
    Amo tu blog, la verdad me ayudaron mucho todas las cosas que pones (:

    ResponderEliminar
    Respuestas
    1. amm lo acabo de explicar en este tutorial para que quede asi las esquina del blog xD

      Eliminar
    2. mm prueba buscando este codigo

      .main-inner { y ahi pones todo abajo

      Eliminar
  6. Tengo un problemilla, mi plantilla no tiene esto: .main-outer {
    ¿que tengo que buscar en su lugar? :/

    ResponderEliminar
    Respuestas
    1. mm en cual plantillla quieres usar este truco?? para darme una idea y decirte que debes buscar.

      Eliminar
  7. disculpame annyz me puede facilitar el http de un tuto en el que se cambia la font y el titulo de las entradas please no te enojes pero es que no lo encuentro por ningún rinconsito de tu blog ....
    gomene
    arigato gozaimasu

    ResponderEliminar
  8. annyz discúlpame la molestia pero desde hace ratito estoy buscando en tu blog un tuto para cambiar el font y el titulo d elas entradas pero no encuentro por ningún rinconsito de tu blog...
    gomene
    arigato gozaimasu

    ResponderEliminar
    Respuestas
    1. aww es que sabes no tengo ese tuto solo quieres cambiar la fuente del titulo de las entradas??

      Eliminar
  9. Muchiisimas gracias!! Eres genial gracias por hacer este tuto. Lo cierto esque me gusta mucho tu manera de explicar pues lo entiendo todo muy bien
    Gracias por hacerlo
    Un beso y estas invitada a pasarte por mi blog cuando quieras!!
    <3<3

    ResponderEliminar
  10. Hola! Gracias por tu tuto , yo tengo una duda..

    Como haces para que en lugar de el color tenga como que un marco de rayitas rosita es el que tienes aqui en tu blog , no se si me explico??

    Igual lo tienes en tus entradas , el marco como que esta punteado se ve hermoso :D Ojala me puedas ayudar :)

    ResponderEliminar
    Respuestas
    1. mm bueno depende de la plantilla que uses por ejemplo yo uso la picture windos y para lograr lo punteado rosita busque este codigo

      .main-outer {

      y puse este codigo abajito de el

      border: 1px dashed #FFB6DA;

      y para lo punteado gris osea en las entradas busque

      .post-outer {

      y puse abajito este codigo
      border: 1px dashed #BDBDBD;

      saludos^^

      Eliminar
  11. Annyz, tengo la plantilla que tu subiste la pinkstripe o algo asi, y no me aparece '.main-outer {' :(

    ResponderEliminar
    Respuestas
    1. mmm esa plantilla ya no la uso ahora estoy usando la picture windows de blogger es mas sencilla xD

      pero si ya tienes la pinky el codigo que tienes que buscare en vez de main es este

      #content-wrapper {

      saludos

      Eliminar
  12. Disculpa! Yo otra ves.. Cambie de plantilla, para ver si lo podía hacer, pero no me aparece esto " .main-outer { " estoy usando la Plantilla Travel. Me podría ayudar? (:

    ResponderEliminar
  13. Hola!! tu pagina esta muy bonita....ovio todos te lo dicen y tu ya lo sabes pero queria decirtelo yo tambien :D

    todo todo me encanta :3
    gracias por tus tuttoz en verdad que me sirvieron mucho aunque aun no termino mi blog pero a mi parecer me esta quedando bonito gracias a ti

    tu blog es unico:)

    ResponderEliminar
  14. ooohhh! Amiga ya lo vi!!! mil gracias!!! tenia mucho sin entrar por lo que veo!!!!
    Gracias por todo lo que me ayudas, eres un tesoro para nuestros blog!! Un fuerte abrazooooo de Osooooo!
    Disfruta al maximo tus vacaciones!!! te las mereces!!!! jejeje
    Dios te bendiga, Dios te guarde!!!!

    ( lueguito me dejas saber si ya publicaste el del calendario, es que no hayo ese tuto)

    ResponderEliminar
  15. gracias annyz por este datillo, me ha quedado muy bien ^^
    saludos para ti

    ResponderEliminar
  16. no logro encontrarlo en mi plantilla D:!

    ResponderEliminar
  17. si no os funciona probar buscando:
    html body .content-outer {
    lo pegas debajo y listo

    ResponderEliminar
  18. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  19. mi plantilla no tiene ese codigo cual otro puede ser?

    ResponderEliminar

Nota: solo los miembros de este blog pueden publicar comentarios.