Оформление списков ul li для информационных блоков

В этой заметке представлено несколько решений, которые помогут избавиться от стандартного вида списков <ul> <li>.

Преимущество данного оформления в том, что используется всего один класс: <ul class="CLASS">.

Такая конструкция сильно упрощает работу со списками в шаблонах и текстах.

Вариант 1a:

Элемент списка
Элемент списка
Элемент списка
Элемент списка
Элемент списка

<ul class="list1a">
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>  
</ul>

<li>Элемент списка</li>

</ul>

.list1a {
	margin: 20px 0 0;
	padding:0;
	list-style: none;
	counter-reset: li;
}
.list1a li {
	border: 2px solid #337AB7;
	background: #EBF3FA;
	position: relative;
	margin-bottom: 20px;
	padding: 16px 10px;
}
.list1a li:hover {
	z-index: 1;
}
.list1a li:before {
	border: 2px solid #337AB7;
	position: absolute;
	top: -14px;
	padding: 2px 10px;
	font-size: 11px;
	font-weight: bold;
	color: #337AB7;
	background: #F7FAFD;
	counter-increment: li;
	content: counter(li);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}
.list1a li:hover:before {
	background: #337AB7;
	color: #FFF;
	-webkit-transform: translate(-12px, 0);
	-ms-transform: translate(-12px, 0);
	-o-transform: translate(-12px, 0);
	transform: translate(-12px, 0);
}
.list1a li:after {
	content: "";
	position: absolute;
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
	-webkit-transition-property: width;
	transition-property: width;
	z-index: -1;
	background: #FFF;
	height: 100%;
	left: 0;
	top: 0;
	width: 0;
}
.list1a li:hover:after {
	width: 100%;
}

.list1a {

margin: 20px 0 0;

padding:0;

list-style: none;

counter-reset: li;

}

.list1a li {

border: 2px solid #337AB7;

background: #EBF3FA;

position: relative;

margin-bottom: 20px;

padding: 16px 10px;

}

.list1a li:hover {

z-index: 1;

}

.list1a li:before {

border: 2px solid #337AB7;

position: absolute;

top: -14px;

padding: 2px 10px;

font-size: 11px;

font-weight: bold;

color: #337AB7;

background: #F7FAFD;

counter-increment: li;

content: counter(li);

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

}

.list1a li:hover:before {

background: #337AB7;

color: #FFF;

-webkit-transform: translate(-12px, 0);

-ms-transform: translate(-12px, 0);

-o-transform: translate(-12px, 0);

transform: translate(-12px, 0);

}

.list1a li:after {

content: "";

position: absolute;

-webkit-transition-duration: 0.4s;

transition-duration: 0.4s;

-webkit-transition-property: width;

transition-property: width;

z-index: -1;

background: #FFF;

height: 100%;

left: 0;

top: 0;

width: 0;

}

.list1a li:hover:after {

width: 100%;

}

Вариант 1b:

Элемент списка
Элемент списка
Элемент списка
Элемент списка
Элемент списка

<ul class="list1b">
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>  
</ul>

<li>Элемент списка</li>

</ul>

.list1b {
	margin: 20px 0 0;
	padding:0;
	list-style: none;
	counter-reset: li;
}
.list1b li {
	border: 2px solid #DDDDDD;
	background: #FAFAFA;
	position: relative;
	margin-bottom: 20px;
	padding: 16px 10px;
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
}
.list1b li:hover {
	z-index: 1;
	border: 2px solid #ADCEE9;
}
.list1b li:before {
	border: 2px solid #ADCEE9;
	position: absolute;
	top: -14px;
	padding: 2px 10px;
	font-size: 11px;
	font-weight: bold;
	color: #337AB7;
	background: #F7FAFD;
	counter-increment: li;
	content: counter(li);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}
.list1b li:hover:before {
	border: 2px solid #337AB7;
	background: #337AB7;
	color: #FFF;
	-webkit-transform: translate(-12px, 0);
	-ms-transform: translate(-12px, 0);
	-o-transform: translate(-12px, 0);
	transform: translate(-12px, 0);
}
.list1b li:after {
	content: "";
	position: absolute;
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
	-webkit-transition-property: width;
	transition-property: width;
	z-index: -1;
	background: #F0F5FB;
	height: 100%;
	left: 0;
	top: 0;
	width: 0;
}
.list1b li:hover:after {
	width: 100%;
}

.list1b {

margin: 20px 0 0;

padding:0;

list-style: none;

counter-reset: li;

}

.list1b li {

border: 2px solid #DDDDDD;

background: #FAFAFA;

position: relative;

margin-bottom: 20px;

padding: 16px 10px;

-webkit-transition-duration: 0.4s;

transition-duration: 0.4s;

}

