Autor Tema: Tutorial - Box Ovalado  (Leído 1874 veces)

Desconectado Atrix

  • PHPer@
  • **
  • Mensajes: 69
  • Karma: 2
  • Sexo: Masculino
  • Ah..?
    • Ver Perfil
Tutorial - Box Ovalado
« en: 08 de Febrero de 2011, 05:05:02 am »
Hola =P, en este tutorial os enseñare a como crear un box o un div En forma de Ovalo, para esto Utilizaremos "-moz-border-radius" y aqui os dejo:

Código: [Seleccionar]
#ovalo {
background:#FFFFFF; /* Atributo Modificable */
-moz-border-radius:34px; /* Esto hace que se vea Ovalado, ami me funcionó con 34 pixeles */ }

Espero y os sirva de mucho :D

¿Cómo Enlazarlo?

Aquí os dejo unos sencillos pasos para enlazarlo a la etiqueta Divisora (Div).

En el Código de su página Solamente tiene que crear un nuevo divisor
Código: [Seleccionar]
<div>Inserta cualquier Texto</div>Después Asignarle un Id, en nuestro caso será el Id Del Ovalo que le asigne en el Código CSS, Se llama "Ovalo", así que mis pasos son los siguientes:
Código: [Seleccionar]
<div id="Ovalo">Contenido =P</div>¿Sencillo No?

¡Gracias por ver! y disculpen, esque me pongo un poquito tenzo a cometer errores, Igual cualquier duda/Queja o problema Envienme un mensaje privado =D
« Última modificación: 10 de Febrero de 2011, 04:34:26 am por Atrix »

Comunidad PHPeros

Tutorial - Box Ovalado
« en: 08 de Febrero de 2011, 05:05:02 am »

Desconectado Fermin

  • PHPero Experto
  • *****
  • Mensajes: 783
  • Karma: 7
  • Sexo: Masculino
  • Nada que decirte.
    • Ver Perfil
Re:Tutorial - Box Ovalado
« Respuesta #1 en: 08 de Febrero de 2011, 18:44:03 pm »
interesante.. xDD gracias de todas formas

saludos

Desconectado Siquillote

  • PHPero Master
  • ******
  • Mensajes: 4.229
  • Karma: 179
  • Sexo: Masculino
    • Ver Perfil
Re:Tutorial - Box Ovalado
« Respuesta #2 en: 08 de Febrero de 2011, 21:14:22 pm »

Pienso yo que este tutorial está demasiado incompleto. Aunque muestres la parte de CSS debes enseñar al público como enlazarlo con un <div>. No toda la gente nace sabiendo (Es mas, nadie) y por eso has de detallar y completar mas esto. No vale con un copy & paste de internet...

#Fdo. Physlet

Desconectado Fermin

  • PHPero Experto
  • *****
  • Mensajes: 783
  • Karma: 7
  • Sexo: Masculino
  • Nada que decirte.
    • Ver Perfil
Re:Tutorial - Box Ovalado
« Respuesta #3 en: 08 de Febrero de 2011, 22:24:55 pm »
ps si, para enlazarlo con el div creo que es <div id="ovalo">aqui contenido</div> :$ xddddd

saludos

Desconectado Mixvice

  • PHPero Experto
  • *****
  • Mensajes: 687
  • Karma: 32
  • Sexo: Masculino
  • ¡Y Tu Papá Tambien!
    • Ver Perfil
    • Tuhabbo
Re:Tutorial - Box Ovalado
« Respuesta #4 en: 09 de Febrero de 2011, 22:02:58 pm »
Este tema es lo mismo que acá: http://www.phperos.net/foro/index.php?topic=4759.0

Solo que menos explicado  y solo serviría para firefox creo... Solo es cosa de cambiar el numero del borde y ya u.u

Desconectado Atrix

  • PHPer@
  • **
  • Mensajes: 69
  • Karma: 2
  • Sexo: Masculino
  • Ah..?
    • Ver Perfil
Re:Tutorial - Box Ovalado
« Respuesta #5 en: 10 de Febrero de 2011, 04:31:05 am »
Este tema es lo mismo que acá: http://www.phperos.net/foro/index.php?topic=4759.0

Solo que menos explicado  y solo serviría para firefox creo... Solo es cosa de cambiar el numero del borde y ya u.u

Este tutorial lo Hize Propio, no basado a ese Tema =D

Pienso yo que este tutorial está demasiado incompleto. Aunque muestres la parte de CSS debes enseñar al público como enlazarlo con un <div>. No toda la gente nace sabiendo (Es mas, nadie) y por eso has de detallar y completar mas esto. No vale con un copy & paste de internet...

=( Tienes razón, Mejor lo modifico :D y ¡Gracias!

Desconectado Siquillote

  • PHPero Master
  • ******
  • Mensajes: 4.229
  • Karma: 179
  • Sexo: Masculino
    • Ver Perfil
Re:Tutorial - Box Ovalado
« Respuesta #6 en: 10 de Febrero de 2011, 15:02:19 pm »

Ahora si está mejor ;) Aunque ya lo terminarías de lucir si pusieras una imagen ;]

#Fdo. Physlet

Desconectado Mixvice

  • PHPero Experto
  • *****
  • Mensajes: 687
  • Karma: 32
  • Sexo: Masculino
  • ¡Y Tu Papá Tambien!
    • Ver Perfil
    • Tuhabbo
Re:Tutorial - Box Ovalado
« Respuesta #7 en: 11 de Febrero de 2011, 07:46:48 am »
Este tutorial lo Hize Propio, no basado a ese Tema =D

No es que sea propio o no, se logra lo mismo con el post que deje arriba, si te dieras una vuelta por el foro te habrías dado cuenta... Como sea seguro varios no sabían que se podía lograr con el border-radius un efecto de ovalo. Saludos ;)

Desconectado -Pituko-

  • PHPero Experto
  • *****
  • Mensajes: 954
  • Karma: 20
  • Sexo: Masculino
  • ¡Hala Madrid!
    • Ver Perfil
Re:Tutorial - Box Ovalado
« Respuesta #8 en: 11 de Febrero de 2011, 23:27:53 pm »
Este tutorial lo Hize Propio, no basado a ese Tema =D
¿Como lo hiciste propio?, yo pienso que es del mismo tema, ya que yo hice lo mismo sacando base del post de OmaarV hace unos días.

Yo que tu lo acepto porque llegaran las criticas, este método no lo uso porque si haces un div con eso, te saldrá pésimo, ya que el texto se saldría del div, aun así, es interesante este uso ;).

Sigue así Atrix.

Desconectado OmaarV

  • PHPero Avanzado
  • ****
  • Mensajes: 304
  • Karma: 20
  • Sexo: Masculino
  • OmarVega
    • Ver Perfil
Re:Tutorial - Box Ovalado
« Respuesta #9 en: 12 de Febrero de 2011, 03:06:57 am »
My god, si vas a explicar algo hazlo bien, aunque este repetido hazlo mejor. Para empezar tu código solo funcionara con mozilla. Si queremos algo mas completo con mas navegadores usemos:

Código: [Seleccionar]
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

Y referente al usar 34px te quedaría una box demasiada, utilizalo con sabiduría, si usas 34px con un width de 90px y height de 90px harías una box que te serviría en muchas situaciones como para realizar botones estéticos con CSS.

Espero les haya ayudado