Cacher is the code snippet organizer for pro developers

transform:scale(1.2) translate(0,100%) rotate(180deg) skrew(10deg); /*scale sirve para escalar tamaños, translate es para moverlo, rotate es la rotacion y skrew es para dar un angulo */
/*scaleX(),scaleY()/ translateX(),translateY()/rotateX(),rotateY()/skrew(x,y)*/

perspective:1000px;/*sirve para los efectos 3D para hacerlos mas realistas y se le pone al padre*/

backface-visibility:hidden, visible;/*es la parte trasera de un elemento*/

transform-style:preserve-3d;/*sirve para prservar los 3d y se pone al que se le esta poniendo los estilos*/



/*//////////////////////////////////////////////TRANSITIONS///////////////////////////////////////////////*/
transition-property:all/color;/*va al objeto al cual se le hace el efecto*/
transition-duration:1s;/*la duracion*/
transition-timing-function:ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end;/**/
transition-delay:2s;/*delay de la transicion*/
/*SIMPLIFICADO TRANSITION*/
transition:color .5s,background .5s .5s;/*toma los efectos que estan en hover o los demas efectos y les pone tiempo de duracion*/


/*////////////////////////////////////////////////ANIMATION/////////////////////////////////////////////*/
animation-name:rebotando;/*nombre de la animacion*//*MINIMA PARA ANIMAR*/
animation-duration:3s;/*la duracion de la animacion*//*MINIMA PARA ANIMAR*/
animation-delay:0;/*espera un rato, un delay*/
animation-direction:alternate o normal o reverse o alternate-reverse;/*direccion de la animacion, alternate sirve para que venga y va*/
animation-iteration-count:infinite o un numero;/*numero de animaciones*/
animation-play-state:running;/*si esta corriendo o no*/
animation-fill-mode:forwards;/*como quedara el elemento cuando se pause o se termine*/
animation-timing-function:ease-in;/*desaselere y despues meta fuerza*/
/* https://codepen.io/AlvaroFelipe/pen/2b62e080d82480993ad4fc86e2004e6a */
/*SIMPLIFICADO animation*/
animation: color 5s infinite alternate;/*es nombre de la animacion, los segundos de la animacion, cuantas veces se repetira y si alterna o no*/

@keyframes color{ /*el nombre del keyframe es el que corresponde a la animacion*/
  25%{
    color:yellow;
  }
  50%{
    color:green;
  }}



clip-path:circle(100px at 50% 150px);/*ouede ser circle o inset()*/
clip-path: polygon(0 0, 100% 0, 50% 20%, 30% 80%);/*hover clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); */ 

/*/////////////////////////////////////////FILTROS//////////////////////////////////////////////////////*/
/*LOS FILTROS SE LE PONEN AL OBJETO QUE UNO QUIERE QUE SE LE DE EL EFECTO*/

filter:blur(10px);/*radio de desenfoque*/

filter:brightness(1.5);/*luminosidad*/

filter:contrast(1.5);/*Contraste, 1 es 100%, 2 es 200%, número o porcentaje*/

