Css Border Radius Oval Köşe Oluşturma

css 3 ile resim kullanmadan sadece css kodları kullanarak arka planlarınızın köşelerini border radius kullanarak ovalleştirebilir sitenizin görünümünü dahada zenginleştirebilirisiniz.

#kenar1 {width:90px;
                height:30px;
                              border-radius: 10px;
                           background: olive;
}

#kenar2 {width:90px;
                 height:30px;
                                border-radius: 10px;
                                   border: 3px solid blue;
}

 #kenar3 {width:70px;
                 height:70px;
                                             border-radius: 5px 20px 5px;
                           background: silver;
}
#kenar4 {width:70px;
                height:70px;
                                       border-radius: 10px 30px;
                          background: orange;
}

Kenar 1:

Kenar 2

Bu iki örnekte görüldüğü gibi bütün köşeler oval bir görünüm almıştır.Css ile köşeleri oval yapmadaki tek husus border radius kodu ' dur.

Kenar 3

Kenar 4

Mesela sadece sol üst tarafı ovalleştirmek isterseniz ; border-radius-top-left yada sadece sol alt tarafı ovalleştirmek isterseniz ; border-bottom-left-radius gibi kodları kullarak zenginleştirebilirsiniz.

CSS Yatay Menu Yapımı

Bu makalemde Blog veya Websitelerinize eklemek için CSS yatay Menu yapımını kısa ve basit bir sekilde anlatacağım.Sizlerde kodları takip ederek basit bir sekilde kendinize özgü blog veya websiteniz için yatay menüler hazırlayabilirisiniz.

• Ana Sayfa
• Hakkımda
• Portfolyo
• İletişim

Açıklama	Css Kod
ilk olarak menu adında bir div id olustuyoruz genisligini 500px font tipini font un boyutunu arka plan rengini gibi ayarlarını dilediginiz gibi ayarlayabilirisiniz.	#menu {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; padding: 0; list-style-type: none; background-color: #eee; font-size: 12px; height: 40px; width: 500px;}
li list item dan gelen bir html etiketidir.menu listesini sıralamak amacıyla yazılır.float left sola yaslama anlamına gelmektedir.yani liste elemanlarını soldan saga dogru sıralayacagız. a harfi liste elemanlarına link vermek amacıyla yazılır.linklere hover efekti uygulamak için de a:hover kullanılır.Hover efekti linkin üzerine mouse ile gelince görünümünün degişmesidir.	#menu li { float: left; margin: 0; } #menu li a { text-decoration: none; display: block; padding: 0 20px; line-height: 40px; } #menu li a:hover{ background-color: #fff; border-bottom: 2px dotted #DDD; color: #999; }
wrapper'ı css menu'nün iskeleti gibi düşünebilirisiniz.menü'nun taşıp dagılmasını engellemek için kullanırız burada ayrıca border dotted kullandım siz border stilini degiştirebilirsiniz. bu kısa acıklamalardan sonra menumuzu tamamlamıs olduk.	#menu_wrapper.yatay ul { background-color: #000000; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-bottom-style: dotted; border-top-color: #CCC; border-bottom-color: #CCC; } #menu_wrapper.yatay a {color: #fff;} #menu_wrapper.yatay li a:hover{ color: #FFFFFF; background-color: #006699; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-top-color: #006699; }

Şimdi buraya kadar yazdığımız kodlar css içindi,hazırlamış olduğumuz Css menu'nün gözükmesi için html kodları eklememiz lazım. < body > etiketleri içine < / body >

<div id="menu_wrapper" class="yatay">
                    <ul id="menu">
                <li><a href="#">Ana Sayfa</a></li>
                <li ><a href="#">Hakkımda</a></li>
                <li><a href="#">Portfolyo</a></li>
                <li><a href="#">İletişim</a></li>
            </ul>
        </div>
bu etiketleri yazdıktan sonra yazının içindeki yatay css menümüzü olusturmuk olduk.Şimdi tamamen kaynak kodları toplu bir şekilde ekliyorum daha rahat denemeler yapabilmeniz açısından sizler için daha yararlı olacaktır.

