• Только смешные фото из жизни людей и других животных
  • Самые новые анекдоты на картинках. Ежедневно
  • Пульс от Мейл.ру. Проект ВК. Главный конкурент Яндекс.Дзена
  • Избранное работает в режиме просмотра.
  • Новости начинающему · Новые сообщения · Участники · Правила форума · Поиск · RSS

    rutop.net

     

    • Страница 2 из 2
    • «
    • 1
    • 2
    Модератор форума: Newly_made10  
    Вертикальная цветная линия в статье.
    Newly_made10Дата: Понедельник, 2017-10-30, 10:35:06 | Сообщение # 1
    аватар Newly_made10
    Группа: Администраторы
    Сообщений: 970
    Награды: 9
    Статус: Offline




    Для привлечения внимания читателя неплохо применять некоторые ненавязчивые элементы.

    Вертикальная линия из цветной полоски. Вертикальная линия из цветных точек.

    Я использую стиль

    Цитата
    .line {
    border-left: 3px dotted green; /* Линия слева от текста зелёная */
    padding-left: 10px; /* Расстояние между линией и текстом */
    margin-left: 10px; /* Расстояние от левого края до линии */
    }

    .lines {
    border-left: 3px solid green; /* Линия слева от текста зелёная */
    padding-left: 10px; /* Расстояние между линией и текстом */
    margin-left: 10px; /* Расстояние от левого края до линии */
    }



    Который вставляется на свободное место в таблицу стилей CSS

    А что бы вызвать данное чудо на странице текста прописываем.

    Код
    Вертикальная линия из цветных точек: <div class="line">ФРАЗА ДЛЯ ВЫДЕЛЕНИЯ</div>

    Вертикальная линия из цветной полоски:<div class="lines">ФРАЗА ДЛЯ ВЫДЕЛЕНИЯ</div>


    Цвет меняйте в стилях сами. Blue, Brown, и прочая, прочая.






    Новинки музыки. Лето 2024

    Фильмы | Сериалы
     
    TatikaДата: Суббота, 2017-11-04, 4:12:57 | Сообщение # 6
    аватар Tatika
    Группа: Пользователи
    Сообщений: 54
    Награды: 6
    Статус: Offline




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

    Спасибо за ваши советы!!!!
    hands






    Только вперед!
     
    • Страница 2 из 2
    • «
    • 1
    • 2
    Поиск: