CSS Cami Mahlası Kodlayalım

Mobil Mod31 Mayıs 2018 tarihinde Hakkı Cengiz yazmıştır.

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

machodolar

4 ay önce

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.

Bir cevap yazın

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

Dost Siteler

Etiketler

Son Yorumlar

  • machodolar : I know it's hard to comprehend but there will be days that you DON'T GIVE A SINGLE FUCK about any romantic relationship. Your whole being is more rational than your conscious mind and will do the necessary changes in time. So stop whining and get to work. Cheers. Machodolar
  • Hakkı Cengiz : sağol gardaşım yorumunu dikkate alarak bikaç rütüş attım
  • Hakkı Cengiz : I can walk into a room without you And I don't get drunk and talk about you So I guess I've learned to live without you I just don't know how to love without you
  • machodolar : 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.
  • Hakkı Cengiz : merhabaa :) Yapıştırdığında bu dosyalar üzerine yazılsın dedin mi? ve bu dll dosyasını her bir ürünün içine kopyalamalısın. misal photoshop 32 bit versiyonunu kullanmak sana yetiyorsa adobe/photoshop (86x) klasörünün içine attıktan sonra böyle bir dosya mevcut diyecek. üzerine yaz deyip devam etmelisin.
Özlü Söz