Выделение текста

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем Brender, 3 мар 2016.

  1. Brender

    Brender New Member

    Регистрация:
    28 фев 2016
    Сообщения:
    1
    Симпатии:
    3
    Всем привет, наверняка многие замечали, что на многих сайтах какую-либо новость, предупреждение или ещё что-то красиво оформляют. Это делают не просто так, а с целью сконцентрировать ваше внимание на выделенную область, о чём я сегодня и хочу с вами поговорить.
    Все посетители сайта Webware, наверняка видели как они [WebwareTeam] красиво выделяют новости!Согласитесь, если бы сайт был только в 1 цвете, без оформления новостей статей, он был бы скучный, и у него было бы не так много посетителей. Ведь одним из факторов посещаемости является оформление сайта. Ладно, хватит болтать пора за работу!
    И так, следующие действия нам помогут сконцентрировать внимание посетителей, а именно:
    1. Изменение его размера.
    2. Изменение его цвета.
    3. Изменение его оформления.
    4. Ваша фантазия.
    5. Ваши возможности.
    I способ выделения.
    Выделение текста происходит за счёт "Бокового подчёркивания".
    Посмотреть вложение 4
    /если картинки нет или не открывается/
    CSS код:
    p {
    border-left: 5px solid;
    border-color: #00027A;
    }

    II способ выделения
    Выделения текста происходит за счёт "Бокового подчёркивания" + Изменения цвета заднего фона + изменение цвета текста.
    Посмотреть вложение 5
    /если картинки нет или не открывается/
    CSS код:
    p {
    border-left: 5px solid;
    border-color: #00027A;
    background-color: #383FFF;
    color: #FFFFFF;
    }

    III способ выделения
    Выделения текста происходит за счёт обводки зоны текста.
    Посмотреть вложение 6
    /если картинки нет или не открывается/
    CSS код:
    p {
    padding-left: 10px;
    border: 2px dotted;
    border-color: lime;
    }

    IV способ выделения
    Как и в III способе здесь присутствует выделение зоны текста, но уже не в точку, а с помощью простой линии и добавления тени, которая помогает выделить границы.
    Посмотреть вложение 7

    /если картинки нет или не открывается/
    CSS код:
    p {
    padding-left: 10px;
    border: 2px solid;
    border-color: blue;
    box-shadow: 5px 5px 5px #bbb
    border-radius: 10px;
    }

    V способ выделения текста
    Выделение текста происходит за счёт увеличения зоны текста + увеличения размеров границы (линии).
    Посмотреть вложение 8
    /если картинки нет или не открывается/
    CSS код:
    p {
    border: 5px inset;

    border-color: #00027A;
    box-shadow: 5px 5px 5px #bbb;
    border-radius: 20px 0;
    }


    VI способ выделения
    Выделение происходит за счёт изменения размера, цвета текста и его начертания, а так же увеличения зоны текста, заднего фона, границы зоны текста.
    Посмотреть вложение 9
    /если картинки нет или не открывается/
    CSS код:
    p{
    padding: 10px;
    color: white;
    font-size: 20px;
    background-color: #383FFF;
    border: 3px solid;
    border-color: #00027A;
    border-radius: 4px;
    }

    Ну вот вообщем и всё! Я показал вам 6 примеров, но имея знания, воображение и фантазию их можно на делать оочень много. Ниже я оставлю команды которые вам помогут! Всем удачи, экспериментируйте!
    CSS команды:
    border - граница доп. значения: top, right, bottom, left, radius и др. Пример: border-top - граница сверху.
    color - цвет доп. значения: Пишите любой цвет либо на английском языке (Пример: red), в rgb (Пример:FF0000 (это красный цвет) ), в HEX (Пример: f00 (и это красный)).
    background - задний фон доп. значения color, image и др. Пример: background-image: url (http://codeby.net/img.jpg)[путь был выдуман ради примера]

    font - фонт доп. значения family, size и др. Пример: font-family: Times New Roman
    text - текст доп. значения decoration, shadow, align и др. Пример: text-decoration: underline
    Кому понравилась данная тема можете глянуть доп. информацию а тегах и значениях на сайте http://htmlbook.ru/ !
     

    Вложения:

    • 1.jpg
      1.jpg
      Размер файла:
      17,8 КБ
      Просмотров:
      12
    • 2.jpg
      2.jpg
      Размер файла:
      23,3 КБ
      Просмотров:
      12
    • 3.jpg
      3.jpg
      Размер файла:
      44 КБ
      Просмотров:
      12
    • 4.jpg
      4.jpg
      Размер файла:
      28,9 КБ
      Просмотров:
      12
    • 5.jpg
      5.jpg
      Размер файла:
      30 КБ
      Просмотров:
      12
    • 6.jpg
      6.jpg
      Размер файла:
      45,1 КБ
      Просмотров:
      12
    3 пользователям это понравилось.
Загрузка...

Поделиться этой страницей