Ana içeriğe atla

Bazı basit ama işe yarar css kodları

1. Sabit arkaplan kodu:

background: url(bg.jpg) no-repeat 100%;
background-attachment: fixed;

2. Css dosyasını siteye gömme:

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

3. Sitenizin yazı tipini belirleme kodu:

font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;

4. Linkteki altçizgiyi kaldırma kodu:

text-decoration: none;

5. Üzerine gelince renk değiştirme kodu:

.auto-style1:hover {
            color:aqua;
        }

6. Yazı altına çizgi ekleme:

border-bottom:solid 3px  red;

7. Link, Paragraflara özellik renk tanımlaması yapılabilir:

a {
    color: white;
    text-decoration: none;
}

a:hover {
    color:aqua;
    text-decoration: line-through;
}

p:hover {
    color:aqua;
}

8. Arkaplan sabit resim yapma kodu:

background: url(images/bg.jpg) no-repeat 100%;
background-attachment: fixed;

9. Css ile yuvarlak:

background-color: #6286a0;
width: 200px;
height: 200px;
border-radius: 200px;
border: 15px solid rgba(255, 255, 255, .5);

10. Resme opaklık saydamlık verme kodu:

opacity: 0.5;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;

11. Yukarıda sabit duran cisim yapma:

position: fixed;
z-index:100;

12. altta sabit duran menü:

position:fixed;
bottom:0px;

13. calc() metodu kullanımı:

örneğin left:calc(50% - 100px); dediğimiz zaman sayfanın tam ortasını alır 100 px çıkartır

14.

Yorumlar

Bu blogdaki popüler yayınlar

CSS üstte sabit duran menü yapımı

Sitenin en üstünde sabir şekilde duran menüler ile birçok site ve blog’da karşılaşıyoruz. Benzer bir menüyü sizde sitenize eklemek istiyorsanız basitçe özel hazırlanan bu örneği de kullanabilirsiniz. HTML Kodu: < html > < head >      < meta charset = "utf-8" >      < title >Yusuf Akdin</ title >      < link rel = "stylesheet" type = "text/css" href = "style.css" > </ head > < body >      < div class = "ust" >          Üst taraftaki sabit menü      </ div >      < div class = "orta" >          Site İçeriği      </ div > </ body > </ html > CSS Kodu: html,body{      margin :  0 ;      padding :...

Css ve Div ile Web Sitesi Yapmak

XHTML Kodumuz: <div id= "site" > <div id= "ust" > üst kısım </div> <div id= "icerik" > içerik </div> <div id= "sol" > sol kısım </div> <div id= "alt" > alt kısım </div> </div> CSS Kodumuz: #site { width : 768px ; margin:0 auto; /* sayfayı ortalama kodu */ } #ust { width : 768px ; } #icerik { float : right ; /* sağ tarafa yaslama kodu */ width : 568px ; } #sol { float : left ; /* sol tarafa yaslama kodu */ width : 200px ; } #alt { width : 768px ; clear : both ; /* bir çeşit float temizleme kodu, bu kod ile alt kısım alt tarafta kalacak*/ }

Normalize.Css Nedir? Nerede Kullanılır? Ne işe Yarar?

Normalize.css ile bütün tarayıcıları ayarlarını normalleştirerek yazdığımız kodların anormal bir şekilde her tarayıcıda farklı bir görünüm ve anlayış göstermemesini sağlar. Normalize.css'in yenilikçi bir yapıt olmasının en iyi örneği HTML5 uyumlu bir durumda ve mobil site anlayışında bile etkileyici bir uyumluluk söz konusu. Hoşunuza gitmeye başladı öyle değil mi? Haklısınız çünkü Normalize.css'i  Twitter Boostrap ,  CSS Tricks ,  GitHub ,  SoundCloud  gibi yapıtlar da kullanıyor. Normalize.css'i indirmek için : https://necolas.github.io/normalize.css linkine tıklayıp download butonu yardımıyla Normalize.css'in en güncel sürümüne ulaşabilie ve indirebilirsiniz. Normalize.css'i projemde nasıl kullanabilirim? : Aşağıdaki kodu yardımıyla kolayca projenizde kullanabilirsiniz. <link href="normalize.css" rel="stylesheet">