Perşembe , 23 Kasım 2017
Anasayfa » Tag Arşivleri: CSS Örnekleri

Tag Arşivleri: CSS Örnekleri

CSS Overflow Kullanımı

Bir öğenin içeriği, onu kapsayan gösteriminde bulunacak öğenin boyutu için fazla ise, bu durumda içerikte bir taşma meydana gelecektir. Bu gibi durumlarda içeriğinizi sayfanızda kontrol edebilmeniz için CSS size iki farklı yöntem sunmaktadır. overflow CSS overflow özelliği bir öğenin içeriği belirtilen alandaki sığmayacak kadar büyük olduğu zaman kaydırma çubukları eklemenizi sağlar. overflow özelliği yalnızca belirli bir yüksekliğe sahip blok elemanları için çalışır  ve alabileceği …

Devamını oku »

CSS Konumlandırma – position Kullanımı

CSS ile ilgili en iyi şeylerden biri, içeriği ve öğeleri bir sayfada neredeyse akla gelebilecek herhangi bir şekilde konumlandırıp  tasarım yapmamıza ve içeriği daha etkin ve güzel sunma yeteneği sağlamasıdır. CSS içinde birkaç farklı konumlandırma türü vardır ve her biri kendi özel uygulamasına sahiptir. Bu bölümde, birkaç farklı kullanım durumuna göz atacağız. position Özelliği position Özelliği, bir element için kullanılan yerleştirme …

Devamını oku »

CSS Display Kullanımı

Web sitelerini oluşturmaya başlamak için, belge içinde yer alan farklı içerik öğelerini, sayfa akışını oluşturabilmek içinse hangi HTML öğelerinin ne şekilde görüntülendiği hakkında biraz bilgi sahibi olmamız gerekir. Web tarayıcıları her HTML öğesini bir kutu gibi ele almaktadır. Ancak bu tarayıcılar öğelerin anlam doğası gereği, tüm kutuları aynı şekilde sayfanıza yerleştirmezler. Her HTML öğesinin, kendi türüne bağlı olarak varsayılan bir görüntüleme değeri …

Devamını oku »

CSS Tablo Düzenleme

Verileri bir düzen içinde tutmak ve bu verileri kullanıcıların kolay bir biçimde okuyabileceği basit bir yol sağlamak için HTML tabloları kullanılır. Ancak CSS’in tarayıcılarda yaygın şekilde desteklenmediği dönemlerde, tablolar verileri bir düzen içinde satır ve sütun gibi 2 boyutlu bir yapıda göstermek yerine, web sitelerinin oluşturulduğu ana iskele gibi bir görevi üstlendi. Bir sayfanın genel düzenini oluşturmak için olduğu kadar aynı …

Devamını oku »

CSS Liste Düzenleme

Listeler günlük yaşamın bir parçasıdır. Yapılacak iş listeleri, ne yapılacağını belirler. Gezinme rotaları, adım adım yol tarifi listeler aracılığı ile sağlanabilir. Tarifler, içerik listeleri, menüler gibi ve daha bir çok kullanım alanları vardır. Tabi ki bu popülaritesini HTML’in <li> etiketleri ile web dünyasında da bulmak mümkündür. Bir web sitesinde bir liste kullanmak istediğimizde HTML, seçim için üç farklı tür sunar; Sırasız (Unordered List-ul) …

Devamını oku »

CSS Font Kullanımı

CSS, sayfadaki metnin görünümünü ve biçimini düzenlemek için birçok farklı özellik sunar. Bu özelliklerden biri de yazı tipleridir. Renkten sonra, yazı tipi muhtemelen bir sayfanın en temel özelliğidir. Yazı tipi, belirli bir stilde ve boyutta yazdırılabilir veya görüntülenebilir metin karakteri setidir. Yazı kümesi türü tasarımı yazı tipi ve bu tasarımın varyasyonları yazı tipi ailesi oluşturmaktadır. CSS font özelliklerinin kullanımında çoğunun başında font-ifadesi bulunur. …

Devamını oku »

CSS Link Düzenleme

