Pokemon World
Club de espadas
Blue Leaf
Los posteadores más activos de la semana

Conectarse

Recuperar mi contraseña


Últimos temas
» AYABAMBI Lo trendy en 2014
Vie Oct 20, 2017 6:13 pm por -medelliN-

» Pokémon Trading Card ONLINE
Mar Oct 17, 2017 8:13 pm por -medelliN-

» ^^ Blue Leaf - Centro de adopción Pokemon ^^
Lun Oct 02, 2017 4:16 am por -medelliN-

» Ficha-Pokémon World.
Miér Sep 07, 2016 6:11 pm por -medelliN-

» Saludos a todos c:
Lun Jun 13, 2016 10:31 am por Nami

» La Pluma y la Ficción [Cambio de botón-Elite]
Vie Mayo 20, 2016 12:51 pm por KenshinCroft

» ¿A qué videojuego te has aficionado?
Mar Mayo 17, 2016 9:20 am por Nami

» Renovación del foro - Kyara Land
Mar Mayo 17, 2016 9:17 am por Nami

» League of Legends
Mar Mayo 17, 2016 9:14 am por Nami

Afiliados Elite

Directorios




Bordes del HTML

Ver el tema anterior Ver el tema siguiente Ir abajo

Bordes del HTML

Mensaje por Rahzel Everlasting el Mar Nov 10, 2015 8:58 pm

Hi hi a todos! ¿Cómo están? vengo con otro tutorial en HTML para que puedan aprender todos los atributos y usarlos y hacer cosas bonitas :D Este tutorial también está publicado en mi foro, así que ya saben si lo han visto por ahí. Es un mero repaso de lo básico sumado con los bordes de manera mucho más detallada y con ejemplos visuales. Son bastantes llamativos a modo de ejemplo, por supuesto, quedan mejor algunos cuando tienen pocos píxeles, pero ya será cuando les toque hacer el trabajo, por ahora, vamos al repaso.

Bueno, les pasaré explicando lo primero de lo primero que deben saber. Todo el código está compuesto por cajas. Las cajas se hacen con el siguiente código
y
lo dejó así para que lo vean. Todo el Código no es más que cajas de ése estilo con los atributos dentro de ellas.

Cada atributo se separa con un ; (punto y coma), así, el código funciona bien, de lo contrario, no sirve.

Entonces, para comenzar con nuestra primera y sencilla cajita, lo haremos de la siguiente manera:

Código:
<div style="background: #ffe71c; width: 40px; height: 40px;"></div>



¿Qué es lo que hicimos aquí? le pusimos un color de fondo a la cajita. Esto se hace de la siguiente manera backgorund: #color en html Aquí dejé varias herramientas para que puedan sacar muchas cosas bonitas y útiles a sus plantillas.


Luego, tenemos el height y el width. El primero, determina la altura y se marca en px, así que el código les quedaría height: 40px, por ejemplo, lo mismo con el width: 50px Esto pueden usarlo con los valores que más les quede acorde a su tablilla, no hay un estandar. Incluso, pueden usar un height:auto para que la tablilla se vaya agrandando (o ensanchando si usan el width) según el tamaño del contenido.

Recuerden que todo esto va en el div, tal como lo coloqué arriba de todo, en el código. Es bastante sencillito cuando le agarran la mano.

Ahora ya saben lo básico para definir la caja, pasemos a unos cuantos adornitos para los bordes de la cajita.

Estos se hacen de la siguiente manera border: 0px solid #color

Donde dice 0px colocaran el grosor del borde, generalmente, dependerá de qué es lo que quieran hacer, si grande o chiquitio, más, pueden empezar con números pequeños, hasta 10px para ir probando, si se les ocurre otra cosa, mejor. Donde está el solid, especifican el tipo de borde.

Miren cómo va quedando. Éste es un borde sólido:solid, pero existen varios tipos de bordes.


Código:
<div style="background: #ffe71c; width: 40px; height: 40px;border: 6px solid #e21cff;"></div>

Éste es un borde doble, se escribe así double



Código:
<div style="background: #ffe71c; width: 40px; height: 40px;border: 6px double #e21cff;"></div>

Y tenemos también uno punteado, dotted


Código:
<div style="background: #ffe71c; width: 40px; height: 40px;border: 6px dotted #e21cff;"></div>

Y uno con degradado, groove



Código:
<div style="background: #ffe71c; width: 40px; height: 40px;border: 6px groove #e21cff;"></div>

Y uno con rayitas, dashed



Código:
<div style="background: #ffe71c; width: 40px; height: 40px;border: 6px groove #e21cff;"></div>

Como irán viendo, no es difícil ir haciendo los cambios, sólo es cuestión de cambiar las palabritas para darle el borde que queremos y grosores, como saben, eso varia según cada uno.

Y pueden hacer que un sólo lado tenga un borde, sólo necesitan colorcarle un par de atributos. Miren:



Código:
<div style="background: #ffe71c; width: 40px; height: 40px;border-right: 6px double #e21cff;"></div>

Para esto, hay que poner el siguiente codigo, en vez de border:, le agregaremos un lugar border-right: 6px double #e21cfff

Entonces, podemos usarlos para ponerlos en sólo un lugar, dos o tres, o incluso, podemos combinar estilos de bordes, tal y como están combinados los del post, si se dan cuenta, es cuestión de jugar con los lugares:

border-right:
derecha
border-left: izquierda
border-top: arriba
border-bottom: abajo

Siguiendo los comandos dados arriba, pueden combinar cuantos bordes quieran. Miren



