Добавляем возможность сохранять сообщения
Использование
Использовать псевдоэлементы крайне просто: :before добавляется перед нужным элементом, а :after — после.
Всегда используется вместе с CSS-свойством content.
CSS-свойствомcontent служит для добавление контента внутри псевдоэлементов.
Простой пример: необходимо добавить кавычки для цитаты:
p:before {
content: open-quote;
}
p:after {
content: close-quote;
}
К псевдоэлементам можно применять такие же стили, как и к «реальным»: изменение цвета, добавление фона, регулировка размера шрифта, выравнивание текста и т.д.
Немного о границах и геометрии
На сайтах треугольники применяются сплошь и рядом как часть дизайна элементов, например, они служат указателем на какой-то объект, направляя внимание читателя в нужное место.
Хотя границы, создаваемые через свойство border, напрямую не имеют отношения к треугольникам, именно border используется для этого наиболее часто. Если задать нулевую ширину и высоту элемента, а также установить достаточно толстую границу, то мы увидим набор из четырёх треугольников. Для наглядности границы на всех сторонах установлены разного цвета.
За счёт комбинирования границ можно получить ещё четыре вида треугольников, что в сочетании с уже упомянутыми даёт нам восемь вариантов. Их вид и требуемый код приведён в таблице:
| Вид | Стиль |
| border: 20px solid transparent; border-top: 20px solid green; |
| border: 20px solid transparent; border-right: 20px solid green; |
| border: 20px solid transparent; border-bottom: 20px solid green; |
| border: 20px solid transparent; border-left: 20px solid green; |
| border: 20px solid transparent; border-top: 20px solid green; border-right: 20px solid green; |
| border: 20px solid transparent; border-right: 20px solid green; border-bottom: 20px solid green; |
| border: 20px solid transparent; border-bottom: 20px solid green; border-left: 20px solid green; |
| border: 20px solid transparent; border-left: 20px solid green; border-top: 20px solid green; |
|
|
|
Применяем к нашему чату
Класс .message-right применяется к блоку с сообщением, пришедшим в чат от текущего пользователя и позиционирует его по правому краю родительского контейнера, которым является область чата, в которую выводятся все сообщения.
| .message-right{ margin-right: 0; } .message-right:before { content: ' '; /*свойство обязательно для псевдоэлемента after*/ position: absolute; width: 0; height: 0; right:20px; top: 100%; border: 10px solid; border-color: #ced4da #ced4da transparent transparent; } .message-right:after { content: ' '; /*свойство обязательно для псевдоэлемента before*/ position: absolute; width: 0; height: 0; right: 20px; top: 100%; border: 10px solid; border-color: #fff #fff transparent transparent; } |
Аналогично для блоков с сообщениями от других пользователей чата, которые мы позиционируем слева:
| .message-left{ margin-left: 0; } .message-left:before { content: ' '; /*свойство обязательно для псевдоэлемента before*/ position: absolute; width: 0; height: 0; left: 20px; top: 100%; border: 10px solid; border-color: #ced4da transparent transparent #ced4da; } .message-left:after { content: ' '; position: absolute; width: 0; height: 0; left: 20px; top: 100%; border: 10px solid; border-color: #fff transparent transparent #fff; } |
|
|
|
Добавляем возможность сохранять сообщения
Задача: реализовать сохранение истории сообщений на сервере!
Шаги:
*Выводить имя сервера перед сообщением для удобства
1) Очищать чат при смене сервера
2) Изменить логику обработки сообщений
3) Подключить в проект модуль работы с файлами
4) Добавить сохранение сообщений в файл
5) Добавить вывод истории сообщений, которые прошли через сервер при подключении пользователей к данному серверу.
Дата добавления: 2020-11-23; просмотров: 116; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!