Últimos temas
» Matriculate
por Himiko Lun Mar 07, 2016 9:47 pm

» Confirmación Normal- Master´s Chains
por Invitado Sáb Mar 05, 2016 8:14 pm

» Mountain of Gods busca Staff
por Peny Vie Mar 04, 2016 11:52 pm

» Estado... (Juego)
por KhatHae Jue Mar 03, 2016 4:36 pm

» Yo amo.... (Juego)
por KhatHae Jue Mar 03, 2016 4:35 pm

» Abecedario de nombres (Juego)
por KhatHae Jue Mar 03, 2016 4:34 pm

» Infinity.. "My Gallery" by: GenneSomer!
por Peny Miér Mar 02, 2016 4:57 pm

» Búsqueda de Foro
por Peny Miér Mar 02, 2016 4:15 pm

» ✿Brillos Galery No Baai☆
por Himiko Lun Feb 29, 2016 3:19 pm


Ver el tema anterior Ver el tema siguiente Ir abajo

Formas geométricas con CSS & HTML

Formas geométricas con CSS & HTML

Mensaje por Mikae el Miér Sep 24, 2014 7:09 pm



Formas geométricas con CSS & html


Ahora vamos a recordar como se crea un círculo como sabrán se usa el famoso border-radius para lograr alguna forma circular.



Un circulo bien lindis! Pero el border radius no solo sirve para hacer circulos o puntar circulares por el contrario también sirve para dar muchas formas. Por ejemplo  



No, no es un trozo de pizza (?)

Esto es gracias a que se puede usar el porcentaje, o definir la cantidad de cada lado, o simplemente se define el lado de todos
Código:
border-radius: XX% XX% XX% XX%; o  border-radius: XXpx XXpx XXpx XXpx;


Ahora los cuadrados, los más usados para tablillas, no se queden ahí, los cuadrados ya pasaron de moda (?)

Código:
width:150px;height:150px;background: #BA4242;


Dejando de lado los cuadrados sosos vamos con una figura de tres lados!

Código:
width: 0;height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #8FBABF;
Dependiendo de como juegues con los bordes y width, crearan figuras de todos tamaños

Otras figuras
Ahora que ya recorrimos lo básico podrán lograr efectos hermosos dependiendo de su creatividad y experimentar con las propiedades, aquí algunos ejemplos de figuras acabadas. Me gustaría ver si logran alguna figura <3



[Tienes que estar registrado y conectado para ver esa imagen]



Créditos a css-tricks



[Tienes que estar registrado y conectado para ver esa imagen]
Los miembros del Staff no damos soporte por MP
Mikae
Administrador
avatar
Mi foro :

Sexo :
Masculino
Mensajes :
299

Edad :
21

Ver perfil de usuariohttp://matryoshka.foroac.com/t124-taller-grafico-codigoshttp://matryoshka.foroac.com/t101-yobanashi-deceive-gallery-eniozuhttp://eniozu.tumblr.com/
  • Pestaña 1
  • Pestaña 2
  • Pestaña 3

Volver arriba Ir abajo

Re: Formas geométricas con CSS & HTML

Mensaje por Mun Go el Vie Sep 26, 2014 12:54 am

Omg, adoré el tutorial, muchas gracias por compartirlo *-* Me puse a inventar un rato(?) y logré hacer el corazón:

---

Y bueno, andaba sin imaginación y no pude hacer más que estas otras. Igual seguiré practicando y viendo qué más puedo hacer:
[Tienes que estar registrado y conectado para ver esa imagen] [Tienes que estar registrado y conectado para ver esa imagen]

Nuevamente, gracias por el tutorial *-*!


Última edición por Mun Go el Lun Sep 29, 2014 5:07 pm, editado 1 vez
Mun Go
Usuario
avatar
Mi foro :

Mensajes :
11

Ver perfil de usuario
  • Pestaña 1
  • Pestaña 2
  • Pestaña 3

Volver arriba Ir abajo

Re: Formas geométricas con CSS & HTML

Mensaje por Jade Green el Dom Sep 28, 2014 6:09 am

Hola estoy intentando hacer el circulo pero no me sale, esta muy bien este tutorial, me encanta pero no me sale el circulo T_T


[Tienes que estar registrado y conectado para ver esa imagen]
Jade Green
Usuario
avatar
Mi foro :

Sexo :
Femenino
Mensajes :
100

Ver perfil de usuario
  • Pestaña 1
  • Pestaña 2
  • Pestaña 3

Volver arriba Ir abajo

Re: Formas geométricas con CSS & HTML

Mensaje por Mikae el Dom Sep 28, 2014 12:25 pm

@Mungo Oh Dios, que hermosura. Por eso eres mi alumno favorito (?) Okno. En verdad has jugado muy bien, me gusta tu resultado mucho, mola.

@Jade ¿No te sale? Haber pasa el código en hide por aquí, haber si hay algún error.


[Tienes que estar registrado y conectado para ver esa imagen]
Los miembros del Staff no damos soporte por MP
Mikae
Administrador
avatar
Mi foro :

