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.

BLOG’UMUZA ARKA PLAN RESMİ YERLEŞTİRMEK

Dostlar biliyorsunuz bundan önce bir tane arka plan resmi yapmayı öğrendik. Şimdide yaptığımız arka plan resmini BLOG ‘umuzun arka planına nasıl yerleştireceğimizi görelim. Yaptığımız arka plan resmini kullandığım resim host sitesine yani PHOTOBUCKET e upload ediyorum. Yani bilgisayarımdan yüklüyorum. Blog ’umuzu template sekmesinde edit html bölümünde açalım. Burada blogumuzun html kodlarını göreceğiz. Tarayıcımızın toolbarında Düzen sekmesinde bu sayfada bul ibaresini seçelim. Açılan arama kutusuna body kelimesini yazalım. Aşağıda yazdığımız kod grubunu bulalım.

 */

body {
  background: $bgColor;
  margin: 0;
  padding: 0px;
  font: x-small Verdana, Arial;
  text-align: center;
  color: $textColor;
  font-size/* */:/**/small;
  font-size: /**/small;
}

Bu css property tabir edilen bölümde body sınıfının özelliklerini belirleyen kod grubudur. Burada aşağıdaki gibi değişiklikler yapacağız ve resmimizi buraya yerleştireceğiz. Resmimi yüklediğim host sitesinden aldığım resmimin URL adresini buraya aşağıdaki gibi css kodlarında diğer değişiklikleri de yaparak yerleştiriyorum.

  */

