0

Оформяне на списъци чрез CSS в блог

Оформяне на списъци чрез CSS
Здравейте всички! При създаването на уеб страници може да се наложи да организираме по различен начин предоставената в тях информация. Когато искаме да използваме списък в блог, в редактора на публикациите имаме два вида, от които да избираме: номерирани и с водещи символи – маркери ( ще ги наричам маркировани списъци).



    Маркировани списъци

    Използвайки стандартни CSS свойства, можем да се променим външния вид на списъка, да добавим изображения вместо маркерите и да променим местоположението им. Често имаме желание да ги оформим възможно най-красиво, така че да изпъкват и да привличат вниманието. Вече писах публикация за оформяне на номерирания списък.
    Днес ще ви предложа още няколко идеи за създаването на списъци. Как изглеждат ще проверите с помощта на този инструмент , но по-лесно е да посетите тестовия блог. За начинаещи блогъри ще обясня как да ги инсталират в публикация.

    Кодове

    Вариант 1


    <li><a href="### ">Елемент от списъка</a></li>
    <li><a href="###"> Елемент от списъка </a></li>
    <li><a href="###"> Елемент от списъка </a></li>
    <li><a href="###"> Елемент от списъка </a></li>
    <li><a href="###"> Елемент от списъка </a></li>
    </ul>
    <style>
    @import url(http://fonts.googleapis.com/css?family=Fredericka+the+Great|EB+Garamond);
    .older {
      list-style: none;
      margin: 0 auto;
      width: 360px;
      counter-reset: li;
    }
    .older li {
      border-bottom: dashed 1px #006699;
      margin-top: 10px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      padding: 5px;
    }
    .older a {
      text-decoration: none;
      padding: 10px;
      display: block;
      line-height: 30px;
      color: #3A3A3A;
      font-family: 'EB Garamond', serif;
      font-size: 20px;
    }
    .older a:before {
      display: inline-block;
      content: counter(li);
      counter-increment: li;
      height: 30px;
      width: 30px;
      text-align: center;
      border: solid 1px #dedede;
      margin-right: 20px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset;
      font-family: 'Fredericka the Great', cursive;
      font-size: 24px;
      -webkit-transition: .4s linear;
      transition: .4s linear;
    }
    .older a:hover:before {
      color:#D72F2C;
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }</style>


    Вариант 2


    <ul class="beads">
     <li><a href="###"> Елемент от списъка </a>
    </li> <li><a href="###"> Елемент от списъка </a></li>
     <li><a href="###"> Елемент от списъка </a>
    </li> <li><a href="###"> Елемент от списъка </a></li>
     <li><a href="###"> Елемент от списъка </a></li>
     </ul>
     <style> .beads { list-style: none; background: #EEE3DB; margin: 0; padding-left: 40px; border-radius: 5px; } .beads li { text-transform: uppercase; font-family: 'Montserrat', sans-serif; line-height: 40px; border-bottom: 1px solid #D4D7D6; position: relative; } .beads a { text-decoration: none; color: #464643; display: block; line-height: 40px; position: relative; } .beads a:before { content:""; position: absolute; left: -20px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: #A58063; } .beads li:last-child {border-bottom: none;} .beads li:before,  .beads li:after { content:""; position: absolute; border-radius: 50%; } .beads li:before { top: calc(50% - 5px); background: #E0926E; left: -22px; width: 10px; height: 10px; transition: 0.5s linear; } .beads li:after { bottom: 6px; left: -20px; width: 6px; height: 6px; background: #A58063; } .beads li:hover:before {background: #FFCE08;} </style>





    Вариант 3


    <ul class="border">
    <li>Елемент от списъка</li>
    <li> Елемент от списъка </li>
    <li> Елемент от списъка </li>
    <li> Елемент от списъка </li>
    </ul>
    <style>
    .border {
    list-style: none;
    padding: 0;
    }
    .border li {
    font-family: "Trebuchet MS", "Lucida Sans";
    padding: 7px 20px;
    margin-bottom: 10px;
    border-radius: 5px;
    border-left: 10px solid #f05d22;
    box-shadow: 2px -2px 5px 0 rgba(0,0,0,.1),
         -2px -2px 5px 0 rgba(0,0,0,.1),
        2px 2px 5px 0 rgba(0,0,0,.1),
        -2px 2px 5px 0 rgba(0,0,0,.1);
    font-size: 20px;
    letter-spacing: 2px;
    transition: 0.3s all linear;
    }
    .border li:nth-child(2){border-color: #8bc63e;}
    .border li:nth-child(3){border-color: #fcba30;}
    .border li:nth-child(4){border-color: #1ccfc9;}
    .border li:nth-child(5){border-color: #493224;}
    .border li:hover {border-left: 10px solid transparent;}
    .border li:nth-child(1):hover {border-right: 10px solid #f05d22;}
    .border li:nth-child(2):hover {border-right: 10px solid #8bc63e;}
    .border li:nth-child(3):hover {border-right: 10px solid #fcba30;}
    .border li:nth-child(4):hover {border-right: 10px solid #1ccfc9;}
    .border li:nth-child(5):hover {border-right: 10px solid #493224;}
    </style>


    Вариант 4


    <ol class="rectangle">
    <li><a href="###"> Елемент от списъка </a></li>
    <li><a href="###"> Елемент от списъка </a></li>
    <li><a href="###"> Елемент от списъка </a></li>
    <li><a href="###"> Елемент от списъка </a></li>
    </ol>
    <style>
    .rectangle {
    counter-reset: li;
    list-style: none;
    font: 14px "Trebuchet MS", "Lucida Sans";
    padding: 0;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    }
    .rectangle a {
    position: relative;
    display: block;
    padding: .4em .4em .4em .8em;
    margin: .5em 0 .5em 2.5em;
    background: #D3D4DA;
    color: #444;
    text-decoration: none;
    transition: all .3s ease-out;
    }
    .rectangle a:hover {background: #DCDDE1;}   
    .rectangle a:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -2.5em;
    top: 50%;
    margin-top: -1em;
    background: #9097A2;
    height: 2em;
    width: 2em;
    line-height: 2em;
    text-align: center;
    font-weight: bold;
    }
    .rectangle a:after {
    position: absolute;
    content: "";
    border: .5em solid transparent;
    left: -1em;
    top: 50%;
    margin-top: -.5em;
    transition: all .3s ease-out;
    }
    .rectangle a:hover:after {
    left: -.5em;
    border-left-color: #9097A2;
    }</style>



    Пояснения

    В кодове, където виждате тези ### решетки, въведете адресите на страниците (URL адресите), към които трябва да се води всяка хипервръзка. Ако нямате такава необходимост, премахнете в кода това, което е отбелязано в синьо.

    <li><a href="###">Елемент от списъка</a></li>

    И обратно, ако трябва да направите преход през хипервръзка добавете допълнителни елементи, ако е необходимо и так където ги няма в кода - вариант 3.

    <li><a href="###">Списък на елемента</a></ li>


    Инсталиране

    В публикацията отидете в HTML режим и поставете избрания код на правилното място. Такива списъци могат да се използват като вертикално меню. Инсталирайте кода в притурката HTML / JavaScript в темата на блога и му допишете връзки към страниците си. Оригиналното меню се получава без много проблеми. Ето така, с помощта на CSS стилове можете да направите от скучните списъци нещо интересно и полезно. Променете цвета на фона, размера и стиловете на шрифта, височината на блоковите елементи и така нататък.

    Успех на всички и доскоро.

    Няма коментари :

    Публикуване на коментар


    Copyright © БЛОГ ЗА БЛОГОВЕ©2016- | All Rights Reserved
    Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита