23 Kasım 2006

The Balancing Act ( Üçlü CSS Ayarlaması)


Art by ihtiyarusBugün yine burada yazımız içerisinde hem resim, hem Dropcaps, hemde pullquote uygulamasını bir arada dengeli bir biçimde sunulmasını anlatacağım. Esasında burada bahsi geçen pullquote daha önce anlattığımız pullquote uygulamasının bir başka biçimde sunulması şeklinde tarif edebiliriz. Bu uygulama biçimi de çok hoş. Grafik anlamda bizlere CSS in ayrı bir görsel şöleni gibi sanki. Hoşunuza gitti sanırım. Sizler bu uygulamada istediğiniz gibi renklerde değişiklik yaparak hoşlandığınız renkleri uygulayabilirsiniz. ...pullquote aleti işte CSS de bu oluyor dostlar. Yanlız burada değinmek istediğim bir şey aşağıda her ikisinide verdiğim kodlardan şablonunuzun css bölümüne pullquote ve thinborder la ilgili kodları ilave etmeyi unutmayınız. Post başlığı altında CSS property lerinin bulunduğu yere ilave edeceksiniz. Eğer neresi olduğunu anlayabilmeniz için tarayıcınızın görünüm sekmesinde kaynağı göster 'e basarakda şablon kodları arasında pullquote veya thinborder ifadelerini arayın sizde aynı yere kodlarınızı kopyala yapıştır yöntemiyle koyun. Kolay gelsin.Bu CSS uygulamasını burada olduğu gibi inline veya external olarak harici bir css dosyası ilede yapabilirsiniz. Ancak blogger sistemi için uygun olan uygulama burada anlattığım biçimde olanı.


UYGULAMA KODU :



CSS CLASSES KODU :


<style type="text/css">

.thinborder{
float:left;
border:solid 1px yellowgreen;
padding:5px;
margin-right:5px;
}

.pullout{
width:30%;
padding:10px;
background-color:yellowgreen;
color:#F5F5F5;
float:right;
font: bold 14pt/1em Arial,
Helvetica, sans-serif;
text-align:left;
letter-spacing: 0.05em;
margin:5px;
clear: both;
}
</style>


CSS Float Style (inline style)

Mandarin

Bu gün burada başka bir uygulama olan CSS Float Style 'in inline style olarak nasıl yapıldığını anlatacağım. Mandarin kelimesini 36pt büyüklüğünde float:left;. olarak buraya büyük olarak aynı burada olduğu gibi şayet yazmak istersek, aşağıda verilen uygulama kodunu aynen uygulayacağız. Kodlar arasında ki düz yazılar yerinede siz ne yazmak istiyorsanız yazabilirsiniz. Tabi rengini de istediğiniz gibi değiştirebilirsiniz. Kolay gelsin dostlar.



UYGULAMA KODU:


MANDARİN DESİGN TEKRAR YAYINA BAŞLADI


Evet dostlar bu gün çok sevinçliyim çünkü Mandarin Design yeniden yayınlanmaya başladı. Yani artık tekrar aramıza döndü. Bu gün Mandarin Design 'ın İE 'ın sık kullanılanlar bölümünde linki gözüme ilişti. İçimden bir ses tıklamamı söyledi. Bir ümitle tarayıcının açılmasını bekledim. Açıldı gözlerime inanamadım. Kurcaladım test ettim tekrar tekrar denedim açıldığını görünce hemen sitenin sağını solunu inceledim. Mandarin Meg le ilgili bir şeyler aradım. Ama sanıyorum dostları, sevenleri sanki o yaşıyormuşcasına onun anısına yine onun bıraktığı yerden devam ettiriyorlar heralde. Çünkü sayfalar arasında dolaşırken konuyla ilgili hiç bir ifadeye rastlayamadım. Mandarin Meg ton ton nine CSS Hocamız sen hala yaşıyorsun. Eminim bir yerlerden bakıp o kodu oraya koyma veya font-family 'i unuttun yada hayır bu kısım inline olacaktı gibi uyarılarda bulunduğunu duyar gibi oluyorum. Aramıza döndüğüne çok sevindim. Hoş geldin MEG.....


