bildirgec.org

css hakkında tüm yazılar

Harikulade CSS3 Tekniklerinden Bir Demet!

algoz | 07 June 2010 15:04

Web tasarımı bu günlerde HTML5 ve CSS3 ile büyük bir Upgrade yaşamakta. Tarayıcı desteklerinin giderek artması ile somut kullanımını giderek daha sık görmeye başladığımız, web dillerinin bu yeni versiyonları için hazırlanmış örnekleri ve eğitimleri, ilgili web sitelerinde çok daha fazla sayıda görmek mümkün.

Aşağıda listelenmiş olan CSS3 eğitimleri (teknikler, örnekler) ile, daha önceleri yapamadığınız veya yapmak için ek bazı dosyalara/görsellere ihtiyaç duyduğunuz, “göreni kendisine hayran bırakan” tasarımsal özellikleri, CSS3 ile nasıl yapabileceğinizi öğrenebilir ve hemen denemeye başlayabilirsiniz.

Apple HTML5 Showcase: Apple tarafından yakın zaman önce açılan ve içeriğinde HTML5 ve CSS3 tekniklerinin bulunduğu bir tanıtım sayfası.

HTML5 Video Oynatıcı: Video JS

angelsdemos | 04 June 2010 09:40

Web sitenizde video yayınlayanlar genelde flash player ile yapılan video eklentileri veya Media Player kullanırlar. Fakat tüm bunlara gerek kalmadan sadece HTML5 ve CSS3 yardımı ile web sayfanızda video yayınlayabilirsiniz.HTML5‘in yükselmesi ile gündeme gelen bu video oynatıcıları henüz Internet Explorer gibi bazı eski sürüm tarayıcılar desteklemese de oldukça popüler ve ilgi çekici oldukları söylenebilir.

Video JS, tamamen HTML5 ve CSS3 ile hazırlanan açık kaynak kodlu ve ücretsiz olarak dağıtılan bir video oynatıcısıdır. Web sitenizde videoları herhangi bir eklentiye gerek kalmadan yayınlamanızı sağlayan bu uygulama ile hertürlü videoyu yayınlayabilirsiniz. H264 ve Theora Ogg gibi formatları da destekleyen bu kolay kullanımlı uygulama kullanıcılar açısından herhangi bir sorun olmadan yayın yapabiliyor.

Tam ekran özelliği, ses ayarı, durdurma/oynatma düğmesi ve herhangi bir bölümüne sarabileceğiniz çubuğu ile diğer video oynatıcılarını aratmayan bu uygulamayı birçok tarayıcıda çalıştırabileceğiniz gibi iPhone veya iPad gibi dokunmatik cihazlarda da çalıştırabilirsiniz.

jquery & css ile neon text efekti

dertlius | 03 June 2010 12:56

Tasarım ve kodlamanın bir araya geldiği bu harika jquery eklentisi ile yazılarınıza çok hoş neon efektleri verebilirsiniz. Ayrıntılı anlatım sayesinde kendinize özel sonuçlar elde etmemeniz için hiç bir neden yok.

Bu eklentiyi kendi hazırlamak isteyenler için dört adımda açıklanmış.

10+ Portfolyo Website Şablonu (Html+CSS)

siriusbee | 02 June 2010 14:39

Ben de dahil olmak üzere, web tasarımcılar olarak bir çoğumuz kendi portfolyo sitemizi yenileyecek zamanı bulamıyoruz genellikle. Hazır template kullanmayı her ne kadar tercih etmesek de, böyle durumlarda geçici de olsa template‘lere başvurmak kısa süreli çözüm olabilir bizim için.

html ve css‘i yazılmış, hatta bazılarının javascript‘i de çalışır halde olduğundan hiç zaman kaybı yaşamadan portfolyolarınızı yayınlayabileceğiniz 10+ çok kaliteli ve güzel web şablonunu bir araya getirdim. Hepsini ücretsizolarak indirip kullanabilirsiniz.

Sadece profesyonel web tasarımcılar için değil, fotoğrafçılar ve kendi portfolyosunu yayınlamak isteyen herkesin işini görecek kadar kullanışlı portfolyo template’lerine göz atmakta fayda var.

WordPress teması yapalım

asykral | 26 May 2010 23:46

