Snippets de mucha utilidad con CSS

A menudo que desarrollamos proyectos web tenemos muchas estilo que aplicar el diseño pero nos puede ahorrar tiempo si tenemos snippets (Bloque de código) para reutilizar y agregar un estilo visual con CSS y así agilizar nuestro tiempos y costos.

Vamos a ver el listado para cada elemento HTML y los estilos que aplicaremos.

Desgradados para fondos

Podemos agregar un degradado de fondo muy vistoso.

.box {
		/*width: 400px;*/
		height: 400px;
		border: 1px solid black;
		background-image: linear-gradient(to top right, red, blue);
	}

Texto con efecto fondo degradado como mascara.

h1 {
			font-size: 80px;
			background-image: linear-gradient(#FF0D0D, #FF0);
			-webkit-background-clip: text;
			/*color: transparent;*/
			-webkit-text-fill-color: transparent;

		}

Estilos para formularios

Marcar campos incorrecto en inputs.

input:focus:invalid {
 background-color: red;
}

Marcar campos correcto en inputs.

input:focus:invalid {
 background-color: green;
}

Validando con símbolos errores en tiempo real.

input:focus:invalid + span::before {
	content: 'x';
	color: red;
	position: relative;
	top: -40;
	left: 310px;
}

Validando con símbolos correctos en tiempo real.

input:focus:valid + span::before {
	content: '<';
	color: green;
	position: relative;
	top: -40;
	left: 310px;
}

Darle estilo a todos los elementos input menos el de type submit.

input:not([type="submit"]) {
	width: 300px;
	height: 60px;
	border: 1px solid green;
}

Agregar estilo al Placeholder de los elementos inputs.

input::webkit-input-placeholder {
	text-align: left;
	font-size: 18px;
	line-height: 30px;
}

Estilizar apariencia de checkbox.

input[type=checkbox] {
  position: absolute;
  left: -1000em;
}

input[type=checkbox] + label:before {
  content: "";
  display: inline-block;
  width  : 33px;
  height : 32px;
  margin : 0 .5em 0 0;
  background: url("imagenes/smile.png") no-repeat 0 0;

  vertical-align: bottom;
  position: relative;
  bottom: 2px;
}

input[type=checkbox]:checked + label:before {
  background-position: 0 -32px;
}

Crear gráficos con CSS

Crear un divertido figura de forma de huevo.

#huevo{
	width: 120px;
	height: 180px;
	background: #d1d1d1;
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Crear una figura en forma de pacman.

#pacman {
	margin-top: 30px;
	width: 0;
	height: 0;
	border: 100px solid yellow;
        border-right-color: transparent;
        border-radius: 50%
}

Crear una figura de una estrella usando pseudoelementos de CSS.

#estrella {
			margin: 50px 0;
			width: 0;
			height: 0;
			display: block;
			position: relative;
			border-right: 100px solid transparent;
			border-left: 100px solid transparent;
			border-bottom: 70px solid green;
			transform: rotate(35deg);
		}

		#estrella::before {			
			width: 0;
			height: 0;
			display: block;
			border-right: 30px solid transparent;
			border-left: 30px solid transparent;
			border-bottom: 80px solid green;
			content: '';
			position: absolute;
			top: -45px;
			left: -65px;
			transform: rotate(-35deg);
		}

		#estrella::after {			
			width: 0;
			height: 0;
			display: block;
			border-right: 100px solid transparent;
			border-left: 100px solid transparent;
			border-bottom: 70px solid green;
			content: '';
			position: absolute;
			top: 3px;
			left: -105px;
			transform: rotate(-70deg);
		}

Crear figuras geométricas con CSS

Crear una figura de circulo.

#circulo {
			width: 100px;
			height: 100px;
			background: green;
			border-radius: 50px;
		}

Crear la figura de un trapecio con CSS.

#trapecio {
			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			border-bottom: 100px solid blue;
			height: 0;
			width: 100px;
		}

