Apuntes Css Soydalto
Apuntes Css Soydalto
selector {
propiedad : valor;
}
selectores:
universal "*"
Metodologia de ben
responsive-design
El responsive design, es la adaptablidad que tiene una pagina web a los diferentes
dispositivos.
@media only screen and (max-width: 100px) { }
flexbox
forma de maquetar una web, solo se aplica al contenedor
x main axis main-start main-end
y cross axis cross-start cross-end
display: flex;
flex-direction cambiar el main o el cross
flex-direction: row, row-reverse, column-reverse;
flex-wrap la direccion en la cu al se dirigen las cajas al a chicarse
flex-wrap: wrap, wrap-reverse, no-wrap
justify-content justifica el contenido o los items
justify-content: center, space-around, space-between("le da
(cross-axis)
.caja__madre>*:first-child {
align-self: stretch;
} Para que haga efecto en un solo elemento el flex
grid Es una forma de maquetacion al igual que flex, pero con columnas y
tablas que se le da a la tabla madre display: flex;
grid-template-columns sirve para agregar columnas
grid-template-columns: 100px 100px;
grid-template-rows sirve para agregar filas
grid-template-rows: 100px 100px;
1fr sirve como flex-shrink, sirve para dar dinamismo. (Cantidad a repartir
para la caja).fr
.mother {
display: grid;
grid-template-areas:
"header header header"
"aside main main"
"aside main main"
"footer footer footer"
}
.ground2 {
background-color: green;
}
.ground1 {
grid-area: header;
.ground3 {
grid-area: aside;
}
.ground2 {
grid-area: main;
.ground4 {
grid-area: footer ;
} Una forma de realizar una maquetacion normal con grid
Responsive design
Es una forma de maquetar para diferentes dipositivos
@media Comenzar con el responsive design @media
screen and (max-width:400px) and (max-width: 650px)
animaciones
@keyframes
animation-duration: tiempo de la animacion
1s
animation-name: Nombre de la animacion
animation-timing-function: En que orden ira la caja en
la animacion linear | ease | ease-in | ease-out | ease-in-out |
cubic-bezier(x,y,x, y)
animation-interation-count: Cuantas veces se repetira la
animacion 1s | infinite
animation-direction: Que forma va ir la animacin
normal | reverse | alternete | alternete-reverse |
backwards | forwards | both
animation-delay duracion
1s
@keyframes desplazarce {
from {
position: relative;
left: 0;
}
to {
left: 100%;
}
}
@keyframes desplazarce {
0% {
position: relative;
left: 0;
}
50% {
background-color: green;
}
100% {
left: 100%;
background-color: yellow;
}
}
creacion de variables
:root {
--variable: #fg3;
}
scroll-behavior: cambiar la forma en la que se comporta el scroll
scroll-behavior: smooth;
user-select: none; que el usuario no pueda selecciona ningun elemento
text-shadow elegir una sombra a las letras
background
background-img: url("direccion")
brackground-size: x, y | cover | contain actua como el object fict
back-ground: repeat | no-repeat que se repita la misma
imagen en un mismo elemento
background-clip: content-box; recorta la imagenDe donde se
va reflejar la imagen
background-origin: content box; crea la imagen
background-position: right, left; Donde se posiciona la imagen