filter:drop-shadow(0 10px 10px #000);/*es igual a box-shadow,*/ 

filter:grayscale0(.5);/*número o porcentaje (100% = b/w)*/

filter:hue-rotate(180deg)/*<angle>, sirve para rotar la paleta de colores*/

filter:invert()/*número o porcentaje*/

filter:opacity()/*número o porcentaje*/

filter:saturate()/*número o porcentaje, para saturar la foto, va de 1=100%*/

filter:sepia()/*número o porcentaje, da el efecto de fotografia antigua, llega hasta el 1;*/

/*////////////////////////////////PSEUDOCLASES////////////////////////////////////////////////////////////*/
a:hover{/*Hover hace un efecto cuando pasamos el mouse por arriba*/
  background:red;
}

a:active{/*da un efecto cuando se presiona el boton*/
  transform: scale(0.9);
}

a:target{/*ocurre el efecto cuando se tiene el objeto como target*/
  margin:10px;
}

input:focus{/*cuando se hace un click al input*/
  background:yellow;
}

input:disable{/*hace alusion a los input que esten disable*/
  background:grey;
}


.elegir:checked+label{/*cuando se presiona un check cambia de cosa*/
  font-size:10px;
  background:yellow;
}

body{
  color:green; /*sirve para poner color*/
  font-size:50px; /*sirve para dar tamaño*/
  font-family:Arial, sans-serif;/*pone el font a la letras*/
  margin:10px;/*da un margen de afuera con los elementos*/
  margin-top:;
  margin-bottom:;
  margin-left:;
  margin-right:;
  text-align:center;/*sirve para alinear el texto*/
  text-decoration:none;/*sirve para quitarle las decoraciones al texto*/
  display:inline-block;/*sirve para ponerlos en bloque y en linea sirve para botones horizontales*/
  padding:20px;/*es el margen que ocupa el contenido del elemento y su borde y todo es por dentro*/
  padding-top:;
  padding-bottom:;
  padding-right:;
  padding-left:;
  width:300px;/*valor del ancho*/
  height:300px;/*valor de altura*/
  opacity:.7;/*opacidad*/
  line-height:100px;/*valor de linea vertical*/
  z-index:100;/*es la prioridad que se le da a un elemento para que este antes que otro, como si fueran capas*/
  min-height:100vh;/*sirve para que el body mida toda la pantalla, vh=viewportheight, vw=vieportwidth, es decir el footer quedara perfecto, eso va en el padre*/
  box-sizing:border-box;/*sirve para que quede completo el grid ajustando la caja sirve cuando se pone a todo el elemento con *{} */
  overflow:hidden;/*Sirve para ocultar todo lo que esta fuera del padre, se le pone al padre el que contiene a los hijos que se salen de su lugar */
  will-change: transform;/*Se le pone al hijo en la transformacion para mejorar la performance*/
  align-content:center;/*sirve para alinear el contenido*/
  border:5px solid black;/*borde valor y tipo y color*/
  border-radius:10px;/*da un borde redondo*/
  border-top-left-radius:10px;/*da u borde redondeado solo a top, left*/
  list-style:none;/*quita los estilos a una lista*/
  white-space:nowrap; /*hace que el contenedor no se superponga sino que el texto solo siga horizontal y se pone en el elemento que contiene al texto*/
  
  
  /*/////////////////////////////////////////////BACKGROUNDS//////////////////////////////////////////////*/
  /*Para el background de imagenes, el primer link va siempre de los primeros, el segundo e una capa que va debajo y si ponemos una 3° va ir debajo de la 2° y asi sucesivamente*/
  background:green;/*color de fondo*/
  background:rgb(255,0,255,0.5); /*da un 0.5 de transparencia*/
  background:hsl(0,100%,0%);/*el primero se pone en numero del color de el circulo de los 360°,el 2° es saturacion, lo hace mas suave, el 3° es la luz, a mayor porcentaje es mayor, menor es mas oscuro*/
  background:linear-gradient(
                hsl(340,100%,60%),
                hsl(200,100%,60%),;/*Ocupa gradientes*/
  background:url(link), url(link), white;/*imagen+fondo blanco, el color siempre debe ir al final*/
  background-repeat:no-repeat, no-repeat;/*es para que no se repita un elemento dentro del bacground*/
  background-position:center, bottom right;/*se le da la posicion de x e y, si las 2 son iguales solo se pone 1, si hay mas de 1 elemento se pone por orden*/
  background-size:10%, cover;/*es para darle tamaño al background, puede ser cover que sirve para ocupar la caja completa o un tamaño, puede ser contain para llenar el tamaño*/
  
  
  
  /*////////////////////////////////////////////POSITIONS//////////////////////////////////////////////////*/
  position:absolute;/*el elemento queda volando en el aire y se puede mover respecto al padre, se lepone al hijo que uno quiere mover*/
  position:relative;/*siempre se pone al padre con relative y al hijo con absolute para moverlo dentro del padre relative*/
  position:fixed;/*el padre es l viewport(pantalla completa) y se queda en la pantalla, al hacer scroll no se mueve*/
  
  
   
  /*/////////////////////////////////////////////FLEXBOX///////////////////////////////////////////////////*/
  /*se necesita un elemento padre y un hijo*/
  /*width->main(horizontal, ->de izquierda a derecha->)*/
  /*heigth->cross(vertical, de arriba hacia abajo)*/
  /*partida de main, main-start, main-end*/
  /*partida de cross, cross-start, cross-end*/
  
  .padre row{
  display:flex;/*(Solamente se le pone a los padres para poder ocupar las propiedades de .padre, en bootstrap ya tiene esto hecho en los row y container por ende si lo ponemos en un div podemos mover los elementos dentro de los div)*/
  flex-direction:row,row-reverse,column,column-reverse;/*parte del main-end envez del main-start*/
  flex-wrap:wrap,no-wrap,wrap-reverse;/*cuando es no-wrap quiere decir que no saltara de linea pero si es wrap salta de linea y no se amontonaran */
  flex-flow:row wrap ;/*es un atajo, se puede poner la direccion y despues el orden*/
  justify-content:flex-start o flex-end o center o space-between(pega pared) o space-around(distribucion entre ellos);/*ve donde se pociciona para partir, start es de derecha y end desde la izquierda pero sin cambiar el orden solo la pocicion, el space-between lo distribuye el posicionamient entre ellos, el space-around se alinea con el entorno, aroun ocupa bootstrap*/
  margin:auto;/*te centra el elemento, puede margin-top,bottom, left, rigth*/
  align-content:center;/*te centra el contenido en el centro(no sirve)*/
  flex:auto;/*para que cresza, es un especie de container asique con bootstrap no hay problema, sino se pondria al div que almacena todo*/
  /*Bootstrap ocupa, display:flex; flex-direction:row; flew-wrap:wrap; justify-content:flex-start, space-between(se pega a la muralla con margin de 15 y 30 entre items)*/
  }
  .hijo div{
    text-align:center;/*alinea el texto dentro del elemento*/
  }
}

.grid-container{
  display:grid;/* para formar un grid*/
  grid-template-columns:1fr;/*son las columnas, dependiendo de las columnas se pone el valor, si son 3 columnas seria 1fr 1fr 1fr*/
  grid-template-rows:100px 200px;/*son las lineas, dependiendo de el tamaño de los rows como uno quiera*/
  grid-gap:10px;/*el margen entre los elementos del grid*/
}