Cum faci un speech bubble doar din CSS

cum faci un speech bubble doar din css

Îl faci destul de ușor.
Scurtă introducere: Este util un astfel de element atunci când faci o rubrică de testimoniale, păreri sau dacă faci o platformă de trimitere de mesaje. Ori vrei să îți personalizezi puțin secțiunea comentarii de pe blog 🙂

Pași:

        1. Faci divul care să conțină textul;
      .speechbubble {
          position: relative;
          padding: 30px;
          border-radius: 20px;
          background-color: #f5f5f5;
      }
      
    1. Cutomizezi speech bubbleul! Practic aici îi vei da acea atingere artistică 🙂 care va crea elementul dorit;
.speechbubble :after {
	position: absolute;
	bottom: -20px;
	left: 60px;
	content: "";
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #f5f5f5;
}

Te mai poți juca cu border-left și border-right pentru a-ți pozițona acel element.

Alt exemplu, mai mult artistic. Aici voi posta exact cum arată rezultatul final și apoi codul:

.exemplu-nou {
position: relative;
padding: 15px 30px;
margin: 0;
color: #000;
background: #f3961c;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
background: -moz-linear-gradient(#f9d835, #f3961c);
background: -o-linear-gradient(#f9d835, #f3961c);
background: linear-gradient(#f9d835, #f3961c);
-webkit-border-top-left-radius: 25px 50px;
-webkit-border-top-right-radius: 25px 50px;
-webkit-border-bottom-right-radius: 25px 50px;
-webkit-border-bottom-left-radius: 25px 50px;
-moz-border-radius: 25px / 50px;
border-radius: 25px / 50px; }

.exemplu-nou:before {
content: „”;
position: absolute;
bottom: -30px;
right: 80px;
border-width: 0 0 30px 50px;
border-style: solid;
border-color: transparent #f3961c;
display: block;
width: 0;
}

.exemplu-nou:after {
content: „”;
position: absolute;
bottom: -30px;
right: 110px;
border-width: 0 0 30px 20px;
border-style: solid;
border-color: transparent #fff;
display: block;
width: 0;
}

Ce mare și galben sunt!

.exemplu-nou {
    position: relative;
    padding: 15px 30px;
    margin: 0;
    color: #000;
    background: #f3961c;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
    background: -moz-linear-gradient(#f9d835, #f3961c);
    background: -o-linear-gradient(#f9d835, #f3961c);
    background: linear-gradient(#f9d835, #f3961c);
    -webkit-border-top-left-radius: 25px 50px;
    -webkit-border-top-right-radius: 25px 50px;
    -webkit-border-bottom-right-radius: 25px 50px;
    -webkit-border-bottom-left-radius: 25px 50px;
    -moz-border-radius: 25px / 50px;
    border-radius: 25px / 50px; }

.exemplu-nou:before {
    content: "";
    position: absolute;
    bottom: -30px;
    right: 80px;
    border-width: 0 0 30px 50px;
    border-style: solid;
    border-color: transparent #f3961c;
    display: block;
    width: 0;
}

.exemplu-nou:after {
    content: "";
    position: absolute;
    bottom: -30px;
    right: 110px;
    border-width: 0 0 30px 20px;
    border-style: solid;
    border-color: transparent #fff;
    display: block;
    width: 0;
}
<blockquote class="exemplu-nou">
        <p>Ce mare și galben sunt!</p>
</blockquote>

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Acest site folosește Akismet pentru a reduce spamul. Află cum sunt procesate datele comentariilor tale.