17 Kasım 2006

SCROLLING MARQUEE

Bu gün ayrıca resim demişken bu şekilde resim yayınlamayı da anlatmaya karar verdim. Akan resim slide show gibi bir şey ama uygulama adı SCROLLING MARQUEE burada da aynı aşağıda yaptımız işlemleri aşağı yukarı aynı yapıyoruz. Yani yayınlayacağımız resim ölçülerinin aynı boyda olmalarını sağlıyoruz. Bir resim depolama sitesine upload ediyoruz. Daha sonrada verilen URL adreslerini kod daki yerlerine koyuyoruz. Okadar....Kolay gelsin....
Uygulama Örneği :





Uygulama Kodu:




Free Random Images

Evet dostlar geçenlerde DestekBlogger haber grubumuza üye arkadaşlardan biri sormuştu yanılmıyorsam bu meseleyi. Bende nasıl yapıldığını anlatmaya ve kodları yayınlamaya karar verdim. Uygulama kodları aşağıda verilmiştir. Yanyana bu şekilde yayınlamayı düşündüğünüz resimlerin bir fotoğraf veya grafik işleme editöründe ölçülerini aynı boya getirin. Benim yayınladığım örnekte resim ebatları genişlik ve yükseklik 100 px dir. Yani WİDTH= 100px;HEİGHT= 100px anlaşılmıştır umarım. Aşağıda yayınladığım kodlar içerisinde resim URL leri yerine kendi resim URL lerinizi koyup direk post yayınlama kısmında EDİT HTML sekmesine yapıştırıp yayınlayacaksınız. Bu kadar hadi kolay gelsin.....


Uygulama Örneği :



Uygulama Kodu :



16 Kasım 2006

ALFABETİK DROP CAPS

Ne zamandır yazacağım bu meseleyi ama hep atlıyorum. Daha önce yazmam gerekirdi. Bu gün artık anlatacağım. Belki bazı dostlar nasıl olduğunu merak ediyorlardır. Tahmin ettinizmi bilmiyorum ama bu uygulamayıda MANDARİN MEG 'den öğrendim. En çok hoşuma giden CSS uygulamalarından. Çok sevdim bu uygulamayı. Mandarin Design devam edecekmi bilmiyorum ama dilerim dostları bir araya gelir anısına devam ettirirler belki. Evet uygulama kodunu aşağıda vereceğim.



Uygulama Kodu :



12 Kasım 2006

Michelle Goodrich

MANDARİN MEG yani Mandarin Design 'ın yaratıcısı Michelle Goodrich 'i kaybettik.



Mandarin Meg Michelle Goodrich