Dibujar la figura de un pentagono.

#pentagono {
    position: relative;
    width: 54px;
    
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: green transparent;
}

#pentagono:before {
     content: "";
    
    position: absolute;
    height: 0;
    width: 0;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent green;
}

Pintar la figura de un Hexagono.

#hexagono {
    width: 100px;
	height: 55px;
	background: green;
	position: relative;
}

#hexagono:before {
    content: "";
    position: absolute;
	top: -25px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 25px solid green;
}

#hexagono:after {
    content: "";
	position: absolute;
	bottom: -25px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 25px solid green;
}

Otros Efectos con CSS

Crear una burbuja de dialogo con CSS.

#burbuja {
			width: 180px;
			height: 150px;
			/*line-height: 30px;*/
			background: white;
			border: 1px solid purple;
			position: absolute;
			top: 80px;
			left: 300px;
			border-radius: 10px;
			padding: 20px;
			font-size: 25px;
			font-family: 'calibri';
			box-sizing: border-box;
			/*position: relative;*/
			box-shadow: 2px 2px 5px rgba(0, 0, 0, .6);
		}

		#burbuja::before {
			content:'';
			width: 0;
			height: 0;
			border-left: 20px solid transparent;
			border-right: 20px solid transparent;
			border-bottom: 40px solid white;
			/*border: 1px solid purple;*/
			position: absolute;
			top: 50px;
			left: -30px;
			transform: rotate(270deg);		
		}

Usar imagen como border con CSS.

#foto {
			width: 300px;
			height: 300px;
			background: url('foto.jpg') no-repeat;
			background-size: 100% 100%;
			/*background-origin: border-box;*/
			border: 100px solid transparent;
			border-image: url('border2.png') 220 repeat; 
			
		}

Mostrar efecto múltiples borders con CSS.

img {
    display: block;
    margin: 20px;
 
   box-shadow:
       0px 0px 0px 5px #fff,
       0px 0px 0px 10px #90842d, 
       0px 0px 0px 13px #505039,
       2px 4px 3px 15px rgba(5, 5, 5, 0.23);
}
 

Imágenes de formas Personalizas con CSS.

.circulo {
     -webkit-clip-path: circle(80px at 100px 90px);
}

.ovalo {
    -webkit-clip-path: ellipse(85px 40px at 140px 90px);
}

.triangulo {
    
    -webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 75%);
    
}

Usando animaciones con CSS

Animacion con una manecilla de un reljo.

.contenedor {
    width: 250px;
    height: 250px;
    overflow: hidden;
}

.reloj {
    background: url('imagenes/reloj.png') no-repeat;
    height: 240px;
    width: 240px;
    transform: rotate(45deg);
}

.manecilla {
    width: 5px;
    height: 80px;
    top: 50px;
    left: 125px;
    position: absolute;
    background: #000;
    
    transform-origin: center bottom;
    
     -webkit-animation: miAnimacion 2s infinite;
}

@-webkit-keyframes  miAnimacion {
        
    0%   {
        background-color: #000;
        transform: rotate(1deg);
    }
    50%   {
        background: green
    }
    100%{
        background-color: red;
        transform: rotate(360deg);
    }

}

Modalidad espejo de un elemento.

img.base{
    
    width: 300px;
    margin: auto;
    display: block;
    
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, 
      color-stop(60%, transparent), 
      from(transparent),to(white)) ;

}

Efecto Desenfoque de fondo.

.desenfoque {
    font-family: monospace;
    color: #e0e0e0;
    font-size: 100px;
    text-align: center;
    line-height: 300px;
    text-shadow: 1px 1px 1px #000;
    

}
.desenfoque:before {
    content: "";
    
    background-image: url('imagenes/imagen.png');
    
     width: 1200px;
    height: 300px;
    
    position: fixed;
    left: 0;
    right: 0;
    z-index: -1;
    display: block;
    
    -webkit-filter: blur(5px);

}

Deja una respuesta