Bu alanda yaptığım işleri sergileyebilirim sanırım.

HTML

CSS Cami Mahlası Kodlayalım

31 May 2018
yzr: Hakkı Cengiz

Aslında bunu kodlamayı daha Ramazan ayına girmeden düşünmüş ve araştırmış olsam da mahlasa uygun "cami.png" araştırmam beni yarı yolda bırakmıştı. Çünkü bulduğum resimlerle temama uygun kodlamalar olmayacaktı. Bu yüzden rafa kaldırmıştım. Bunun haricinde ramazan davulcusunu da kodlamayı araştırmıştım, yine aynı şekilde bırakmıştım.

Bugün tekrar uyanan hislerimle nette gezerken camigezgini.com'a denk geldim. Allah razı olsun Muammer Dolmacı kardeşim de beni kırmayarak orda denk geldiğim logosunu mahlas olarak kullanmama izin verdi. Seyyahlıkta yolları hep açık olsun.

  • İlk adım: Yapıyı hayal et ve kur. (işin html kısmı)
    - .mahya adında tüm bu alanı kapsayacak div oluşturdum içine arkaplanı oluşturacak bir resim ve resmin tepesinde yer alacak olan yazı mahyamız (class adı: oval-1).
    <div class="mahya">
    <img src="https://hakkicengiz.com/wp-content/themes/gececi/img/mahya-wbg.png" width="170" alt="Eid Mubarek!" />
    <div class="mahya-yazisi">Ramazanınız Mübarek Olsun</div>
    </div>
  • İkinci adım: Temeli at ve nesneleri konumlandır. (css)
    - .mahya'ya ve onun içindeki arkaplan resmimize (.mahya img) verdiğim css değerleri:

    .mahya {
    position: relative;
    display: block;
    width: 170px;
    height: 170px;
    font-size: 9.5px;
    }
    .mahya img{
    position: absolute;
    width: 170px;
    height: 170px;
    z-index: 2;
    }

    - Yazımızın konumlandırması ve çevresini kaplayan noktalı şerit. Bu haliyle tamam ama bi hareket bi animasyon yok.

    .mahya .mahya-yazisi {
    position: absolute;
    top: 0;
    left: 20px;
    width: 125px;
    height: 24px;
    border: 3px dashed #eee;
    border-radius:5px;
    z-index: 1;
    color: #fff;
    line-height: 2.5em;
    text-align: center;
    }
    - Son kısımda mahya'daki yazımız (.mahya-yazisi) tıpkı gerçekteki gibi yanıp sönmesi lazım ki ziyaretçilerin gönlüne inelim.
    - CSS 'transition' özelliği ile .mahya-yazisi'nı ortadan yukarı doğru ovalleştirmek istedim ama tam aradığım özelliği bulamadım.
  • Üçüncü adım: Bende CSS 'animation' özelliğine geçip .mahya-yazisi'na yanıp sönme animasyonu ekleyerek kodlamayı bitirdim.

    .mahya .mahya-yazisi{
    -webkit-animation-name: animahya; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 5s; /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: infinite;
    animation-name: animahya;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    }

    /* Safari 4.0 - 8.0 */
    @-webkit-keyframes animahya {
    from {background-color: black; color: af0;}
    to {background-color: white; color: transparent;}
    }

    /* Standard syntax */
    @keyframes animahya {
    from {border: 3px dashed white;color: af0;}
    to {border: 3px dashed transparent;color: transparent;}
    }

 

Notlar: Kodlarda eksik ya da yanlış yer varsa veya şunu eklesek daha iyi olur dediğiniz bi fikriniz varsa yorumlara bekliyorum.

2 Yorum

  • Kodlar üzerinde bir tavsiyem yok fakat menu başlıklarının ve “hakkı cengiz” yazısının fontunu daha az resmi bir şey yapsan sanki daha iyi durur gibi.
    Ayrıca “kodlarla dövüşen çocuk” yazısı da biraz sağ tarafa kaysa fena olmaz.
    Sevgiler, FordMemmed.

    12 ay önce
  • sağol gardaşım yorumunu dikkate alarak bikaç rütüş attım

    12 ay önce
  • Bi yoruma ne dersin ?

    E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir


Choose A Format
Trivia quiz
Poll
Story
List
Video
Audio