Adobewordpress gururla sunar : “iPhone Mesajlar Ekranı”

iphone-mesajlar-css-html
Bugün sizlerle birlikte çok şık ve eğlenceli bir mesaj panosu tasarımı yapacağız.

iPhone‘un şık ve kullanışlı mesajlaşma ekranı hem sadeliği hem de kolay kullanılabilir olması sebebiyle izini sürebileceğimiz başarılı tasarımlardan birisi. Peki bu yapıyı web ortamına nasıl aktaracağız? HTML5 ve CSS3‘ün güçlendirilmiş yeni teknikleri ve jQuery‘nin fonksiyonelitesiyle bu iş sandığınız kadar zor olmayabilir.

Adobewordpress gururla sunar :
Karşınızda responsive yapıdaki iPhone mesajlar ekranı tasarımı

ÖRNEĞİ GÖRÜNTÜLE


HTML5, CSS3 ve jQuery ile “iPhone Mesajlar Ekranı” nasıl yapılır?

Kendinizi geliştirmek ve web tasarımının her noktasına temas etmek istiyorsanız doğru makaleyi okumaktasınız.

Bu yazımızda CSS, HTML ve JavaScript‘in gücünü bir arada kullanacağız. İlk olarak HTML ile iskeletimizi çıkaracağız, hemen arkasından da bu iskelete CSS ile tasarım giydireceğiz. Sonrasında da yapının çalışmasını sağlamak için JavaScript kodlarımızı ekleyeceğiz.


Tam sayfa görüntüle


HTML Kodları

Aşağıdaki kod örnekte kullandığımız yapıyı barındırmakta. Yani içerisinde 5 örnek statik mesaj bulunuyor. Tek tek araya girip kodları bölmektense eklediğimiz yorum satırlarıyla ilgili satırların ne yaptıklarını sizinle paylaşacağız.

<!-- Çerçevemiz chat classına sahip bir form öğesi -->
<form class="chat">
  <!-- Aşağıdaki span sayesinde yeni mesaj gönderirken yüklenme barı oluşturacağız -->
  <span></span> 
  <!-- Artık mesajlarımızı göstereceğimiz ilk ekranı tanımlayalım. Adobewordpress id'sine sahip elemanda dikey scroll desteğini ileride CSS tarafında ekleyeceğiz -->
  <div class="messages" id="adobewordpress">
    <!-- Mesaj örneği BAŞLANGIÇ -->
    <div class="message">
      <div class="myMessage">
        <p>It looks beautiful!</p>
        <date>08.03.2016  14:30:7</date>
      </div>
    </div>
    <!-- Mesaj örneği Bitiş -->
    <div class="message">
      <div class="fromThem">
        <p>It looks like the iPhone message box.</p>
        <date>08.03.2016  14:31:22</date>
      </div>
    </div>
    <div class="message">
      <div class="myMessage">
        <p>Yep, is this design responsive?</p>
        <date>08.03.2016  14:33:32</date>
      </div>
    </div>
    <div class="message">
      <div class="myMessage">
        <p>By the way when I hover on my message it shows date.</p>
        <date>08.03.2016  14:36:4</date>
      </div>
    </div>
    <div class="message">
      <div class="fromThem">
        <p>Yes, this is completely responsive.</p>
        <date>08.03.2016  14:37:12</date>
      </div>
    </div>
  </div>
  <!-- Yeni mesaj eklememizi sağlayan form öğlerini de ekleyelim -->
  <input type="text" placeholder="Your message">
  <input type="submit" value="Send">
</form>

Sırada bu iskelete tasarım giydirmek var.


CSS Kodları

İşin en zevkli kısmına geldik. iPhone bu ekranda 3 tip renk kullanıyor. Yeşil, gri ve beyaz. Bu renklerimizi üstte tanımladığımız iskelete ekleyeceğiz.

İlk satırımızda Google Web Fonts üzerinden Open Sans yazı tipini çağıralım.

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

Ama başlangıçta form.chat içerisinde her şeye box-sizing ve transition tanımlayalım. Buradaki * tüm öğeleri seçmemizi sağlıyor.

form.chat *{
  transition:all .5s;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
}

Genel iskeletimizi tasarlayalım. Fare imlecini normalleştirelim. Öğeyi içine koyulduğu relative yapının şeklini alacak (responsive) hale getirelim. Daha sonra da gerçekçiliği arttırmak için yazıların seçilebilir özelliklerini kaldıralım.

form.chat {
  margin:0;
  cursor:default;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  top:0;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;   
}

Yeni mesaj gönderildiğinde üst kısımda yüklenecek spinner‘ı tanımlayalım. En son animasyonu da yazacağız.

