23 Temmuz 2007 Pazartesi
Online form oluşturucu
Web 2.0 ve CSS layout tasarımda gerçerli kod üretebilmek bir yana. Erişilebilir ve kullanılabilir form tercih edilmelidir. İşte Accessible Form Builder ile CSS layout tabanlı veya Table Layout form oluşturabilirsiniz.
Diğer web araçlarını gözden geçirmelisiniz.
Online CSS font ve metin stilleri
CSS Font and Text Style Wizard Arayüzü yardımı ile font (font-family, font-style, font-variant, font-weight,font-size) ve text (line-height, word-spacing, letter-spacing, text-decoration,text-transform,text-align,text-indent) stilleri ön izleme yaparak test edebilirsiniz, düzenlediğiniz stillerin CSS kodunu alabileceğiniz güzel bir araç. burdan izleyelim..
Online CSS kod düzenleyici
Bu online kod düzenleyici çeşitli editörlerin veya elle yazılan kodlarınızı optimize edebilirsiniz. Yazılım hataları ve diğer hataları giderir, tarayıcınızın daha hızlı css kodlarını okuyabilmesini sağlar. Optimize ettiği kodlar ile CSS dosyasının boyutu daha küçük tutabilirsiniz.
CSS syntax editörü
Geçerli CSS kodu ve hatasız Syntax için BBEdit CSS Checker kullanın, burdan indirebilirsiniz.
Onlarca rounded corners uygulaması!
Onlarca rounded corners (yuvarlak/oval köşeler) nasıl yapılıyor, nasıl görünüyor ?
CSS menü yapımı
CSS harikası navigasyon yapımda birden fazla imaj dosyası yartılmasına gerek kalmıyor, tüm navigasyonu tek imaj dosyası üzerinde kolayca hazırlayabiliyorsunuz. Tek yapmanız gereken backraund' dan kırpmak ..
Örneğin Navigation Matrix Reloaded navigasyonu;
10 Temmuz 2007 Salı
Şu site hangi renkleri kullanıyor?
Color Combos' la web sitelerinde hangi renklerini kullanıldığını bulabilirsiniz tek yapmanız gereken web sitesin adresini Color Combos' a vermeniz.
http://www.colorcombos.com/
Basit renk editörü
4096 Color Wheel' renk paleti özelliği bir yana seçilen rengin webte hangi halerde nasıl görüneceğini ön izleme olarak sonuyor..
Temiz CSS kodları için
Çeşitli web/html editörleri veya elle yazdığımız kodlara yanlış veya daha kolay yazılabilir oluyor, işte bu tip kodların kullanım kolay ve isteğede göre şekillendircek bir web aracı düşünülmüş ve oldukça iyi bir iş başarıyor.
http://www.cleancss.com/
Hızlı CSS kodu oluşturma
QuickCSS Allgemein, Position, Table, Font, Background, Margin, Visuelle Effekte, Text, Typografie, Padding, Border ve List-style için hızlı kod üretici araç geliştirmiş. Yeni başlayanlar ve elinin altında html editör olamayanlar için düşünülmüş güzel bir uygulama.
Türkçe CSS Dersleri
Fatih Hayrioglu'nun hazırladığı eşsiz Türkçe CSS derslerini incelemeniz fayda var zira ineternete Türkçe içerik oldukça az sayılır. Fatih Hayrioglu derlerini Temel CSS Dersleri, Gelişmiş CSS Dersleri, CSS Problemleri ve Çözüm Öneriileri, CSS İpuçları, CSS 3 ve CSS’in Geleceği ve CSS Kaynakları olarak kategorilendirmiş.
http://www.fatihhayrioglu.com/?page_id=119
Sky css tools
Sky CSS aracı ile font, text, color, list, placement, display, margins, padding, dimension, borders, tables tagları için kolayca kod üretebiliyorsunuz..
http://skycsstool.sourceforge.net/
http://skycsstool.sourceforge.net/
09 Temmuz 2007 Pazartesi
CSS Web araçları
Protolize
CSS ve Javascript, Ajax, PHP vs.. başlıkları altında web arçları sizler için tek çatı altında derlemiş .
http://www.protolize.org/index.php
CSS ile köşeleri yuvarlayın!
Tasarımlarınızda div köşelerini yuvarlamak için Javascript veya imaj kullanmadan sadece CSS ile oluşturulan güzel bir uygulama aracı yapılmış..
Spiffy Corners
İngilizce CSS makaleleri
Son derece öğretici makalelere yer verilmiş (İngilizce)
http://www.tizag.com/cssT/Geliştiricinin el kitabı
Geliştiriciler için web tasarımı, css, yaratıcılık, renk araçları, kullanılabilirlik, xhtml gibi konu linklerini içeren inanılmaz bir derleme ile el kitabımız oluşturuşmuş.
http://www.alvit.de/handbook/
İlham alınası ücretsiz site şablonları
Xhtml ve CSS ürünü son derece kaliteli ve özele hazırlanmış ücretsiz şablonlara yer verilmiş..
Ücretsiz CSS template
Şuan itibari ile 205 template yayınlayan FreeCSSTemplates.org yeni başlayanlar için çok güzel örnekler bulunduruyor..
Türkçe CSS rehberi
- Web standartları
- Erişilirlik
- Temel XHTML klavuzu
- CSS'nin diğer betikler
Konularına yön veren CSS Rehberi Türkçe kaynak sunuyor, CSS'e Başlarken bölümü ve Manuel kaynaklar son derece özenle hazırlanmış.
CSS tabanlı grafik uygulamaları
05 Temmuz 2007 Perşembe
74 CSS galeri sitesi
CSS ile yapılmış sitelerin gösterildiği showcase sitelerin 74 tanesi bu sayfada listelenmiş.
101 CSS kaynağı
CSS ile ilgili derleme kaynaklardan bir tanesi daha tam 101 ayrı kaynak bir arada toplanmış. burdan devam edin ..
04 Temmuz 2007 Çarşamba
CSS renk paleti
CSS'li tasarımlar için olmasa olmaz renk uyumudur, bu site örnek demosuyla ta bu için yaratılmış.
CSS arama motoru!
cssdocs.org
CSS ile ilgili makale veya kodlar için arama yapabileceğiniz güzel bir arama motoru.
CSS Hack teknikleri.
Hemen hemen her tarayıcı kendi has CSS yorumlama özelliğine sahip, bu tarayıcılar içerisinde en sorunlu Internet Explorer olmuştur. Makale ingilizce ama tarayıcı sorunlarını aşmak için bire bir makale yazılmış: burdan okuyun ..
CSS ile nasıl takvim yapılır.
CSS ile tasarlanmış harika bir takvim nasıl yapılmış güzelce anlatmışlar ..
CSS tabanlı tablolar.
CSS tasarımlarda tabloları çok az kullanıyoruz ancak bu hiç tablo kullanmamak demek olmuyor, özellikle veri tabanından alınan verileri tablolarla listeliyoruz. Bu siteden erişebileceğiniz modern görünümlü tablolarda CSS kullanılmış.
CSS tab ve menü dizaynır
Kolayca CSS menü ve tab tasarlaya bileceğiniz ücretsiz CSS Tab Designer'ı indirin.
Hazır CSS menüleri
13styles.com' da yayınlanan CSS menülerin ve içeriklerini burdan indirebilirsiniz.
Firefox için CSS stilerini gösteren eklenti.
Bu firefox eklentisiyle gezdiğiniz CSS tabanlı sitelerin stil özelliklerini görebilirsiniz. Burdan yükleyin.
CSS banner ve buton üretici
İstediğiniz özellikle banner ve buton oluşturabileceğiniz güzel bir web araca daha;
http://www.sitesandbanners.com/css-button-generator/index.html
Hazır sayfa layerları
CSS ile sayfa tasarlarken ilk önce yapmanız gereken layerları bu sayfa' dan tam 42 çeşit olamak üzere alabilirsiniz.
CSS Optimizer
Büyük boyutlardaki CSS dosyalarınızı, CSS Optimizer ile sıkıştırın böylece CSS kodlarınız optimize edilir ve tarayınız
stilleri daha çabuk yükleyecektir.
CSS nedir?
HTML bize metin biçimlendirme alanında çok geniş olanaklar sunar. CSS, uzun yazılışıyla Cascading Style Sheets, veya Türkçesiyle Stil şablonları ise bunu bir adım daha öteye götürür, bize sayfalarımız için global şablonlar hazırlama olanağı verdiği gibi, tek bir harfin stilini; yani renk, font, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki bu esnekliğidir.
Bir web sayfası içerisinde zaten estetik kuralları gereği yüzlerce renk ve font kullanmayız. Genelde birbiriyle uyumlu birkaç renk ve birkaç font kullanırız ki, bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer tanımlayıp bütün web sayfamızda kullanabiliriz.Bu şekilde güncelleme yaparken de onlarca sayfayı değiştirmekten kurtuluruz.
CSS kodları HTML kodlarının içine yazılırlar. Türüne göre body veya head bölümlerinde yer alabilirler. Bunların dışında harici CSS dosyaları oluşturulup bunlar gerektiğinde HTML belgesi içerisinde çağırılabilirler.
Hemen hemen her konuda olduğu gibi CSS konusunda da Microsoft Internet Explorer ve Netscape farklı yorumlar ortaya koyarlar. Bu noktada her iki browser’ın da aynı/benzer yorumlayacağı kodlar yazmak en uygunudur.
Kaynak: Csspage
CSS Style oluşturucu
Bir çok css kodunu kolayca oluşturan harika bir web aracı!
http://www.listulike.com/generator/
CSS Tag’ının yazım şekilleri
Başka bir dosyadan CSS dosyası ekleme.
<link rel=”stylesheet” xhref=”style.css” mce_href=”style.css” type=”text/css”>şeklinde ekleyebiliriz.
Bir diğer yöntem ise direk CSS kodlarını yazmak
<style>body { bgcolor=#FF6600; }
</style>
şeklindede kullanabiliriz.
Kaynak : Csspage
IE de farklı CSS kullanın. Nasıl mı?
Internet Explorer’da çoğu zaman yapılan tasarımların ağızı burnu kayık oluyor peki bunu nasıl çözebiliriz ?
IE de bazı CSS kodları henüz işlev görmediği için HTML tagları içine şu kodlar ile farklı css’ler kullanabiliriz IE kullanılıyorsa<!--[if IE]><link rel="stylesheet" xhref="ie-icin.css" mce_href="ie-icin.css" />
<![endif]-->
şeklinde kullanabiliriz.
Kaynak: Csspage
CSS Çeşitleri
Css’in (Stil Şablonu) 3 farklı kullanım alanı vardır.
Bunlar ;
Global, yani tüm sayfa için: Global stil şablonlar sayfadaki tüm html etiketlerinin belirlenen özellikte olması istendiğinde kullanılırlar.
Bağlantılı, yani birden çok sayfa için: Bağlantılı stil şablonlar birçok sayfada aynı biçimde olması istendiğinde kullanılırlar.
2.1 Yerel Stil Şablonu
Başlangıçta belirttiğimiz gibi Yerel Stil Şablonlar, uygulanacak etiketi sadece bir kez bulunduğu yerde (yerel) etkiler. Şimdi bir örnek verelim.
<html>
<head>
<title>Css</title>
</head>
<body>
<h2>Web Teknikleri</h2><br>
<h2 style="font-size:20pt; color:blue">Web Teknikleri</h2>
</body>
</html>
2.2 Global Stil Şablonu
Global Stil Şablonları bir önceki örnekte yaptığımız <h2> etiketinin tüm sayfada aynı özellikte olması istendiğinde kullanılır. Bunu için Stil Şablon özellikleri sayfanın başlangıcında (<head></head> etiketleri arasında) tanımlanmalıdır.
Örnek ile biraz daha ayrıntılı inceleyelim.
<html><head>
<title>Css</title>
<style type="text/css">
<!--
h2 {font-size:20pt; color:blue}
-->
</style>
</head>
<body>
<h2>Web Teknikleri</h2>
</body>
</html>
Burada ne yapmış olduk? Sayfa içerisinde kullanacağımız tüm <h2> etiketlerinin özelliklerini sabitlemiş olduk. Yani sayfa içerisinde nerede kullanırsanız kullanın <h2> etiketinin stil özellikleri hep aynı olacaktır. Yazım kurallarına biraz değinirsek, Stil Şablon tanımlamaları <head> </head> etiketleri arasında <style type="text/css"> ile başlayıp </style> ile bitmelidir. <!-- etiketi ile Css’den anlamayan tarayıcıların bu kısmı geçmesini sağlıyoruz. Bu saklama işlemi --> etiketi ile son bulur.
2.3 Bağlantılı Stil Şablon
Global stil şablonu ise sitemiz içerisindeki tüm sayfalarda aynı stil özelliklerini kullanmak istediğimizde kullanırız.
Her zaman olduğu gibi stillerimizi yukarıda örneklerini verdiğimiz şekilde hazırlarız. Fakat bunu html dosyamızın içerisinde değil de boş bir sayfaya yazarız. Sonra onu kaydederken css uzantılı bir şekilde kaydederiz. Ardından da html dosyamızın içerisine yine <head> </head> etiketleri arasına <link rel="stylesheet" type="text/css" href="dosya_ismi.css"> şeklinde ekleriz.
Şimdi hemen bir örnek verelim.
h2 {font:20pt; color:blue}
h3 {font-size:15pt; color:red}
Bu dosyamızı stil.css olarak kaydedelim. Şimdi de html dosyamıza gelelim. Html dosyamızın kodları da şu şekilde olmalıdır.
<head>
<title>Css</title>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<h1>Web Teknikleri</h2>
<h2>Web Teknikleri</h2>
<h3>Web Teknikleri</h2>
</body>
</html>
Html dosyasının kodları arasında geçen <link rel="stylesheet" type="text/css" href="stil.css"> kodu stil.css dosyasındaki stil özelliklerini kullanmamızı sağlar. Bu kodu istediğimiz diğer html dosyalarına da eklediğimizde orada da kullanabiliriz.
Böylelikle her sayfada stil özellikleri tanımlamamış, başlangıçta tanımladığımız stil özelliklerini kullanarak hem koddan tasarruf etmiş oluruz hem de paradan :)Kaynak:Webteknikleri
CSS nedir?
CSS Nedir? Cascading Style Sheets
Css’in açılımı ile söze başlayalım. Cascading Style Sheets. Biz kısaca konularımız dahilinde Stil Şablon olarak bahsedeceğiz. Gelelim Stil Şablonun varoluş amacına. Sizinde bildiğiniz üzere Html yazım şekli olarak etiket türünde bir yazım dili. Bu yüzden pek fazla özelliklere sahip değil. Bu sahip olamadığı özellikler nedeniyle sayfanın dizaynında bize tam esneklik veremiyor. Css bu amaçla üretilmiş bir dil. Kullanım kolaylığı ve kullanışlılığı ile Html’e eklenmesinden itibaren çoğu web tasarımcısının gözdesi oldu. Çünkü her türlü sayfa dizaynını bize bırakarak müthiş bir esneklik sağlıyor. Ayrıca ileriki konularımızda bahsedeceğimiz üzere bağlantılı stil şablonlar aracılığı ile de birden çok sayfaya etkiyebiliyor. Bu da bize sitenin görünümün değiştirmek istediğimizde elimizdeki onlarca belki de yüzlerce sayfanın kodlarını değiştirmeden sadece css dosyasının değiştirerek bu imkanı sağlıyor.
Stil Şablon’un tarayıcılara eklenmesinden sonra iki versiyonu çıktı. Bunlar Css 1 ve Css 2. Ayrıca bazı konularda MSIE (Internet Explorer) ve NN (Netscape Navigator) tarayıcıları aynı kodları kabul etmiyorlar. Biz derslerimizde her iki tarayıcıda da etkin olan veya etkin olmayıp dizaynı bozmayan (A:hover gibi) Stil Şablon özelliklerini göreceğiz. Şimdi derslerin içeriğinde neler var onları görelim :
1. Stil Şablon çeşitleri :
Css’in en çok beğenilen yönü istendiğinde sadece bir öğeye etkimesi, istendiğinde tüm sayfaya etkimesi, istendiğinde site içindeki tüm html dosyalarına etkimesidir. Bunlar kısaca Stil Şablonun kullanım çeşitleridir.
2. Html etiketleri ile Css :
Bu dersimizde Html’deki font,background gibi çeşitli özelliklerin Stil Şablon tarafından nasıl belirlenebileceğini göreceğiz.
3. Seçiciler (Selectors) :
Kimi zaman Html etiketlerinden fontu hepimiz kullanırız. Örneğin bir sayfa içerisinde font etiketine birden çok görünüm eklemek isteriz. Bu durumda seçiciler imdadımıza yetişir. Bu dersimizde de seçicilerin nasıl kullanıldığını ve yazım kurallarını öğrenceğiz.
4. Genel kullanım şekilleri :
Bu dersimizde ise A (link) etiketinin çeşitli kullanım biçimleri ile birlikte bir Stil Şablonun nasıl kullanırsak işimize daha fazla yarayacağını göreceğiz. Siz buradaki kullanım tarzına göre Css’i kullanırken kendinize nasıl bir yön izleyeceğinize karar vereceksiniz.
Kaynak: webteknikleri
Kaydol:
Kayıtlar (Atom)
