Fonts se pueden sacar de https://fonts.google.com/ Para dejar de forma normal el navegador ocupa https://necolas.github.io/normalize.css/8.0.0/normalize.css Si se necesita consultar alguna propiedad https://cssreference.io/ , estan todas
Variable en Css es --color:red; despues solo tienes que cambiar el valor del color y listo background: var(--color);
/**/
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*/
}