Artistas Digitales

Introducción a las Nuevas Funcionalidades en CSS3

CSS3 No Comments
Introducción a las Nuevas Funcionalidades en CSS3

CSS es uno de los lenguajes mas utilizados en nuestros días para la creación de paginas web. Y una de sus grandes ventajas es que en todo momento se tiene separada la capa de presentación y contenido, favoreciendo a la estructura semántica de la pagina. Tal parece que su uso va en aumento y día a día se pueden encontrar ejemplos excepcionales que han sobre pasado por mucho la web que imaginábamos años atrás.

En esta publicación presento una colección de tips y técnicas para aplicar efectos visuales mediante CSS3, sin necesidad de herramientas externas como Photoshop y JavaScript.

DESCARGA EL CODIGO DE EJEMPLO -> Nuevas Funcionalidades en CSS3

Animaciones Mediante CSS3 puro

1 domina efectos css3 famosos nuevo.jpg

Una de mis funcionalidades favoritas en CSS3 es la creación de animaciones, en realidad es fácil si se entienden las raíces. Inicialmente debes declarar propiedades de tu clase. Para el ejemplo creamos un circulo las propiedades iniciales serian el color el ancho, largo, color y posición; dentro de esa clase se agregan datos de la animación como el nombre de la animación, duración, dirección, tiempo de retardo y el conteo de iteraciones.

<html>
<header>
	<title>Ejemplo de esquinas redondeadas mediante CSS3</title>
	<style>
	.bola {
		background: firebrick;
		border-radius: 50%;
		width: 160px;
		height: 160px ;
		position : absolute;
		bottom: 0;
		left: 45%;
		animation-name: contoneo;
		animation-duration: 1s;
		animation-iteration-count : infinite;
		animation-direction: alternate;
		animation-timing-function: ease-out;
		animation-delay: 0;
		animation-play-state: running;
		animation-fill-mode: none;

	}

	@keyframes contoneo {
		from {
			bottom: 0; height: 90px;
		}
		10% {
			bottom: 0; height: 160px;
		}
		to {
			bottom: 50%;
		}
	}
	</style>
</header>
<body>
	<h1>EJEMPLO: Animaci&oacute;n mediante CSS3</h1>
	<div class="bola"></div>
</body>
</html>

Pripiedad CSS3: opacity

No hay necesidad de utilizar imágenes o complejos scripts para aplicar transparencia a cualquier elemento de la pagina. Para esto solo utilizamos la siguiente regla CSS


img{

opacity: .6;

}

La propiedad opacity acepta valores decimales entre cero y uno (siendo cero la transparencia total) otras opciones disponibles para crear elementos semi transparentes dentro de tu pagina es utilizando colores RGBA o HSLA. Cuando hacemos definición de colores usando estos métodos en particular, tenemos el poder de agregar el canal alfa de un color en particular.


.ejemplo {

background-color: rgba(255,96,0,0.6)

}

Nota que obtenemos el mismo resultado, aplicando HSLA. Finalmente el código quedaría de la siguiente manera:


.ejemplo {

background-color: hula(23,100%,50%,0.6);

}

HSLA : (Hue Saturation and Lightness) Toma un valor entre 0 y 359 (para definir el color hue) y los siguientes dos valores representan la cantidad de saturación y brillo para el hue elegido. El ultimo valor representa el nivel de transparencia.

Esquinas redondeadas Mediante CSS3

2 domina efectos css3 famosos nuevo.jpg

Pero la propiedad de CSS3 border-radius hace todas estas técnicas obsoletas. Esta es la sintaxis


.ejemplo{

border-radius:40px;

}

Incluyendo esta propiedad dentro de nuestro elemento, tendrá esquinas con un radio de 40px

El ejemplo anterior es una forma corta de esta propiedad pero se puede aplicar por separado a cada esquina según tus necesidades.

Tips para utilizar esta propiedad:

De forma longhand, seremos capaces de definir valores diferentes para cada esquina. Se pueden crear elipses si aumentas el radio lo suficiente.

<html>
<header>
	<title>Ejemplo de esquinas redondeadas mediante CSS3</title>
	<style>
	.caja {
		padding: 10px;
		background-color: #fcfcf0;

		border-radius: 20px;
		box-shadow: #aaa 2px 2px 20px 5px;
	}
	img {
		border-radius: 40px;
		box-shadow: #aaa 2px 2px 20px 5px;
	}
	</style>
