Добро пожаловать в клуб по WordPress

Хотите присоединиться к не имеющему себе равных клубу по WordPress?
Не стесняйтесь и станьте частью большого сообщества. Пройдите простую регистрацию,
чтобы пользоваться всеми возможностями нашего клуба.
Присоединяйтесь к нам, вам обязательно понравится.

Совет Приукрасим разделительную линию

Тема в разделе "Основы, описания, уроки.", создана пользователем Wildcdu, 16 апр 2017.

  1. Как обычно кратенько

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:


    Размеры и цвет можете изменить по своему желанию и вставить в конец файла style.css
    Это разбавит Ваше оформление и придаст индивидуальность.
     
  2. Отдельно можем сделать так
    Для супер оформления!
    Это в CSS добавим

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:


    ну а так можем вставлять один из нужных вариантов.

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:

    Можно сделать с применением псевдо элементов

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:


    Вставляем так.
    <div class="wave"></div>

    Можно чуток подправить и одна из линий (на Ваш вкус) может вставляться автоматом например в конце статьи...
    Дерзайте все в Ваших руках!
     
  3. Как применить картинки в качестве разделительной линии.

    1. Использовать тэг hr. К нему прописываем в стилях css следующий набор правил:

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:



    Чтобы картинка не повторялась, а была в единственном экземпляре и располагалась по центру

    background:url(line.gif) no-repeat top center;

    2. Использовать картинку в качестве фона для блока, в котором она будет изображать разделительную линию.

    background:url(line.gif) no-repeat bottom center;

    Картинка линии разместится в самом низу блока по центру, что и будет выглядеть, как красивая разделительная линия между блоками.


    Пару примеров для CSS вариантов

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:



    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо: