Css – Edison JS

Usando sombras en CSS con los atributos text-shadow y box-shadow

La propiedad de CSS sombra utilizada para el texto como text-shadow y para elementos como box-shadow añade efectos de sombra alrededor del texto o elemento al cual se le aplica. Se pueden definir múltiples sombras separadas por comas.

Suscribete a mi canal

Text-Shadow

La propiedad text-shadow nos permite agregar sombra a los textos. Cada sombra tiene un offset en X y Y tambien un difuminado y un color. Podemos utilizar la cantidad de sombras que sean necesarias, separadas por una coma.

Estructura de la propiedad text-shadow

Con los atributos offSet podemos mover la sombra al lugar que queramos, con blur podemos difuminar la sombra y con el color sea rgb, rgba, hexadecimal o por nombre podemos asignarle un color a la sombra.

Podemos utilizar la cantidad de sombra que queramos mientras separemos con coma cada sombra.

Box-Shadow

La propiedad box-shadow crea un efecto de sombra al marco de un elemento. Se pueden definir múltiples efectos separados por comas.

Estructura de la propiedad box-shadow

Podemos utilizar la cantidad de sombra que queramos mientras separemos con coma cada sombra.

Y asi de facil y sencillo es utilizar las propiedades text-shadow y box-shadow.

Repositorio de la serie: https://gitlab.com/edisonjsapps/css-avanzado

Crear dos botones usando PseudoElementos

Vamos a crear dos botones utilizando CSS para crear un efecto bastante genial. En la parte inferior esta el video que muestra la forma de crear los botones para mayor claridad.

Iniciamos creando en un html dos botones desde la etiqueta <a>

            <div class="col-6 text-center">
                <h3>Botón 1</h3>
             <p class="boton1">
                <a href="#">Soy el botón número 1</a>
            </p>
            </div>
            <div class="col-6 text-center">
                <h3>Botón 2</h3>
                <p class="boton2">
                    <a href="#">Soy el botón número 2</a>
                </p>
            </div>

Botón número 1

Iniciemos creando el estilo al primer botón

.boton1{
	background-color: #40e03b;
	font-family:'Open Sans',sans-serif;
	font-size: 12px;
	text-decoration: none;
	color: #ffffff;
	position: relative;
	padding:10px 20px;
	border-left:solid 1px #09a009;
	margin-left:35px;
	background-image: linear-gradient(bottom,rgb(49,202,44)0% rgb(35,146,25)100%);
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	box-shadow: inset 0px 1px 0px #2aec34, 0px 5px 0px 0px #158515, 0px 10px 5px #999;
}

Luego le creamos el estilo al boton en el momento de ser presionado.

.boton1:active{
	top:3px;
	background-image: linear-gradient(bottom,rgb(49,202,44)0% rgb(35,146,25)100%);
	box-shadow: inset 0px 1px 0px #2aec34, 0px 2px 0px 0px #158515, 0px 5px 3px #999;
}

Luego creamos la parte inicial del botón con el pseudo elemento before.

.boton1::before{
	background-color: #b42525;
	content:"1";
	width:35px;
	max-height: 40px;
	height: 100%;
	position:absolute;
	display: block;
	padding-top: 8px;
	top:0px;
	left: -36px;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	text-shadow: 1px 1px 0px #6e0707;
	border-right: solid 1px #6e0707;
	background-image: linear-gradient(bottom,rgb(125,10,10)0%,rgb(184,14,14)100%);
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	box-shadow: inset 0px 1px 0px #ec2a2a, 0px 5px 0px 0px #3a0303,0px 10px 5px #999;
}

Ahora creamos el estilo para el pseudo elemento al ser oprimido.

.boton1:active::before{
	top:-3px;
	box-shadow: inset 0px 1px 0px #ec2a2a,0px 5px 0px 0px #3a0303, 1px 1px 0px 0px #640404, 2px 2px 0px 0px #640404,2px 5px 0px 0px #640404,6px 4px 2px #0b8b20,0px 10px 5px #999;
}

y listo nuestro primer boton.

Botón número 2

Ahora vamos a crear el segundo boton.

Iniciemos creando el estilo base del botón.

.boton2{
	background-color: #40e03b;
	font-size: 12px;
	text-decoration: none;
	color: #fff;
	position: relative;
	padding: 10px 20px;
	padding-right:50px;
	border-radius: 5px;
	box-shadow: inset 0px 1px 0px #2aec34, 0px 5px 0px 0px #158515, 0px 10px 5px #999;
}

Luego procedemos a darle el efecto cuando se hace click sobre el.

.boton2:active{
	top:3px;
	background-image: linear-gradient(bottom,rgb(49,202,44)0% rgb(35,146,25)100%);
	box-shadow: inset 0px 1px 0px #2aec34, 0px 2px 0px 0px #158515, 0px 5px 3px #999;
}

Ahora vamos a darle estilo al pseudo elemento before de este botón.

.boton2::before{
	background-color: #b42525;
	background-image: url(../images/feliz.png);
	background-repeat: no-repeat;
	background-position: center center;
	content:"";
	width: 20px;
	height: 20px;
	position: absolute;
	right: 15px;
	top: 50%;
	margin-top: -9px;
	border-radius: 50%;
	box-shadow: inset 0px 1px 0px #560505,0px 1px 0px #f06060;	
}

Ahora vamos a modificar su comportamiento en el evento click.

.boton2:active::before{
	top:50%;
	margin-top:-12px;
	box-shadow: inset 0px 1px 0px #f06060,0px 3px 0px #710e0e,0px 6px 3px #0a8815;
}

Y listo asi creamos nuestros dos botones de manera sencilla y aspecto super genial.

Aquí puedes encontrar el video que explica el procedimiento.

Suscribete a mi canal

Aqui tienes el codigo fuente desde gitlab

Link codigo fuente: https://gitlab.com/edisonjsapps/botones-pseudoelementos

Si fue útil el tutorial deja un comentario y si te gusto puedes también suscribirte a nuestro newsletter para que no te pierdas ningún tutorial y suscribete a mi canal de youtube