form.chat span.spinner{
  -moz-animation: loading-bar 2s 1;
  -webkit-animation: loading-bar 2s 1;
  animation: loading-bar 2s 1;
  display: block;
  height: 2px;
  background-color: #00e34d;
  transition: width 0.2s;
  position:absolute;
  top:0; left:0; right:0;
  z-index:4
}

Mesaj listesinin uzaması halinde çıkacak scroll bar‘ın stilini yönetelim.

form.chat ::-webkit-scrollbar {width: 3px; height:1px;transition:all .5s}
form.chat ::-webkit-scrollbar-track {background-color: white;}
form.chat ::-webkit-scrollbar-thumb {
  background-color: #bec4c8; 
  border-radius:3px;
}

Her bir mesaj tasarımını stabil hale getirelim. Yatay taşan kısımları yok edelim. Dikeyleri ise scroll ile gösterelim. En alta da form öğelerini ayrıştırmak için küçük bir border koyalım.

form.chat .messages{
  display:block;
  overflow-x: hidden;
  overflow-y: scroll;
  position:relative;
  height:90%;
  width:100%;
  padding:2% 3%;
  border-bottom:1px solid #ecf0f1;
}

Şimdi mesajların çerçevesi içerisinde barının birim mesaj stilini yönetelim. Kenarlarına küçük bir padding verdikten sonra içlerindeki paragrafların marginlerini silelim. Uzun mesajlar yazılır diye de break-word kullanarak doğru kesme işlemleri yapalım.

form.chat .message{
  display:block;
  width:99%;
  padding:0.5%;
}

form.chat .message p{
  margin:0;
}

form.chat .myMessage,
form.chat .fromThem {
  max-width: 50%;
  word-wrap: break-word;
  margin-bottom: 20px;
}

Mesajların üzerine gelindiğinde alacakları stili tanımlayalım. Tabii bu tanımlar büyük ekranlar için. Mobil cihazda ileride tanımlayacağımız responsive stiller aktif olacak.

form.chat .message:hover .myMessage{
  transform: translateX(-130px);
}

form.chat .message:hover .fromThem{
  transform: translateX(130px);
}

form.chat .message:hover date {
  opacity: 1;
}

Şimdi normal mesaj stilini atayalım.

form.chat .myMessage,.fromThem{
  position: relative;
  padding: 10px 20px;
  color: white;
  border-radius: 25px;
  clear: both;
  font: 400 15px 'Open Sans', sans-serif;
}

form.chat .myMessage {
  background: #00e34d;
  color:white;
  float:right;
  clear:both;
}

Sırada mesaj kutucuklarının yanındaki küçük ok benzeri işaretçileri eklemek var. CSS’in before ve after selectorleriyle bu iş çok basit.

form.chat .myMessage:before {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: -2px;
  right: -7px;
  height: 19px;
  border-right: 20px solid #00e34d;
  border-bottom-left-radius: 16px 14px;
  -webkit-transform: translate(0, -2px);
  transform: translate(0, -2px);
}

form.chat .myMessage:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: -2px;
  right: -56px;
  width: 26px;
  height: 20px;
  background: white;
  border-bottom-left-radius: 10px;
  -webkit-transform: translate(-30px, -2px);
  transform: translate(-30px, -2px);
}

form.chat .fromThem {
  background: #E5E5EA;
  color: black;
  float: left;
  clear:both;
}
form.chat .fromThem:before {
  content: "";
  position: absolute;
  z-index: 2;
  bottom: -2px;
  left: -7px;
  height: 19px;
  border-left: 20px solid #E5E5EA;
  border-bottom-right-radius: 16px 14px;
  -webkit-transform: translate(0, -2px);
  transform: translate(0, -2px);
}

form.chat .fromThem:after {
  content: "";
  position: absolute;
  z-index: 3;
  bottom: -2px;
  left: 4px;
  width: 26px;
  height: 20px;
  background: white;
  border-bottom-right-radius: 10px;
  -webkit-transform: translate(-30px, -2px);
  transform: translate(-30px, -2px);
}

Tarih gösterdiğimiz alanları da hazırlayalım.

form.chat date {
  position:absolute;
  top: 10px;
  font-size:14px;
  white-space:nowrap;
  vertical-align:middle;
  color: #8b8b90;
  opacity: 0;
  z-index:4;
}

form.chat .myMessage date {
  left: 105%;
}

form.chat .fromThem date {
  right: 105%;
}

Form öğelerimizi şekillendirelim. Yanyana duran bir text inputumuz ve submit butonumuz olacak.

form.chat input{
  font: 400 13px 'Open Sans', sans-serif;
  border:0;
  padding:0 15px;
  height:10%;
  outline:0;
}

