<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

В начале курса у нас будет только идея, а в конце готовый продукт, который можно использовать в практических целях.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как выделить блок текста на CSS

Как выделить блок текста на CSS

Выделение блока с текстом на сайте помимо усиления визуального впечатления – хороший прием для фокусирования пользователя на нужной нам информации.

На этом уроке, мы рассмотрим несколько примеров, как с помощью знаний CSS кода и чувства стиля, создать приятные для глаз текстовые блоки.

HTML разметка

Создадим один блоки и будем применять к нему разные классы со своими индивидуальными стилями, заменяя exam_01 на соответствующие классы (exam_02, exam_03, exam_04, exam_05).

<div class="exam_01">
Красивое оформление важных блоков с текстом привлекает внимание посетителей и удерживает их внимание, на нужной информации.
</div>

1) Градиентное оформление блока / CSS


.exam_01 {
    background: linear-gradient(135deg, #f4e3f0 50%, #e2debe 50%);
    color: #49152C;
    padding: 30px 50px;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
}

Как выделить блок текста на CSS.

В примере использован интересный прием: в качестве фона блока выступает линейный двухцветный градиент, поделенный пополам, под углом 135 градусов. Цвета градиента подобраны нежно пастельного цвета так, чтобы текст легко читался.

2) Скругленные углы, тень прошивка / CSS


.exam_02 {
    padding: 20px 40px; / *отступ вложенного текста от рамки */
    background: #968089; /* фон рамки */
    font-size: 20px; /* размер шрифта */
    border: 2px dashed #e3c3d4; /* размер, форма и цвет рамки */
    border-radius: 10px; /* радиус скругления углов рамки */
    box-shadow: 0 0 0 4px #968089, 2px 1px 6px 4px rgba(150, 128, 137, 0.5); /* смещение, размер и цвет тени рамки*/
     color: #fff;
     font-family: 'Lato', sans-serif;
}

Как выделить блок текста на CSS.

Ярко стилизованный блок, непременно зацепит внимание пользователя, просто замените цвета в данном коде, на подходящие к вашему дизайну и пользуйтесь на здоровье.

3) Инфо-блок с с шрифтовой иконкой / CSS

Для подключения иконки, поставим ссылку на библиотеку иконочных шрифтов FontAwesome.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
.exam_03 {
    border-radius: 5px;
    color: #fff;
    font-family: verdana, 'open sans', sans-serif;
    padding: 10px 14px 10px 44px;
    position: relative;
    box-shadow: 0px 1px 5px #999;
    background-color: #8a9bab;
}

Изобразим иконку info с помощью псевдоэлемента before и поставим её перед текстом.

.exam_03:before {
    content: "\f129"; /* код иконки info */
    margin-left: 4px;
    font-family:FontAwesome;
    font-size: 21px;
    left: 14px; /* позиция иконки */
    position: absolute;
}

Как выделить блок текста на CSS.

4) Односторонняя рамка / CSS


.exam_04 {
    background-color: #feeff4;
    border-left: 6px solid #e04386;
    color: #49152c;
    padding: 30px 50px;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
}

Как выделить блок текста на CSS.

Код для оформления розового блока, очень простой, играясь с палитрой цветов, можно создавать бесконечное количество цветовых комбинаций.

5) Текст на фоновом узоре / CSS


.exam_05 {
    background-image: url(images/pattern.png);
    border: 4px solid #d9fcff;
    color: #968089;
    padding: 30px 50px;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
}

Как выделить блок текста на CSS.

Главный успех в стильном оформление блока с графическим узором, состоит в том, чтобы найти образец с неброскими, спокойными цветами (без вырви глаз).

Вывод

Я не советую новичкам использовать последний способ выделения блока с текстом, здесь нужен опыт, чтобы не выглядело все безвкусно. Поиск подходящей графики займет много времени, а конечный результат сомнителен. Зачем рисковать? Когда есть первые четыре хороших варианта, только меняй цвета и получай нужную цветовую гамму.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.