konuşma balonu | bildirgec.org

Sürekli gelişen ve hergeçen gün farklı tasarımlar yapılan web teknolojisinde css3 günümüzde oldukça önemli bir yer tutmaktadır. Bu ayın en popüler css3 uygulama derslerini aşağıdan inceleyebilirsiniz. Bu en popüler 5 dersde farklı teknikleri inceleyerek benzer çalışmalar yapabilirsiniz. Eylül 2010'un En Popüler CSS3 Dersleri;

Simulate Realism with CSS3
(CSS3 ile simüle Gerçekçilik)

CSS3 Speech Bubble
(Css3 ile Konuşma Balonu)

How To Create Depth And Nice 3D Ribbons Only Using CSS3
CSS3 ile Nasıl Derin ve Güzel 3D kurdela yaratma

Photoshop'ta birkaç basit ama kullanışlı teknik

bu yazıda da photoshop kullanırken kullanmaktan zevk alabileceğiniz birkaç teknik hakkında bilgi vermeye çalışacağım. Kullanılan tekniklerin basit ama kaliteli olmasına dikkat etmeye çalıştım ki sadece bu işle profesyonel olarak ilgilenenler değil herkes kullanabilsin. İşte o teknikler:

# geometrik şekilli yazı yazmak:
bazen yazılarınızı belli bir geometrik sınırlama içerisine hapsetmek veya sadece çizdiğiniz bir şeklin içerisine yerleştirmek isteyebilirsiniz. Çok basit olan o yöntem şu şekilde:
şeklinizi (kare, daire vs) seçin ve araç seçenekleri(tool options) panelinden “paths” seçeneğini işaretleyin.

şeklinizi istediğiniz yere çizin ve yazı aracınızı seçip az önce çizdiğiniz şeklin üstüne, yazmaya başlamak için tıklayın. Yazmaya başladığınız zaman yazınız otomatik olarak yerleşecek ve az önce çizdiğiniz şekil ile sınırlı kalacaktır. İşiniz bittiğinde de şekil kaybolacak ve ortaya sadece o şekli almış olan yazınız çıkacaktır.

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.

.cisim{ width:0; height:0; line-height:0; border-top: 50px solid magenta; border-right: 100px solid green; border-bottom: 100px solid red; border-left: 50px solid yellow; } <span class="cisim"></span>

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.

kyolo ile resimlerinize konuşma balonu ilave edebilirsiniz. konuşma balonlarının font büyüklüğünü, yerleşim düzenini de değiştirebiliyorsunuz. türkçe dil desteği de mevcut. bildirgeç'te konuyla alakalı siteler.

super lame kendinize özel konuşma balonları hazırlayabileceğiniz bir site. bu balonlara kolay arayüzden çeşitli özellikler ekleyebilirsiniz. ayrıca siteye resimler yükleyerek eğlenceli çalışmalar yapabilirsiniz.

bubblr, resimler ile küçük hikayecikler, fıkralar anlatmanıza yarayan eğlenceli bir araç. şöyle ki, hikayenize uygun etiketler belirliyorsunuz ve bu etiketleri site üzerinden flickr resimleri içerisinde aratıyorsunuz. elde ettiğiniz resimlere küçük senaryonuzu konuşma balonları ile ekliyorsunuz. daha yayınlıyor ve yayınlananları puanlıyorsunuz.

Razz, senin kendi ses etiketlerine fotoğraflarını ekleyerek senin yerine konuşmasını sağlaması için tasarlanmış. Eklenen konuşan fotoğrafların, sen, senin favori filmlerin vb. sekilleri alıp komik bir alıntı için sesini kişisel olarak ekleyebilirsin. Facebook app, arkadaşlarına konuşan fotoğrafların daha kolay paylaşması için izin verir.

Artık YouTube videolarına açıklama eklemek mümkün. Youtube eklediğiniz videoların üzerine açıklama ekleyerek videoları etkileşimli bir hale getirebiliyoruz. Bu sayede hazırladığmız video hakkında ki bilgiyi ekranda seyirciye sunabilmenin yanında farklı sonlu videolar filmler de hazırlamak mümkün oluyor. Bu özellik sayesinde filmde veya videoda kullanıcının sonraki sahneyi seçmesi mümkün hale gelmiş. Buda farklı sonlu veya direk kullanıcı etkileşimli videolar demek oluyor. Bunun yanında videonun üzerine o videoyla alakalı başka video, kanal veya arama sonuçlarının da linkleri eklenebiliyor. Böylelikle eklediğiniz bir videoya eklediğini diğer videolarında linkini ekleyebiliyorsunuz.

Video açıklamalarını 3 şekilde ekleyebiliyorsunuz. Konuşma Balonu, spotlights (sahne ışıkları) ve not.

etkileşimli bir youtube videosu