çizmek | bildirgec.org

CSS ile web tasarımın dışında yapabileceğiniz farklı bir uğraş olan resim çizimi oldukça zor olsada css3 ile birliklikte çok az da olsa biraz kolaylaşmız gözüküyor. pixel'ler kullanılarak yapılan tasarımlar, ascii karakterler ile oluşturulan tasarımlar ve css3 desteklikli tasarımlar bulunmakta. Aşağıda yüksek kalitede css ile yapılan çizimler bulunmakta. Nasıl yapıldığını inceleyebilir, benzer çalışmalara adım atabilirsiniz. CSS ile Yapılan Çizimler;

Twitter Fail Whale

Homer Simpson

Skull with Flames
(Alevli Kafatası)

______________detaylar______________
jquery indir
Eklentiyi indir
eklenti anasayfası
lisans koşulları
genel demo sayfası
______________ basic ______________
en basit haliyle sürüklenebilir öğeleri içine bırakabileceğiniz bir bölge oluşturmanızı sağlar. öğeyi içine sürüklediğinizde tepki veren bir bölge oluşturursunuz.
demo
______________ active ______________

Bilgisayara format attıktan sonra veya bilgisayar aldığınızda ilk yüklediğimiz programlardan birisi de Adobe Reader'dır. bu programın hiç alternatifi yok mu diye düşündünüz mü hiç?

Ben adobe reader'ın alternatifini, bir pdf dosyasını açmak için beklemekte olduğum uzun zaman dilimlerinde düşündüm ve şöyle bir piyasa araştırması yaptım. İncelemeye değer iki program buldum ve bunlarla adobe reader arasındaki farkları araştırdım. Yani "cnet download"da karşılaştığım yoruma ithafen şunu söyleyebilirim: "Ben Adobe'un bisikletinden inip; bir ferrariye binmek istiyorum."

Bir akademisyen, fazla araştıran bir öğrenci veya değişik alanlara meraklı biri iseniz pdf dosyaları bilgisayarınızdan hiç eksik olmuyor. Bunları da okuyup arşivliyorsanız işte o zaman bir okuduğunuzu tekrar okumak için belirli bir zaman harcıyor olabilirsiniz. Dolasıyla bir pdf dosyasının üzerinde maksimum oynama yapmak isteği duyuyor insan. Altını çizmek, üstüne not almak, belki işaretler koymak istiyorsunuz. Tıpkı kitap okur gibi.

CSS3 tamamen yaygınlaşmasa ve tüm tarayıcılar tarafından tam olarak desteklenmemiş olsa bile birçok başarılı uygulama yapılmakta. Web sitelerinizi daha interaktif ve daha renkli hale getiren bu uygulamalar arasında çizim örnekleri bile bulunmakta. Günümüzde hala imajlar kabul görürken css'nin sınırları zorlanarak ascii karakterler ile birçok farklı çizim örnekleri de yapılıyor. Birçoğunun detaylı açıklaması da verilen aşağıdaki uygulamaların benzerlerini siz de yapabilirsiniz.

Sweet CSS3 Buttons
(Tatlı CSS3 Butonları)

CSS Logo

CSS Olympic Logo
(CSS Olimpik Logo)

ikonlar, web sitenizin görselliği için oldukça önemlidir. Ikonlar ile basit ve minimalist gözüken web sitenizi canlandırabilir, ziyaretçilerinizin ilgisini farklı ikonlarla çekebilir ve tasarımınıza ağırlık verdiğinizi vurgulayabilirsiniz. Birçok web tasarımcı hazırlanan ikon setlerini kullansalarda bazıları ise daha özgün olmak için kendi ikonlarını hazırlıyorlar.Aşağıdaki dersler ile benzer çalışmalar yapabilir veya tekniğinizi geliştirerek kendi ikonlarınızı oluşturabilirsiniz. İşte Photoshop ile yapılan muhteşem ikon tasarım dersleri;

Design a Vintage Radio Icon in Photoshop
(Photoshop ile Vintage Radyo ikonu Tasarımı)

Simple Coffee Cup Icon Photoshop Tutorial
(Photoshop ile Basit kahve fincanı ikonu tasarım dersi)

Homer Simpson

Css ile resim çizilir mi?" diye sorsalar "çizilir ama çok uğraşmak gerekir" derdim. "Peki nasıl çizilir?" deseler ilk aklıma gelecek yöntem div'leri pixel olarak kullanarak uzun uğraşlar sonucu bir resim ortaya çıkarmak olurdu. fakat şimdi anlatacağım çalışmada çok daha profesyonel bir teknik kullanmışlar.

öncelikle şunu belirteyim ki yukarıdaki çok sevdiğim Homer Simpson resmi tamamen Css ile hazırlanmış.

Nasıl mı?

Twitter, Friendfeed gibi mikrobloglama sitelerinin müdavimisiniz, Facebook zaten sizsiz olmaz, Tumblr ya da Blogger' daki blogunuz her gün ilgi alaka bekler, Flickr ve Picasa fotoğraflarınıza, Youtube ise videolarınıza hasret... Size de hergün, hem de birkaç kez hepsine tek tek giriş yapıp, ayrı ayrı yazmak-çizmek, yükleme yapmak zulüm gelmeye başladı...

Acaba bütün bu işleri sizin yerinize yapacak bir asistan mı tutsanız? Daha basit bir çözüm var; Posterous' dan yardım istemek.

Bu "cici" site, ondan fazla mikrobloglama, blog, media ya da link paylaşım sitesine, tek tık ve tek hesapla yazmanızı ve gönderimde bulunmanızı sağlıyor.

Tasarımlarımızı XHTML ve CSS’e geçirirken bazen çok basit şekilleri bile kimi zaman resim olarak kaydederek tasarımlarımıza ekliyoruz. Oysa bu davranış bize ekstra bir “http isteği” olarak dönmüş oluyor. Daha önce CSS Sprite'ların kullanım alanları yazımda bu istekleri azaltarak performansı nasıl yükselttiğimiz konusuna az da olsa değinmiştim. Bu yazıda ise minik ve basit resim dosyalarından kurtularak http isteklerini minimum düzeye çekecek ve sitelerimizin performansını arttıracak. Pingdom ile performansınızı ölçmeniz mümkün.

Dertlere derman css border
Başlıktan da anlayabileceğiniz gibi bu şekilleri çizmek için elimizdeki en önemli özellik border olacak. İstediğiniz şekli çizmek için border’ları solid yapmalı ve genişliklerini ayarlamalıyız.
Şimdi ufak bir örnekle border’ları nasıl ayarlamamız gerektiğini görelim.

farklı renkteki border'lar

Burada rahatlıkla görebilmeniz için border değerlerini çeşitli renklerde tanımladım. Boyutsuz olan span elemanının etrafında üçgensel olarak 4 farklı bölge oluşuyor. İşte bu bölgeleri kullanarak çeşitli dörtgenler, içbükey çokgenler ve üçgenler çizerek tasarımlarımızı tamamlayacağız.