bildirgec.org

css dersleri hakkında tüm yazılar

CSS’ nin WEB Dökümanlarına Atanma Yöntemleri

herkezim | 01 October 2009 09:30

CSS web tasarımında en çok kullanılan kodlama türüdür. Tartışmasız olarak harika şeyler çıkartabiliriz. Yeter ki nerelerde ve nasıl kullanacağımız hakkında bilgimiz olsun. Bunun yanında CSS tasarımlarımız da 4 şekilde kullanılır ve hepsinin ayrı sebepleri vardır.

1) Dahili Stillendirme
Bir HTML dökümanı içerisinde etiketinin açılışı ile kapanışı arasına açacağımız etiketi ile dökümana CSS şekillendirmesi ekleyebiliriz.
Örnek:

1
2
3
4
5
6
7
8
9
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

/*CSS kodları burada yer alacak*/

</style>

</head>

<body>.....

Size Sıfırdan CSS3 Öğretecek 20 Kaynak

pinkfloyd | 06 April 2009 09:42

Her ne kadar W3C‘nin CSS3 tanımlamaları üzerinde çalışmalarını tamamlamamış olsa da, Mozilla Firefox, Opera ve WebKit tabanlı tarayıcılar (Safari, Chrome) halihazırda CSS3’ü tamamen ya da kısmen destekliyor durumda.

Bir web geliştiricisi olarak modern ve gelecekteki web standartları hakkında bilgi sahibi olabilmek önemlidir. Diğer geliştiricilerden bir adım önde olmak için yazının devamında bulacağınız CSS3 hakkında 20 mükemmel kaynak size CSS 3 öğrenmenizde yardımcı olacaktır.

1. CSS3 İlerleme Raporu

CSS Çalışma Ekibi tarafından geliştirilen CSS3 İlerleme Raporu web sitesi tüm CSS3 modüllerinin geçerli durumlarını belirtiyor. Özellikle CSS3’ün gelişimine katkıda bulunan ya da bulunmak isteyen geliştiriciler için bu kaynak, üzerinde çalışılan alanları görüp nereden katkıda bulunabileceğinize karar vermede yardımcı olacaktır.

CSS’de Yardıma İhtiyacınız Olduğunda Kullanabileceğiniz 10 Kaynak

pinkfloyd | 02 March 2009 09:37


CSS’de Yardıma İhtiyacınız Olduğunda Kullanabileceğiniz 10 Kaynak

Zaman zaman bir web tasarım ya da geliştirme projesi üzerinde çalışırken bir yardıma ya da rehbere ihtiyacınız olacaktır. Her ne kadar İnternet üzerindeki css kaynaklarının sayısı gün geçtikçe artsa da, bu yazıda CSS ile bir sorun yaşadığınızda size yardımcı olabilecek 10 adet gerçekten kullanışlı kaynağı listelemeye çalıştım.

Stack Overflow

Stack Overflow bir sosyal medya sitesi ve bir forumun kombinasyonundan oluşmuştur. Özellikle programlama ve geliştirmeye yönelik zengin içeriğe sahip bir sitedir (CSS, sitede tartışılan konulardan sadece biri). Stack Overflow’un amacı programcılara soru sorup onların sorularına cevap verebileceğiniz bir platform oluşturmak. Sitede herkes bir soru sorabilir (bir hesap bile açmanıza gerek yok) ve ardından sitedeki diğer kullanıcılar sorularınıza cevap verebilirler. Diğer kullanıcılar sitedeki cevaplara artı ya da eksi puan vererek en iyi cevabın seçilebilmesine yardımcı oluyorlar.

css’de uzman olmanızı sağlayacak 20 css dersi

pinkfloyd | 14 February 2009 17:25

CSS’yi kodlamak kolay olabilir ancak buna rağmen her kodcuyu delirtebilecek bazı konseptleri de bulunmaktadır. Bu yazımızda kimilerine göre zor olan ancak anlaması oldukça kolay olan CSS derslerini bir araya getirerek CSS bilginizi bir adım daha ileriye taşımanıza yardımcı olacak dersleri inceledik.

1. CSS Sekmeler ve Navigasyon

1.1. Genişleyebilen CSS Sekmeleri Dersi
Genişleyebilir CSS sekmelerinin anlamı, sekmenin içerisindeki metnin uzunluğuna göre genişleyebilen sekme başlıklarıdır. Kodun özünde start.gif ve end.gif adında iki adet görsel bulunuyor. start.gif görseli boyutu genişletmek için kullanılırken end.gif görseli değişmeden kalıyor.

1.2. Gelişmiş CSS Menüsü
Bu rehberde Photoshop’taki watercolor efektini nasıl tasarlayabileceğiniz anlatılmış. Bu rehber size adım adım bir menü tasarımını nasıl kırpabileceğinizi ve ardından CSS kullanılarak nasıl onları bir araya getirebileceğinizi gösteriyor. Pek çoğunuz muhtemelen dikey ya da yatay menünün CSS ile nasıl kodlanacağını bilyorsunuzdur. Gelin şimdi bunu bir sonraki seviyeye taşıyarak CSS’nin position özelliğini kullanan gelişmiş bir menü tasarlayalım.

jQuery Kullanarak Satıriçi Metinlerin Rengini Değiştirmek

pinkfloyd | 11 January 2009 18:27

Sadece birkaç satır jQuery kullanarak istediğiniz bir metnin üzerine fare imlecini getirdiğinizde onun rengini değiştirmek çok kolay bir işlem. Nasıl mı? Yazının devamını okuyun.

Demo | İndir

Prensip
Bu betiğin yaptığı şey, bağlantıları (A Etiketikleri) seçmek, içeriğini “.one” adındaki bir sınıfa dahil olan SPAN’a dahil etmek ve “.two” adında bir SPAN elementi oluşturmak. SPAN “iki” A etiketi ile aynı içeriği taşıyor ve bağlantı metninin hemen üzerine konumlandırılmış.

Sadece CSS İle Oluşturulmuş Animasyonlu İlerleme Çubuğu (Progress Bar)

pinkfloyd | 08 January 2009 19:17

Bu makalede sadece CSS kullanılarak oluşturulmuş bir ilerleme çubuğunun nasıl oluşturulabileceğini anlatmaya çalışacağım. Aslında hile çok basit. İhtiyacımız olanlar 3 element, bir kapsayıcı (container) ve 2 içiçe geçmiş element.

demo | indir

Konsept
Kapsayıcının arkaplanına güzel görünümlü bir resim yerleştirip kapsayıcının sabit yüksekliğini ve genişliğini belirteceğiz. İlk astımız (SPAN) ilerleme çubuğu görevini üstlenecek. İkinci astımızı (EM) ise ilerleme çubuğunun üzerine mutlak (absolute) konumlandıracağız ve onu sola doğru kaydırarak istediğimiz seviyeye çekeceğiz. EM, kapsayıcı ile aynı arkaplana sahip, bu sayede ilerleme çubuğunun bir süre sonra durduğu izlenimini vermiş olacağız.

En Çok Kullanılan CSS Sınıf (Class) İsimleri

admin | 05 January 2009 09:23

Pek çok geliştiricinin, elementlere sınıf isimleri atarken kafası karışır ve genellikle yanlış isimler atarlar. Sınıf isimleri bir elementin nasıl göründüğünü ya da nerede konumlandırıldığını tanımlamamalı. İyi bir sınıf ismi, bir elementin neyi yansıttığını tanımlamalıdr. Bu makalede benim en çok kullandığım 10 sınıf ismini açıklamaları ile birlikte listeleyeceğim. Umarım bu makaleyi okuduktan sonra ne tür sınıf isimleri kullanmanız gerektiği konusunda net bir fikriniz olur.

class=”fixed”
Bu sınıf adını her stil şablonunda, sola/sağa dayalı (float) ast (child) elementleri içeren kapsayıcılar üzerinde, içerisindeki elementleri temizlemek için şu şekilde kullanırım.

Sizi CSS3 İle Tanıştıracak 5 Teknik

admin | 03 January 2009 18:00

CSS, websitelerini stillemek için iyi bilinen ve geniş kesimler tarafından kullanılan bir dildir. Halen üzerinde çalışılan üçüncü sürümü ile geliştiricilere zaman kazandıracak pek çok özellik CSS’ye dahil edilecektir. Her ne kadar sadece en modern tarayıcılar tarafından bu özellikler desteklense de, yakında geniş kesimler tarafından kullanılabilecek olan bu yeniliklerin neler olduğunu şimdiden görmek güzel. Bu rehberde size CSS3 ile hayatımıza girecek olan 5 tekniği göstereceğim.

1: Genel Biçimlendirme

Dersimize başlamadan önce gelin dersimiz süresince kullanacağımız genel biçimlendirmemizi oluşturalım.