<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

Комментарии в виде пузырька.

Комментарии в виде пузырька.

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

Для начала созадим разметку. Откроем файл index.html и пропишем следующее:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Комментарии в виде пузырька</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="comments">
   <div class="comment bubble">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, error.</p>
   </div>
  </div>
</body>
</html>

Теперь перейдем к CSS.

body {
  background: #f0f0f0;
}

.comments {
  width: 400px;
}

.comment {
  width: 100%;
  margin-bottom: 20px;
}

.comment p {
  margin: 0 0 10px 0;
}

.bubble {
  position: relative;
  background: #fff;
  padding: 20px;
  color: #222;
  border-radius: 3px;
  margin-left: 20px;
}

.bubble::after {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 15px solid #fff;
  left: -15px;
  top: 15px;
}

Этим кодом мы получили сразу 2 выгоды. Первая - вы узнали, как создавать красивые блоки с комментариями, а вторая - вы узнали, как создавать треугольники на CSS с помощью свойства border. Меняйте значения border, чтобы добиться того треугольника, который вам нужен.

Итак, на этом все. Спасибо за внимание!

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

PartnerJeka PartnerJeka 17.06.2014 09:15:01

Добрый день Михаил! Скажите пожалуйста почему в данной статье в файле стилей указано отдельно .comment и .bubble, если имя класса у нас comment bubble? Что дает это разбиение? Вы об этом нигде не писали. Объясните пожалуйста для чего это и как это работает? С уважением, Евгений.

Ответить

theboss9976 theboss9976 17.06.2014 15:02:08

В html разметке несколько классов к одному элементу принято писать в class="", в CSS же чтобы применять правило надо указывать с точкой имя класса. comment и bubble - 2 разных класса

Ответить

php_programmer php_programmer 17.06.2014 19:01:48

В html вы можете задавать сразу несколько классов для одного элемента через пробел. Т.е. в нашем случае это не один класс с пробелом, а 2 разных класса - bubble и comment. Такое разбиение дает нам возможность применять разные стили для определенной ситуации. К примеру, все блоки с классом comment будут квадратными, а если мы еще добавим класс bubble, то они станут круглыми и с тенями.

Ответить

(Алекс) (Алекс) 29.01.2015 21:33:28

У <MyRusakov.ru /> появился клон?? 0_о http://e-rentier.ru.gotika2.ru/

Ответить

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