Html & Css İle Özelleştirilebilir Bir İletişim Bilgileri Kartı Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Projeye başlamadan önce bilgisayarınızda bir metin editörü (VS Code önerilir) ve modern bir web tarayıcısı (Chrome, Firefox veya Edge) bulunmalıdır. Ekstra bir kütüphane veya framework kullanmadan, sadece saf HTML5 ve CSS3 kullanarak ilerleyeceğiz.

• HTML5: Sayfanın iskeletini oluşturmak için.
• CSS3: Kartın stilini, renklerini ve düzenini belirlemek için.
• Düzenleyici: Visual Studio Code veya benzeri bir editör.

Adım 1: HTML Yapısını Oluşturma

İletişim kartımızın temelini oluşturmak için anlamsal (semantic) HTML etiketlerini kullanacağız. Bu, hem SEO uyumluluğunu artırır hem de ekran okuyucular için erişilebilirlik sağlar.

    


İletişim Bilgilerim
    

        
E-posta: iletisim@ornek.com
    
    

        
Telefon: +90 555 000 00 00
    

Burada div etiketlerini kullanarak kartımızı grupladık. info-item sınıfı, her bir iletişim satırını birbirinden ayırmak için kullanılacak. Bu yapı, ileride CSS ile esnek bir şekilde düzenlememize olanak tanır.

Adım 2: CSS ile Kartı Şekillendirme

Kartımıza görsel bir kimlik kazandırmak için CSS kullanacağız. Kartın arka plan rengi, gölgelendirmesi ve köşe yuvarlatmaları, modern bir görünüm için anahtar unsurlardır.

.contact-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    max-width: 300px;
    margin: 20px auto;
    font-family: Arial, sans-serif;
}

.info-item {
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
}

box-shadow özelliği kartımıza derinlik katarak sayfadan öne çıkmasını sağlar. max-width kullanımı ise kartın mobilde çok genişlemesini engelleyerek her cihazda düzgün görünmesini sağlar.

Adım 3: İkonlar ve Görsel Zenginlik

İletişim kartlarını daha okunabilir kılmak için ikonlar eklemek standart bir uygulamadır. Burada CSS kullanarak basit bir görsel hiyerarşi oluşturacağız.

.info-item p::before {
    content: "✉";
    margin-right: 8px;
    color: #007bff;
}

CSS ::before sözde elementi (pseudo-element), HTML'i kirletmeden ikon eklememize olanak tanır. Bu yöntem, performans açısından resim dosyası yüklemekten daha hızlıdır.

Adım 4: Responsive (Duyarlı) Tasarım

Kartınızın farklı ekran boyutlarında nasıl davranacağını belirlemek için medya sorgularını (media queries) kullanmalıyız. Bu, mobil cihazlardaki kullanıcı deneyimini doğrudan etkiler.

@media (max-width: 600px) {
    .contact-card {
        width: 90%;
        padding: 15px;
    }
}

Bu kod bloğu, ekran genişliği 600 pikselin altına düştüğünde kartın genişliğini ekranın %90'ı yapacak şekilde ayarlar. Böylece küçük ekranlarda kartın taşması engellenmiş olur.

Adım 5: Gelişmiş Özelleştirme ve Stil Seçenekleri

Kartınızı daha fazla özelleştirmek için CSS değişkenlerini (variables) kullanabilirsiniz. Bu, renkleri veya fontları tek bir yerden değiştirerek tüm kartta güncelleme yapmanızı sağlar.

:root {
    --primary-color: #3498db;
    --card-bg: #f9f9f9;
}

.contact-card {
    background-color: var(--card-bg);
    border: 2px solid var(--primary-color);
}

CSS değişkenleri, projenizin bakımını kolaylaştırır. var() fonksiyonu ile tanımladığınız değerleri istediğiniz özellik içerisinde kolayca kullanabilirsiniz.

Karşılaştırma: İletişim Kartı Oluşturma Yöntemleri

Güvenlik Uyarısı: İletişim kartınızda e-posta adresinizi açık olarak paylaşmak, botlar tarafından taranmanıza ve spam almanıza neden olabilir. Üretim ortamında e-posta adreslerini gizlemek için basit bir JavaScript fonksiyonu kullanabilir veya iletişim formu tercih edebilirsiniz.

Sıkça Sorulan Sorular

İletişim kartını nasıl ortalayabilirim?

Kartın dış kapsayıcısına display: flex; justify-content: center; align-items: center; özelliklerini vererek kartı dikey ve yatay olarak tam ortalayabilirsiniz.

İkonlar için neden kütüphane kullanmadık?

Saf CSS kullanımı sayfa yüklenme hızını artırır ve dış kaynaklara olan bağımlılığı azaltır. Basit ikonlar için CSS pseudo-elementleri yeterlidir.

Bu kartı nasıl daha güvenli hale getiririm?

E-posta adreslerini metin olarak yazmak yerine, bir "Mailto" bağlantısı () kullanarak kullanıcının doğrudan e-posta uygulamasını açmasını sağlayabilirsiniz.

.contact-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

@supports not (display: grid) {
    .card-container {
        display: block; /* Grid desteklemeyen tarayıcılar için yedek */
    }
}