Mandarin Design 'ın yaratıcısı olan Michelle Goodrich'i kaybettik. Geçtiğimiz hafta boyunca hemen hemen hergün birkaç kere ziyaret ettiğim Mandarin Design 'ın sayfalarının açılmadığını gördüm. Önceleri sayfaların teknik bir sorundan dolayı açılmadığını düşündüm. Sayfaların bulunduğu host firmasına yönlendirildiğini farkettim. Bir uyarı yazısı vardı. Teknik bir sorun nedeniyle geçici olarak kapatıldığı yazıyordu. Bu birkaç gün daha devam edince merak edip araştırmaya başladım. Bu harika sayfaların ve uygulamaların yaratıcısı kimdi. Mandarin Meg diye anılan "MEG" kimdi. O güne kadar merak etmemiştim. Önceleri yaratıcı, zeki bir genç erkek veya bayandır diye tahmin ediyordum. Ama araştırmalarımın sonunda karşıma 53 yaşında gençliğindeki güzelliğinden hiç bir şey kaybetmemiş, Amerika Sacremento 'da yaşayan bir bayan çıktı. Çocukları ve torunları olan bir hatun kişi. Sayfalarından HTML, CSS konusunda çok şey öğrendiğim, Web Tasarımında bir sanatçı, estetik ve grafik uzmanı olan bu kişiden bahsedeceğim. Hiç haberi olmadı ama benin öğretmenimdi. Bu kişiyi çok merak ettiniz biliyorum. Evet bu kişi müthiş bayan Michelle Goodrich . İyi bir anne, tonton bir nine. Dünyanın dört bir tarafında dostları ve sevenleri olan birisi. Evinin bir köşesindeki bilgisayardan bulduğu boş vakitlerinde onlarca dostu nasıl edinmiş hayretler içinde kaldım. Bilgisayar ve İnternetin gücüne bir kez daha inandım. Yaşadığı şehirde de çok sevilen onlarca dostu olan bir insan olduğunu gördüm. Ama ne yazık ki bu muhteşem insanın geçtiğimiz haftalarda 25 Ekim 2006 da vefat ettiğini ve 30 Ekim 2006 da da defnedildiğini öğrendim. Michelle Goodrich Haziran 1953 de dünyaya gelmiş yani benimle yaşıt (Benden 1 ay büyük). Çok üzüldüm bunu öğrendiğimde, tamda sayın rahmetli Bülent ECEVİT 'in Ankara 'da cenaze törenini TV den izlerken. Ne tesadüf ikiside değerli insan. Cenaze törenine gidecektim ancak daha önce iki kere kalp krizi geçirdiğimi hatırlatan eşim gitmeme izin vermedi. Değerli insanları yitirdiğimiz bu günlerde, onlara elimizden rahmet dilemekten başka bir şey gelmiyor. Güle güle Michelle Goodrich dostlarının ona hitap ettiğ gibi Mandarin Meg ve güle güle Sayın Bülent Ecevit yani Karaoğlan. Bülent Ecevit için milyonlarca seveninden sadece birisiyim. Onun için bu gün okadar güzel şeyler söylendi ki bana söyleyecek bir şey kalmadı. Güle güle ey güzel insanlar buluşmak üzere..........


05 Kasım 2006

Centered Bordered Box with Bordered Image

Bu seferki uygulamada hoşunuza gidecek umarım. Burada kullanılan renkler de dilediğiniz gibi değişiklikler yapabilirsiniz. Daha çok hoşlandığınız renkleri kullanabilirsiniz.İngilizce metin yerine de kendi yazılarınızı yazbilirsiniz. Tabiki Box ebatlarını değiştirebilirsiniz. Resim koyarken de ebatlarını kod içerisinde ki yerlerine yazmanız gerekir.


<


Michelle Goodrich

Mandarin Meg bu uygulamayıda senden öğrendim. CSS 'in annesi MEG seni çok arayacağız. Oysaki senden çok şey öğrenecektik. Dünyadaki bütün çiçekleri sana gönderiyorum. O çiçekler senin yanında sönük kalacak ama olsun. Mekanın cennet olsun. Bir gün buluşmak dileğiyle.




Uygulama Kodu:



Polaroid Picture Borders

Evet dostlar bu günde CSS ile Polaroid Picture Borders 'ın nasıl yapıldığını göstereceğim. Bu uygulamaları deniyorus da deneyip sizlere blogger a uygulanış biçimlerini sunmaya çalışıyorum. Yalnız bazı uygulamaların IE 5.5, IE 6.0, ve Mozilla Firefox 6.0 gibi tarayıcılarda farklı yorumlanıp sunulduğu oluyor zaman zaman . Bu yüzden dikkat ederseniz bazen tarayıcıların bu değerlendirmeleri göz önüne alınarak kodlar içerisinde gerekli düzeltmeler yapılmış olarak sizlere sunuluyor.






Buraya dilediğinizi yazabilirsiniz



Uygulama kodu:

<div align="center">
<div style="BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: black 1px solid; PADDING-LEFT: 15px; BACKGROUND: white; PADDING-BOTTOM: 60px; BORDER-LEFT: black 1px solid; WIDTH: 231px; PADDING-TOP: 15px; BORDER-BOTTOM: black 1px solid; HEIGHT: 316px; TEXT-ALIGN: center">
<img style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" src="http://i73.photobucket.com/albums/i235/aziz52/azizname_image/sinem-3.jpg" width="216" height="296" />

<b>Buraya dilediğinizi yazabilirsiniz</b>
</div>
</div>




Toggle

Ben Kimim

SAYAÇ


DEFA ZİYARET EDİLDİM

Shades of Teal Palette