Pazar , 28 Mayıs 2017
Anasayfa » WEB » CSS

CSS

Yatay Açılır Menü Yapımı

Bu yazıda yatay açılır menü yapıp aşamalarını ele alacağız. Menülerin temelinde liste etiketleri kullanılır. Bu yüzden bir tane liste etiketi oluşturarak başlayacağız. Menülerin tasarımları genellikle dikey, yatay, dikey açılır ve yatay açılır olarak dört gruba ayrılabilir. Bu yazıda animasyonlu yatay açılır menü kavramı örneklerle açıklanmaktadır. Yatay diğer yatay açılır menü örneği için Yatay Menü Yapımı yazısına ulaşabilirisiniz. Öncelikle içine dahil edeceğimiz div etiketinin …

Devamını oku »

Resmin Yanına Yazı Yazma

Resimlerin soluna yada sağına resim gelmesi için CSS yada HTML ile bir kaç düzenleme yapmamız gerekir. Aşağıda bir kaç örnekle resimlerin soluna ve resimlerin sağına yazıları getireceğiz.

Devamını oku »

CSS Pseudo elements (Sözde Elementler)

Sözde sınıflar gibi sözde elementler tanımlayıp bunları kontrol etmek mümkündür. Tanımlanmış bir elementin özel bir bölümünü düzenlemek ve güncellemek için pseudo element (sözde element) seçicilerini kullanabiliriz. Bir etiketin ilk karakterini(first-letter) yada ilk satırını (first-line) pseudo element seçicilerini kullanarak seçmek mümkündür. Burada aşağıdaki sözde etiket seçicilerinin kullanımı örnekler ile açıklayacağım.

Devamını oku »

CSS ile Etkili Resim Efektleri

Eskiden can alıcı görüntüler oluşturmak için Photoshop gibi grafik programlarından faydalanırdık. Günümüzde CSS’e eklenen bir çok özellikle göz kamaştıran resimler ve galeriler oluşturmak mümkün hale geldi. Şimdi size internette gördüğün bir kaç tane güzel resim örneğini HTML ve CSS kodları ile birlikte yazacağım.

Devamını oku »

CSS ile Tablo Ortalama

Css kullanarak block ve table nesnelerini ortalamak için dışarıdaki boşlukarı auto yapmak gerekir. Aşağıdaki kod ile tabloyu bulunduğu etiket içinde ortalayabilirsiniz.

Devamını oku »

CSS ile Etiketleri Ovalleştirme (Border Radius)

border-radius kullanarak istediğimiz her hangi bir etiketin köşelerine ovallik verebiliriz. Hatta istediği köşenin istediğimiz bir kenarına da ovallik değeri vererek eliptik nesneler oluşturmak mümkündür. border radius sıklıkla butonlarda kullanılmasına rağmen google+ hesaplarında dikkat etmişsinizdir. Resimlerin çerçevelerini ovalleştirmek içinde kullanılmıştır.

Devamını oku »

CSS İletişim Formu Yapımı

CSS Contact Form

Şunu kabul edelim HTML formlar webin önemli bir parçasıdır. Kullanıcıların sayfa ile etkileşimi için güçlü ve önemli birer araçtır. Tasarımı kötü olan bir formun kullanıcıların sayfa hakkındaki görüşlerini olumsuz yönde etkileyeceği gerçeği kaçınılmaz bir gerçektir. Bu yazıda kullanabileceğiniz örnek bir kaç form ile sayfanızın daha güzel görünmesini sağlayabilirsiniz.  Şunu öncelikle belirteyim aşağıdaki formlar güncel tarayıcılar ile tam uyumlu çalışacaktır. Eski …

Devamını oku »

CSS ile Web Sayfası Oluşturma

Günümüzde web sayfalarında CSS3 ile ( hatta CSS4 yolda ) temel bir çok görsel rahatlıkla oluşturmak mümkün. Bu yazıda CSS’nin önemli bir kaç özelliği ile  sade bir site oluşturacağız. Oluşturacağımız sitenin tasarımı şu şekilde olacak.

Devamını oku »

Kutu Modeli (Box Model)

Bir HTML dökümanı içinde, her etiket bir dikdörtgen kutu olarak kabul edilir. Bu kutuların özelliklerini (genişlik,yüksekli renk vb.) yorumlamak tarayıcı motorlarının görevidir. CSS ile tüm kutular tanımlanırken standart kutu modeli (box model) olarak tanımlanmaktadır. Box model tanımlaması her bir etiketin ekranda ne kadar yer kaplayacağını ifade etmektedir. Her bir kutunun genişlik/yükseklik, iç boşluk(padding), kenarlık (border) ve dış boşluk (margin) değerleri etiketin …

