Оформление списков для информационных блоков
- Информация о материале
- Категория: Админ
- Просмотров: 423
Оформление списков с использованием всего одного класса.
Пример:
Стиль list1a
- Элемент списка
- Элемент списка
- Элемент списка
Стиль list1b
- Элемент списка
- Элемент списка
- Элемент списка
Стиль list2a
- Элемент списка
- Элемент списка
- Элемент списка
Стиль list2b
- Элемент списка
- Элемент списка
- Элемент списка
Стиль list3b
- Элемент списка
- Элемент списка
- Элемент списка
Стиль list3a
- Элемент списка
- Элемент списка
- Элемент списка
Стиль list4a
- Элемент списка
- Элемент списка
- Элемент списка
Стиль list4b
- Элемент списка
- Элемент списка
- Элемент списка
Стиль list5a
- Элемент списка
- Элемент списка
- Элемент списка
Стиль list5b
- Элемент списка
- Элемент списка
- Элемент списка
HTML:
<div class="container"> <div class="row"> <div class="col"> <p>Стиль list1a</p> <ol class="list1a"> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> </ol> </div> <div class="col"> <p>Стиль list1b</p> <ol class="list1b"> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> </ol> </div> </div> <div class="row"> <div class="col"> <p>Стиль list2a</p> <ol class="list2a"> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> </ol> </div> <div class="col"> <p>Стиль list2b</p> <ol class="list2b"> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> </ol> </div> </div> <div class="row"> <div class="col"> <p>Стиль list3b</p> <ol class="list3b"> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> </ol> </div> <div class="col"> <p>Стиль list3a</p> <ol class="list3a"> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> </ol> </div> </div> <div class="row"> <div class="col"> <p>Стиль list4a</p> <ol class="list4a"> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> </ol> </div> <div class="col"> <p>Стиль list4b</p> <ol class="list4b"> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> </ol> </div> </div> <div class="row"> <div class="col"> <p>Стиль list5a</p> <ol class="list5a"> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> </ol> </div> <div class="col"> <p>Стиль list5b</p> <ol class="list5b"> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> </ol> </div> </div> </div>
CSS:
/*Стиль list1a*/ .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%; } /*Стиль list1b*/ .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%; } /*Стиль list2a*/ .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; } /*Стиль list2b*/ .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; } /*Стиль list3a*/ .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); } /*Стиль list3b*/ .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); } /*Стиль list4a*/ .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); } } /*Стиль list4b*/ .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); } } /*Стиль list5a*/ .list5a { padding:0; list-style: none; } .list5a li{ padding:6px; } .list5a li:before { padding-right:10px; font-weight: bold; color: #77AEDB; content: "\2606"; transition-duration: 0.5s; } .list6a li:hover:before { color: #337AB7; content: "\2605"; } /*Стиль list5b*/ .list5b { padding:0; list-style: none; } .list5b li{ padding:6px; } .list5b li:before { padding-right:10px; font-weight: bold; color: #C0C0C0; content: "\2714"; transition-duration: 0.5s; } .list5b li:hover:before { color: #337AB7; content: "\2714"; }