Selector universal
Selecciona todo en el archivo
*{
color:blue;
}
Selectores descendentes
Selecciona la etiqueta que este dentro de otras etiquetas
div article p{
color:blue;
}
Selectores Avanzados
Selecciona las etiquetas directas del div
div > p{
color:blue;
}
Selector de atributos
Selecciona todos los inputs con el atributo type sin importar el valor que tengan
input[type]{
color:blue;
}
Selector de atributos
Selecciona los atributos que tengan text o cualquier otro valor que especifiquemos
Se utiliza mucho para desarrollar buenos estilos en los formularios
input[type="text"]{
color:blue;
}
Temas varios/consejos
- CONSEJO: No es bueno crear grandes bloques de media queries
- Ponerle estilos a los formularios(inputs)
CSS Grid
- grid-template-columns: repeat(2, 1fr); es como tener 50% 50%, fr significa una fraccion, otro ejemplo
repeat(2, 1fr); = 50 50 , repeat(4, 1fr); = 25 25 25 25 - Mozilla developer edition sirve mucho para CSS Grid, te muestra las columnas presionando el boton de Grid en inspeccionar elemento
Guiate por las columnas y filas del navegador columnas es de izquierda a derecha y filas de arriba a abajo
- Selector: el elemento al cual queremos aplicar el estilo
Por etiqueta:h1{}tambiénh1, p{}| Por id:#titulo{}| Por clase:.titulo{}también.titulo , .parrafo{}
- Propiedades en CSS:
.titulo{
color:blue;
} - Selectores avanzado:
#color > .titulo{}|a[href]{color:red;}óa[href="empresa.com"]{color:red;}|a[class="titulo"]{color:blue;} - Background-img: si no tiene sistema de grillas, abarca las veces que quiera la imagen
body {
background-image: url("img/goku0.jpg");
background-repeat: no-repeat;
} - vh: viewport height para que tome la altura del navegador
height: 100vh; - Background-repeat: no-repeat : LAS IMAGENES SE REPITEN POR DEFAULT Para que no repita la imagen varias veces
- Background-position: right, top, center, top center, 10% 1%(x,y(también acepta positivos y negativos))
- Background-attachment:
Background-attachment:fixed; - Background-size: 50% 50%; sirve para agrandar el tamaño de la imagen en X y X, si agrandas o achicas el navegador, igual abarca el porcentaje que le pongas(se acompaña con
Background-imgy a vecesBackground-positionóBackground-attachment) - Background-size: auto; la imagen se muestra en su tamaño original
.caja {
width: 400px;
height: 200px;
border: solid 1px red;
background-image: url("img/goku0.jpg");
background-size: auto; } -
background-size: 300px 100px; tu le pones las medidas a la imagen
.caja2 {
width: 400px;
height: 200px;
border: solid 1px red;
background-image: url("img/goku0.jpg");
background-size: 300px 100px;
}
-
background-size: 300px 100px;
background-repeat: no-repeat;
tu le pones las medidas a la imagen
.caja3 {
width: 400px;
height: 200px;
border: solid 1px red;
background-image: url("img/goku0.jpg");
background-size: 300px 100px;
background-repeat: no-repeat;
}
-
Background-size: 100% 100%; la imagen se muestra en su tamaño original
.caja4 {
width: 400px;
height: 200px;
border: solid 1px red;
background-image: url("img/goku0.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
} -
Background-size: cover; La imagen de fondo cambia de tamaño para cubrir todo el contenedor, incluso si tiene que estirar la imagen o cortar un poco uno de los bordes
.caja4 {
width: 400px;
height: 200px;
border: solid 1px red;
background-image: url("img/goku0.jpg");
background-size: cover;
background-repeat: no-repeat;
} -
Background-size: contain; La imagen de fondo cambia de tamaño para asegurarse de que la imagen sea totalmente visible.
.caja6 {
width: 400px;
height: 200px;
border: solid 1px red;
background-image: url("img/goku0.jpg");
background-size: contain;
background-repeat: no-repeat;
} - Poner texto sobre una imagen
.caja7 {
width: 400px;
height: 200px;
border: solid 1px red;
background-image: url("img/goku0.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}Hello I'm a Goku, I'm a Sayayin
- Centrar una imagen con "background-position:center center;"
.caja8 {
width: 900px;
height: 600px;
border: solid 1px red;
background-image: url("../img/goku0.jpg");
background-repeat: no-repeat;
background-size: 50%;
background-position: center center;
position: relative;
}
- Como resumir varias lineas de código en background
background:url('img/imagen.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
Aquí va resumido
background: url('img/imagen.jpg') no-repeat fixed center center;
- Color Names
- RGBA(red,green, blue,alpha(claridad de negro 1 a transparente 0))
-
Coolors
Te da combinaciones cool de colores, no olvides presionar la barra espaciadora, con "lock" seleccionas un color para que no cambie y con la barra espaciadora cambian los demás
- foter banco de imágenes
- html-color-codes.info Elige tu color manualmente
Dashed
Dotted
Double
Border-radius
display:inline-block
Pone las cajas una al lado de la otra, se debe de poner display:inline-block" en cada caja
Font-family: 'Roboto'Pone el tipo de tipografía
Font-style: italicFont-size: 20px;Pone el tamaño de la tipografía
Font-family: 'Roboto'word-spacing deja un espacio entre cada palabra
letter-spacing deja un espacio entre cada LETRA
text-align:center/right;Centra el texto o lo pone a la derecha
text-decoration:none/overline/underline/line-through para que no tenga nada de CSS predeterminado
text-decoration: overline
text-decoration: underline
text-decoration: line-through
text-transform: uppercase/lowercasetexto en mayúsculas o minúsculas
Sombras(text-shadow: 2px 2px 2px purple;)
El primer valor es horizontal, el segundo vertical y el tercero el tamaño de la sombra
text-shadow: 2px 2px 2px purple; Primer parameto: horizontal, Segundo parametro: vertical, Tercer parametro: Blur, Cuarto parametro: color(nombre,rgba ó hexadecimal)
El impacto de las sombras es "resaltar las fuentes"
La sombra es la que permite que se vea lo que estoy escribiendo
Typography
Fuentes por default en la computadora
body{
font-family: Arial, Sans-serif, Helvetica;
}
Como agregar una fuente
h1{
font-family: "Falcon Masters";
font-size: 20px;
font-style:italic;
color:#428ied;
}
La diferencia entre usar bold de la tipografía y del CSS, es que en CSS es 1 ó 2 px más chico
@font-face {
font-family: 'Indie Flower';
src: url('../fonts/IndieFlower-Regular.ttf');
}
Para usarse:
h1.dancingScriptSemiBold,
p.dancingScriptSemiBold {
font-family: 'Dancing Script', cursive;
font-weight: 600;
}
Checa como se ven
Medidas
Las unicas medidas que se usan para buenas practicas son: px,em, rem
El tamaño de la letra que te pone el navegador por defecto
em: su tamaño es relativo a su padre más cercano
rem: su tamaño es relativo al body
Botones enlaces
Debes usar display:inline-block siempre en los botones enlace
.btn{
background: blue;
color: white;
text-decoration:none;
padding: 10px;
display: inline-block;
margin: 0 10px;
}
Visibility
display: none; //esta wea se usa para desaparecer por completo
visibility: hidden;//esta wea desaparece pero respeta el espacio donde iba lo que desaparecio
overflow
Oculta el texto que se sale de la caja (hidden) y con auto le pone un scroll
overflow: hidden;
overflow: auto;
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, ad labore. Quas alias eligendi, architecto repellat rerum reprehenderit. Quas facere nulla officiis omnis, quis fugit blanditiis suscipit nostrum mollitia quasi!
position relative: mueve tu imagen tomando como base la caja padre.BLABLABLA
position fixed: se quedara en el mismo lugar AUNQUE HAGAS SCROLL.
Position absolute: se coloca encima del relative PERO los pixeles se cuentan de otra manera
bottom:10px, desde abajo 10px hacia arriba
top:10px, desde arriba 10px hacia abajo
right:10px, desde la derecha 10px hacia la izquierda
left:10px, desde la izquierda 10px hacia la derecha
=== Cajas DENTRO de una caja padre RELATIVE===
hijo relative: toma la esquina de la caja padre como referencia, si lo mueves en negativo se sale de la caja por "ENCIMA" de la caja padre
hijo static: No se mueve para ningún lado
Hijo fixed:Toma como referencia el navegador, se pone por encima del padre
hijo absolue: Se pone encima de la caja padre
Consejo
Puedes modificar el tamaño de las imagenes usando "Width" y "height" en la misma etiqueta HTML
Texto en imágenes
La imagen debe tener una posición relativa y el texto una posición absoluta
Titulo con la propiedad auto
Lista desordenada
- Hola
- mundo
- blablabla
Lista ordenada
- Hola
- mundo
- blablabla
Lista sin estilos y sin padding
- Hola
- mundo
- blablabla
list-style:none | circle | square | lower-roman | upper-roman
.thumb {
margin: 10px;
border: 5px solid #ddd;
width: 150px;
}
.thumb:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, .5);
width: 200px;
}
Efecto Opacity:0.4
Batman y Gatubela
filter: blur(2px);
filter: brightness(1.5);
filter: brightness(0.5);
filter: contrast(1);
filter: grayscale(1);
filter: invert(1); (invierte los colores)
filter: saturate(3); (Te satura de más color)
filter: sepia(.2);
Este texto está en posición absoluta y le doy colocación con top y left
.polaroid8 {
position: relative;
background-color: burlywood;
width: 300px;
padding: 10px;
margin: auto;
margin-bottom: 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, .5);
transform: translate(10px, 20px);
div.polaroid9:hover {
filter: sepia(1);
transform: translate(10px, 20px);
}
transform: rotate(50deg);
div.polaroid9:hover {
filter: sepia(1);
transform: rotate(50deg);
}
El transition NO va en el hover, si no en la clase
transition: 1s;
transform: scale(1.2,1.2);
div.polaroid9:hover {
filter: sepia(1);
transform: scale(1.2,1.2);
}
El transition NO va en el hover, si no en la clase
transition: 1s;
transform: scale(1.2,1.2); y transform: rotate(50deg);
div.polaroid9:hover {
filter: sepia(1);
transform: scale(1.2,1.2);
}
El transition NO va en el hover, si no en la clase
transition: 1s;
- transform: translate(horizontal/Vertical/ambos)
- transform: rotate(90deg) rota
- transform: scale(0-1,2,3etc) aumenta o disminuye su tamaño real a escala
- transition: 1s; El tiempo que dura la transición
- transition: all 2s ease-in-outInicio lento y final lento( all significa que se aplique a todas las propiedades)
- transition-timing-function: linear: Misma velocidad de princio a fin
- transition-timing-function: ease:transition-timing-function: ease: comienza lento, luego rápido y termina lento
- transition-timing-function: ease-in: comienza lento y termina rápido
- transition-timing-function: ease-in-out: comienza rápido y termina lento
- animation-name: nombreDeLaAnimacion; Sirve para saber el nombre del Keyframe que hará la animación
- @Keyframe: nombreDeLaAnimacion; La animación
- animation-duration: 4s; Duración de la animación
- animation-delay: 1s; Tiempo que tarda en comenzar la animación
- animation-iterarion-count: 3(ó infinite); El número de veces que se repite la animación
- animation-direction: altenate; alterna la dirección normal e inversa
- animation-direction: reverse;
- animation-direction: alternate-reverse;
- animation-timing-function: linear;
- animation-timing-function: ease; empieza normal, luego rápido y termina lento
- animation-timing-function: ease-in; Lenta completamente
- animation-timing-function: ease-in-out
- Animación de forma resumida: animation: nombreAnimacion 4s infinte(interation-count) alternate(animation-direction)
-
Puedes meter una animación dentro de un hover
div.cubo:hover {
width: 300px;
height: 300px;
transform: rotate(180deg);
animation-name: cuboMamalon;
animation-duration: 4s;
animation-delay: .8s;
}
@keyframes cuboMamalon {
0% {
background-color: red;
}
25% {
background-color: cornflowerblue;
}
50% {
background-color: darkgreen;
}
75% {
background-color: aquamarine;
}
100% {
background-color: brown;
}
}
div.polaroid9:hover {
filter: sepia(1);
transition: width 1s, transform .3s;
transition-delay: .3s;
animation-name: skew;
animation-iteration-count: 2;
animation-duration: 1s; }
Pseudo-clases
a:visited Cuando ya fue visitado un link
a:visited{
color:red;
}
Cuando NO ha sido visitado un link
a:link{
color:yellow;
}
a:link Cuando nosotros damos "click" segundos antes de ir al link
a:link{
color:purple;
}
a:active Cuando nosotros damos "click" , PERO vuelve a su color normal cuando soltamos
a:link{
color:red;
}
p:nth:child(2) Pinta la segunda etiqueta P
p:nth:child(2){
background-color:purple;
}
p:nth-of-typye(even) Pinta los que sean pares
p:nth-of-typye(even){
background-color:purple;
}
p:nth-of-type(odd) Pinta los que sean INPARES
p:nth-of-type(odd){
background-color:purple;
}
p:first-of-type Pinta el primer HIJO , osea que siempre que haya una etiqueta P dentro de un div, pintara la primera P
p:first-of-type{
background-color:purple;
}
p:last-of-type Pinta el último HIJO , osea que siempre que haya una etiqueta P dentro de un div, pintara la ULTIMA P
p:last-of-type{
background-color:purple;
}
p:only-of-type Pinta el único en su tipo
p:only-of-type{
background-color:purple;
}
p:last-child Pinta el último hijo
p:last-child{
background-color:purple;
}
p:only-child Pinta el unico hijo
p:only-child{
background-color:purple;
}
p:only-enable Pinta el elemento activado (se utiliza para los input)
p:only-enable{
background-color:purple;
}
p:only-disable Pinta el elemento desactivado (se utiliza para los input)
p:only-disable{
background-color:purple;
}
p:only-enable Pinta el elemento activado(se utilizan para los radio button ó checkbox)
p:only-enable{
background-color:purple;
}
p:empty Pinta un elemento VACIO
p:empty{
width:10px;
height:10px;
background-color:purple;
}
Pseudo elementos
first-line:La primera linea cambiará, no importa el tamaño de la linea
p::first-line{
color: green;
}
first-letter:La primera linea cambiará a Mayúscula
p::first-line{
color: green;
}
p::before agregara cosas antes del texto
p::before{
content: url("image.jpg");
color: green;
font-size: 3em;
}
p::afteragregara cosas después de que termine el texto
p::after{
content: url("image.jpg");
color: green;
font-size: 3em;
}
p::selection modifica los estilos de todo lo que seleccionas
p::selection{
color: green;
font-size: 3em;
}
- Ir tamaño por tamaño con el responsive, no quieras correr
- Cuando necesites que una etiqueta aside ocupe el 100% del ancho en el responsive, debes hacer lo sig:
@media screen and (max-width:800px){
aside{
width:100%;
}
}
- State of css
- CSS-tricks
- CSS Design Awards Los mejores diseños de sitios web
- CSS ReferenceShow CSS references
- CSS-AnimationsTraining about CSS Animations
- CSS CattleUse your CSS skills to replicate targets with smallest possible code
- Codier Attempt(try) front-end coding challenges.
- Dev Challenges Web Development Resources and Community that help you to become a Web Developer by working with Real-life projects and practices.
- Ace FrontendWeb developer interview
- Code WellImprove your HTML and CSS skills by practicing on real design templates.
- frontloops Power up your frontend development chops with real-world challenges.
- 100 Days CSS 100 CSS Challenges
- Frontend challenges Frontend challenges
- CodePen
- Frontend Practice
- picsumTe da urls de fotos aleatorias
- place-hold.it Te da las medidas de una foto
Sitios importantes
- Flexbox Froggy
- FLEXBOX DEFENSE
- Flexbox adventure
- Grid garden
- Grid attack
- CSS DINNER
- css-speedrun selectores
- guess-css CSS Avanzado
- flexbox zombies
- ¿Que es especificidad?
Preguntas técnicas CSS
La dirección por defecto de flex es alinearse en fila a la izquierda una caja al lado de la otra ejemplo:
- flex-direction: row;
- flex-wrap: nowrap;
- flex-flow: row nowrap;
- justify-content: flex-start;
display: block usa todo el espacio de manera horizontal y pone todo uno debajo del otro
display: inline-flex utilizan solo el espacio que necesitan
display: flex
display: inline-flex
display: inline-flex utilizan solo el espacio que necesitan
flex-direction: row;
flex-direction: row; pone las cajas en fila del lado izquierdo de manera horizontal
flex-direction: row-reverse;
flex-direction: row-reverse; pone las cajas en fila del lado contrario de manera horizontal e invierte su orden
flex-direction: column;
flex-direction: column; coloca las cajas de manera vertical
flex-direction: column-reverse;
flex-direction: column-reverse; coloca las cajas de manera vertical pero al reves invirtiendo su orden
Tecnicamente WRAP y NOWRAP es para saber si la caja flex envuelve o no envuelve todos sus hijos
flex-direction: row;
flex-direction: row; flex-wrap: nowrap; Va a mantener en una linea todas las cajas
flex-direction: row;
flex-direction: row; flex-wrap: wrap; coloca las cajas de manera horizontal y si no caben, las pasa abajo
flex-direction: row;
flex-direction: row; flex-wrap: wrap-reverse; coloca las cajas de manera horizontal y si no caben, las pasa abajo, pero invierte los valores del último al primero
flex-direction: column;
flex-direction: column; flex-wrap: nowrap; coloca las cajas de manera vertical y mantiene el tamaño de las cajitas en una sola columna
flex-direction: column;
flex-direction: column; flex-wrap: wrap; coloca las cajas de manera vertical y si no caben en la columna, las pone en otra
flex-flow =
flex-flow: row wrap-reverse; sirve para usar flex-direction y flex-wrap(es un shortcut) al mismo tiempo pero sin escribir tanto
justify-content depende de flex direction, si es fila o columna
justify-content =
flex-flow: row wrap; + justify-content: flex-start; Sirve para poner al inicio los bloques
justify-content =
flex-flow: row wrap; + justify-content: flex-end; Sirve para poner al final los bloques
justify-content =
flex-flow: row wrap; + justify-content: flex-start; Sirve para poner al inicio los bloques
justify-content =
flex-flow: row wrap; + justify-content: space-between; Sirve para poner al inicio los bloques
justify-content =
flex-flow: row wrap; + justify-content: space-around; Sirve para poner al inicio los bloques
justify-content =
flex-flow: row wrap; + justify-content: space-evenly; Sirve para poner al inicio los bloques
justify-content =
flex-flow: row wrap; + justify-content: flex-start; Sirve para poner al inicio los bloques
justify-content =
flex-flow: column wrap; + justify-content: flex-end; Sirve para poner al inicio los bloques
justify-content =
flex-flow: column wrap; + justify-content: center; Sirve para poner al inicio los bloques
justify-content =
flex-flow: column wrap; + justify-content: space-between; Sirve para poner al inicio los bloques
justify-content =
flex-flow: column wrap; + justify-content: space-around; Sirve para poner al inicio los bloques
justify-content =
flex-flow: column wrap; + justify-content: space-evenly; Sirve para poner al inicio los bloques
flex-flow: row wrap; + justify-content: flex-start; align-items: stretch; estira las cajas, sea column o row lo que hayas puesto en flex-flow, igual las va a estirar
TRABAJA DE MANERA INDEPENDIENTE CADA LINEA
flex-flow: row wrap; + justify-content: flex-start; align-items: stretch; alinea las cajas al final
flex-flow: row wrap; + justify-content: flex-start; align-items: stretch; alinea las cajas al inicio
flex-flow: column wrap; + justify-content: flex-start; align-items: center; estira las cajas, sea column o row lo que hayas puesto en flex-flow, igual las va a estirar
flex-flow: column wrap; + justify-content: flex-start; align-items: center; estira las cajas, sea column o row lo que hayas puesto en flex-flow, igual las va a estirar
flex-flow: column wrap; + justify-content: flex-end; align-items: center; estira las cajas, sea column o row lo que hayas puesto en flex-flow, igual las va a estirar
flex-flow: column wrap; + justify-content: flex-start; align-items: center; estira las cajas, sea column o row lo que hayas puesto en flex-flow, igual las va a estirar
Align content no funciona cuando tienes (cuando los hijos están en una misma linea)
Ejercicios con columnas
flex-flow: column wrap; + justify-content: flex-start; align-content: flex-start;
flex-flow: column wrap; + justify-content: flex-start; align-content: flex-end;
flex-flow: column wrap; + justify-content: flex-start; align-content: center;
flex-flow: column wrap; + justify-content: flex-start; align-content: space-between;
flex-flow: column wrap; + justify-content: flex-start; align-content: space-around;
Ejercicios con filas
flex-flow: column wrap; + justify-content: flex-start; align-content: flex-start;
flex-flow: column wrap; + justify-content: flex-start; align-content: flex-end;
flex-flow: column wrap; + justify-content: flex-start; align-content: center;
flex-flow: column wrap; + justify-content: flex-start; align-content: space-between;
flex-flow: column wrap; + justify-content: flex-start; align-content: space-around;