Actividad 2.7 conceptos CSS

Tutorial de conceptos CSS

1. flexbox

Ejemplo 1. flexbox
Código

.container, .container > div {
   box-sizing: border-box;
  }
.container { 
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100vh;
  flex-wrap: wrap;
  } 
.container > div {
  font-size: 5px;
  padding: .5px;
  color: white;
  margin: 10px;
  border-radius: 3px;
  background: yellowgreen;
  border: 5px solid black;
}
.container > div:nth-child(odd) {
  width: 10%;
  }
.container > div:nth-child(even) {
  width: 20%;
  }
.container > div:nth-child(2),
.container > div:nth-child(4),
.container > div:nth-child(9) {
  width: 60%;
  }
Funcionamiento


Ejemplo 2. flexbox
Código

.cards {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .cards img {
    margin: 10px;
    border: 3px solid #000;
    box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3); 
    max-width: 25vw;
  }
Funcionamiento


Sample photo Sample photo Sample photo Sample photo Sample photo Sample photo

2. overflow

Ejemplo 1. overflow
Código

/* Primer cuadro */
div.overflow1 {
  width: 200px;
  height: 100px;
  background-color: coral;
  overflow: visible;
}
/* Segundo cuadro */
div.overflow1ON {
  width: 200px;
  height: 100px;
  background-color: coral;
  overflow: visible;
  overflow: hidden;
}
Funcionamiento


Primer cuadro

Puede usar la propiedad de desbordamiento cuando desee tener un mejor control del diseño. La propiedad de desbordamiento especifica qué sucede si el contenido desborda el cuadro de un elemento.

Segundo cuadro

Puede usar la propiedad de desbordamiento cuando desee tener un mejor control del diseño. La propiedad de desbordamiento especifica qué sucede si el contenido desborda el cuadro de un elemento.

Ejemplo 2. overflow
Código

p.overflow2 {
     width: 12em;
     height: 100px;
     border: dotted;
     overflow: auto; /* se dibujan barras según se necesite */
}
Funcionamiento


overflow: auto Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

3. text-shadow

Ejemplo 1. text-shadow
Código

.red-text-shadow {
   text-shadow: red 0 -2px;
}
Funcionamiento


Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Ejemplo 2. text-shadow
Código

.text-shadow2{
 text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
Funcionamiento


Text-shadow with red and blue neon glow

4. box-shadow

Ejemplo 1. box-shadow
Código

.box-shadow1{
  background-color: greenyellow;
  width: 100px;
  height: 100px;
  margin: 30px 30px;
  border-radius: 50%;
  box-shadow: -5px -5px 30px 5px red, 5px 5px 30px 5px blue;
}
Funcionamiento


Ejemplo 2. box-shadow
Código

.box-shadow2{
  width: 200px;
  height: 200px;
  margin: 10px 10px;
  padding: 0px;
  border-radius: 10%;
  border: solid black;
  box-shadow: 0.5rem 0.5rem yellow, -0.5rem -0.5rem #ccc;
}
Funcionamiento


gatito

5. transform

Ejemplo 1. transform
Código

.transform1 {
  display: inline-block;
  background-color: #0074d9;
  height: 100px;
  width: 100px;
  font-size: 1px;
  padding: 1px;
  color: white;
  margin-right: 5px;
  margin-left: 5px;
  animation: skew 3s infinite;
  transform: skew(20deg);
  animation-direction: alternate;
  opacity: .7;
}

@keyframes skew {
  0% {
    transform: skewX(20deg);
  }
  100% {
    transform: skewX(-20deg);
  }
}
Funcionamiento


Ejemplo 2. transform
Código

.transform2 {
  display: inline-block;
  background-color: #0074d9;
  height: 100px;
  width: 100px;
  color: white;
  text-align: center;
  opacity: .7;
  font-family: Verdana, sans-serif;
  border: 3px solid rgba(0,0,0,.3); 
  margin-bottom: 30px;
}

.one { 
  transform: rotateX(40deg);
  animation: one 2s infinite;
  animation-direction: alternate;
}
@keyframes one {
  0% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(50deg);
  }
}
Funcionamiento


rotateX