Devamını oku »

Yatay Menü Yapımı

Daha önceki yazılarda menülerin sitenin en önemli parçası olduğundan bahsetmiştim. Bu yazıda tab görünümlü yatay menü nasıl oluşturulacağız. http://www.yazilimbilisim.net/web/css/css-menu-yapimi/ bağlantısından önceki yazyı inceleyebilirsiniz. Gelelim yatay menüyü adım adım nasıl oluşturacağımıza; DEMO Adım 1: Yatay Menünün HTML kodları Sayfada birden fazla menü olması duruma karşın id değeri yatay-menu olarak tanımladık. Standart bir menü ul li a etiketleri ile oluşturulmaktadır. Bu kurala uygun olarak …

Devamını oku »

CSS Menü Yapımı

Dolaşım Menüleri Kolay ve anlaşılır bir menü web sitenin kalbi demektir.  Anlaşılır ve belirgin olmayan dolaşım araçları kullanıcıların sitede fazla durmadan çıkmaları için yeterli bir sebep olacaktır. Bu yazıda basit yatay ve dikey menü oluşturmayı göstereceğim.  Menülerin tasarımları genellikle dikey, yatay, dikey açılır ve yatay açılır olarak dört gruba ayrılabilir. Bu yazıda dikey ve yatay menü kavramı örneklerle açıklanmaktadır. Yatay …

Devamını oku »

Rengarenk CSS3 Butonlar Oluşturma

google fonts, text-shadow, box-shadow ile zenginleştirilmiş birbirinden güzel 20 tane buton. Temel buton tasarımında .button{ padding:5px 15px 5px 15px; text-decoration: none; display: inline-block; -border-radius: 10px; tanımlamalarının yanında her bir buton için ek bir kaç düzenleme daha yapacağız. Aşağıda adım adım butonlar oluşturulmuştur. DEMO Adım 1: Head Etiketinin Oluşturulması Head etiketleri arasında tasarımda kullanacağımız tasarim.css dosyasını ve google fonts sitesinden sitemize dahil …

Devamını oku »

CSS ile Doğal Etiketler Oluşturma

Etiketler bir çok web sitesi için gerekli özelliklerin başında gelir. Bu yazıda hiç resim kullanmadan CSS3 kullanarak web 2.0 etiketleri oluşturacağız. DEMO Yapılacak işlem süreci şu şekilde olacaktır. HTML etiketilerinin oluşturulması Temel etiketlerin biçimlendirilmesi Etiketlerin köşelerinin biçimlendirilmesi Linklerin biçimlendirilmesi Etiketlere deliklerin eklenmesi ve biçimlendirilemesi   Adım 1: Head Etiketinin Hazırlanması Hadi ile head etiketini ekleyerek uygulamaya başlayalım. Head etiketine iki tane style dosyalarının …

Devamını oku »

CSS ile Esnek Resimler

Esnek tasarımlı sitelerde sabit genişlikteki resimler sitenin tasarımının üzerine çıkarak görüntüde hoş olmayan bozulmalara neden olmaktadır. Em ölçüsünü kullanarak genişliği orantılı yapmak da mümkün ancak bununda kendine göre dezavantajları var. Bu yazıda zemine resim ekleyerek sitedeki resimlerin esnek bir şekilde görüntülenmesini sağlayacağım. DEMO    HTML kodları: [crayon-592afd485945c213932319/]   CSS Kodları: [crayon-592afd4859468021424172/]   İçerik alanının tarayıcıda esnek görünmesi için  genişlik değerini %50 …

Devamını oku »

Etkili Birkaç CSS3 Özelliği

Css web teknolojileri gerliştirmenin en kolay ve etkili yolu olduğunu biliyorsunuzdur. CSS3 ile gelen bir çok güzel özellik Photoshop gibi grafik programı kullanmadan yapmak mümkündür. İşte bu yazıda bu etkili CSS özelliklerinin bir kaç tanesinden bahsedeceğim. Border Radius Box Shadow Text Shadow Çoklu Arkaplan   Bu özelliklerin her birini geçmişte Photoshop grafik programını kullanarak hazırlayabiliyordum. CSS3 ile HTML etiketlerine daha rahat …

Devamını oku »

Float ile Responsive Tasarım

Bu yazıda CSS float özelliği kullanarak çok kolay bir responsive web sayfası tasarımı yapacağız. Float başlangıçta yapısal tasarımlar için kullanılan bir CSS kodu değildi. Akışkan tasarımlar yapmak için bazı zorlukları da yapısında barındırmaktaydı. Bu yazımızda float kullanarak bir basit responsive web sayfası tasarımı yapacağız.

Devamını oku »