</header>
<body>
<h1>Ejemplo de esquinas redondeadas mediante CSS3</h1>
<h2>Aplicado a un elemento "section"</h2>
<section class="caja">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas bibendum viverra. Curabitur aliquam, tortor id auctor dignissim, nunc orci aliquam sapien, vitae fermentum nunc nisl quis arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ligula metus, convallis eu auctor suscipit, pretium id purus. Mauris in justo dignissim mi faucibus pretium at in eros. Curabitur varius turpis sed sem pharetra eu molestie arcu convallis. Maecenas ligula erat, suscipit nec bibendum sed, porta ut eros. Etiam eleifend nunc non nisl ullamcorper eleifend condimentum elit auctor. Maecenas eget ipsum quam. Vivamus egestas auctor pretium. Integer in consequat ante. Nam volutpat, nunc sit amet lobortis lacinia, tellus tellus malesuada magna, eget sagittis mi sapien vel magna. Sed ultrices euismod consectetur. Curabitur a velit sem, quis accumsan odio. Donec sit amet leo mi, id aliquam metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Aenean ac diam ante, in ultrices lacus.</p>
</section>
<h2>Aplicado a una imagen</h2>
<img src="imagen_ejemplo.png" alt="Ejemplo de transparencia mediante CSS3 en imagenes">

</body>
</html>

Efecto “Texto estereoscópico”

3 domina efectos css3 famosos nuevo.jpg

Para los expertos “Textos 3D modo estereoscópico anaglífico”, tal vez suene un poco raro el termino pero en general este efecto es muy famoso. Existen muchas formas de lograrlo pero la mas común es tener una frase base y aplicar desplazamientos en el texto variando colores. Y esta es la forma en que lograríamos crear el efecto:

<html>
<header>
	<title >Tooltips con puro CSS3</title>
	<style>
	h1 {
		position: relative;
		font-size: 150px;
		font-family: sans-serif;
		letter-spacing: -5px;
		color: rgba(215,211,228,0.82);
	}
	h1:after {
		content: "Artistas Digitales";
		position: absolute;
		left: 3px;
		top: 5px;
		color: rgba(0,18,255,0.6);
	}
	h1:before {
		content: "Artistas Digitales";
		position: absolute;
		left: 5px;
		top: 11px;
		color: red;
	}
	</style>
</header>
<body>
<h1>Artistas Digitales</h1>
</body>
</html>

Sombras de fondo para el texto

En años anteriores lograr este efecto solo era posible mediante la utilización de imágenes o scripts complejos, siendo estrictos en cuestión de rendimiento esta no es la mejor opción para crear este tipo de efectos. Hoy en día es muy fácil crear este efecto visual gracias al uso de CSS3, con lo cual tendríamos algo como esto:


h1{

text-shadow: #999 2px 2px 4px;

}

Una sola línea!. Sencillo, ¿no?

¿Como funciona este pedazo de código?

Bien, esta nueva propiedad acepta cuatro valores:

  • Primero valor: Representa el color de la sombra (Para el ejemplo es un color gris claro)
  • Segundo valor: Desplazamiento de la sombra vertical.
  • Tercero valor: Desplazamiento de la sombra horizontal.
  • Cuarto valor (opcional): Indica el grado de desenfoque, aconsejo utilizar un valor pequeño, para que la sombra no pierda sentido.

Sombras y brillos a elementos completos

CSS nos permite aplicar sombras a cualquier elemento dentro de la pagina usando la propiedad box-shadow. Y además nos controlar el nivel de transparencia cuando se agregan colores RGBA a esta propiedad.

Aquí escribimos un ejemplo de la sintaxis


.sombra {

box-shadow: #aaa 2px 2px 20px 5px;

}

El funcionamiento casi igual a la propiedad text-shadow, pero con dos pequeñas diferencias. Debido a que tenemos la opción de incluir la distancia de dispersión (5px para el ejemplo anterior) y opcionalmente agregar un keyword.

Este tipo de efectos también pueden ser utilizados para crear resplandor.

Mensajes flotantes (“Toltips”)

9 domina efectos css3 famosos nuevo.jpg

Los mensajes flotantes son otro tipo de elementos que usualmente utilizan JavaScript. CSS3 nos facilita la vida y ahora es posible crear estos famosos “globitos”, usando CSS3 tendríamos un código similar a esto:

