Dymki jak z komunikatora

Pojawił się pomysł, żeby na blogu był CSS, za pomocą którego łatwo sprawić, żeby dane fragmenty tekstu wyglądały tak, jakby napisano je w jakimś komunikatorze. Chcesz, mówisz, masz, więc CSS już jest. I teraz – jak go użyć? Bardzo prosto.

Wystarczy przejść w ekranie edycji posta do widoku HTML i wkleić taki fragment w tekst:

  <div class="imessage">
    <p class="from-me">Wypowiedź od Twojej postaci.</p>
    <p class="from-them">Wypowiedź od drugiej postaci.</p>
  </div>

Jeśli chce się przedłużyć konwersację, każdą wypowiedź postaci trzeba ująć między tagi <p> i </p>, a następnie dodać do nich fragment class="from-me", jeśli to wypowiedź od Twojej postaci, albo class="from-them", jeśli to otrzymana odpowiedź. Efekt wygląda następująco:

Wypowiedź od Twojej postaci.

Wypowiedź od drugiej postaci.

Jedyne, o czym trzeba pamiętać, to żeby wszystkie wypowiedzi z komunikatora umiejścić między tagami <div class="imessage"> i </div>. I voilà, to tyle :3