Статьи

Чаты Facebook в CSS

Октябрь 5, 2018

фб-ч-сингл

Если вы еще не видели интерфейс «головы чата» Facebook, вот быстрое снижение. Это маленькие круглые значки, которые будут всплывать на боковой стороне экрана вашего мобильного устройства, чтобы сообщить вам, что сообщение пришло от друга. Это часть домашней страницы Facebook, но даже если вы работаете на iOS, приложение Facebook использует их. Я думаю, что это будет одна из тех вещей, которые вы либо любите, либо ненавидите.

Однако, с точки зрения HTML, я думал, что они были интересны. Не могли бы вы сделать этот интерфейс в HTML / CSS. Ответ — да, и это довольно просто. Просто некоторые границы, отступы и отрицательное поле.

<!DOCTYPE html> 
<html> 
<head> 
  <title>Practical CSS - Single Chathead</title>
      <link rel="stylesheet" href="css/single.css" type="text/css" media="screen" />
</head> 
<body>

<img src="img/tpryan.png" class="chathead">

<div class="content">
	<h2>The Main Thing</h2>
	<p>DIY ea nulla photo booth tempor occaecat, velit nihil mixtape scenester. 
      Irony laboris echo park, wolf officia vice cupidatat labore butcher freegan 
      farm-to-table nisi velit aliqua gluten-free. Aliquip nesciunt assumenda, 
      wayfarers seitan wolf reprehenderit nulla twee sartorial dolore food truck 
      voluptate ex vinyl. Aliquip ex enim, irony terry richardson trust fund consectetur 
      fap pariatur dolor. Lo-fi nulla whatever mlkshk, banksy american apparel carles 
      adipisicing incididunt wolf photo booth hipster. Wayfarers four loko ex cosby sweater, 
      adipisicing sartorial non cardigan craft beer cillum reprehenderit terry richardson 
      3 wolf moon mollit. Ethical ut labore beard, 3 wolf moon duis readymade assumenda 
      hipster tofu mcsweeney's master cleanse.</p>
      <p>Irony mixtape cupidatat 3 wolf moon, id cardigan retro cillum exercitation 
      biodiesel wes anderson locavore. Voluptate vinyl lo-fi, ethical sunt et irure nihil 
      fugiat. Terry richardson tumblr art party, artisan quis est cillum messenger bag 
      officia duis. Elit cliche letterpress est, single-origin coffee wayfarers mustache 
      aesthetic esse echo park dolor synth yr viral artisan. Do vinyl terry richardson 
      officia food truck. Veniam cupidatat et aliquip. Sartorial tattooed tofu odio eu 
      culpa ex, irony PBR.</p>
</div>
</body>
</html>
.chathead{
    width: 150px;
    height: 150px;
    border-radius: 75px;
    border: 4px solid #FFFFFF;
    box-shadow: 1px 1px 5px rgba(0,0,0,.5);
    position: absolute;
    right: -10px;
}

фб-ч-сингл-сс

демонстрация

Это было относительно просто, но это становится более сложным, когда вы разговариваете с несколькими людьми. Facebook берет самого последнего человека в цепочке и заставляет его занимать половину «головы чата». Тогда приходите следующие два, занимая четверть каждого. Тогда остальные скрыты.

Итак, мне нужно извлечь из n-го дочернего волшебства выборочный стиль первых 3 элементов в коллекции изображений. Установите переполнение на скрытое, поиграйте еще с некоторыми радиусами границ и BOOM, «головы чата» сделаны. 

<div class="chathead-multiple">
  <img src="img/tpryan.png">
  <img src="img/jonesbey.png">
  <img src="img/mcorlan.png">
  <img src="img/khoyt.png">
</div> 


.chathead-multiple{
      width: 150px;
      height: 150px;
      border-radius: 75px;
      border: 4px solid #FFFFFF;
      box-shadow: 1px 1px 5px rgba(0,0,0,.5);
      right: -10px;
      overflow: hidden;
      position: absolute;
      margin-right: -10px;
      z-index: 10;

}

.chathead-multiple img{
      display: none;
      margin: 0;
      z-index: 1;
}

.chathead-multiple img:nth-child(-n+3) {
   width: 75px;
   height: 75px;
   display: inline-block;
   position: absolute;
}

.chathead-multiple img:first-child {
   width: 150px;
   height: 150px;
   left: -75px;
   border-right: 1px solid #FFFFFF;
}


.chathead-multiple img:nth-child(2) {
   left: 75px;
   top:0;
   border-bottom: 1px solid #FFFFFF;
   border-left: 1px solid #FFFFFF;
   border-radius: 0 75px 0  0;
}

.chathead-multiple img:nth-child(3) {
   left: 75px;
   bottom:0;
   border-top: 1px solid #FFFFFF;
   border-left: 1px solid #FFFFFF;
   border-radius: 0 0 75px 0;
}

фб-ч-мульти-сс

демонстрация

Хорошо, так что все было довольно просто, поэтому я бы хотел, чтобы они были интерактивными. Если я нажму на «чат-голову» для разговора с несколькими участниками, я бы хотел, чтобы это расширило остальных участников. Это очень легко. Просто немного Javascript и некоторый обмен классами.

демонстрация

Итак, родной интерфейс Facebook сделан в CSS / HTML. Но я думаю, что мы можем сделать лучше. Одна из моих проблем, связанных с этим интерфейсом, которая может помешать мне использовать его в веб-приложении, заключается в том, что он скрывает содержимое под ним, просто тусуется, скрывая все, что может быть ниже его. Для меня, если бы я использовал это, я хотел бы, чтобы это плавало вместо абсолютно положения. Так что я могу сделать несколько настроек, чтобы это произошло.

h2{
      clear: both;
}

.content{
   text-align: right;
}

.chathead-multiple{
      float: right;
      width: 150px;
      height: 150px;
      border-radius: 75px;
      border: 4px solid #FFFFFF;
      box-shadow: 1px 1px 5px rgba(0,0,0,.5);
      overflow: hidden;
      position: relative;
      z-index: 10;
      -webkit-shape-outside: circle(50%, 50%, 60%);  
}

.chathead-multiple img{
      display: none;
      margin: 0;
      z-index: 1;
}

.chathead-multiple img:nth-child(-n+3) {
   display: block;
   width: 75px;
   height: 75px;
   display: inline-block;
   position: absolute;
}

.chathead-multiple img:first-child {
   width: 150px;
   height: 150px;
   left: -75px;
   border-right: 1px solid #FFFFFF;
}
.chathead-multiple img:nth-child(2) {
   left: 75px;
   top:0;
   border-bottom: 1px solid #FFFFFF;
   border-left: 1px solid #FFFFFF;
   border-radius: 0 75px 0  0;
}
.chathead-multiple img:nth-child(3) {
   left: 75px;
   bottom:0;
   border-top: 1px solid #FFFFFF;
   border-left: 1px solid #FFFFFF;
   border-radius: 0 0 75px 0;
}

.chathead-single{
    width: 150px;
    height: 150px;
    border-radius: 75px;
    border: 4px solid #FFFFFF;
    box-shadow: 1px 1px 5px rgba(0,0,0,.5);
    position: relative;
    float: right;
    clear: right;
    margin-left: 65px; 
    margin-bottom: 25px;
    right: 50px;
    /* CANARY ONLY FEATURE NOW    */
    -webkit-shape-outside: circle(50%, 50%, 60%);  
}

FB-CH-мульти-х-флоат-сс

демонстрация

Теперь в моей демонстрации я вытащил текст, чтобы он был выровнен по правому краю, а не по левому краю, чтобы лучше показать плавающий край. Но я все еще не доволен этим. Зачем? Потому что каждый из этих кругов вырезает гигантский квадрат из текста. И это отчасти хромает, потому что они круги. Несколько недель назад мой коллега из Adobe Бем Джонс-Бей написал статью об использовании фигурных исключений из спецификации CSS Shapes and Exclusion. Казалось, идеально подходит. Поэтому, если у вас установлен Chrome Canary и включены экспериментальные функции, вы получите совершенно другой результат:

FB-CH-мульти-х-флоат-канареечно-сс

Демо [Посмотреть на Канарских]

Секретным соусом здесь является свойство -webkit-shape-outside. Это в основном позволяет мне исключить круг из основного текста вокруг каждой из «чат-голов». Чтобы узнать больше об использовании shape-outside, обязательно ознакомьтесь со статьей Бема. Это только один из способов, с помощью которых браузер становится более способным отображать большее количество визуальных макетов и эффектов.  

36
Share: