AzizName: grafik

grafik etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

15 Ekim 2007

CSS Inline Style (shadow Filter)

Float Right

Origin of
Dubya

The origin of 'Dubya' from us a weekend says that the columnist Molly Ivins coined it in 1995; it's the spelled-out Texas-drawl version of Bush's middle initial (for "Walker"). Her editor at the Fort Worth Star-Telegram tells us Ivins "owned 'Dubya' from the mid-'90s to 1999, then it caught on with everyone else." Well, not really everyone.

Close friends call Bush "George W." His dad sometimes calls him "Quincy," a reference to John Quincy Adams, the only son of a president to become president. And almost everybody else calls him "Mr.President.""

Yukarıda Cördüğünüz uygulamanın kodlarını aşağıda yayınlıyorum. Kopyala yapıştıır yaparak sizde deneyerek uygulamayı yapablirsiniz. İngilizce yazan metin yerinede istediğiniz gibi yazınızı yazabilirsiniz. Aynı uygulamayı solda da gösterebilirsiniz. Sadece float: right; ifadesini float: left; olarak değiştireceksiniz.

UYGULAMA KODU :

<div align="justify">Float Right <div style="padding-left: 20px; filter: shadow(color:silver); float: right; padding-bottom: 12px; font: 24pt haettenschweiler; width: 135px; color: navy">Origin of Dubya</div> "The origin of 'Dubya' from usaweekend.com says that the columnist Molly Ivins coined it in 1995; it's the spelled-out Texas-drawl version of Bush's middle initial (for "Walker"). Her editor at the Fort Worth Star-Telegram tells us Ivins "owned 'Dubya' from the mid-'90s to 1999, then it caught on with everyone else." Well, not really everyone. Close friends call Bush "George W." His dad sometimes calls him "Quincy," a reference to John Quincy Adams, the only son of a president to become president. And almost everybody else calls him "Mr. President.""</div>

Matted Style CSS Border Gold

Dostlar yandaki resmi ve çerçevesini beğendinizmi. Hah işte bu gün resimlerinizi şık ve hoş bir şekilde nasıl yayınlayacağızı tarif edeceğim. Yine burada CSS in nimetlerinden yararlanacağız. Yani anlayacağınız sayfalarınızda bu tür uygulamaları CSS ile daha kolay halledebilirsiniz. Burada "inline CSS" yöntemini kullanacağız. Yani makalemizi yazarken gereken kodları da aynı yerde yazacağız.

Kodlar arasınada makalenizi yerleştireceksiniz anlayacağınız.. Aşağıda bu makalenin uygulama kodunu bulacaksınız. Blogunuza kopyala yapıştır yöntemiyle deneyebilirsiniz. Bu makale yazısının da yerine kendi makalenizi yerleştirebilirsiniz. Yalnız Kodlar içindeki bold yani kalın yerlere kendi resimlerinizin ölçülerini ve adresini yazmayı unutmayın lafın kısacası. Kolay gelsin...

UYGULAMA KODU :

<div align="justify"> <span style="border-right: black 1px solid; padding-right: 10px; border-top: black 1px solid; padding-left: 10px; background: gold; float: left; padding-bottom: 10px; margin: 15px; border-left: black 1px solid; padding-top: 10px; border-bottom: black 1px solid"><img style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid" height="100" src="http://i151.photobucket.com/albums/s125/ihtiyarus/ataturk14vh7-1.jpg" width="75" /> <span style="border-right: darkkhaki 1px solid; padding-right: 5px; border-top: darkkhaki 1px solid; margin-top: 5px; font-size: 80px; background: khaki; float: left; border-left: darkkhaki 1px solid; color: white; line-height: 60px; margin-right: 6px; padding-top: 2px; border-bottom: darkkhaki 1px solid; font-family: times">Dostlar yandaki resmi ve çerçevesini beğendinizmi. Hah işte bu gün resimlerinizi şık ve hoş bir şekilde nasıl yayınlayacağızı tarif edeceğim. Yine burada CSS in nimetlerinden yararlanacağız. Yani anlayacağınız sayfalarınızda bu tür uygulamaları CSS ile daha kolay halledebilirsiniz. Burada "inline CSS" yöntemini kullanacağız. Yani makalemizi yazarken gereken kodları da aynı yerde yazacağız. Kodlar arasınada makalenizi yerleştireceksiniz anlayacağınız.. Aşağıda bu makalenin uygulama kodunu bulacaksınız. Blogunuza kopyala yapıştır yöntemiyle deneyebilirsiniz. Bu makale yazısının da yerine kendi makalenizi yerleştirebilirsiniz. Yalnız Kodlar içindeki bold yani kalın yerlere kendi resimlerinizin ölçülerini ve adresini yazmayı unutmayın lafın kısacası. Kolay gelsin... </div>

ÖRNEK UYGULAMA :

UYGULAMA KODU :

15 Mart 2007

KOLAJ (BACKGROUND) ARKA PLAN YAPMAK

Bu günde benim İHTİYARUS blogumun BACKGRAOUND RESMİNİ nasıl yaptığımı anlatacağım. Aşağıdaki gibi internette google grafik arama ile aşağıdaki ulusal gazetelerimizin ön resimlerini teker teker bilgisayarıma indirdim. Dahasonra resim editörlrinden biri (FİREWORKS) ile açtım. Hepsini aşağıda görüldüğü gibi aynı ölçülere getirip kaydettim.

Daha sonra gazete resimlerini 500x500 ebadında bir dörtgen içine gelişigüzel değişik açılarda serpiştirdim. Daha sonra bu serpiştirdiğim resimleri 320x325 ebadında düzgün bir dörtgen olacak şekilde CROP aracı ile kırptım. Yani aşağıdaki gibi düzgün dörtgen bir resim elde ettim. JPEG resim formatında kaydettim.

Daha sonra da resimlerimi yüklediğim PHOTOBUCKET sitesine uoload ettim. Yine ordan aldığım Bu resmin URL adresini daha önce anlattığımız gibi CSS kodlarında koymam gereken yere yerleştirdim. Ondan sonra ki İHTİYARUS un aşağıda ki görünümünü elde ettim.

14 Mart 2007

ARKA PLAN RESMİ YAPALIM

Evet dostlar bu gün sizlerle arka plan resmi yapacağız.Bunun için herhangi bir grafik yani resim editörüyle çalışabiliriz. Ben FİREWORKS programını kullanıyorum sizler PHOTOSHOP, PAİNTSHOPPRO veya PAİNT gibi programda kullanabilirsiniz. Şimdi bunlardan elinizin altında hangi program varsa onu açalım. Bizim genelde BLOGGER veya diğer web sayfalarının alan ölçüleri genelde 1024x768 pixel oluyor. Biz bu alana tek bir parça resimde koyabiliriz veya sayfanın çabuk yüklenmesi yani açılması için birkaç parçaya da bölebiliriz. Yine bu alana küçük bir resimde koyabilir kendini tekrarlamasını sağlayarak o alanı kaplayabiliriz. Şimdi biz bu en son söylediğimize bir örnek yapalım.

340 px X 384 px ebadında bir dörtgen çizelim. İçini istediğiniz bir renkle boyayalım. Burada düz renk yerine bir teksture veya pattern de seçebiliriz.

Dörtgenin çerçevesini renksiz yapalım. Yani çerçeve olmasın. Daha sonra bu dörtgenin üzerine herhangi bir büyüklükte başka bir renkte yazı yazalım. Dörtgenin altta yazının üstte olmasını sağlayacak ayarlarımızı yapalım.

Daha sonra yazımızı kopyala yapıştır yöntemi ile çoğaltalım. Her birini değişik fontlarla da yapabiliriz veya aynı font yani karakter biçimi hepsinde aynı da olabilir. Bu tümüyle sizin yaratıcılığınıza ve zevkinize kalmış bir şey.

Son şeklini verdiğimiz çalışmayı PNG, JPEG, GİF resim formatlarından biri olacak şekilde kaydedin. Benim tavsiyem JPEG olmalı. Çünkü en az yer kaplayan yani dosya boyutu en küçük resim formatı olduğu için. Yalnız JPEG resim formatında grafik kalitesi biraz düşük olur. Görüntü kalitesinden ödün veremeyeceğiniz resimlerde ise GİF veya PNG tercih edebilirsiniz. Bir sonraki aşamada yaptığımız resmi BLOG ‘umuzun veya web sayfamızın BACKGROUND una yerleştirmeyi öğreneceğiz.

CANIM SIKILIYOR NE YAPSAM ACABA?

Dostlar web tasarımı işine merak sarmış epeyce insan olduğunu görüyorum. Konuyla ilgili internet 'te ne ararsanız var. Bu konuda oldukça güzel kaynaklar var. Yine oldukça güzel ve de harika olarak değerlendirdiğim emek ürünü çalışmalara rastlıyorum. Onları incelerken sergilenen zeka ve yaratıcılık konusunda hayran olduğum epeyce çalışma var. Bir de bu işe heveslenip de bir şeyler yapma gayreti içinde olan insanlarla tanışıyorum. Bence her alanda beceri gösterme çabası niye onu da anlamıyorum. İnsan hoşlandığı bir şeylerle uğraşmalı. O uğraşıya odaklanıp o işi en iyi şekilde yapmanın yollarını aramalı. Bütün bunları yaparken de mutlaka kendini o konuyla ilgili eğitmeli. Biliyorsunuz eğitimin yolu da okumak ve emek den geçer. Emek harcamadan kısa yoldan bir şeyleri elde etmenin yolu hüsrandır. Bunu denemeyin, diyorum ki bol bol okuyun. Kitap almak için paranız yoksa bu ayıp değil. Şu aralar ülkemizde evine kitap almayı bırakın günlük temel ihtiyaçlarını bile ancak karşılayabilen insanımız o kadar çok ki.. Buradan hareketle kitap almak da çok şart değil. İNTERNET ‘te o kadar çok bedava kaynak var ki. Yeter ki sizler ne aradığınızı bilin ve üşenmeden okuyun. Şimdi bakıyorum çok güzel yazı yazan insanlarla karşılaşıyorum. İnanın kitap yazıp satsalar kitapları yok satar. Her kes becerebildiği, haz duyduğu ve sevdiği işi yapmalı. Herkes grafik, web tasarımı bilmek durumunda değil. Şiir yazmayı deneyebilir, hayat hikayesini yazıya dökebilir insanlarla paylaşabilir. Fotoğraf çekebilir, müzikle uğraşabilir, resim yapabilir veya el becerilerine dayalı birtakım işlerle uğraşabilir. Maket, model gibi işlerle de uğraşabilir. Balık tutabilir, spor yapabilir. Demem o ki insanlar eğer bir şey yapacaklarsa o işle ilgili kendilerini geliştirsinler yada hiç bir şey yapmasınlar. Bölük pörçük oradan buradan yarım yamalak yamalı bohça gibi bir şeye benzemeyen kargacık burgacık. Oradan çal buradan çırp sonra kalk ben yaptım oldu demesinler. Daha çok ben ne yaratabilirim. Başka benzeri olmayan değişik bir şey denemeliyim demeli. Göğsünü gere gere benzeri olmayan yani her şeyiyle bana ait, benim eserim diyebileceği şeyler yapmalı. Yada çok iyi bir izleyici okuyucu ve araştırıcı da olabilir. Çünkü oda bir iş. Bundan sonraki yazılarım bu yazıyı yazmama neden olan konularla ilgili olacak. Bana sorulan sorulara cevap olacak. Biliyorum ki bu soruları utandığı için sormaya cesaret edemeyen dostlarda var. Olsun yalnız soranlar değil onlarda öğrensinler. Bu konular neler olacak tabi ki WeBlog ve de web tasarımı üzerine olacak.

Arka plan resmi nasıl oluşturulur?
Sayfanızın (BACKGROUND) arka planında ki resmi nasıl koydunuz?
Yazı Yazdığımız bölüm şeffaf olabilirmi?
BACKGROUND resimleri hangi ebatlarda olabilir?
GİF, ANİMATED GİF, JPG, JPEG, PNG, BMP ne demek?
GRAFİK TASARIM ne demek?
WEB TASARIMI yani Web sayfası tasarımı ne demek?
HEADER arka plan (BACKGRAUND) resmi nasıl yapılır?
HEADER BACKGRAUND a resim nasıl konur?
HTML&XHTML ne demek?
Web editörü ne demek?
Tarayıcı ne demek?
DREAMWEAVER programı ne işe yarar?
CSS nedir? Yenir mi yoksa yutulur mu?
Başlıkların altına resim veya renk konurmu?
Yazı alanımızın arka planı renkli veya resim olabilir mi?
Resimlerime çerçeve istiyorum.
DROP DOWN MENÜ nasıl yapılır?
TAB MENÜ nasıl yapılır? HORİZONTAL veya VERTİCAL MENÜ ne demek?
FAVİCON nedir? Nasıl yapılır?
Kendime LOGO ve BANNER yapmak istiyorum?
FLASH BANNER nasıl yapabilirim?

gibi daha birçok konuda yazılarımız olacak. Sırayla hepsini burada dilimin döndüğünce anlatacağım. Merak edenleriniz varsa eğer ben ne web tasarımcısıyım nede grafiker. Sadece emekli bir teknik öğretmenim. Hoşlandığım ve becerebildiğim işleri yapmaya çalışıyorum. Öğrendiklerimi yine öğretebilirsem şayet işte o zaman mutlu oluyorum. Şu anda DOKTOR dostumun kulaklarını çınlatmadan geçemeyeceğim. Onu seviyor ve de şimdi ikinci baharında çalışmaya başladığı içinde onu özlüyorum. Hem göz Doktoru, hem operatör, hemde bence iyi bir web tasarımcı. He he....Bu arada çok şey öğrendiğim Yunus 'u (EMREX) anmadan da edemeyeceğim. Oda şimdi çalışıyor ve ekmek parasını kazanmaya başlamış bir genç artık.

23 Kasım 2006

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

Art by ihtiyarus Bugü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 :

<img style="float:left;border:solid 1px yellowgreen;padding:5px;margin-right:5px;" title="Art by ihtiyarus scroll-2.gif" src="http://i73.photobucket.com/albums/i235/aziz52/scroll-2.gif" alt="Art by ihtiyarus" border="0" width="110" height="85" />Bugün yine burada yazımız içerisinde hem resim, hem Dropcaps, hemde pullout 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ına 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 blog sistemi için uygun olan uygulama burada anlattığım biçimde olanı.

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>

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 :