CSS / CSS3

Web siteniz için CSS3 Butonları 0

Web sitenizde kullanabiliceğiniz CSS3 ile kodlanmış harika butonlar. rooteto’da buna benzer butonlar kullanılıyor gayet hoş ve güzel duruyor. 🙂 Tavsiye ederim şimdi ben size bu butonları nasıl web sitenize uyarlayacaksınız onu anlatıcam. O yüzden dikkatlice yazılarımı okuyun.

https://2.bp.blogspot.com/-9nCVc7aq56o/T59whaksMMI/AAAAAAAAHFs/8aE792qIrfQ/s1600/site-butonlari.jpg

Pretty CSS3 buttons

Butonların stilleri aşağıdaki  kodlarla verilmiştir.


.button, .button:visited {
    background: #222 url(overlay.png) repeat-x;
    display: inline-block;
    padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer
}

Butonların büyüklükleri aşağıdaki kodlarla verilmiştir.

   .small.button, .small.button:visited                    { font-size: 11px}
.button, .button:visited,
.medium.button, .medium.button:visited      { font-size: 13px;
                                              font-weight: bold;
                                              line-height: 1;
                                              text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
                                              }

.large.button, .large.button:visited                    { font-size: 14px;
                                          padding: 8px 14px 9px; }

.super.button, .super.button:visited            { font-size: 34px;
                                          padding: 8px 14px 9px; }

Son olarak butonların renkleri aşağıdaki kodlarla verilmiştir.


