HTML/CSS ile T.C. Kimlik Kartı Tasarımı
Nasıl Kimlik Kartı Tasarımı Yapılır?
Resimde gördüğünüz bu tasarımı yapmak için sadece HTML ve CSS kullanacağız. İyi okumalar dilerim :)
Bölüm 1) HTML Sayfasının Oluşturulması;
Öncelikle kimlik bilgilerini içinde tutacak benim "kimlik" sınıf ismi ile isimlendirdiğim bir div,
içerisine "TÜRKİYE CUMHURİYETİ KİMLİK KARTI" başlığımızı ekleyeceğimiz "baslik" class isimli bir tane daha div ve bunun içerisine h1 ve İngilizce çeviri için h2 başlıklarımızı ekliyoruz.
Sonrasında "resim-alani" class isimli bir div oluşturup, içerisine T.C Kimlik No. bilgisini içerecek iki tane başlık etiketi oluşturuyoruz. Bunlardan birinde başlık, diğerinde kimlik numarası yazacak. Kimlik numarasını barındıran başlık etiketine "kimlikno" id ismini veriyoruz. "resim-alani" div etiketinin dışarısında img etiketi ile bir kimlik resmi ekliyoruz. Daha sonra "bilgiler" class isimli kimlik bilgilerini yazacağımız div etiketini oluşturuyoruz. Daha sonra başlık etiketi ile bilginin başlığını (Örn. Soyadı/Surname [İngilizce çevirileri <i> etiketi içerisine alarak italik olmasını sağladım.]) ve altına başka bir başlık etiketi ile bilginin kendisini (Örn. TC/TUR) yazıyoruz.
Sonrasında bunlara birer class ismi veriyoruz. Örneğin ben bilgi başlığına (h1) "bilgi-baslik", bilgiye (h2) ise "bilgi" class isimlerini verdim.
Ardından ay yıldızımızı bir img etiketi ile ekleyip, sayfadaki konumunu daha rahat kontrol edebilmek için bir div içerisine alıyoruz. Ben bu div etiketinin class adını "ayyildiz-div" olarak isimlendirdim.
Daha sonra ise ay yıldızın hemen altına ekleyeceğimiz cinsiyet, uyruk ve imza bilgileri için ayrı olarak bir div açıyoruz ve imza resmini img etiketi ile ekliyoruz.
Kimlik kartının sağında, orta-alt kısmında kalan hologram resim ve üzerindeki kod için, kimlik resminin bulunduğu img etiketinden bir tane daha ekleyip, üzerindeki kod için bir paragraf etiketi oluşturuyoruz.
Sayfanın HTML Kodları;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>T.C. Kimlik Kartı</title>
<link rel="shortcut icon" href="logo.ico" type="image/x-icon">
</head>
<body>
<div class="kimlik">
<div class="baslik">
<h1>TÜRKİYE CUMHURİYETİ KİMLİK KARTI</h1>
<h3 style="font-size: 1rem;">REPUCLIC OF TURKEY IDENTITY CARD</h3>
</div>
<div class="resim-alani">
<h2>T.C Kimlik No/<i>Identity No</i></h2>
<h4 id="kimlikno">01234567891</h4>
</div>
<img id="resim" src="e1.jpg" alt="resim">
<div class="bilgiler">
<h1 class="bilgi-baslik">Soyadı/<i>Surname</i></h1>
<h2 class="bilgi">DEVELOPMENT</h2>
<h1 class="bilgi-baslik">Adı/<i>Given Name(s)</i></h1>
<h2 class="bilgi">WEAXNY</h2>
<h1 class="bilgi-baslik">Doğum Tarihi/<i>Date of Birth</i></h1>
<h2 class="bilgi">01.01.2001</h2>
<h1 class="bilgi-baslik">Seri No/<i>Document No</i></h1>
<h2 class="bilgi">A12345678</h2>
<h1 class="bilgi-baslik">Son Geçerlilik/<i>Valid Until</i></h1>
<h2 class="bilgi">01.01.2021</h2>
</div>
<div class="ayyildiz-div">
<img src="ayyildiz.png" alt="ayyildiz" id="ayyildiz">
</div>
<div class="bilgiler2">
<h1 class="bilgi-baslik">Cinsiyet/<i>Gender</i></h1>
<h2 class="bilgi">E/M</h2>
<h1 class="bilgi-baslik">Uyruğu/<i>Nationality</i></h1>
<h2 class="bilgi">TC/TUR</h2>
<h1 class="bilgi-baslik">İmzası/<i>Signature</i></h1>
<img src="signature.png" alt="signature" id="signature">
</div>
<img id="resimkucuk" src="e1.jpg" alt="resimkucuk">
<p id="code">S400F16C</p>
</div>
</body>
</html>
Bu şekilde sayfamızın HTML kısmı tamamlanmış oluyor. Şimdi CSS kodlarını yazmaya geçebiliriz.
Bölüm 2) CSS ile Tasarımın Oluşturulması
Öncelikle sayfanın bütününde boyutlandırmayı ayarlamak ve fontu belirlemek için aşağıdaki kod bloğunu yazıyoruz;
*{
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
Sonrasında kimlik arka planını oluşturmak ve sayfada ortalamak için aşağıdaki kod bloğunu yazıyoruz;
.kimlik{
background-color: rgb(212, 248, 248);
width: 600px;
height: 350px;
border-radius: 20px;
margin: auto;
}
Margin değerini auto yaparak sayfanın ortasına konumlanmasını sağlamakla beraber, border-radius değerini 20 piksel olarak ayarlayarak kenarlardaki yumuşaklığı eklemiş oluyoruz.
Hemen ardından aşağıda vermiş olduğum kodları ekleyerek, kimliğin başlığını boyutlandırıp ortalayabilir, kimlik resminin boyutlandırma, ışıma ve ortalama işlemlerini yapabilir ve kimlik numarası bilgilerini barındıran "resim-alani" bölümünün konumlandırmasını yapabilirsiniz;
.baslik{
margin: 0;
text-align: center;
font-size: .7rem;
padding-top: 20px;
}
#resim{
width: 150px;
border-radius: 10px;
margin-left: 20px;
margin-bottom: 80px;
box-shadow: 1px 1px 100px white;
display: inline-block;
}
.resim-alani{
padding: 20px;
font-size: .5rem;
position: relative;
top: 10px;
}
Burada öncelikle position değerini ve absolute/relative kavramlarını açıklamak isterim.
Position değeri adı üstünde olarak, elementin sayfada nasıl pozisyon alacağını belirtir. Absolute ayarı,
elementin kendini position değeri relative olan en yakın elemente göre konumlandırmasını, böyle bir ebeveyni yoksa sayfaya göre kendini konumlandırmasını sağlar. Position değeri "absolute" olan elementler, sabit akıştan çıkarılır. Diğer öğeler ile üst üste çakışabilir. Top, bottom, left, right değeri alabilir. Relative ayarı ise sabit akışta olmasına rağmen, top, bottom, left, right değerlerini alarak, diğer öğeler ile çakışma sağlayabilir, zira bu değerler ile diğer öğeleri kaydırmayacaktır. Relative ayarı, absolute ayarı için bir kapsayıcı olarak kullanılabilir. Bunu da anladığımıza göre, tasarıma devam edebiliriz.
Kimlik resminin display değerini "inline-block" yaparak, bulunduğu satırının tamamını kaplamasını önleyebilirsiniz. Bu sayede sadece kendi boyutu kadar yer kaplayacak ve yanına diğer kimlik bilgilerini ekleyebileceğiz.
ID'sini "kimlikno" olarak isimlendirdiğimiz kimlik numarasını barındıran etiketinin boyutunu ayarlamak için, aşağıdaki kod satırlarını projemize ekleyelim;
#kimlikno{
font-size: 1.5rem;
display: inline-block;
}
Artık bilgileri biçimlendirmeye başlayabiliriz. Aşağıdaki satırlar ile bilgi başlıkları ve bilgileri barındıran etiketleri boyutlandırabilir ve konumlandırabiliriz;
.bilgiler{
display: inline-block;
position: absolute;
margin-left: 20px;
top: 100px;
}
.bilgi-baslik{
font-size: .6rem;
margin-top: 10px;
}
.bilgi{
font-size: 1.2rem;
font-weight: bold;
}
Yine bilgileri tutan div etiketinin display değerini "inline-block" yaparak, sadece tuttukları alan kadar yer kaplamalarını sağladık. Ayrıca position değerini "absolute" yapıp yukarıdan (top) 100 piksel daha aşağıda olmasını ayarladık. Bu sayede konumlandırmayı daha az kod ile daha kolay şekilde sağlamış olduk. Bilginin bilgi başlığından büyük olacak şeklinde boyunu ayarladık ve bilginin font biçimini "bold (kalın)" olarak ayarladık.
Burayı da tamamladığımıza göre ay yıldızımıza boyutlandırma ve konumlandırma işlemi yapıp, sağ tarafta kalan bilgiler için gerekli konumlandırma kodlarını yazabiliriz. Eklemeniz gereken kodlar aşağıdaki gibidir;
#ayyildiz{
width: 120px;
height: 90px;
}
.ayyildiz-div{
display: inline-block;
position: absolute;
margin-left: 250px;
top: 70px;
}
.bilgiler2{
display: inline-block;
margin-left: 220px;
margin-top: 50px;
}
Ay yıldız resmimizi, gerçek kimlik kartında olduğu şeklinde boyutlandırdıktan sonra, resmi tutan div etiketinin display değerini "absolute" olarak atayıp, yukarıdan 70 piksel aşağıda olması için top değerini atadık ve sol taraftan 250 piksel kadar uzak olması için gerekli margin değerini verdik.
Sağ tarafta kalan bilgiler (Cinsiyet, uyruk, imza) gerekli margin değerlerini ekledik ve display değerini inline-block yaptık.
Artık imza resmimizi ekleyip, hologram resmini boyutlandırıp, üzerisine hologram kodunu ekleyerek projemizi bitirebiliriz. Gerekli kodlar aşağıdaki gibidir;
#signature{
width: 90px;
padding: 10px;
margin-left: 100px;
display: inline-block;
position: relative;
bottom: 30px;
right: 10px;
}
#resimkucuk{
width: 90px;
height: 30px;
border-radius: 100px;
display: inline-block;
position: relative;
left: 490px;
bottom: 150px;
opacity: .5;
box-shadow: 1px 1px 100px white;
}
#code{
position: relative;
left: 497px;
bottom: 180px;
opacity: .6;
font-weight: bold;
}
İmzayı boyutlandırıp, padding ve margin ile kimlik üzerinde konumlandırdıktan sonra, hologram resmimizi boyutlandırıp, box-shadow değeri ile ışıklandırdıktan sonra opaklık değerini kısıyoruz. Daha sonra kodumuzu, koddaki gibi konumlandırarak üst üste çakışmasını sağlıyoruz.
Bu işlemler sonucunda tasarımımız hazır hale geliyor. Güle güle kullanmanız dileğiyle :)
CSS Kodlarının Tamamı;
*{
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.kimlik{
background-color: rgb(212, 248, 248);
width: 600px;
height: 350px;
border-radius: 20px;
margin: auto;
}
.baslik{
margin: 0;
text-align: center;
font-size: .7rem;
padding-top: 20px;
}
#resim{
width: 150px;
border-radius: 10px;
margin-left: 20px;
margin-bottom: 80px;
box-shadow: 1px 1px 100px white;
display: inline-block;
}
.resim-alani{
padding: 20px;
font-size: .5rem;
position: relative;
top: 10px;
}
#kimlikno{
font-size: 1.5rem;
display: inline-block;
}
.bilgiler{
display: inline-block;
position: absolute;
margin-left: 20px;
top: 100px;
}
.bilgi-baslik{
font-size: .6rem;
margin-top: 10px;
}
.bilgi{
font-size: 1.2rem;
font-weight: bold;
}
#ayyildiz{
width: 120px;
height: 90px;
}
.ayyildiz-div{
display: inline-block;
position: absolute;
margin-left: 250px;
top: 70px;
}
.bilgiler2{
display: inline-block;
margin-left: 220px;
margin-top: 50px;
}
#signature{
width: 90px;
padding: 10px;
margin-left: 100px;
display: inline-block;
position: relative;
bottom: 30px;
right: 10px;
}
#resimkucuk{
width: 90px;
height: 30px;
border-radius: 100px;
display: inline-block;
position: relative;
left: 490px;
bottom: 150px;
opacity: .5;
box-shadow: 1px 1px 100px white;
}
#code{
position: relative;
left: 497px;
bottom: 180px;
opacity: .6;
font-weight: bold;
}
Yorumlar
Yorum Gönder