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

Brender

New Member
28.02.2016
1
3
#1
Всем привет, наверняка многие замечали, что на многих сайтах какую-либо новость, предупреждение или ещё что-то красиво оформляют. Это делают не просто так, а с целью сконцентрировать ваше внимание на выделенную область, о чём я сегодня и хочу с вами поговорить.
Все посетители сайта 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
Кому понравилась данная тема можете глянуть доп. информацию а тегах и значениях на сайте
Чтобы видеть этот контент необходимо: Войти или зарегистрироваться
!
 

Вложения

  • 17.8 КБ Просмотры: 21
  • 23.3 КБ Просмотры: 22
  • 44 КБ Просмотры: 21
  • 28.9 КБ Просмотры: 23
  • 30 КБ Просмотры: 21
  • 45.1 КБ Просмотры: 19