form.chat input[type='text']{
  width:73%;
  float:left;
}

form.chat input[type='submit']{
  width:23%;
  background:transparent;
  color:#00E34D;
  font-weight:700;
  text-align:right;
  float:right;
}

Sırada tasarımımızı responsive kılacak media satırlarımız var. Böylece büyük ekranlarda mesajın sağında gözüken tarih bilgileri mesajın üstüne taşınmış oluyor.

@media (max-width: 768px){
  form.chat .myMessage,.fromThem{
    font-size:12px;
  }
  
form.chat .message:hover .myMessage{
    transform: translateY(18px);
    -webkit-transform: translateY(18px);
  }

  form.chat .message:hover .fromThem{
    transform: translateY(18px);
    -webkit-transform: translateY(18px);
  }
  
  form.chat .myMessage date,form.chat .fromThem date {
    top: -20px;
    left:auto;
    right:0;
    font-size:12px;
  }
  
  form.chat .myMessage,
  form.chat .fromThem {
    max-width: 80%;
  }
}

Son olarak CSS ile tanımlayacağımız spinner animasyonunu hazırlayalım.

@-moz-keyframes loading-bar {
  0% {
    width: 0%;
  }
  90% {
    width: 90%;
  }
  100% {
    width: 100%;
  }
}

@-webkit-keyframes loading-bar {
  0% {
    width: 0%;
  }
  90% {
    width: 90%;
  }
  100% {
    width: 100%;
  }
}

@keyframes loading-bar {
  0% {
    width: 0%;
  }
  90% {
    width: 90%;
  }
  100% {
    width: 100%;
  }
}

Bu kadar. Son olarak JavaScript kodlarımızı ekleyelim.

Bu da ilginizi çekebilir  CSS ile Basılabilen 3 Boyutlu Buttonlar

jQuery Kodları

Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Burada yapacağımız işlem yeni mesaj gönderildiğinde eklenen mesajı ekrana eklemek ve yukarıdaki spinner’ı çalıştırmak. Bunun yanında da son mesajın gözükür olması için scroll’u otomatik olarak en alta çekmek.

Yine kod içerisinde yorum satırlarıyla süreci anlatıyor olacağız.

/* Adobewordpress id'sine sahip öğenin scrollunu en alta çekmemizi sağlayan fonksiyonumuz */
function scrollDown(){
  var focusBottom = document.getElementById("adobewordpress");
  focusBottom.scrollTop = focusBottom.scrollHeight;
}

/* Eğer mesaj yazıldıktan sonra submit düğmesine değil de ENTER tuşuna basılırsa formun iletilmesini sağlayalım */
$("input").keypress(function(event) {
    if (event.which == 13) {
        event.preventDefault();
        $('form.chat input[type="submit"]').click();
    }
});
/* Form kullanılırsa çalışacak temel click fonksiyonu */
$('form.chat input[type="submit"]').click(function(event){
  event.preventDefault(); // Sayfanın yeniden yüklenmesini engelleyelim.
  var message = $('form.chat input[type="text"]').val(); // Yazılan mesajı message değişkenine kaydedelim
  if( $('form.chat input[type="text"]').val()) { // Eğer mesaj yazılmışsa
    var d = new Date(); // Mesaj yazılma tarihini gösterelim
    var clock = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
    var month = d.getMonth()+1;
    var day = d.getDate();
    var currentDate = 
        ((''+day).length<2 ? '0' : '') + day + '.' +
        ((''+month).length<2 ? '0' : '') + month + '.' +
        d.getFullYear() +'&nbsp;&nbsp;'+ clock;
	/* Aşağıda mesajı ve yazılma tarihini panoya ekliyoruz */
    $('form.chat div.messages').append('<div class="message"><div class="myMessage"><p>'+message+'</p><date>'+currentDate+'</date></div></div>');
	setTimeout(function() {
      $('form.chat > span').addClass('spinner'); // Yukarıdaki yeşil bar (spinner) aktif olur
    }, 100);
    setTimeout(function() {
      $('form.chat > span').removeClass('spinner'); // Spinner kapanır
    }, 2000);
  }
  $('form.chat input[type="text"]').val(''); // Mesaj yazdığımız input'un value değeri sıfırlanır
  scrollDown(); // Pano ekranı aşağı kaydırılır
});

Bitirmeden Önce

Tasarladığımız arayüz içerisine koyulan herhangi bir öğenin şeklini alabilecek şekilde kullanıma hazır. İster örnek ekranda yaptığımız gibi bir iPhone ekranı içerisine sıkıştırın, isterseniz de boş bir HTML ekranına yerleştirerek telefonunuz veya herhangi bir akıllı cihazla keyfini sürün.

İyi çalışmalar.