Link <a> öğesi olarak HTML’de kullandığımız bir bağlantı elemanıdır. Başka bir web sayfasına veya başka bir yere köprü oluşturmak için kullanılır. Temel etiketlerden olan <a> öğesini CSS kullanarak çok farklı biçimlerde gösterebiliriz. CSS ile bir link düzenlemek isteseniz yapmanız gereken CSS seçicisi ile <a> öğesini seçmektir. [crayon-5a167ae070db1275353248/] Linkler dört farklı duruma sahiptir. Bunlar; a:link  – normal, ziyaret edilmemiş bir bağlantı …

Devamını oku »

CSS Metin İşlemleri

Eski zamanlardan beri varlığını koruyan hat sanatını bilirsiniz belki. Hat yazı ve çizgi anlamına gelmektedir. Kökleri oldukça eski zamanlara dayanır. Estetik ve görsel kuralların göz önünde bulundurulup, yazı ve çizgilerin kullanılarak yapıldığı yazı yazma sanatıdır. Yazıyı daha gösterişli kılmak, görsel açıdan zevke uygun kılmak maksatlı yapılır. Matbaa’nın gelişimiyle eski değerini kaybetmiş olsa da günümüz dünyasına şekil değiştirerek kendini devam ettirmiş, varlığı …

Devamını oku »

CSS Nedir

Web teknolojilerinde oldukça fazla öneme sahip olan CSS  (Cascading Style Sheets) Basamaklı Stil Sayfaları olarak dile çevirebiliriz. Web sayfalarını görünürlük açısından iyileştirme sürecini kolaylaştırmak için tasarlanmış basit bir tasarım dilidir. CSS, HTML öğelerinin ekran üzerinde nasıl görüntüleneceğini açıklar. Bir HTML belgesinin sunumu üzerinde oldukça güçlü bir kontrol mekanizması sağlar. CSS, bir web sayfasının görünüm bölümünü işlemektedir. CSS, web sayfalarınız için farklı cihazlar ve ekran boyutları …

Devamını oku »

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

Daha önceki yazılarda da belirtmiştim. Dolaşım bir sitenin en önemli bileşenidir. Kullanıcının site üzerinde rahat bir şekilde gezinmesi için anlaşılır ve basit olması gerekir. Sadece bunları yapmak yeterli olmayabilir. Menüye çok karışık olmak şartı ile animasyon katmak da kullanıcının ilgilisi çekebilir. Bu yazıda CSS ve Jquery kullanarak temel bir açılır menü yapacağız.  Bu örnekteki temel amaç CSS3 bileşenleri ve JavaScripti …

Devamını oku »

CSS Tablo Biçimlendirme

Web tasarımında tabloların yeri eskiden çok önemliydi. Günümüzde artık sadece kayıtları listelemek için kullanılmakta. Günlük yaşamda tuttuğumuz listeleri, excel kayıtlarındaki satır sütünları HTML içinde tablolarda gösteririz. Bu yazıda CSS Tablo şekillendirme (CSS tablo Biçimlendirme) ile ilgili iki tane örnek ve kodlarını paylaşacağım.   CSS Tablo Biçimlendirme / CSS Tablo Şekillendirme -1 CSS [crayon-5a167ae071ca4773326081/]   HTML [crayon-5a167ae071cab786889806/]   CSS Tablo Biçimlendirme …

Devamını oku »

CSS Örnekleri

CSS Örnekleri bağlantısındaki örnek CSS uygulamaları resim, tablo, buton, form vb. örnek css uygulamalarınından oluşmaktadır. CSS Uygulamaları Listesi CSS Resim Çerceve CSS Resim Ovalleştirme CSS Tablo Biçimlendirme Örneği -1 CSS Tablo Örneği 2 CSS Buton Yapımı 1 CSS Buton Yapımı 2 CSS HTML Form Yapımı CSS Dikey Menü Oluşturma CSS Yatay Menü Oluşturma CSS Poloraid Fotoğraf Çerçevesi Oluşturma CSS Panel …

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. Beğendim!

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. Beğendim!

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. Beğendim!

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 »

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. https://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 »