• Выдержки из объявлений. Анекдоты.
  • Как писать заголовок
  • Только фотографии
  • Работа копирайтера хотелось бы узнать...
  • Новости начинающему · Новые сообщения · Участники · Правила форума · Поиск · RSS
    Страница 1 из 11
    Модератор форума: Newly_made10 
    Форум » Людям с гордым именем - WEB мастера. » Скрипты, украшения, все для юзабилити сайта. » Вертикальная цветная линия в статье. (Как выделить мысль или важный факт.)
    Вертикальная цветная линия в статье.
    Newly_made10Дата: Понедельник, 2017-10-30, 10:35 AM | Сообщение # 1
    мудрый
    Группа: Администраторы
    Сообщений: 582
    Награды: 5
    Репутация: 101
    Статус: 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 PM | Сообщение # 2
    соображающий
    Группа: Проверенные
    Сообщений: 49
    Награды: 5
    Репутация: 3
    Статус: Offline
    Newly_made10, интересное решение вопроса! А где прописывать цвет вертикальной полоски? Не особо сильна я в хотмейле.

    Только вперед!
     
    Newly_made10Дата: Среда, 2017-11-01, 8:48 AM | Сообщение # 3
    мудрый
    Группа: Администраторы
    Сообщений: 582
    Награды: 5
    Репутация: 101
    Статус: Offline
    Первая строка в коде позволяет установить любой цвет полоски или точечек.

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

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

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

    или

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



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


    Хватит стоять на месте, надо искать следующие тупики.
    Помощь начинающему
    Форум с оплатой
     
    TatikaДата: Среда, 2017-11-01, 7:16 PM | Сообщение # 4
    соображающий
    Группа: Проверенные
    Сообщений: 49
    Награды: 5
    Репутация: 3
    Статус: Offline
    Newly_made10, блок Случайных совет - супер! Очень полезная информация. По поводу вертикальной полоски: спасибо за ответ, это я невнимательно рассмотрела скрипт. Но тут еще вопрос всплыл -получается что в текст каждой статьи нужно добавлять строку кода. Нельзя ли его прописать так, чтобы он вставлялся автоматом при выделении блока?

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

    Сообщение отредактировал Tatika - Среда, 2017-11-01, 7:17 PM
     
    Newly_made10Дата: Среда, 2017-11-01, 10:42 PM | Сообщение # 5
    мудрый
    Группа: Администраторы
    Сообщений: 582
    Награды: 5
    Репутация: 101
    Статус: Offline
    Цитата Tatika ()
    Нельзя ли его прописать так, чтобы он вставлялся автоматом при выделении блока?


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

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


    Хватит стоять на месте, надо искать следующие тупики.
    Помощь начинающему
    Форум с оплатой
     
    TatikaДата: Суббота, 2017-11-04, 4:12 AM | Сообщение # 6
    соображающий
    Группа: Проверенные
    Сообщений: 49
    Награды: 5
    Репутация: 3
    Статус: Offline
    Newly_made10, для меня такой вариант слишком громоздкий, занимает много времени по вставлению. Поэтому остановилась на более легком варианте, хотя он выглядит и не так красочно, как у вас, но акцентирует внимание точно. Вот здесь визуализация :
    http://potustorony.ru/blog....09-18-1

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


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