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

    ex-hort.ru

     

    • Страница 1 из 2
    • 1
    • 2
    • »
    Модератор форума: Newly_made10  
    Форум » Людям с гордым именем - WEB мастера. » Скрипты, украшения, все для юзабилити сайта. » Вертикальная цветная линия в статье. (Как выделить мысль или важный факт.)
    Вертикальная цветная линия в статье.
    Newly_made10Дата: Понедельник, 2017-10-30, 10:35:06 | Сообщение # 1
    аватар Newly_made10
    Группа: Администраторы
    Сообщений: 968
    Награды: 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, и прочая, прочая.






    Постоянно обновляемый раздел о книжных новинках
     
    TatikaДата: Вторник, 2017-10-31, 9:53:49 | Сообщение # 2
    аватар Tatika
    Группа: Пользователи
    Сообщений: 54
    Награды: 6
    Статус: Offline




    Newly_made10, интересное решение вопроса! А где прописывать цвет вертикальной полоски? Не особо сильна я в хотмейле.





    Только вперед!
     
    Newly_made10Дата: Среда, 2017-11-01, 8:48:11 | Сообщение # 3
    аватар Newly_made10
    Группа: Администраторы
    Сообщений: 968
    Награды: 9
    Статус: Offline




    Первая строка в коде позволяет установить любой цвет полоски или точечек.

    Код
    border-left: 3px dotted green; /* Линия слева от текста зелёная */

    Blue, Brown,green. Сами вписывайте английское название нужного вам цвета, сохраняйте файл, перезагружайте страницу, где вставлен контейнер

    Код
    <div class="line">ФРАЗА ДЛЯ ВЫДЕЛЕНИЯ</div>

    или

    <div class="lines">ФРАЗА ДЛЯ ВЫДЕЛЕНИЯ</div>



    Не забывайте чистить кэш.






    Постоянно обновляемый раздел о книжных новинках
     
    TatikaДата: Среда, 2017-11-01, 7:16:48 | Сообщение # 4
    аватар Tatika
    Группа: Пользователи
    Сообщений: 54
    Награды: 6
    Статус: Offline




    Newly_made10, блок Случайных совет - супер! Очень полезная информация. По поводу вертикальной полоски: спасибо за ответ, это я невнимательно рассмотрела скрипт. Но тут еще вопрос всплыл -получается что в текст каждой статьи нужно добавлять строку кода. Нельзя ли его прописать так, чтобы он вставлялся автоматом при выделении блока?





    Только вперед!

    Сообщение отредактировал Tatika - Среда, 2017-11-01, 7:17:13
     
    Newly_made10Дата: Среда, 2017-11-01, 10:42:41 | Сообщение # 5
    аватар Newly_made10
    Группа: Администраторы
    Сообщений: 968
    Награды: 9
    Статус: Offline




    Цитата Tatika ()
    Нельзя ли его прописать так, чтобы он вставлялся автоматом при выделении блока?


    В блоке контента это не возможно, только добавление в нужном мести в нужном количестве.

    У меня всегда под рукой текстовый документ со всякими стилями и блоками которые я применяю, они перед глазами во время работы над текстом. Скопировал (Ctrl + C) - вставил (Ctrl + V).
    Только конечно заблаговременно прописаны в стилях.






    Постоянно обновляемый раздел о книжных новинках
     
    Форум » Людям с гордым именем - WEB мастера. » Скрипты, украшения, все для юзабилити сайта. » Вертикальная цветная линия в статье. (Как выделить мысль или важный факт.)
    • Страница 1 из 2
    • 1
    • 2
    • »
    Поиск: