Коментарі у вигляді бульбашки.

Відео: Ельза і Spiderman Плакса жувальна гумка нові епізоди! супергерой заморожений

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

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

 
lang="En"gt; 
 
charset="UTF-8"gt; 
Коментарі у вигляді бульбашки 
rel="Stylesheet"href="Style.css"gt; 
 
 
class="Comments"gt; 
class="Comment bubble"gt; 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, error.

Тепер перейдемо до CSS.

Відео: Нейрофіброматоз. Як розпізнати небезпечні плями на шкірі

body { 
 background:# f0f0f0- 
} 
 
.comments { 
 width:400px- 
} 
 
.comment { 
 width:100% - 
 margin-bottom:20px- 
} 
 
.comment p { 
 margin:0010px0- 
} 
 
.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, щоб домогтися того трикутника, який вам потрібен.

Отже, на цьому все. Дякую за увагу!

Поділися в соціальних мережах:

Схожі