<html>
<header>
	<title >Tooltips con puro CSS3</title>
	<style>
	a:link {
		 position: relative;
		 text-decoration: none;
		 border-bottom: solid 1px;
	}
	a:before {
		 content : "";
		 position: absolute;
		 border-top: 20px solid #0090ff;
		 border-left: 30px solid transparent;
		 border-right : 30px solid transparent;
		 display: none;
		 top: -18px;
		 left: -26px;
	}
	 a:after {
		 content: attr(data-tooltip);
		 position: absolute;
		 color:white;
		 top: -35px;
		 left: -26px;
		 background: #0090ff;
		 padding : 5px 15px;
		 -webkit-border-radius: 10px;
		 -moz-border-radius : 10px;
		 border-radius: 10px;
		 white-space: nowrap;
		 display: none;
	 }
	 a:hover:after, a:hover:before {
	 	display: block;
	 }
	</style>
</header>
<body>
<h1>Ejemplo de tooltips con CSS3</h1>
<p>
	 Lorem ipsum dol or si <a href="#"  data-tooltip="Este globo fue generado solo con CSS3" >se&ntilde;ala este link</a>t amet el i t , sed do eiusmod tempor inci didunt ut labore et dolare magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ipsum dol or si t amet el i t , sed do eiusmod tempor inci didunt ut labore et dolare magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex  eiusmod tempor inci didunt ut labore et dolare magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ipsum dol or si t amet el i t , sed do eiusmod tempor inci didunt ut labore et dolare <a href="#"  data-tooltip="Este globo tambien fue generado a traves de CSS3" >se&ntilde;ala este link</a> magna aliqua ut enimea commodo consequat.
</p>
</body>
</html>

Diálogos burbuja tipo comic

4 domina efectos css3 famosos nuevo.jpg

Otro efecto famoso en algunos sitios es crear diálogos para hacer citas o resaltar información. Una tecnica muy socorrida era el uso de imágenes como fondo; y como no es de sorprenderse se puede recrear esta tecnica mediante CSS3 mediante el uso de gradientes.

<html>
<header>
	<title >Tooltips con puro CSS3</title>
	<style>
	.burbuja{
		border-radius: 50%;
		background-image: -webkit-linear-gradient(#ff8000, #ff9500, #ffaa00);
		background-image: -moz-linear-gradient(#ff8000, #ff9500, #ffaa00);
		background-image: -ms-linear-gradient(#ff8000, #ff9500, #ffaa00);
		background-image: -o-linear-gradient(#ff8000, #ff9500, #ffaa00);
		color: white;
		float: right;
		position: relative;
		padding: 15px 30px;
		width: 150px;
		bottom: 30px;
		margin-top: 40px;
	}
	.burbuja:before {
		content: '';
		display: block;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		position: absolute;
		background-image: -webkit-linear-gradient(#ff8000, #ff9500, #ffaa00);
		background-image: -moz-linear-gradient(#ff8000, #ff9500, #ffaa00);
		background-image: -ms-linear-gradient(#ff8000, #ff9500, #ffaa00);
		background-image: -o-linear-gradient(#ff8000, #ff9500, #ffaa00);
		bottom: -15px;

	}
	.burbuja:after {
		content: '';
		display: block;
		width: 14px;
		height: 14px;
		border-radius: 50%;
		position: absolute;
		background-image: -webkit-linear-gradient(#ff8000, #ff9500, #ffaa00);
		background-image: -moz-linear-gradient(#ff8000, #ff9500, #ffaa00);
		background-image: -ms-linear-gradient(#ff8000, #ff9500, #ffaa00);
		background-image: -o-linear-gradient(#ff8000, #ff9500, #ffaa00);
		bottom: -27px;
		left: 20px;
	}
	</style>
</header>
<body>
<p>dasasdas dasasdas dasasdas dasasdas dasasdas dasasdas dasasdas dasasdas dasasdas dasasdas dasasdas dasasdas dasasdas dasasdas dasasdas dasasdas este es un e<div class="burbuja">Este es un ejemplo de burbuja!</div>asdasdasdas asdasdasdas asdasdasdas </p>
</body>
</html>

Estas propiedades nos permiten definir varias características de las columnas incluyendo el numero de columnas, el color de la barra vertical que separa las columnas y espacio entre columnas. Lo mejor es que si el navegador no lo soporta el texto se vera en una sola columna.

Crear patrones de fondo con CSS3

6 domina efectos css3 famosos nuevo.jpg

En ahora buena, esta es una de las ideas mas geniales que han surgido después de que fuera anunciado CSS3. Y es la creación de fondos mediante patrones definidos con CSS3. Lo único que necesitas para crear uno de estos es creatividad y experiencia en los gradientes. A continuación presentamos un ejemplo de cómo crear este tipo de patrones

<html>
<header>
	<title >Patrones CSS3 como fondo</title>
	<style>
	body{
		background:
		radial-gradient(black 15%, transparent 16%) 0 0,
		radial-gradient(black 15%, transparent 16%) 8px 8px,
		radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
		radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
		background:
		-webkit-radial-gradient(black 15%, transparent 16%) 0 0,
		-webkit-radial-gradient(black 15%, transparent 16%) 8px 8px,
		-webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
		-webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
		background:
		-moz-radial-gradient(black 15%, transparent 16%) 0 0,
		-moz-radial-gradient(black 15%, transparent 16%) 8px 8px,
		-moz-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
		-moz-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
		background:
		-o-radial-gradient(black 15%, transparent 16%) 0 0,
		-o-radial-gradient(black 15%, transparent 16%) 8px 8px,
		-o-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
		-o-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
		background-color:#282828;
		background-size:16px 16px;
		color: #bdb2b2;
	}
	</style>
</header>
<body>
<p>contenido contenido contenido contenido contenido contenido contenido contenido contenido contenido contenido contenido contenido contenido contenido contenido contenido contenido contenido contenido contenido contenido contenido </p>
</body>
</html>

Texto tipo “Tilt-Shift” mediante CSS3

7 domina efectos css3 famosos nuevo.jpg

Una buena técnica para sobre poner texto en imágenes y crear efectos asombrosos. En realidad las aplicaciones son ilimitadas y el uso es sencillo solo debemos conocer el uso de la propiedad transform. Una implementación quedaría así:

<html>
<header>
	<title >Patrones</title>
	<style>
	p{
		-webkit-transform: rotate(8deg) skewX(-15deg) ;
		-moz-transform: rotate(8deg) skewX(-15deg) ;
		-o-transform: rotate(8deg) skewX(-15deg) ;
transform: rotate(8deg) skewX(-15deg) ;
	}
	p:nth-child(1) {
		text-shadow: #eee 0 5px 2px,
		#eee 2px 8px 8px,
		#eee 4px 12px 10px,
		#eee 6px 14px 14px;
	}
	p:nth-child(2) {
		text-shadow: #eee 0 5px 2px,
		#eee 2px 8px 4px,
		#eee 4px 12px 4px,
		#eee 6px 14px 18px;
	}
	p:nth-child(3) {
		text-shadow: #eee 0 5px 6px,
		#eee 2px 8px 10px,
		#eee 4px 12px 18px,
		#eee 6px 14px 25px;
	}
	</style>
</header>
<body>
<h2>Secccion</h2>
<br />
<br />
<section class="publicaciones">
	<p class="example-columns">Esta es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna
	</p>
	<p class="example-columns">Esta es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna es una columna
	</p>

</section>
</div>
</body>
</html>

Texto 3D Mediante CSS3

8 domina efectos css3 famosos nuevo.jpg

No es necesario el uso de scripts complicados o imágenes pesadas. Solo declara una clase y mediante la propiedad text-shadow agrega el color y desplazamiento de cada sombra hasta obtener el efecto deseado. Ejemplo

<html>
<header>
	<title >Tooltips con puro CSS3</title>
	<style>
	.texto-3d {
		color: #842727;
		text-shadow: #ff5000 1px -1px 0,
					 #ff5000 2px -2px 0,
					 #ff5000 3px -3px 0,
					 #ff5000 4px -4px 0,
					 #ff5000 5px -5px 0,
					 #ff5000 6px -6px 0;
	}
	.elemento {
		background-color: black;
		color: white;
		width: 200px;
		padding: 0 30px;
		box-sizing: border-box;
	}
	</style>
</header>
<body>
<h1 class="texto-3d">Ejemplo de tooltips con CSS3</h1>
<p>
	 Lorem ipsum dol or si t amet el i t , sed do eiusmod tempor inci didunt ut labore et dolare magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
	 <section class="elemento">
	 	<header>
		 	<h1>Propiedades BOX</h1>
	 	</header>
		 <p>Lorem ipsum dol or si t amet el i t , sed do eiusmod tempor inci didunt ut labore et dolare magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
	 </section>
</p>
</body>
</html>

Transformaciones CSS3

10 domina efectos css3 famosos nuevo.jpg

Una funcionalidad que todos deben conocer. El uso de la propiedad transform debe ser esencial para creativos en la web, los resultados son múltiples; en este ejemplo mostramos como aplicar efectos sobre textos e imágenes.

En la primera parte se aplica la propiedad transform para voltear texto verticalmente, en la segunda parte se aplica sobre una imagen donde simulamos el voltear una carta y finalmente giramos texto en sentido de las manecillas del reloj.

<!DOCTYPE html>
<html>
<header>
	<title >Patrones</title>
	<style>
	.reversa {
		transform: rotateY(180deg);
		-webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
		-o-transform: rotateY(180deg);
		transform: rotateY(180deg);
	}
	/* Voltear Imagen */
	#ej1_contenedor {
		position: relative;
		margin: 10px auto;
		width: 450px;
		height: 281px;
		z-index: 1;
	}
	#ej1_contenedor {
		-webkit-perspective: 1000px;
		-moz-perspective: 1000px;
		-o-perspective: 1000px;
		perspective: 1000px;
	}
	#ej1_img {
		width: 100%;
		height: 100%;
		-webkit-transform-style: preserve-3d;
		-webkit-transition: all 1.0s linear;
		-moz-transform-style: preserve-3d;
		-moz-transition: all 1.0s linear;
		-o-transform-style: preserve-3d;
		-o-transition: all 1.0s linear;
		transform-style: preserve-3d;
		transition: all 1.0s linear;
	}
	#ej1_contenedor:hover #ej1_img, #ej1_contenedor.hover_effect #ej1_img {
		-webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
		-o-transform: rotateY(180deg);
		transform: rotateY(180deg);

		-webkit-box-shadow: -5px 5px 5px #aaa;
		-moz-box-shadow: -5px 5px 5px #aaa;
		box-shadow: -5px 5px 5px #aaa;
	}
	.parte {
		position: absolute;
		width: 100%;
		height: 100%;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-o-backface-visibility: hidden;
		backface-visibility: hidden;
	}
	.parte.trasera {
		display: block;
		-webkit-transform: rotateY(180deg);
		-webkit-box-sizing: border-box;
		-moz-transform: rotateY(180deg);
		-moz-box-sizing: border-box;
		-o-transform: rotateY(180deg);
		-o-box-sizing: border-box;
		transform: rotateY(180deg);
		box-sizing: border-box;
		padding: 90px;
		color: white;
		text-align: center;
		background-color: #f95a5a;
	}
	/* Rotar texto */
	.rotar_txt {
	  -moz-transform: rotate(12deg);
	  -webkit-transform: rotate(12deg);
	  transform: rotate(12deg);
	}
	</style>
</header>
<body>
		<! Parte 1 Rotar texto horizontalmente -->
		<h1>TEXTO DE EJEMPLO</h1>
		<h1 class="reversa">TEXTO DE EJEMPLO</h1>

		<! Parte 2 Efecto girar tarjeta -->
		<div id="ej1_contenedor">
			<div id="ej1_img">
				<div class="parte">
					<img src="imagen_ejemplo.png" width="450" height="281"/>
				</div>
				<div class="trasera parte">
					<p>CSS3 Rockea!!!</p>
					<p>Cualquier informacion puede ir aqui.</p>
				</div>
		 		</div>
		</div>

		<br /><br />

		<! Parte 3 Efecto girar texto -->
		<h2 class="rotar_txt">Rotar texto de ejemplo</h2>

</body>
</html>

Transparencia

11 domina efectos css3 famosos nuevo.jpg

La configuración de transparencia a través de CSS ha estado aquí desde algún tiempo atrás, se podría decir que desde los tiempos de internet Explorer. Pero CSS3 extiende su funcionalidad agregando el uso de niveles alfa dentro de colores RGB, lo que resulto como RGBA.

Como ultimo efecto aplicamos transparencia a través de CSS3 en elementos como texto e imágenes. Para obtener este efecto utilizamos la propiedad opacity para imágenes y colores RGBA en cualquier tipo de texto.

<html>
<header>
	<title>Transparencia</title>
	<style>
	img:hover {
		opacity: .6;
	}
	p.transparencia{
		opacity: .5;
	}
	.ejemploRGBA {
		background-color: rgba(255,96,0,0.6);
	}
	.ejemploHSLA {
		background-color: hsla(23,100%,50%,0.6);
	}
	</style>
</header>
<body>
<h1>Ejemplo transparencia mediante CSS3</h1>
<p>Este es el color <strong>original</strong> para el contenido de la etiqueta "p"!</p>
<p class="transparencia">Este texto utiliza la misma etiqueta que el texto de arriba "p" pero la clase a la que pertenece modifica el nivel de transparencia.</p>
<br />
<h2>Coloca el puntero del mouse sobre esta imagen</h2>
<img src="imagen_ejemplo.png" alt="Ejemplo de transparencia mediante CSS3 en imagenes">

</body>
</html>

Espero te guste esta reseña de lo que se puede lograr con un poco de imaginacion y conocimiento en esta nueva tecnologia. No olvides comentar!

¿Te gusto el artículo? Compartelo!!

Acerca del autor

Dejar un comentario