body {
  background-image: url(http://i151.photobucket.com/albums/s125/ihtiyarus/ders_6.gif);
  background-position: top;
  background-repeat: repeat;
  background-attachment: fixed;
  margin: 0;
  padding: 0px;
  font: x-small Verdana, Arial;
  text-align: center;
  color: $textColor;
  font-size/* */:/**/small;
  font-size: /**/small;
}

daha sonra Save Template düğmesine basıp kaydediyoruz. Daha sonradain a new window ibaresine basıp blogumuzun son halini tarayıcıda aşağıda gibi görüyoruz. Yalnız burada eğer arka plana 1024x768 ebatlarında tek resim koyarsanız şayet background-repeat: none; şeklinde düzeltmeniz gerekiyor. İşlemimimiz bu kadar.

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

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 :

<p style="text-align:justify;"><br /><br /><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" /><span style="float: left;font: normal 60pt/0.8em Georgia,Helvetica, Verdana, Arial, sans-serif;color: yellowgreen;margin-right: 3px;">B</span>ugün yine burada yazımız içerisinde hem <strong>resim</strong>, hem <strong>Dropcaps</strong>, hemde <strong>pullout</strong> uygulamasını bir arada dengeli bir biçimde sunulmasını anlatacağım. Esasında burada bahsi geçen pullquote daha önce anlattığımız <strong>pullquote</strong> uygulamasının bir başka biçimde sunulması şeklinde tarif edebiliriz. Bu uygulama biçimi de çok hoş. Grafik anlamda bizlere <strong>CSS</strong> 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. <span style="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;">...pullquote aleti işte CSS de bu oluyor dostlar.</span> Yanlız burada değinmek istediğim bir şey aşağıda her ikisinide verdiğim kodlardan şablonunuzun css bölümüne <strong>pullquote</strong> ve <strong>thinborder</strong> 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 <strong>pullquote</strong> veya <strong>thinborder</strong> 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ı. <br /><br /></p>

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>
 

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.....

YENİ BİR UYGULAMA (pullquote text) -2

B

iliyorsunuz daha öncedeYENİ BİR UYGULAMA (pullquote text) diye bir uygulamadan bahsetmiştik. Bu uygulamanın binbir çeşitte uygulamalarını daha doğrusu kaynağını keşfettim. Burada başka çok güzel uygulamalarda var. Burada hem uygulamaların örneklerini hemde CSS kodlarını bulacaksınız. Benim şahsen çok hoşuma gitti, eminim sizinde hoşunuza gidecektir. Bir önceki yazımızda bahsettiğimiz MAGAZİNE STYLE DROP CAPS uygulamasının da esas kaynağının burası olduğunu gördüm. Burada bu uygulamanında değişik uygulanış biçimlerini de göreceksiniz.

• CSS OPACITY
• DROP CAPS
• MAGAZINE STYLE
• PURE CSS BANNERS
• CSS PULLQUOTES
• CHEAP TRICKS

Color:Green with Background:White

..işte buda başka bir pullguote örneği nasıl beğendinizmi....?Mutlaka beğenmişsinizdir.. ..kolay gelsin..

bu başlıklar altında değişik uygulamalar yapılmış ve örnekleri verilmiş. Daha doğrusu dikkatle incelerseniz vede CSS bilginiz de varsa burada tümüyle property ler düzenlenerek bir uygulamanın değişik şekillerine ulaşabileceğinii görürsünüz. Şahsen hepsi benim hoşuma gitti. Yazılarınızı daha estetik ve grafik görselliklerle süsleyerek yayınlama imkanı elde etmiş oluyorsunuz.

white

CSS OPACITY :

• Opacity Background
• Opacity Background: Fully Opaque Text
• Opacity Heading
• Opacity Heading on Image
• Opaque Text on Picture
• Opacity Table Background
• Easy Opacity Image Rollover
• Opacity Table Background
• Transparency: The Opacity Property
• Opacity Green Pull Quotes
• Opacity Text

DROP CAPS :

• Alphabet Blocks *NEW
• CSS First Big Letter
• CSS Magazine Style Drop Cap

MAGAZINE STYLE :

• Blockquotes with Image
• Blender Magazine Style
• Magazine Style CSS
• Magazine Style with Opacity

PURE CSS BANNERS :

• Banner in CSS

CSS PULLQUOTES :

• Feeling Groovy Pullquotes
• Easy CSS Pullquotes
• Easy Inline Pullquote
• CSS Pullquotes in Orange
• Transparency: The Opacity Property Green on Beige
• Tranparency: Opacity Brown on Darksalmon

CHEAP TRICKS :

• HTML IE Tricks: Flip Text Vertical
• Shadow Float Right (IE)
• Shadow Float Left (IE)
• BOTTOM

Gördüğünüz gibi epeyce uygulama ve örneği var bu bahsi geçen uygulamaların hepsine buradan ulaşabilirsiniz. Yada side barda faydalı linkler altında Mandarin Design linkine tıklarsanız ulaşabilirsiniz. Kolay gelsin.

YADA MANDARİN DESİGN 'A BURADAN ULAŞABİLİRSİNİZ

Blog Trashed by Mandarin

Web 2.0 Logo Generator

Haydee..!Web2.0 Logomuzu Yapalım

Bu gün Sayın Yassaman Karakoç 'un blogunda Web 2.0 Logo Generator ile ilgili yazısını okudum. Aynen de aşağıya yazdıklarını yazdım. Başka ne yazacağımı da bilemedim. Affına sığınıyorum. Bu günlerde hırsızlama hadiseleri epeyce sayıda ve fütursuz örneklerle doruğa çıktığı için özellikle belirtmek istedim. Keşif Yassaman Karakoç 'a ait. Bende ondan öğrendim hemen bir uygulamasınıda yaptım zaten.

"Web 2.0 logo generator ile, sitenize web 2.0 tarzında logo yapabilirsiniz. İsteğe bağlı “reflection” efekti ve “beta” simgesini seçebilirsiniz."

Esasında Gfx Dizayn 'da daha çok güzel yazılar bulacaksınız. Ziyaret etmenizi tavsiye ederim. Photoshop ve CSS üzerine ve daha neler neler. Sık sık burayı ziyaret etmede yarar var.

YENİ BİR UYGULAMA (pullquote text)

Eveeet dostlar bu gün wordpress 'in temalarından cutline 'ın yaratıcısı Chris Pearson'ın blogunda Pullquotes la ilgili bir yazı okudum orda yazılan uygulamayıda aşağıda hemen denedim. Şahsen benim çok hoşuma gitti. Dilerseniz sizde deneyebilirsiniz. Nasıl yapacağınıza gelince, gerçi Chris Pearson kendi blogunda anlatıyor ama birde ben anlatayım. Şimdi aşağıdaki CSS Kodu'nu template inizde edit html bölümünde blockquote codunu bulup onun altına yerleştireceksiniz.

CSS kodu:

.pullquote_left { width: 200px; margin: 5px 15px 5px 0; font-size: 1.4em; text-align: center; float: left; }
.pullquote_right { width: 200px; margin: 5px 0 5px 15px; font-size: 1.4em; text-align: center; float: right; }

daha sonra normal postunuzu yazarkende yine postunuzu yazdığınız bölümde bu seferde edit html bölümüne aşağıdaki div kodu'nu yazıp daha sonra postunuzu yazacaksınız. Anlaşılmıştır umarım en aşağıda da uygulamanın nasıl olduğuna dair bir örnekte verdim zaten. Kolay gelsin.

DİV Kodu:

Örnek uygulama:

buraya yazmak istediğini yazacaksın

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam egestas, mauris id dignissim dignissim, leo augue rutrum lacus, id condimentum nisl elit ut nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi.