Algunas Características de CSS3 (parte 1)

Comenzaremos este tuto con Una de las Caracteristicas de CSS3 mas destacadas, como lo son los selectores, mostraremos un ejemplo en el cual crearemos 4 div’s con la clase “columna” y al agregar nth-child(even) y nth-child(odd) haremos que una tenga un color blanco y la siguiente un color gris, y asi sucesivamente tantos divs como mostremos, el código CSS seria asi:

.columna:nth-child(even) {
  background: #dde;
}
.columna:nth-child(odd) {
  background: white;
}

Y aqui tenemos el resultado:

columna 1

columna 2

columna 3ndiv>

columna 4

Tenemos también atributos específicos, como por ejemplo:

input[type="text"] {
  background: #eee;
}

Esto hará que todos los input de tipo texto tengan un fondo de color #eee.

Una nueva característica bastante interesante es la negación, podemos hacer una negación de esta manera:

:not(.ejemplo) {
  color: red; 
}            
:not(span) {
  align: center; 
}  

Con esto hariamos que los que no tengan la clase “ejemplo” tengan un color rojo y que lo que no este entre una etiqueta “span” que se centre.
Podemos tener también una mayor selectividad, como por ejemplo:

h2:first-child { ... }

div.texto > div { ... } 
h2 + header { ... } 

podemos tambien usar Fuentes web

@font-face {
  font-family: 'LeagueGothic';
  src: url(LeagueGothic.otf);
}

@font-face {
  font-family: 'Droid Sans';
  src: url(Droid_Sans.ttf);
}

header {
  font-family: 'LeagueGothic';
}

Justificacion de texto

Aqui podemos mostrar un ejemplo de la justificacion de texto con overflow:hidden

#wrapping {width: 50%}
#overflow-hidden { font-size: 25px; height: 1.1em; overflow: hidden; }
#no-wrap { font-size: 25px; height: 1.1em; white-space: nowrap; overflow: hidden; }
#ellipsis { font-size: 25px; text-overflow: ellipsis; white-space: nowrap; height: 1.1em; overflow: hidden; }

Y aqui vemos el resultado en los tres contenedores:

Mostramos un pequeño ejemplo de el justificado de texto con overflow:hidden

Mostramos un pequeño ejemplo de el justificado de texto con overflow:hidden

Mostramos un pequeño ejemplo de el justificado de texto con overflow:hidden

 

Tenemos también las Columnas, cambiando simplemente un numero, podemos tener tantas columnas como queramos:

.Ejemplo{
  column-count: 4;
  column-rule: 1px solid #bbb;
  column-gap: 2em;
  display: block;
  padding: 10px 20px;
  color: black;
  background: rgba(255, 255, 255, 0.4);
  -webkit-border-radius: 8px;
  -khtml-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  margin-bottom: 10px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

Tenemos un resultado como este... claro, hay que tener en cuenta, que debes usar los prefijos o incluir prefix-free en tu web.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vestibulum ligula in diam ornare congue id ac erat. Quisque et justo nulla, et eleifend justo. Phasellus aliquet orci sit amet libero auctor aliquet. Nunc vulputate porta pulvinar. Sed porttitor, mi a elementum luctus, lectus sem molestie magna, ut volutpat lorem dolor eu libero. Nullam vulputate justo sem, non fringilla metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur vitae augue ac nisi semper posuere eu vulputate elit. Morbi aliquam vehicula velit eget facilisis. Integer magna sem, hendrerit sit amet auctor sit amet, scelerisque vitae elit.

Podemos crear texto con trazos utlizando text-stroke de esta manera:

#ejemplo-texto-con-trazo { 
              font-size: 85px;
              padding: 20px 0;
              text-align: center;
n 
             text-stroke-color: blue;
              text-fill-color: white;
              text-stroke-width: 1px;
            }

Utilizando esta característica, obtendriamos un resultado como este:

Texto Trazo

Tenemos la libertad de usar opacitad con CSS3, algo muy util para hacer algunos efectos visules, utilizando colores RGBA. Haremos un pequeño ejemplo utilizando un div y texto para que veas como trabajar con colores RGBA.

#ejemplo-opacidad {
                margin: 100px auto;
                font-size: 80px;
                line-height: 200px;
                text-align: center;
                font-weight: bold;
                letter-spacing: -4px;
                border-radius: 5px;
                border-radius: 5px;
                border-radius: 5px;
                border-radius: 5px;
                text-shadow: none;
                color: rgba(255, 0, 0, 0.41);
                background-color: rgba(0, 0, 255, 0.40);
                background-position: initial initial;
                background-repeat: initial initial;
              }

Y asi tenemos un div con opacidad y un texto con el mismo efecto.

Opacidad

Siguiendo con los efectos en los textos, podemos jugar con los tonos, saturación y luminosidad, con HSLA.

#ejemplo-hsla {
              font-size: 75px;
              padding-top: 20px;
              padding-right: 0px;
              padding-bottom: 20px;
              padding-left: 0px;
              text-align: center;
              color: hsla(166,81%,27%,0.30); 
            }

Se pueden crear colores muy buenos con hsla.

HSLA

En otro tuto, mostraremos algunas otras características, como transiciones, animaciones, transformaciones y muchas mas, espero les haya gustado.!!