Código:
<div style="background: #ffe71c; width: 40px; height: 40px;border-left: 6px double #e21cff; border-top: 6px groove #e21cff;"></div>

Además, me faltó agregar unos cuantos tipos de bordes, los que se redondean, seguro siempre han visto algunos así, pues, es más fácil de lo que creen, el código es border-radius: 0px .Como saben, donde dice 0px se agregan la cantidad de pixeles. Si se pone uno sólo, se redondearan los cuatro bordes, si se ponen cuatro 0px 0px 0px 0px, cada borde tendrá un redondeado diferente. Fijense:



Código:
<div style="background: #ffe71c; width: 40px; height: 40px;border: 6px groove #e21cff; border-radius:50px;"></div>

Como veran, se volvió ovalado al tener sólo un eje de px. Pero si agregamos todos, miren lo que pasa



Código:
<div style="background: #ffe71c; width: 40px; height: 40px;border: 6px groove #e21cff;border-radius:50px 10px 5px 0px;"></div>

Las dos primeros ejes 50px 0px, son los dos de arriba, el tercero y el cuarto, los de abajo.

Seguiremos viendo elementos, aunque no sé si les he dado mucha información por un post o no, así que lo dejaré aquí y haré la continuación con temas de margenes y demás chiches :D Pueden preguntar sus dudas aquí :D

Bye!



Mi pokemon <3:


Club <3:

Regalos <3:



Gracias Alice <3

Gracias Ainek <3

avatar
Rahzel Everlasting
Lider
Lider

Femenino Mensajes : 618
Tickets 85
Tickets : 874
Localización Por aquí, no, un poco más aquí. te estoy diciendo aquí. Sí, justo ahí.

Ver perfil de usuario http://sonandounodetussuenos.blogspot.com.ar/

Volver arriba Ir abajo

Re: Bordes del HTML

Mensaje por Ruby Nightmare el Mar Nov 10, 2015 11:59 pm

Muchas gracias por el tutorial!! esta muy bien explicado hasta yo le entendí :v xD, me gustan este tipo de post para tener de referencia al momento de decorar alguna tabla o lo que sea que este haciendo en el momento (?) :3 aparte soy muy olvidadiza y en caso de no recordad algo recurriré a este tema :D
Estaré al pendiente de tus tutoriales owo




:08


Gracias Ainek :3
avatar
Ruby Nightmare
Administrador
Administrador

Femenino Mensajes : 576
Tickets : 766
Localización Far away ~

Ver perfil de usuario http://kyaraland.foroactivo.mx

Volver arriba Ir abajo

Re: Bordes del HTML

Mensaje por -medelliN- el Miér Nov 11, 2015 1:17 pm

Whoo gracias ya se como hare mi baúl me diste las ideas que necesitada para poderlo hace bien mega bonito. :3

Buen post.;)



Invitado ¿Por qué no dejas de tener miedo?
avatar
-medelliN-
Moderador
Moderador

Masculino Mensajes : 764
Tickets 90
Tickets : 856
Localización Hinamizawa

Ver perfil de usuario http://oyashiromedellin.tumblr.com/

Volver arriba Ir abajo

Re: Bordes del HTML

Mensaje por Ainek el Miér Nov 11, 2015 6:41 pm

Qué tutorial más genial y muy bien explicado. Lo probaré en algún momento ya que siempre quise aprender a cómo hacer esas cosas pero me daba flojera investigar. (?)

Gracias por compartirnos esto. <3


avatar
Ainek
Administrador
Administrador

Femenino Mensajes : 525
Tickets 85
Tickets : 613
Localización Witch World

Ver perfil de usuario http://paradoxspiraluniverse.tumblr.com/

Volver arriba Ir abajo

Re: Bordes del HTML

Mensaje por Alice rainsworth el Sáb Nov 14, 2015 4:19 pm

Gracias! Estaba buscando sobre esto desde hace tiempo
aunque me sigue pareciendo algo complicado.
Una pregunta! Si quisiera poner una firma o stamp
dentro de la cajita como tendria que hacer (?)
:004:


Amando mi parche de naranja     : 3




Regalo:

   
Bear Bear!!:
avatar
Alice rainsworth
Explorador
Explorador

Femenino Mensajes : 80
Tickets 80
Tickets : 82

Ver perfil de usuario

Volver arriba Ir abajo

Re: Bordes del HTML

Mensaje por Rahzel Everlasting el Sáb Nov 14, 2015 7:45 pm

@Alice rainsworth escribió:Gracias! Estaba buscando sobre esto desde hace tiempo
aunque me sigue pareciendo algo complicado.
Una pregunta! Si quisiera poner una firma o stamp
dentro de la cajita como tendria que hacer (?)
:004:
Aquí está el link del primer tutorial. No sé por qué éste tuvo más éxito cuando el básico es éste (?) ahí está explicado el comando para la imagen. En todo caso, siempre puedes usar el BBCode que también es compatible con el HTML.

Cualquier duda, me preguntas.

Bye!



Mi pokemon <3:


Club <3:

Regalos <3:



Gracias Alice <3

Gracias Ainek <3

avatar
Rahzel Everlasting
Lider
Lider

Femenino Mensajes : 618
Tickets 85
Tickets : 874
Localización Por aquí, no, un poco más aquí. te estoy diciendo aquí. Sí, justo ahí.

Ver perfil de usuario http://sonandounodetussuenos.blogspot.com.ar/

Volver arriba Ir abajo

Re: Bordes del HTML

Mensaje por Contenido patrocinado


Contenido patrocinado


Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.