--- CSS KODLARI ---

• #menu { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; padding: 0; list-style-type: none; background-color: #eee; font-size: 12px; height: 40px; width: 500px; }

•  #menu li { float: left; margin: 0; }

•  #menu li a { text-decoration: none; display: block; padding: 0 20px; line-height: 40px; }
•  #menu li a:hover{ background-color: #fff; border-bottom: 2px dotted #DDD; color: #999; }
•  #menu_wrapper.yatay ul { background-color: #000000; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-bottom-style: dotted; border-top-color: #CCC; border-bottom-color: #CCC; }

•  #menu_wrapper.yatay a {color: #fff;}

•  #menu_wrapper.yatay li a:hover{ color: #FFFFFF; background-color: #006699; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-top-color: #006699; }

--- HTML KODLARI ---

• <div id="menu_wrapper" class="yatay">      

• <ul id="menu">

• <li><a href="#">Ana Sayfa</a></li>

• <li ><a href="#">Hakkımda</a></li>

• <li><a href="#">Portfolyo</a></li>

• <li><a href="#">İletişim</a></li>

•  </ul>

• </div>

Photoshop Altın Yazı Efekti

Photoshop ile altın yazı efekti yapmayı anlatacagım, sizlerde bu efekti kullanarak çeşitli grafikler ve arka planlar oluşturabilirsiniz.