Sexo :
Masculino
Mensajes :
299

Edad :
21

Ver perfil de usuariohttp://matryoshka.foroac.com/t124-taller-grafico-codigoshttp://matryoshka.foroac.com/t101-yobanashi-deceive-gallery-eniozuhttp://eniozu.tumblr.com/
  • Pestaña 1
  • Pestaña 2
  • Pestaña 3

Volver arriba Ir abajo

Re: Formas geométricas con CSS & HTML

Mensaje por Jade Green el Dom Sep 28, 2014 1:03 pm

Se supone que seria asi.Es muy   simple:

Código:
<div style="border-radius: 25px 25px 25px 25px white;"></div>

Ya despues os  enseño  una  tablilla que hice en un foro de ficha de pj que en la imagen sale circulo pero en code sale cuadrado.
Jade Green
Usuario
avatar
Mi foro :

Sexo :
Femenino
Mensajes :
100

Ver perfil de usuario
  • Pestaña 1
  • Pestaña 2
  • Pestaña 3

Volver arriba Ir abajo

Re: Formas geométricas con CSS & HTML

Mensaje por Mikae el Dom Sep 28, 2014 1:11 pm

Jade Green escribió:Se supone que seria asi.Es muy   simple:

Código:
<div style="border-radius: 25px 25px 25px 25px white;"></div>

Ya despues os  enseño  una  tablilla que hice en un foro de ficha de pj que en la imagen sale circulo pero en code sale cuadrado.

El problema es que el color no se añade en la propiedad border-radius. Para el color debe ser background: white; tambien debes definir la altura, y anchura que sería width y height en pixeles. Sería algo así aplicando el background, height , width.


Código:
<div style="border-radius: 25px 25px 25px 25px; background: white; width: 25px; height: 25px;"></div>


[Tienes que estar registrado y conectado para ver esa imagen]
Los miembros del Staff no damos soporte por MP
Mikae
Administrador
avatar
Mi foro :

Sexo :
Masculino
Mensajes :
299

Edad :
21

Ver perfil de usuariohttp://matryoshka.foroac.com/t124-taller-grafico-codigoshttp://matryoshka.foroac.com/t101-yobanashi-deceive-gallery-eniozuhttp://eniozu.tumblr.com/
  • Pestaña 1
  • Pestaña 2
  • Pestaña 3

Volver arriba Ir abajo

Re: Formas geométricas con CSS & HTML

Mensaje por Jade Green el Dom Sep 28, 2014 1:36 pm

Ahhh ok creia que si  gracias, eres un sol. Voy a tomar nota ^^. Entonces cuando solo quiera poner solo el borde del circulo y rellenarlo con una imagen seria background-image:url. Si  no me equivoco. Ya se ya lo vi ^^
Jade Green
Usuario
avatar
Mi foro :

Sexo :
Femenino
Mensajes :
100

Ver perfil de usuario
  • Pestaña 1
  • Pestaña 2
  • Pestaña 3

Volver arriba Ir abajo

Re: Formas geométricas con CSS & HTML

Mensaje por mock94 el Dom Nov 16, 2014 9:35 pm

Hola, ya que me echaron de la escuela xD pues me puse a ver estos tutoriales.
Ahmm ¿Si quisiera ponerle texto encima de las círculos como le puedo poner?
Porque en el codepen no puedo poner el código normal de texto.

[Tienes que estar registrado y conectado para ver este vínculo]

P.D. Se que no es mucho, pero la verdad me costó entender el tutorial ya que no sabía que debía poner "DIV" Si, así de perdida estoy U.u
mock94
Usuario
avatar
Mi foro :

Sexo :
Femenino
Mensajes :
21

Ver perfil de usuario
  • Pestaña 1
  • Pestaña 2
  • Pestaña 3

Volver arriba Ir abajo

Re: Formas geométricas con CSS & HTML

Mensaje por Virginia O'hara el Mar Mar 31, 2015 6:03 am

¿Y se podría poner un fondo con una imagen?
avatar
Mi foro :

Sexo :
Femenino
Mensajes :
13

Ver perfil de usuario
  • Pestaña 1
  • Pestaña 2
  • Pestaña 3

Volver arriba Ir abajo

Re: Formas geométricas con CSS & HTML

Mensaje por Blackou el Miér Feb 17, 2016 12:34 pm

Que puedo decir, este tutorial me viene de perlas.
Ya luego muestro mi resultado.



Black Ou
Can you hear my h e a r t. Even if you call me crazy..."i  n e e d  y o u"
Listen to my heart....It has to be y o u...
"Like a h a b i t I can’t quit, yeah"
Blackou
Usuario
avatar
Mi foro :

Mensajes :
8

Ver perfil de usuario
  • Pestaña 1
  • Pestaña 2
  • Pestaña 3

Volver arriba Ir abajo

Re: Formas geométricas con CSS & HTML

Mensaje por Contenido patrocinado

Contenido patrocinado
  • Pestaña 1
  • Pestaña 2
  • Pestaña 3

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.