.list1b li:hover {

z-index: 1;

border: 2px solid #ADCEE9;

}

.list1b li:before {

border: 2px solid #ADCEE9;

position: absolute;

top: -14px;

padding: 2px 10px;

font-size: 11px;

font-weight: bold;

color: #337AB7;

background: #F7FAFD;

counter-increment: li;

content: counter(li);

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

}

.list1b li:hover:before {

border: 2px solid #337AB7;

background: #337AB7;

color: #FFF;

-webkit-transform: translate(-12px, 0);

-ms-transform: translate(-12px, 0);

-o-transform: translate(-12px, 0);

transform: translate(-12px, 0);

}

.list1b li:after {

content: "";

position: absolute;

-webkit-transition-duration: 0.4s;

transition-duration: 0.4s;

-webkit-transition-property: width;

transition-property: width;

z-index: -1;

background: #F0F5FB;

height: 100%;

left: 0;

top: 0;

width: 0;

}

.list1b li:hover:after {

width: 100%;

}

Вариант 2a:

Элемент списка
Элемент списка
Элемент списка
Элемент списка
Элемент списка

<ul class="list2a">
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>   
</ul>

<li>Элемент списка</li>

</ul>

.list2a {
	margin-bottom: 8px;
	padding:0;
	list-style: none;
	counter-reset: li;
}	
.list2a li {
	position: relative;
	border: 2px solid #337AB7;
	background: #EBF3FA;
	padding:16px 20px 16px 28px;
	margin:12px 0 12px 40px;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}
.list2a li:hover {
	background: #FFF;
}
.list2a li:before {
	line-height: 32px;
	position: absolute;
	top: 4px;
	left:-40px;
	width:40px;
	text-align:center;
	font-size: 16px;
	font-weight: bold;
	color: #FFF;
	background: #337AB7;
	counter-increment: li;
	content: counter(li);
	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
}
.list2a li:hover:before {
	width:46px;
}
.list2a li:after {
	position: absolute;
	left: 0;
	top: 4px;
	content: "";
	height: 0;
	width: 0;
	border: 16px solid transparent;
	border-left-color: #337AB7;
	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s
}
.list2a li:hover:after {
	margin-left: 6px;
}

.list2a {

margin-bottom: 8px;

padding:0;

list-style: none;

counter-reset: li;

}

.list2a li {

position: relative;

border: 2px solid #337AB7;

background: #EBF3FA;

padding:16px 20px 16px 28px;

margin:12px 0 12px 40px;

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

}

.list2a li:hover {

background: #FFF;

}

.list2a li:before {

line-height: 32px;

position: absolute;

top: 4px;

left:-40px;

width:40px;

text-align:center;

font-size: 16px;

font-weight: bold;

color: #FFF;

background: #337AB7;

counter-increment: li;

content: counter(li);

-webkit-transition-duration: 0.2s;

transition-duration: 0.2s;

}

.list2a li:hover:before {

width:46px;

}

.list2a li:after {

position: absolute;

left: 0;

top: 4px;

content: "";

height: 0;

width: 0;

border: 16px solid transparent;

border-left-color: #337AB7;

-webkit-transition-duration: 0.2s;

transition-duration: 0.2s

}

.list2a li:hover:after {

margin-left: 6px;

}

Вариант 2b:

Элемент списка
Элемент списка
Элемент списка
Элемент списка
Элемент списка

<ul class="list2b">
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>  
</ul>

<li>Элемент списка</li>

</ul>

.list2b {
	margin-bottom: 8px;
	padding:0;
	list-style: none;
	counter-reset: li;
}	
.list2b li {
	position: relative;
	border: 2px solid #DDDDDD;
	background: #FAFAFA;
	padding:16px 20px 16px 28px;
	margin:12px 0 12px 40px;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}
.list2b li:hover {
	background: #F0F5FB;
	border: 2px solid #ADCEE9;
}
.list2b li:before {
	line-height: 32px;
	position: absolute;
	top: 4px;
	left:-40px;
	width:40px;
	text-align:center;
	font-size: 16px;
	font-weight: bold;
	color: #FFF;
	background: #77AEDB;
	counter-increment: li;
	content: counter(li);
	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
}
.list2b li:hover:before {
	width:46px;
	background: #337AB7;
}
.list2b li:after {
	position: absolute;
	left: 0;
	top: 4px;
	content: "";
	height: 0;
	width: 0;
	border: 16px solid transparent;
	border-left-color: #77AEDB;
	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s
}
.list2b li:hover:after {
	margin-left: 6px;
	border-left-color: #337AB7;
}

.list2b {

margin-bottom: 8px;

padding:0;

list-style: none;

counter-reset: li;

}

.list2b li {

position: relative;

border: 2px solid #DDDDDD;

background: #FAFAFA;

padding:16px 20px 16px 28px;

margin:12px 0 12px 40px;

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

}