İlk olarak bir calışma alanı olusturun boyutlarını siz belirleyebilirsiniz önemli değil , çalısma alanınızın rengi (#443501) renk kodunda olmalı . Ardından Blending Options dan Gradient overlay ı acın.Ve sekilde goruldugu gibi gerekli ayarlamaları yapın.

Ardından Yeni bir Layer olusturun , Filter>Texture>Texturizer efektini uygulayın.

Bu adımları uyguladıktan sonra sıra Yazı Eklemeye geldi , Text aracıyla (T) kendi belirlediginiz bir fontta ve büyüklükte bir yazı yazın. Ben blogspot yazdım .

En İyi Torrent Siteleri

Film , Dizi , Müzik , Bilgisayar programı vs gibi dosyalar indirip paylaşabileceginiz popüler ve ücretsiz kaliteli güvenilir torrent sitelerini paylasacagım , sizlerde bildiginiz kaliteli torrent sitelerini makalenin yorum kısmına yazarak En iyi torrent siteleri listesi ne katıkıda bulabilirsiniz.

Blogger Temaları (Blogspot Templates)

Blogunuzun görünümünü değiştirmek istiyorsanız internetten seçtigim  blogspot template lerini sizinle paylasmak istiyorum.Klasik blog şeması ndan çok farklı blog tema ları var , dilerseniz sizlerde blogunuzun template ni değiştirebilir oldukça gelişmiş görünümlü bir blog tema sına sahip olabilirsiniz. 

Öncelikle blogunuza nasıl tema yüklersiniz onunla başlayalım, ardından sırasıyla Blog template lerine göz atmınızı öneririm.

Blogspota Nasıl Tema Yüklenir ? 

Blogspot a tema yüklemek için ;

Blogger paneline giriş yaptıktan sonra sırasıyla

Tasarım > HTML i düzenle > Sabit sürücünüzdeki bir dosyadan şablon yükleyin > Göz at butonuna

tıklayın ve indirdiğiniz xml dosyasını yükleyin. Bu adımlarla Blogunuza yeni temanızı yüklemiş olursunuz.Blogger a tema yüklemek için aşağıdaki görüntülü videodan da faydalanabilirsiniz.

Blogger Tema yükleme videolu anlatım

Sunset Farm - Nature Theme Blogger Template

 

My Website 2 Column Blogger Template

En İyi Mozilla Eklentileri

Milyonlarca internet kullanıcısının kullandığı Web Tarayıcısı Mozilla Firefox un en iyi ve en cok indirilen eklentilerini paylasacagım.Sizlerde bu eklentilerden faydalanarak Web Tarayıcınızı kendinize özel bir şekilde düzenleyebilirsiniz.

En iyi mozilla eklentileri ni aşağıda sıralamaya çalıştım.Eğer sizinde kullandığınız mozilla eklentileri varsa yorum kısmında paylaşırsanız yazının gelişmesi için faydalı olur.

Easy YouTube Video Downloader 6.5 : Easy Youtube Video Downloader eklentisiyle tek tıklamayla M4A, MP3, MP4, AAC, FLV and HD formatlarında youtube dan ücretsiz indirme yapabilirsiniz. 

İndirmek için ;

https://addons.mozilla.org/en-US/firefox/addon/easy-youtube-video-downl-10137/?src=cb-dl-users

Firebug : Mozilla firefox için; Firebug eklentisini kullanarak herhangi bir websitesini Html , Css , Javascript kodlarını görüntüleyebillir ve kendinize göre canlı olarak kodları düzenleyebilirsiniz.

İndirmek için ;

https://addons.mozilla.org/en-US/firefox/addon/firebug/?src=cb-dl-users

Adblock Plus: Firefox un ücretsiz reklam engelleyicisi websitelerinde bulunan ve görmeyi istemediginiz reklamları engellemek için oldukça fazla kullanıcı tarafından indirilen mozilla 'nın en iyi eklentilerinin başında gelir.
İndirmek için ;

https://addons.mozilla.org/en-US/firefox/addon/adblock-plus/?src=cb-dl-users

JavaScript Lightbox Kullanımı

Lightbox ; hemen hemen içerisinde resim barındıran bütün websitelerinde kullanılan oldukça popüler bir javascript uygulamasıdır. Bir başka deyişle Lightbox herhangi bir resmin üzerine tıklayınca resmin büyümesidir.Örnegin yeni bir websitesi tasarlıyorsunuz ve galeri sayfası veya  kücük resimlerden olusan bir alan ayırdınız.Burada sitenize gelen ziyaretçiler sitedeki resimlere tıkladıgında resim büyürerek daha detaylı bir görünüme sahip olur.Bir anlamda sitenizde javascript lightbox kullanarak html sayfanızı  dinamikleştirmiş olursunuz.Şimdi gelelim javascript lightbox kullanımına;

Öncelikle Lightbox u indireceğimiz  siteye giriş yapalım  ve Download kısmından Lightbox v2.51 versiyonunu indirelim . Lightbox u indirdikten sonra lightbox rar lı  dosyasının içinde

• Css
• Images
• Js 

3 tane dosya olacak. Bu 3 dosyayı sitenizin bulundugu kök dizine atınız.Veya kendi klasörlerinizin içine ekleyeniz.Örnegin kendinizin bir css klasörü varsa o css klasörünün içine Css dosyalarını ekleyebilirsiniz.
 Dosyaları ekledikten sonra ; Şimdi Html dosyamıza bu dosyaların yollarını gosterelim.

Öncelikle Css dosyasını yolunu gösterelim ;

<link href="css/lightbox.css" rel="stylesheet" media="screen" />

Sonra Javascript ve JQuery dosyalarını ekleyelim ;

<script src="js/jquery-1.7.2.min.js"></script> <script src="js/lightbox.js"></script>

Bu dosyaları html sayfamıza cagırdıktan sonra .Lightbox u aktif etmemiz için son kodumuzu ekleyerek lightbox işlemini halletmiş olacağız.

Lightbox efektini aktif etmek için  resme link verirken rel="lightbox" niteligini eklememiz gerekir.

<a href="images/1.jpg" rel="lightbox">

Dreamweaver Cs 5 programında kullandıgım ve sonucu sizinde daha iyi gorebilmeniz acısından bütün kodların bir arada yer aldıgı ekran goruntusunu paylasmak istiyorum. Uygularken herhangi bir hata ile karsılasmamanız acısından ve daha rahat uygulayabilmeniz amacıyla bu resime bakarak lightbox uygulamasını daha rahat kullanabilirsiniz.

Son olarak js lightbox un mucidi Lokesh Dhakar teşşekür ederek yazımı sonlandırmak istiyorum, Daha detaylı bilgi almak için  http://lokeshdhakar.com/ sitesini ziyaret edebiliriniz.