.pink.button, .magenta.button:visited   { background-color: #e22092; }
    .pink.button:hover                  { background-color: #c81e82; }
    .green.button, .green.button:visited    { background-color: #91bd09; }
    .green.button:hover                     { background-color: #749a02; }
    .red.button, .red.button:visited        { background-color: #e62727; }
    .red.button:hover                   { background-color: #cf2525; }
    .orange.button, .orange.button:visited  { background-color: #ff5c00; }
    .orange.button:hover                { background-color: #d45500; }
    .blue.button, .blue.button:visited              { background-color: #2981e4; }
    .blue.button:hover                  { background-color: #2575cf; }
    .yellow.button, .yellow.button:visited  { background-color: #ffb515; }
    .yellow.button:hover                { background-color: #fc9200; }

Yukarıdaki buton renk kısımlarına göre renkleri dahada arttırabilirsiniz.

CSS3 Buton Kullanım Şekli

Sitenizin arka planı siyah ise butonları kullanıcağınız tablo id’si dark olmalı. Eğer açıksa arka plan light olması yeterli. Zaten indirdiğiniz dosyada nasıl yapılıcağını kodlardanda çözebilirsiniz.

Alttakilerden ilki Light olan arka kısmı beyaz. 2.olan Dark ise arka planı siyah olan. Alttaki örnekteki gibi kullanıcaksınız butonlarınızı.

  <div id="light">  		
       <ul>
        <li><a class="super button pink">Pembe Buton</a>
        </ul>
 </div>       
      
 <div id="dark">       
        <ul>
        <li><a class="super button pink">Pembe Buton</a>
        </ul>
</div>

Yukarıdaki kod sadece bir örnek.

Demo – Download

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.

Ders 4: W3 Nedir? Neden W3 Standartları? 0

Merhaba arkadaşlar bugün birazcık ara verdiğim videolu eğitimlerime devam ediyorum. Öncelikle derslere devam etmeden önce W3’ün ne olduğunu anlatmam gerekiyordu bunu hem videolu hemde yazı olarak anlatacağım. Bu şekilde bunuda öğrentikten sonra diğer derslere devam edeğim.

[youtube]http://www.youtube.com/watch?v=RccRXAYwsH4[/youtube]

Bu arada video’da ufak bir cızıltı var kusura bakmayın o problemide en kısa sürede çözücem inşallah 🙂

W3 Nedir?

HTML işaretleme dilini geliştiren ve İnternet’in babası olarak kabul edilen Tim Berners W3 Okulu yani “internet standartları” adı altında W3’ü kurmuştur. Bunlar benim açıklamam isterseniz birde kaynak açıklamalarada bakalım;

W3 yani (World Wide Web- Dünya çapında Ağ) in kısalmasıdır.  Gayri resmi olarak internetin ilk sitesi.
Bizim TSE (Türk Standartları Enstitüsü) nün internet versiyonu diyebiliriz. internetteki standartları belirleyen oluşum.
“Tim Berners Lee” 1989’da HTML programlama dilini geliştirerek insanlığa internetin kapılarını açtı.1994 yılında Ağ ile ilgili standartları dünya çapında belirleyecek açık bir kurum olan W3C’yi kurdu,halen de başkanlığını yapmaktadır. 1999’da Time dergisi tarafından 20. yüzyılın en büyük 100 zekası arasında sayılan Berners-Lee bir çok ödül ve ünvan sahibi bilgisayar profesörüdür. Şu an MIT üniversitesinde prof’luk yapmaktadır.Google dahil bir çok dev internet şirkete danışmanlık yapmakta.
Şu an ERCIM (France)- Keio Univ.(Japan)- MIT Univ (USA) bilgisayar mühendisliği bölümlerinin ortak yürüttüğü bir konsorsiyumdur w3.org amacı internetin standartlarlarını belirlemek.
Örnegin bir browser yazılım şirketiniz var, yazdığınız programın tüm dünyada kabul görebilmesi için w3 standartlarını tamamen desteklemesi gerekmekte.
Yada yaptığınız web sitesinin tüm browserlarda sorunsuz şekilde görüntülenmesi için w3 standartlarına uyması gerekiyor.

Yukarıdaki açıklama sanırım size yeter benimki çok kısa ama öz 🙂

W3 neden kullanmamız gerekiyor?

W3 Standartlarına göre web’i kullanmazsak web sitemiz video’dada söylediğim gibi kesinlikle tüm tarayıcılarla uyumlu olmayacaktır. Ayrıca günümüz web’inde SEO dediğimiz Arama motoru optimizasyonuda çok önemli bir şekilde kullanılmaktadır. W3 standartlarına göre kodlanmış bir sitenin alt yapısı SEO’ya hazırdır diyebiliriz.

Web sitenizi kendinizmi kodlarsınız başkasınamı kodlatırsınız bilmem ama W3’e dikkat edin hataları azaltın.

W3 Hataları ve Düzeltmeleri

Bir kaç örnek vericem hataları ve düzenlemeleride birlikte göstereceğimki kafanız karışmadan W3 mantığını öğrenin.

Örneğin bir resim eklediniz alttaki gibi (hatalı);

<img src="resim.png">

Yukarıdaki kod düzgün çalışacaktır ama eklediğiniz o resim ne işe yarar adı nedir bilinmiyor bu yüzden doğru kullanım şekli;

<img src="resim.png" alt="logom" />

Örneğin bir css dosyası çağırdınız şu şekilde;

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

Yukarıdaki kodunuz çalışır ancak doğru olan o değil doğru olan aşağıdaki gibidir;

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

Yukarıdakinin sadece sonuna “/>” işaretini koyduk. Yani kodun başlangıcı var ama bitirme kodu olmadığı için kodun içerisinde kodu kapatıyoruz.

2 Örnek verdim dahasına gerek yok zaten mantığını anladınız..

Ders 3: Sınıf Seçicisi (class), Tekil Seçiciler (ID) ve HTML Hiyerarşisi 0

Merhaba arkadaşlar gece gece yeni bir video çektim inşallah faydalı olur 🙂 Bugünkü dersimde ID ve Class‘lardan bahsettim. HTML Hiyerarşisi konusunda yazımın en altında bahsedeceğim detaylı olarak onuda öğrenmiş olcaksınız.

CSS’te Seçiciler; Sınıfı seçiciler yani class’lar birde Tekil seçicilerimiz var onlarda ID’lerimiz oluyor. Sınıf seçicileri yanında birde Çoklu seçici kullanabiliyoruz videodaki örneklerimede alttaki yazımdaki örneklerimide inceleyebilirsiniz.

[youtube]http://www.youtube.com/watch?v=RoafFCtU208[/youtube]

Sınıf Seçicisi

Sınıf seçicisi dediğimiz class’larımızdır arkadaşlar. (class=””) paranter içinde örnek olarak yazdım. HTML etiketlerin içine class olarak atayıp özel stiller tanımlamamı sağlar. Aşağıdaki div’ime ben class=”deneme” yazdım.

Örnek;

<div class="deneme">
rooteto ders
</div>

CSS kullanımı;

Deneme class’ını 2 şekilde kullanabilirim;

Mantık: Div’in içindeki .deneme class’ı

div.deneme{color:red;}

Mantık: Tüm .deneme class’ı

.deneme{color:red;}

Çoklu Seçiciler

Çoklu seçicileri class’larımızda kullanıyoruz. Class’lar hem tekrarlanabiliyor hemde çoklu olarak yazılabiliyor demiştik videoda’da. Örnekleyerek gösterirsek;

<div class="birinci ikinci">
 <h1 class="baslik ikinci">rooteto ders</h1>
 <h1 class="baslik ikinci">rooteto ders</h1>
</div>

CSS kullanımı;

.birinci{color:blue;}
.ikinci{font-weight:bold;}
.baslik{color:yellow;}

Burdaki mantıkta şu şekilde .birinci class’ıma mavi renk verdim.

  • .birinci: Div’in içindekilere blue mavi verdim
  • .ikinci: 3’üde kalın olsun.
  • baslik: Sadece .baslik geçenler sarı olsun dedim.

Tekil Seçiciler

Tekil seçicilerimiz videoda’da söylediğim gibi sadece 1 defa kullanıyoruz. Class’ları birden fazla tekrar edebiliriz ancak ID’leri tekrarlayamayız. HTML sayfanızda çalışır ama kural bu değildir çalışıyo diye yapmayın mantığı öğrenip yaparsanız tarayıcılarla uyumlu site yapmayıda kavrayabilirsiniz.

Tekil seçicilerimiz dedik tekil seçiciler ID’lerimizdir. Onlarda şu şekilde kullanılır örnek;

<div id="logo">
 <h1>Site başlığı</h1>
  <p>Açıklama kısmı</p>
</div>

CSS kullanımı;

Mantık: ID’ler “#” işareti kullanılarak yazılır.

#logo{width:200px;height:200px;}

HTML Hiyerarşisi

HTML Hiyerarşisini anlamanız için bir resim buldum. Resimdeki standartlara göre sayfa kodlamanız gerekiyor. Resimde görüyorsunuz heading etiketleri hiç bir zaman divlerin üstüne çıkmıyor. Divler baba diğerleri evlatlar em, b, strong, a bunlarda minik uşak 🙂

HTML Hiyerarşisi

Most Popular Topics

Editor Picks

1

En ilginç Zaman tüneli Kapakları