Blogu olan çoğu kişi wordpress kullanıyor. Wordpress pek çok temaya sahip fakat aramızda bazı muzur arkadaşlar çıkabiliyor. 🙂 Kendi xhtml/css tasarımlarınızı wordpress e aktarmak isteyebilirsiniz.
Bu durumda ben size yardımcı olabilirim. Kendimi geliştirme amaçlı olarak XHTML CSS tasarımları wordpress e giydiriyorum. Size de elimden geldiği kadar yardımcı olmak isterim. Hem kendimi geliştirir hemde size bir nebze yardımım dokunur.
Yaptığım temalardan bir kaç örnek vermek gerekirse;
Evden eve nakliyat sitesi normal xhtml css dökümanı iken Evden eve nakliye blogunu wordpress şeklinde hazırladım.
Beğenen olursa paylaşabilir veya farklı tasarımları aktarabilirim.
Not: Reklam veya backlink kaygım yoktur. İsteyen her arkadaşa yardımcı olmak istiyorum.

Google, WebM Projesini duyurdu!

axanc | 25 May 2010 09:47

Web dünyası, çarşamba sabahı yeni bir hediyeye sahip oldu. Google, HTML5 için “açık kaynak kodlu” video ve ses formatlarını içeren WebM Projesini duyurdu.

Bu medya projesi bundan sonra WebM Projesi adı altında devam edecek. Ve beklendiği gibi VP8 video codec’i, webm projesinin merkezinde yer alıyor. Google bu teknolojiyi bu yılın başında aldı ve geliştiriciler projenin açık kaynak kodlu olarak ilan edilmesi için sabırsızlanıyorlardı. Ve çarşamba akşamı dilekleri yerine geldi.

I/O konferansında yapılan açıklamada, “VP8 projesini tamamen açık kaynak kodlu ve zorlamalardan uzak bir şekilde size sunuyoruz” denildi. Google zaten hali hazırda bu formata yönelik desteği chrome, youtube ve kendi siteleri üzerinde yapmış durumda; yeni format sayesinde mükemmel bir HTML5 deniyimi hedefleniyor.

WebM Projesi, bir dizi video sıkıştırıcısı ve çözücüsünden oluşuyor. (Coder-Decoder). Bu araçlar sayesinde internet tarayıcıları vdieo ve ses içeriklerini herhangi bir eklentiye gerek duymaksızın kolaylıkla HTML5 sayfalarında kullanabiliyorlar. Proje Mozilla, Opera ve Google’ın desteklemesi ile başladı. Şimdiden bütün tarayıcı üreticileri bu format için destek üretmeye başladıklarını duyurdular. Hatta microsoft, sene sonunda çıkması beklenen explorer 9’a da bu desteği ekleyeceğini duyurdu. Adobe da gelecekte flash player’lar için böyle bir desteği düşündüklerini açıkladı.

Online HTML,CSS ve JS Editorü JsBin

sundowatch | 20 May 2010 12:25

Günümüz dünyasının web’e kaymasıyla online editör ler de web üzerinden olduklarından rağbet görmeye başladı. Gerek kullanışlılık gerek kolaylık gerekse hemen açılıp 3 saniyede kod yazmaya olanak sağlayan editörle daha da kullanılır oldu.

işte JsBin de tam web geliştiricileri için bir editör. Kullanışlılık bakımından diğerlerini nerdeyse solda sıfır bırakır.

JsBin'den bir görüntü
JsBin’den bir görüntü

Neden JsBin?

Bu soruya verilecek yanıtlara beraber bakalım:

Etkiliyici Slaytlar için: aeron slideshow

angelsdemos | 19 May 2010 09:41

Web sitenizin içeriğine göre web sayfalarınızıda kullanıcılarınız için farklı slaytlar yayınlamak isteyebilirsiniz. Ürünlerinizi veya mekanınızı tanıtabileceğiniz bu slaytları bloglarda farklı amaçlarla da kullanabilirsiniz. aeron slideshow sayesinde tüm bu slaytları gerçekleştirebilir ve bu sırada birbirinden farklı temalarda farklı efektleri kullanabilirsiniz.

aeron slideshow 2, temel olarak jQuery ile hazırlanan Mit lisanslı ve oldukça kolay kullanımlı bir slayt aracıdır. Bu uygulama ile web sayfanızda yayınlamak istediğiniz fotoğrafları slayt gösterisi haline getirebilir ve bunu yaparken farklı efektleri kullanabilirsiniz.

Farklı görünümleri sayesinde aeron slideshow web siteniz ile oldukça uyumludur. İsteğinize göre altta veya yanda bulunun fotoğraflar menüsünü kaldırabilir veya farklı biçimlerde kullanabilirsiniz. Fotoğraflarınız slayt gösterisi halindeyken tümüne farklı fotoğraf efektleri ile ziyaretçilerinizin ilgisini çekebilirsiniz.