/ CSS

Dar un Toque Profesional a Nuestro Diseño Con Estilos CSS Avanzados

Las hojas de estilo CSS es traje que utilizan aplicaciones web, para muchos esto no es una novedad ya que siempre lo hemos usado.

En este artículo voy a recopilar algunos ejemplos de CSS avanzado, para dar un toque profesional a nuestros diseños, utilizando selectores de atributos, pseudo-clases y pseudo-elementos.

Para mayor información visitar los siguientes enlaces.

Combinaciones y selectores múltiples

Selectores de Atributos

Pseudo-clases y pseudo-elementos

Flexbox


Demo

Abrir en CodePen


Para que puedan apreciar mejor su uso he aquí unos ejemplos

Este ejemplo contiene código funcional.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
	<title>Estilos CSS Avanzados</title>
	<!--Etiquetas metas importantes-->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!--Fuente Roboto obtenida desde Google Fonts-->
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
	<style>
		/*Aquí van tus estilos CSS*/
	</style>
</head>
<body>
	<h1>Estilos CSS Avanzados</h1>

	<!--Selectores de Atributos-->
	<div class="info">
		<a class="link-info" href="https:/google.com" title="Buscador Google" target="_blank">Google</a>
		<a class="link-info" href="https://01luisrene.com" title="01luisrene - Luis Rene Mas Mas" target="_blank">Blog 01luisrene</a>
		<a class="link-info" href="https://developer.mozilla.org" title="Tutoriales de desarrollo" target="_blank">Developer Mozilla</a>
		<a class="link-info" href="https://librosweb.com" title="Libros web de programación" target="_blank">Libros Web</a>
	</div>
	
	<!--Vinculo al Blog-->
	<a href="#" class="link">Vinculo al blog 01luisrene.com</a>
	
	<!--Sistemas Operativos-->
	<ul class="sistemas-operativos">
		<li><p>Windows</p></li>
		<li><p>Linux</p></li>
		<li><p>macOS</p></li>
		<li><p>Otros</p></li>
	</ul>
	
	<!--Ejemplo de uso de los atributos data, uso de before - after-->
	<p class="pago">Monto a pagar <span class="monto-pago" data-left="S/. " data-right=".00">10000000</span></p>
	
	<!--Ejemplo para first-letter-->
	<p class="poesia">
		Acuérdate del día, acuérdate del mes, acuérdate del beso que nos dimos la primera vez.
	</p>
	
	<!--Ejemplo para first-line-->
	<p class="texto-grande">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis inventore architecto tempore molestias ipsam reprehenderit pariatur, accusantium ducimus asperiores quasi earum laborum fugit sequi recusandae ad natus quae? Iste, et, quidem. Nihil deserunt, ratione officiis ea odio vero commodi illo eos consequuntur rem quis unde a tempore esse porro reiciendis temporibus maiores voluptas et, libero ullam in! Reprehenderit consequuntur, sint.
	</p>

	<!--Ejemplo para Combinadores y selectores múltiples + flexbox-->
	<div class="lista">
		<div class="item">
			<h2>Lorem ipsum dolor sit.</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, deleniti.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident aliquam quasi at, cupiditate!</p>
			<div class="sub-item">
				<h4>Lorem ipsum dolor.</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
			</div>
		</div>
		<div class="item">
			<h2>Lorem ipsum dolor sit amet.</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		</div>
		<div class="item">
			<h2>Lorem ipsum dolor sit amet, consectetur.</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident aliquam quasi at, cupiditate!</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, nemo.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad dolores tempore repellat magni ipsam, rerum!</p>
		</div>
		<div class="item">
			<h2>Lorem ipsum dolor sit amet, consectetur adipisicing.</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus odit deleniti sequi?</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore est, quos, rerum deserunt soluta saepe omnis!</p>
			<div class="sub-item">
				<h4>Lorem ipsum dolor sit amet, consectetur.</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate eveniet, consectetur nihil ea quod veniam.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur!</p>
			</div>
		</div>
		<div class="item">
			<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda!</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur sit eum, rerum eaque quaerat beatae.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, est?</p>
		</div>
		<div class="item">
			<h2>Lorem ipsum dolor.</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur sit eum, rerum eaque quaerat beatae.</p>
		</div>
		<div class="item">
			<h2>Lorem ipsum dolor.</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur sit eum, rerum eaque quaerat beatae.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore omnis, rerum ipsum consequuntur dolor provident recusandae, deleniti non quo optio dignissimos, quae culpa ab ratione voluptas vitae quisquam esse at ipsam unde autem neque.</p>
		</div>
	</div>
</body>
</html>

CSS

body{
	font-family: 'Roboto', sans-serif;
}

/*
	Para mayor información visita los siguientes enlaces:
	https://goo.gl/rfRwjR
	https://goo.gl/KpQrQV
	https://goo.gl/PJceyf
*/

.info{
	border: thin solid #585151;
	border-radius: 10px;
	padding: 1em;
	margin-bottom: 2em;
	width: 60%;
}
/*
Estilo aplicado a todas las clases que
contengan la palabra link, dentro de su nombre
por ejemplo: link-web, link-oficial, ...
*/
a[class*="link"]{
	display: block;
	font-size: 1.8em;
	position: relative;
}
/*
Estilo para todos los tag a que contengan en su nombre
la cadena link, a excepción del ultimo elemento, por que 
se lo esta negando con el atributo :not()
*/
a[class*="link"]:not(:last-child){
	margin-top: 0.8em;
	margin-bottom: 1.5em;
}
.link-info[title]::after{
	font-size: 0.5em;
	margin-left: 1em;
}
/*Estilos aplicados según la cadena que contenga su atributo title*/
.link-info[title='Buscador Google']{
	color: #DA3232;
}
.link-info[title='01luisrene - Luis Rene Mas Mas']{
	color: #29942E;
}
.link-info[title='Tutoriales de desarrollo']{
	color: #04B176;
}
.link-info[title='Libros web de programación']{
	color: #3F13A4;
}
/*Agrego el contenido del atributo title al final del tag a*/
.link-info[title]::after{
	content: attr(title);
}

/*Estilo cuando el tag esta activado*/
.link:active{
	color: #3E7DDB;
	text-decoration: none;
	border-bottom: thin solid #000;
}
/*Estilo cuando el puntero del mouse pasa sobre el tag*/
.link:hover{
	color: #171616;
}
/*Estilo cuando el foco esta sobre el tag*/
.link:focus{
	color: #45AB45;
	outline: dotted;
	text-decoration: none;
}
/*Estilo cuando el link aya sido visitado*/
.link:visited{
	color: #A025A4;
	font-weight: 700;
	text-transform: capitalize;
}

.sistemas-operativos{
	list-style-type: upper-roman;
}
.sistemas-operativos li p{
	margin: 0;
}

/*Estilo para el primer elemento li*/
.sistemas-operativos li:first-child p{
	color: #1496E9
	font-size: 1.2em;
	font-weight: 700;
}
/*Estilo para el elemento li posición 2*/
.sistemas-operativos li:nth-child(2) p{
	color: #1B1C1C;
	font-size: 1.4em;
}
/*Estilo para el elemento li posición 3*/
.sistemas-operativos li:nth-child(3) p{
	color: #DB0817;
	font-size: 1.4em;
}
/*Estilo para el ultimo elemento li*/
.sistemas-operativos li:last-child p{
	font-size: 1.2em;
	color: #F73B08;
	letter-spacing: 3px;
	text-transform: uppercase;
}
/*Estilo para todos los elementos li a excepción del ultimo*/
.sistemas-operativos li:not(:last-child){
	margin-bottom: 10px;
}

.pago{
	font-size: 1.3em;
}
.monto-pago{
	font-size: 1.5em;
	font-weight: 700;
}

/*Estilo que muestra el atributo antes del tag*/
.monto-pago::before{
	content: attr(data-left);
}
/*Estilo que muestra el atributo despues del tag*/
.monto-pago::after{
	content: attr(data-right);
}

.poesia{
	font-size: 2em;
	margin-left: 40px;
	margin-right: 40px;
}

/*Estilo para la primera letra del texto*/
.poesia::first-letter{
	font-size: 2.3em;
}

.texto-grande{
	font-size: 1.8em;
}
/*Estilo para la primera linea de texto*/
.texto-grande::first-line{
	background-color: yellow;
	letter-spacing: 8px;
	text-decoration: underline;
	font-weight: 700;
}

/*Estilo a aplicarse cuando se selecciona una porción de texto con el mouse*/
::selection{
	background: #D61212;
	color: #fff;
}

/*============Combinadores y selectores múltiples + flexbox============*/

/*
FlexBox: si deseas mas información y ver el funcionamiento
 en tiempo real visita http://flexbox.help/
*/
.lista{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
}
/*
Puedes aplicar un mismo estilo a varios 
elementos separándolos por una coma
*/
.lista .item, .lista .sub-item{
	box-sizing: border-box;
}
/*Estilo para el primer elemento*/
.lista .item:first-child{
	background: #ABD6FB;
	margin-bottom: 2em;
	width: 100%;
}
/*
Estilo para hijo de tag div que se 
encuentre dentro de la clase padre .lista
*/
.lista div{
	padding: 1em;
}

/*
Estilo para uno de los siguientes 
hermanos que coincida con el tag div
*/
.lista div  ~  div{
	margin-bottom: 1em;
	width: 48%;
}

/*
Estilo para hijos directos de los tag div que
 sean descendientes del contenedor padre .lista
 */
.lista > div{
	border: thin solid #8E8E8E;
}
/*
Estilo que se aplica a partir del segundo tag p 
que se encuentre en el contenedor padre:
en este caso le aplicaran a todos los párrafos
que se encuentren dentro de .lista div sin importar
 que sea un sub hijo.
*/
.lista div p + p{
	display: inline-block;
	position: relative;
	padding-left: 20px;
	padding-right: 20px;
}
/*Estilo before y after*/
.lista div p + p::before, .lista div p + p::after{
	font-size: 2em;
	font-family: sans-serif;
	content: '"';
	height: 15px;
	width: 15px;
	position: absolute;
}

.lista div p + p::before{
	top: 0;
	left: 0;
}
.lista div p + p::after{
	right: 0;
	bottom: 0;
}
/*Estilo que se aplica a las clases .sub-item*/
.lista div .sub-item{
	border-left: 4px solid #8E8E8E;
	width: 100%;
}

/*Regla media query*/
@media (max-width: 600px) { /*Se aplica siempre y cuando el ancho de la pantalla sea menor a 600px*/
	.lista .item{
		background: #D2D1D1;
		width: 100%;
	}
}
Luis Rene Mas Mas

Luis Rene Mas Mas

Hola, soy desarrollador Frontend, me encanta las tecnologías web, mi pasatiempo favorito es administrar este blog.

Leer Más