.list2b li:hover {

background: #F0F5FB;

border: 2px solid #ADCEE9;

}

.list2b li:before {

line-height: 32px;

position: absolute;

top: 4px;

left:-40px;

width:40px;

text-align:center;

font-size: 16px;

font-weight: bold;

color: #FFF;

background: #77AEDB;

counter-increment: li;

content: counter(li);

-webkit-transition-duration: 0.2s;

transition-duration: 0.2s;

}

.list2b li:hover:before {

width:46px;

background: #337AB7;

}

.list2b li:after {

position: absolute;

left: 0;

top: 4px;

content: "";

height: 0;

width: 0;

border: 16px solid transparent;

border-left-color: #77AEDB;

-webkit-transition-duration: 0.2s;

transition-duration: 0.2s

}

.list2b li:hover:after {

margin-left: 6px;

border-left-color: #337AB7;

}

Вариант 3a:

Элемент списка
Элемент списка
Элемент списка
Элемент списка
Элемент списка

<ul class="list3a">
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>   
</ul>

<li>Элемент списка</li>

</ul>

.list3a {
	padding:0;
	list-style: none;
	counter-reset: li;
}	
.list3a li {
	position: relative;
	border-left: 4px solid #337AB7;
	padding:16px 20px 16px 28px;
	margin:12px 0 12px 80px;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}
.list3a li:before {
	line-height: 32px;
	position: absolute;
	top: 10px;
	left:-80px;
	width:80px;
	text-align:center;
	font-size: 24px;
	font-weight: bold;
	color: #77AEDB;
	counter-increment: li;
	content: counter(li);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
}
.list3a li:hover:before {
	color: #337AB7;
}
.list3a li:after {
    position: absolute;
    top: 26px;
    left: -40px;
    width: 60px;
    height: 60px;
    border: 8px solid #3399FF;
    border-radius: 50%;
    content: '';
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.1);
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.1);
    transform: translateX(-50%) translateY(-50%) scale(0.1);
    pointer-events: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;		
}
.list3a li:hover:after {
    opacity: 0.2;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
    -moz-transform: translateX(-50%) translateY(-50%) scale(1);
    transform: translateX(-50%) translateY(-50%) scale(1);
}

.list3a {

padding:0;

list-style: none;

counter-reset: li;

}

.list3a li {

position: relative;

border-left: 4px solid #337AB7;

padding:16px 20px 16px 28px;

margin:12px 0 12px 80px;

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

}

.list3a li:before {

line-height: 32px;

position: absolute;

top: 10px;

left:-80px;

width:80px;

text-align:center;

font-size: 24px;

font-weight: bold;

color: #77AEDB;

counter-increment: li;

content: counter(li);

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.list3a li:hover:before {

color: #337AB7;

}

.list3a li:after {

position: absolute;

top: 26px;

left: -40px;

width: 60px;

height: 60px;

border: 8px solid #3399FF;

border-radius: 50%;

content: '';

opacity: 0;

-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;

-moz-transition: -moz-transform 0.3s, opacity 0.3s;

transition: transform 0.3s, opacity 0.3s;

-webkit-transform: translateX(-50%) translateY(-50%) scale(0.1);

-moz-transform: translateX(-50%) translateY(-50%) scale(0.1);

transform: translateX(-50%) translateY(-50%) scale(0.1);

pointer-events: none;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.list3a li:hover:after {

opacity: 0.2;

-webkit-transform: translateX(-50%) translateY(-50%) scale(1);

-moz-transform: translateX(-50%) translateY(-50%) scale(1);

transform: translateX(-50%) translateY(-50%) scale(1);

}

Вариант 3b:

Элемент списка
Элемент списка
Элемент списка
Элемент списка
Элемент списка

<ul class="list3b">
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>  
</ul>

<li>Элемент списка</li>

</ul>

.list3b {
	padding:0;
	list-style: none;
	counter-reset: li;
}	
.list3b li {
	position: relative;
	border-left: 4px solid #DDDDDD;
	padding:16px 20px 16px 28px;
	margin:12px 0 12px 80px;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}
.list3b li:before {
	line-height: 32px;
	position: absolute;
	top: 10px;
	left:-80px;
	width:80px;
	text-align:center;
	font-size: 24px;
	font-weight: bold;
	color: #DDDDDD;
	counter-increment: li;
	content: counter(li);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;		
}
.list3b li:hover:before {
	color: #77AEDB;
}
.list3b li:after {
    position: absolute;
    top: 26px;
    left: -40px;
    width: 60px;
    height: 60px;
    border: 8px solid #3399FF;
    border-radius: 50%;
    content: '';
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.1);
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.1);
    transform: translateX(-50%) translateY(-50%) scale(0.1);
    pointer-events: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;		
}
.list3b li:hover:after {
    opacity: 0.2;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
    -moz-transform: translateX(-50%) translateY(-50%) scale(1);
    transform: translateX(-50%) translateY(-50%) scale(1);
}

