Tutorial:Formas de Grid ♥


owo¡ me confundi de titulo en la imagen >w<¡ wa era formas de Grid pero bueno despues lo areglo ,aqui les dejare el tutorial en que formas lo pueden tener el circle grid era en forma de circulo ahora les traigo de diferentes formas que pueden hacerlo



Vista Previa 

Elije la forma que desees :3
Forma cuadrada 
si lo quieren asi 
Solo ve a los siguientes tutoriales :
Tutorial circle grid tipo 1 part1
Tutorial circle grid tipo 1 part2
Tutorial circle grid tipo 1 part3
Tutorial circle grid tipo 1 part4
Elije uno el que te guste y buscas en los codigos :
border-radius: 50%;
Borras todos los que encontraste y ya lo tendras en forma cuadrada

Forma 1
Como dije ve a uno de esos tutoriales y buscas el codigo 
border-radius: 50%;
50:Disminuyes a 30 y lo veras como la imagen :3 ,puedes aumentar el numero o disminuir el numero
FORMA 2
Como dije ve a uno de esos tutoriales y buscas el codigo 
border-radius: 50%;
En todos los que encontraste ese codigo lo remplazas por el siguiente:
border-bottom-right-radius: 80px 55px;
border-top-right-radius: 80px 55px;
80:Aumenta el numero y se pondra mas rendondeada la esquina inferior derecha
80:Aumenta el numero y se pondra mas redondeada la esquina superior derecha
55:Aumenta el numero y se curvara un poco en las esquina
Si quieres que se rendondee la esquina izquierda solo cambia del codigo :
right a left
FORMA 3
Como dije ve a uno de esos tutoriales y buscas el codigo 
border-radius: 50%;
En todos los que encontraste ese codigo lo remplazas por el siguiente:
border-bottom-left-radius: 80px 100px;
border-top-right-radius: 100px 100px;
border-top-left-radius: 80px 55px;
80:Aumenta el numero y se pondra mas rendondeada la esquina inferior izquierda
80:Aumenta el numero y se pondra mas redondeada la esquina superior izquierda
100:Aumenta el numero y se pondra mas rendodeada la esquina superior derecha
55:Aumenta el numero y se curvara un poco en las esquina
Si no te gusta las curvas puedes eliminar
100px  y 55px
Si quieres que se rendondee la esquina izquierda solo cambia del codigo :
right a left
FORMA 4

Como dije ve a uno de esos tutoriales y buscas el codigo 
border-radius: 50%;
En todos los que encontraste ese codigo lo remplazas por el siguiente:
border-bottom-left-radius: 80px;
border-top-right-radius: 100px;
80:Aumenta el numero y se pondra mas rendondeada la esquina inferior izquierda
100:Aumenta el numero y se pondra mas rendodeada la esquina superior derecha
Si quieres que se rendondee la esquina izquierda solo cambia del codigo :
right a left

Listo espero que les haya gustado :3

6 comentarios :

  1. no te imagina cuanto estaba buscando algo así y contigo como siempre puedo encontrar hasta una gran variedad de ella :3
    gracias!

    ResponderEliminar
  2. Pasense x mi blog y diganme que tal me quedo el diseño http://melykawaii.blogspot.com.ar/

    ResponderEliminar

Hola :3 Bienvenidos a Lunany-kawaii
Debera seguir las siguientes reglas:
-No insultos
-No spam
-Ni peleas
gracias ♥