CSS ile Neler Yapabiliriz? (Basit Bir Örnek)

Bu derste tamamen kod ile Facebook logosu yapacağız. Çok iyi olmasa da CSS'ye yeni başlayan arkadaşlarımızı heveslendireceğinden eminim.

Merhaba arkdaşlar,

Bu ilk dersim. Çok profesyonel olmasam da birşeyler yapabildiğime inanıyorum.

Bu derste tamamen kod ile Facebook logosu yapacağız. Çok iyi olmasa da CSS'ye yeni başlayan arkadaşlarımızı heveslendireceğinden eminim.

İhtiyacımız olan, bir metin düzenleme aracı.

index.html içerisine;


<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-9" />

<title>Kodlarla neler yapabiliriz</title>

<link href="index.css" rel="stylesheet" type="text/css" />

</head>

<body>



<p>Sadece CSS ile neler yapabilir - fmdogg</p>



<div class="kalip">



<p style="margin-top:-60px; text-align:right; margin-right:80px;" class="face">

f

</p>





<center> <!-- ORTALA -->

<div style="margin-top:-760px;" class="golge">



</div>

</center> <!-- ORTALA -->

</div>



</body>

</html>



index.css içerisine ise;


.kalip{

        width:800px; /* GENIŞLIK */

        height:600px; /* YUKSEKLIK */

        border:1px solid lightblue; /* KENAR KALINLIÐI 1PX - AÇIK MAVİ */

        border-radius:15px; /* KENAR YUMUŞAKLIÐI */

        background:#0C639D; /* ARKAPLAN RENGİ */

}



.golge{

        width:750px;

        height:100px;

        background:#63AFE2;

        opacity:0.55; /* SAYDAMLIK */

        filter:alpha(opacity=55);  /* SAYDAMLIK, İE İÇİN */

        position:relative;

}



.face{

        color:White; /* FONT RENGİ - BEYAZ */

        font-size:600px;  /* FONT BOYUTU */

        z-index:-2px; /* herzaman üstte olması için */

}



ekleyerek kaydedin ve index.html'den açarak önizleyebilirsiniz,

Yeterince açıklamaları koymaya çalıştım. Bazı kısımlarda koyamadım onları da hemen buradan belirteyim.

margin-top: özelliği elementin üst kenar boşluğunu bellibir değer kadar veya yüzde olarak belirler.Negatif değer alabilir.

margin-right: özelliği elementin sağ kenar boşluğunu bellibir değer kadar veya yüzde olarak belirler.Negatif değer alabilir.

margin-bottom: özelliği elementin alt kenar boşluğunu bellibir değer kadar veya yüzde olarak belirler.Negatif değer alabilir.

margin-left: özelliği elementin sol kenar boşluğunu bellibir değer kadar veya yüzde olarak belirler.Negatif değer alabilir.

Umarım faydalı bir ders olmuştur, ilginize teşekkürler..
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git