.list3b {

padding:0;

list-style: none;

counter-reset: li;

}

.list3b li {

position: relative;

border-left: 4px solid #DDDDDD;

padding:16px 20px 16px 28px;

margin:12px 0 12px 80px;

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

}

.list3b li:before {

line-height: 32px;

position: absolute;

top: 10px;

left:-80px;

width:80px;

text-align:center;

font-size: 24px;

font-weight: bold;

color: #DDDDDD;

counter-increment: li;

content: counter(li);

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.list3b li:hover:before {

color: #77AEDB;

}

.list3b li:after {

position: absolute;

top: 26px;

left: -40px;

width: 60px;

height: 60px;

border: 8px solid #3399FF;

border-radius: 50%;

content: '';

opacity: 0;

-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;

-moz-transition: -moz-transform 0.3s, opacity 0.3s;

transition: transform 0.3s, opacity 0.3s;

-webkit-transform: translateX(-50%) translateY(-50%) scale(0.1);

-moz-transform: translateX(-50%) translateY(-50%) scale(0.1);

transform: translateX(-50%) translateY(-50%) scale(0.1);

pointer-events: none;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.list3b li:hover:after {

opacity: 0.2;

-webkit-transform: translateX(-50%) translateY(-50%) scale(1);

-moz-transform: translateX(-50%) translateY(-50%) scale(1);

transform: translateX(-50%) translateY(-50%) scale(1);

}

Вариант 4a:

Элемент списка
Элемент списка
Элемент списка
Элемент списка
Элемент списка

<ul class="list4a">
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>   
</ul>

<li>Элемент списка</li>

</ul>

.list4a {
	padding:0;
	list-style: none;
	counter-reset: li;
}	
.list4a li {
	position: relative;
	padding:12px 20px 20px 28px;
	margin-left: 40px;
	transition-duration: 0.3s;
}
.list4a li:before {
    border: 6px solid transparent;
	line-height: 30px;
	position: absolute;
	top: 0;
	left:-30px;
	width:42px;
	text-align:center;
	font-size: 13px;
	font-weight: bold;
	color: #77AEDB;
	counter-increment: li;
	content: counter(li);
	transition-duration: 0.3s;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
	}
.list4a li:hover:before {
	color: #337AB7;	
}
.list4a li:after {
    position: absolute;
    top: 0;
    left: -30px;
    width: 42px;
    height: 42px;
    border: 6px solid #3399FF;
    border-radius: 50%;
    content: '';
    opacity: 0.5;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
}
.list4a li:hover:after {
	animation: 500ms ease-in-out 0s bounceIn;
    opacity: 1;
}	

@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale3d(.3, .3, .3);
	}
	20% {
		transform: scale3d(1.3, 1.3, 1.3);
	}
	40% {
		transform: scale3d(.9, .9, .9);
	}
	60% {
		opacity: 1;
		transform: scale3d(1.03, 1.03, 1.03);
	}
	80% {
		transform: scale3d(.97, .97, .97);
	}
	to {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}

.list4a {

padding:0;

list-style: none;

counter-reset: li;

}

.list4a li {

position: relative;

padding:12px 20px 20px 28px;

margin-left: 40px;

transition-duration: 0.3s;

}

.list4a li:before {

border: 6px solid transparent;

line-height: 30px;

position: absolute;

top: 0;

left:-30px;

width:42px;

text-align:center;

font-size: 13px;

font-weight: bold;

color: #77AEDB;

counter-increment: li;

content: counter(li);

transition-duration: 0.3s;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.list4a li:hover:before {

color: #337AB7;

}

.list4a li:after {

position: absolute;

top: 0;

left: -30px;

width: 42px;

height: 42px;

border: 6px solid #3399FF;

border-radius: 50%;

content: '';

opacity: 0.5;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.list4a li:hover:after {

animation: 500ms ease-in-out 0s bounceIn;

opacity: 1;

}

@keyframes bounceIn {

0% {

opacity: 0;

transform: scale3d(.3, .3, .3);

}

20% {

transform: scale3d(1.3, 1.3, 1.3);

}

40% {

transform: scale3d(.9, .9, .9);

}

60% {

opacity: 1;

transform: scale3d(1.03, 1.03, 1.03);

}

80% {

transform: scale3d(.97, .97, .97);

}

to {

opacity: 1;

transform: scale3d(1, 1, 1);

}

Вариант 4b:

Элемент списка
Элемент списка
Элемент списка
Элемент списка
Элемент списка

<ul class="list4b">
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>  
</ul>

<li>Элемент списка</li>

</ul>

.list4b {
	padding:0;
	list-style: none;
	counter-reset: li;
}	
.list4b li {
	position: relative;
	padding:12px 20px 20px 28px;
	margin-left: 40px;
	transition-duration: 0.3s;
}
.list4b li:before {
    border: 6px solid transparent;
	line-height: 30px;
	position: absolute;
	top: 0;
	left:-30px;
	width:42px;
	text-align:center;
	font-size: 13px;
	font-weight: bold;
	color: #ADCEE9;
	counter-increment: li;
	content: counter(li);
	transition-duration: 0.3s;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
}
.list4b li:hover:before {
	color: #337AB7;
}
.list4b li:after {
    position: absolute;
    top: 0;
    left: -30px;
    width: 42px;
    height: 42px;
    border: 6px solid #DDDDDD;
    border-radius: 50%;
    content: '';
    opacity: 0.5;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
}
.list4b li:hover:after {
	animation: 500ms ease-in-out 0s bounceIn;
    opacity: 1;
    border: 6px solid #ADCEE9;	
}	

@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale3d(.3, .3, .3);
	}
	20% {
		transform: scale3d(1.3, 1.3, 1.3);
	}
	40% {
		transform: scale3d(.9, .9, .9);
	}
	60% {
		opacity: 1;
		transform: scale3d(1.03, 1.03, 1.03);
	}
	80% {
		transform: scale3d(.97, .97, .97);
	}
	to {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}

.list4b {

padding:0;

list-style: none;

counter-reset: li;

}

.list4b li {

position: relative;

padding:12px 20px 20px 28px;

margin-left: 40px;

transition-duration: 0.3s;

}

.list4b li:before {

border: 6px solid transparent;

line-height: 30px;

position: absolute;

top: 0;

left:-30px;

width:42px;

text-align:center;

font-size: 13px;

font-weight: bold;

color: #ADCEE9;

counter-increment: li;

content: counter(li);

transition-duration: 0.3s;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.list4b li:hover:before {

color: #337AB7;

}

.list4b li:after {

position: absolute;

top: 0;

left: -30px;

width: 42px;

height: 42px;

border: 6px solid #DDDDDD;

border-radius: 50%;

content: '';

opacity: 0.5;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.list4b li:hover:after {

animation: 500ms ease-in-out 0s bounceIn;

opacity: 1;

border: 6px solid #ADCEE9;

}

@keyframes bounceIn {

0% {

opacity: 0;

transform: scale3d(.3, .3, .3);

}

20% {

transform: scale3d(1.3, 1.3, 1.3);

}

40% {

transform: scale3d(.9, .9, .9);

}

60% {

opacity: 1;

transform: scale3d(1.03, 1.03, 1.03);

}

80% {

transform: scale3d(.97, .97, .97);

}

to {

opacity: 1;

transform: scale3d(1, 1, 1);

}

Вариант 5a:

Элемент списка
Элемент списка
Элемент списка
Элемент списка
Элемент списка

<ul class="list5a">
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>   
</ul>

<li>Элемент списка</li>

</ul>

.list5a {
	padding:0;
	list-style: none;
}	
.list5a li {
	position: relative;
	padding: 10px 30px;
	background: linear-gradient(to left, #ADCEE9 0%, #FFF, #ADCEE9);
	border: 2px solid #337AB7;
	color: #506a6b;
	box-shadow: 0 5px 5px 0 rgba(0,0,0, .2);
	margin-bottom: 5px;
	text-align:center;
	background-size: 100% 100%;
	z-index: 1;
}
.list5a li:before {
	content: "";
	position:absolute;
	width: 0;
	height: 100%;
	top: 50%;
	left: 50%;
	background: linear-gradient(to left, #EBF3FA 0%, #FFF, #EBF3FA);
	opacity: 0;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	z-index: -1;
}
.list5a li:hover:before {
	width: 100%;
	opacity: 1;
}

.list5a {

padding:0;

list-style: none;

}

.list5a li {

position: relative;

padding: 10px 30px;

background: linear-gradient(to left, #ADCEE9 0%, #FFF, #ADCEE9);

border: 2px solid #337AB7;

color: #506a6b;

box-shadow: 0 5px 5px 0 rgba(0,0,0, .2);

margin-bottom: 5px;

text-align:center;

background-size: 100% 100%;

z-index: 1;

}

.list5a li:before {

content: "";

position:absolute;

width: 0;

height: 100%;

top: 50%;

left: 50%;

background: linear-gradient(to left, #EBF3FA 0%, #FFF, #EBF3FA);

opacity: 0;

-webkit-transform: translateX(-50%) translateY(-50%);

-moz-transform: translateX(-50%) translateY(-50%);

-ms-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);

-webkit-transition: all 0.3s;

-moz-transition: all 0.3s;

transition: all 0.3s;

z-index: -1;

}

.list5a li:hover:before {

width: 100%;

opacity: 1;

}

Вариант 5b:

Элемент списка
Элемент списка
Элемент списка
Элемент списка
Элемент списка

<ul class="list5b">
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>  
</ul>

<li>Элемент списка</li>

</ul>

.list5b {
	padding:0;
	list-style: none;
}	
.list5b li {
	position: relative;
	padding: 10px 30px;
	background: linear-gradient(to left, #EFEFEF 0%, #FFF, #EFEFEF);
	border: 2px solid #C0C0C0;
	color: #506a6b;
	box-shadow: 0 5px 5px 0 rgba(0,0,0, .2);
	margin-bottom: 5px;
	text-align:center;
	background-size: 100% 100%;
	z-index: 1;
}
.list5b li:hover {
	border: 2px solid #ADCEE9;
}
.list5b li:before {
	content: "";
	position:absolute;
	width: 0;
	height: 100%;
	top: 50%;
	left: 50%;
	background: linear-gradient(to left, #E2F0FA 0%, #FFF, #E2F0FA);
	opacity: 0;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	z-index: -1;
}
.list5b li:hover:before {
	width: 100%;
	opacity: 1;
}

.list5b {

padding:0;

list-style: none;

}

.list5b li {

position: relative;

padding: 10px 30px;

background: linear-gradient(to left, #EFEFEF 0%, #FFF, #EFEFEF);

border: 2px solid #C0C0C0;

color: #506a6b;

box-shadow: 0 5px 5px 0 rgba(0,0,0, .2);

margin-bottom: 5px;

text-align:center;

background-size: 100% 100%;

z-index: 1;

}

.list5b li:hover {

border: 2px solid #ADCEE9;

}

.list5b li:before {

content: "";

position:absolute;

width: 0;

height: 100%;

top: 50%;

left: 50%;

background: linear-gradient(to left, #E2F0FA 0%, #FFF, #E2F0FA);

opacity: 0;

-webkit-transform: translateX(-50%) translateY(-50%);

-moz-transform: translateX(-50%) translateY(-50%);

-ms-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);

-webkit-transition: all 0.3s;

-moz-transition: all 0.3s;

transition: all 0.3s;

z-index: -1;

}

.list5b li:hover:before {

width: 100%;

opacity: 1;

}

И, напоследок, самый простой, но и самый часто используемый вариант:

Вариант 6a:

Элемент списка
Элемент списка
Элемент списка
Элемент списка
Элемент списка

<ul class="list6a">
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>   
</ul>

<li>Элемент списка</li>

</ul>

.list6a {
	padding:0;
	list-style: none;
}
.list6a li{
	padding:6px;
}
.list6a li:before {
	padding-right:10px;
	font-weight: bold;
	color: #77AEDB;
	content: "\2606";
	transition-duration: 0.5s;
}
.list6a li:hover:before {
	color: #337AB7;
	content: "\2605";
}

.list6a {

padding:0;

list-style: none;

}

.list6a li{

padding:6px;

}

.list6a li:before {

padding-right:10px;

font-weight: bold;

color: #77AEDB;

content: "\2606";

transition-duration: 0.5s;

}

.list6a li:hover:before {

color: #337AB7;

content: "\2605";

}

Вариант 6b:

Элемент списка
Элемент списка
Элемент списка
Элемент списка
Элемент списка

<ul class="list6b">
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>  
</ul>

<li>Элемент списка</li>

</ul>

.list6b {
	padding:0;
	list-style: none;
}
.list6b li{
	padding:6px;
}
.list6b li:before {
	padding-right:10px;
	font-weight: bold;
	color: #C0C0C0;
	content: "\2714";
	transition-duration: 0.5s;
}
.list6b li:hover:before {
	color: #337AB7;
	content: "\2714";
}

.list6b {

padding:0;

list-style: none;

}

.list6b li{

padding:6px;

}

.list6b li:before {

padding-right:10px;

font-weight: bold;

color: #C0C0C0;

content: "\2714";

transition-duration: 0.5s;

}

.list6b li:hover:before {

color: #337AB7;

content: "\2714";

}

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на смартфоне Открыть QR-код для перехода на эту страницу с телефона

Помощь по установке кода Ответы на часто задаваемые вопросы и решение типовых ошибок и проблем

Страница находится в стадии разработки

Поддержать блог Любые Ваши (пусть даже и скромные) суммы значительно повышают мотивацию развивать блог, делиться наработками и придумывать новые.

Опубликовано: 20.01.2017 / Обновлено: 22.04.2018
Рубрики: Вкладки, блоки и списки
Метки: CSS, Авторское, Сборники
121035 просмотров

3D hover-эффект ориентированный на направление движения курсора мыши

Оформление горизонтальных линий HR

Красивые варианты оформления горизонтальных линий <hr> на CSS

Вертикальные вкладки

Адаптивные вертикальные вкладки на jQuery

Добавить комментарий:

Ваш комментарий отправлен!

Валерий: 17.05.2023 в 01:17

В первом комментарии что то картинки не было.

Ответить
- Alexander: 17.05.2023 в 11:37
  
  1 - в примерах список ul, а не ol, соотв. этих цифр вообще быть не должно.
  2 - их убирает стиль list-style: none;, а у вас что то другое его значит включает.
  
  Ответить

Валерий: 17.05.2023 в 01:15

Александр, доброго времени суток, а как убрать родные цифры. Скрин приложил.

css код такой.

.list3a {
	padding:0;
	list-style: none;
	counter-reset: li;
}	
.list3a > li {
	position: relative;
	border-left: 4px solid #337AB7;
	padding:16px 20px 16px 28px;
	margin:12px 0 12px 80px;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}
.list3a > li:before {
	line-height: 32px;
	position: absolute;
	top: 10px;
	left:-80px;
	width:80px;
	text-align:center;
	font-size: 24px;
	font-weight: bold;
	color: #77AEDB;
	counter-increment: li;
	content: counter(li);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
}
.list3a > li:hover:before {
	color: #337AB7;
}
.list3a > li:after {
    position: absolute;
    top: 26px;
    left: -40px;
    width: 60px;
    height: 60px;
    border: 8px solid #3399FF;
    border-radius: 50%;
    content: '';
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.1);
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.1);
    transform: translateX(-50%) translateY(-50%) scale(0.1);
    pointer-events: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;		
}
.list3a > li:hover:after {
    opacity: 0.2;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
    -moz-transform: translateX(-50%) translateY(-50%) scale(1);
    transform: translateX(-50%) translateY(-50%) scale(1);
}

Ответить

СЕРГЕЙ: 18.02.2023 в 15:09

Это прям классный сайт. Нет вот этого, где много умничают и вот это - "давным давно код произашёл... и т.д.")) Всё по факту, удобно и много классных фишек, действительно бесплатно! Я тут точно на долго! Спасибо создателям!
И да, первый раз пишу коммент с благодарностью, прям захотелось!)))

Ответить
- Alexander: 20.02.2023 в 08:38
  
  Спасибо за отзыв 🙂
  
  Ответить
Валерий: 21.12.2022 в 13:34

Доброго времени суток, а как можно сделать такую комбинацию.
<ul class="list4a">
<li>1 нумерованный</li>
<ul class="list6b">
<li>маркированный</li>
<li>маркированный</li>
<li>маркированный</li>
</ul>
<li>2 нумерованный</li>
<li>3 нумерованный</li>
</ol>

Ответить
- Alexander: 23.12.2022 в 07:43
  Примерно так и сделать, только:
  1 - использовать правильный HTML:
  
  <ul class="list4a"> <li>нумерованный <ul class="list6b"> <li>маркированный</li> <li>маркированный</li> </ul> </li> <li>нумерованный</li> </ul>
  
  2 - Чуть изменить CSS для нумерованного
  Было: .list4a li
  Нужно: .list4a > li
  и так для всех классов
  Ответить
Владимир: 12.02.2022 в 10:15

Пишут некоторые маловато...мда. Я в восторге если честно, спасибо огромное. Походу я на этом сайте надолго, бегло взглянув на правую колонку.

Ответить
жанна: 09.07.2021 в 15:20

Большое спасибо за ваш труд!
Я начинающий фронтенд-разработчик,здорово помогаете разобраться в коде. Такие нестандартные решения! И легко свои идеи добавлять. Очень полезная информация.

Ответить
Надежда: 24.03.2021 в 17:03

а как это поставить на сайт? куда вставить html и css?

Ответить
- Alexander: 24.03.2021 в 17:50
  
  html во что то с расширением .html, например index.html
  css во что то с расширением .css, например style.css
  
  А если серьезно, то откуда же я знаю, как у вас там...
  
  Ответить
  - Надежда: 24.03.2021 в 20:34
    
    Очень помогли(
    
    Ответить
    - Alexander: 24.03.2021 в 21:23
      
      С такими вопросами как у вас только в личек из контакто.
      И скороее всего не бесплатно
      https://atuin.ru/contacts/
      
      Ответить
- СЕРГЕЙ: 18.02.2023 в 15:15
  
  HTML - вставить код на странице в редакторе, нажав посмотреть код
  CSS - на хостинге, в каталоге сайта папка stylesheet.css и в самый низ
  Как-то так, если поможет))
  
  Ответить
Алибек: 17.09.2020 в 16:06

Во первых рахмет вам за вашу работу))

Разрешите поинтересоваться. Я установил меню 4б. Но мой текст "ссылки" чуть смещен вниз, либо сами цифорки меню стоят выше. Какими пунктами можно отрегулировать высоту?

Ответить
- Alexander: 17.09.2020 в 17:17
  
  Без ссылки или хотя бы скриншота сложно сказать...
  
  Ответить
irmaseo.ru: 11.07.2020 в 22:02

Очень полезная информация, спасибо

Ответить
Sergey: 10.09.2019 в 10:42

А как сделать что бы отсчет начинался не с 1, а скажем с 5 ?

Ответить
- Alexander: 10.09.2019 в 11:19
  Для ul стоит стиль counter-reset: li
  нужно поставить:
  
  counter-reset: li 4;
  
  т.е. 4 пропускаем и считаем с 5того
  Ответить
  - Sergey: 10.09.2019 в 11:47
    
    А если надо сделать 9 li на три колонки, для каждой колонки прописывать свои стили?
    
    Ответить
    - Alexander: 10.09.2019 в 12:10
      
      Можно использовать column-count:3; для ul
      Или разбить на 3 разных списка. В этом случае все классы и стили одинаковые.
      Только для 2х последующих списков добавить (можно прям в хтмл):
      
      <ul class="listN" style="counter-reset: li 3;">.....</ul> <ul class="listN" style="counter-reset: li 6;">.....</ul>
      
      Ответить
Дима: 30.08.2019 в 13:43

Огоонь!

Ответить
Иван: 17.08.2019 в 12:10

Спасибо, просто и со вкусом, одна идея очень пригодилась!

Ответить
Владислав: 20.03.2019 в 20:54

Использовал метод 4а, спасибо.
Было бы прикольно прикреплять сюда изображения, как применил способ.
Как применил я - https://yadi.sk/i/ND2GI7NzeMMYAA

Ответить
Сергей: 19.03.2019 в 23:45

Большое спасибо вам! Всё по-человечески сделано, всё удобно.

Ответить
Тимур: 15.12.2018 в 21:00

добрый день. а если не жалко могли бы поделиться css как у вас сделано в Свежие записи и в метках.

Ответить
- Alexander: 16.12.2018 в 10:16
  
  Как сделаны свежие записи - тут:
  https://atuin.ru/blog/oformlenie-ssylok-v-tekste-dokumenta/
  
  А метки просто кнопки, где один фон меняется на другой.
  
  Ответить
Рустам: 09.12.2018 в 15:45

Спасибо! Интересные решения! Но у меня почему-то точка (списка) присутствует всегда в каждой строке списка. Вариант 4, например, в самом круге. Как от нее избавиться?

Ответить
- Alexander: 10.12.2018 в 09:56
  
  Попробуйте добавить к li
  list-style: none;
  Если не поможет, то добавить important
  list-style: none!important;
  
  Ответить
  - Рустам: 10.12.2018 в 12:34
    
    Спасибо!
    
    Ответить
Федор: 08.10.2018 в 03:48

Замечательно, все прекрасно работает (я взял Вариант 1a), вот только как сделать что бы таблица не занимала всю ширину страницы.
И будет ли работать это в мобильной версии сайта (ex-hort точка ру).

Ответить
- Alexander: 08.10.2018 в 10:28
  
  Она и занимает всю ширину (100%), чтобы подстраивается под разные размеры, включая мобильные.
  Чтобы ограничить ширину, можно вставить ее в блок заданной ширины (адаптивный) или добавить классу .list1a :
  max-width: 500px;
  
  Ответить
  - Федор: 08.10.2018 в 17:38
    
    Просто замечательно, все получилось. Как подписаться на ваши обновления в блоге? Не делая заказа или не для получить консультацию.
    Хочу предложить вам разместить у меня статью с открытой индексируемой ссылкой. Пишите на почту. admin собака ex-hort.ru
    
    Ответить
    - Alexander: 08.10.2018 в 18:38
      
      У блога подписки нет, есть группа в ВК, куда дублирую статьи
      https://vk.com/atuin_ru
      
      Ответить
Ислам: 24.08.2018 в 23:01

Класс. Спасибо!

Ответить
Олег: 03.04.2018 в 09:30

Мало что то вариантов

Ответить
Sveta: 02.01.2018 в 22:19

Оригинальненько !

Ответить

Вариант 1a:

Вариант 1b:

Вариант 2a:

Вариант 2b:

Вариант 3a:

Вариант 3b:

Вариант 4a:

Вариант 4b:

Вариант 5a:

Вариант 5b:

Вариант 6a:

Вариант 6b:

Смотрите также:

Добавить комментарий:

Комментарии: