visual-studio-2010

Visual Studio 2010 ortamında geliştirme yaparken hepimiz " CTRL + K + D " kısayolunu biliriz. Bu kısayol sayesinde yazdığımız kodlar düzenli bir şekilde biçimlendirilir. Tabi ki bu biçimlendirme şekli varsayılan değer ne ise ona göre yapılır. Css kodlaması yaparken " CTRL + K + D " kısayolunu kullandığımız zaman resimdeki gibi her bir özelliği tek satır şeklinde listelemektedir.

formatting-Css

 

Peki css kodlarımızı yazarken bazılarımız, her satırda tek bir tanım olacak şekilde  biçimlendirmek isteyebilirler.

formatting-Css

 

Bunun için Visual Studio 2010 içinde yapacağımız işlemler kısaca şu şekilde :

Tools -> Options -> Text Editör -> CSS -> Formatting

formatting-Css

 

Resimde görüldüğü gibi bize 3 seçenek sunuyor. Ayrıca her yaptığımız değişikliğin önizlemesini de görebiliyoruz. Seçimimizi yaptıktan sonra OK tuşuna basıp, kodlamanıza kaldığınız yerden devam edebilirsiniz Smile

 

Kaynak : http://www.wiliam.com.au/wiliam-blog/better-formatting-in-visual-studio-2010

hovereffect

 

Çoğumuzun kullandığı özellikle portfolyo, reklam ve resimlerde çok kullandığımız efektlerden bir tanesidir mouse hover effect. Jquery yardımıyla fade in/out işlemleri gerçekleştirebiliyoruz. Yapmış olduğum örnekte iki türlü efekt olayını gösterdim.

 

 

Tek resim veya çift resim kullanarak mouse hover effectleri :







Çift resim kullandığımız takdirde scriptimiz :


$(document).ready(function(){
 
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
 
});

Tek resim kullandığımız takdirde scriptimiz ( custom.js ) :

$(function() {
// OPACITY OF BUTTON SET TO 50%
$(".resim_img").css("opacity","0.5");
	
// ON MOUSE OVER
$(".resim_img").hover(function () {
										  
// SET OPACITY TO 100%
$(this).stop().animate({
opacity: 1.0
}, "slow");
},
		
// ON MOUSE OUT
function () {
			
// SET OPACITY BACK TO 50%
$(this).stop().animate({
opacity: 0.5
}, "slow");
});
});

...

 

demo

 

 

cufon

Cufón, web sayfalarında istediğimiz fontları kullanmamıza imkan sağlayan yeni bir teknoloji. Benim hiç kullanmadığım sIFR teknolojisi metinleri bir flash dosyası gibi gösteriyor. Cufón ise , resim dosyası şeklinde metinleri göstermektedir. Bunun denemesini , yaptığım demoda metinlerin üzerine gelip , sağ tıklayıp farklı kaydet dediğinizde bir resim dosyası olarak kaydedeceğini göreceksiniz.

 

İlk önce Cufónu kullanmak için öncelikle buradan cufon-yui.js dosyasını indirmelisiniz.

Kendinize özel Türkçe Cufón Fontları, buradan indirebilirsiniz .

  • cufon.shoqolate.com sayfaya giriş yapın.
  • Use the following value as the font-family of the generated font (optional) ” kısmından font-family olarak tanımlayacağınız ismi girin örnek xfontu gibi her font için ayrı değerler girerseniz font seçerken kolaylık olur.
  • Font Dosyanızı Ekleyin “Select the font you’d like to use
  • The EULAs of these fonts allow Web Embedding (without Adobe Flash) ” seçeneğini işaretleyin.
  • ğĞçÇöÖıİüÜşŞ ” karakterlerini “.. and also these single characters” kısmında girin.
  • Sayfanın en altında kullanım sözleşmesini kabul edin. “ I acknowledge and accept these terms

Scriptlerimiz :

 








 

HTML Kodlarımız :

> h1 etiketi :

Başlamak için her sabah uyanmaktan daha iyi bir yol olmalı !!! - ğĞçÇöÖıİüÜşŞ

Başlamak için her sabah uyanmaktan daha iyi bir yol olmalı !!! - ğĞçÇöÖıİüÜşŞ

> div etketi :

Başlamak için her sabah uyanmaktan daha iyi bir yol olmalı !!! - ğĞçÇöÖıİüÜşŞ
Başlamak için her sabah uyanmaktan daha iyi bir yol olmalı !!! - ğĞçÇöÖıİüÜşŞ

> p etiketi :

Başlamak için her sabah uyanmaktan daha iyi bir yol olmalı !!! - ğĞçÇöÖıİüÜşŞ

Başlamak için her sabah uyanmaktan daha iyi bir yol olmalı !!! - ğĞçÇöÖıİüÜşŞ

demo

Yukarıda gördüğünüz gibi öncelikle cufon-yui.js dosyasını ekledik. Sonrasında ise fontumuzu. Altında ise hangi başlıkların ve metinleri cufon ile görüntülenmesini istediğimizi belirttik. Unutmadan belirtelim. Sayfalarınızı unicode UTF-8 ile biçimlendirmeyi unutmayın. Yoksa Türkçe karakterler görünmezler.

Daha detaylı bilgi için : Cufón Hakkında Her Şey

Font Face

Css 2.0 ile gündeme gelen css 2.1 ile rafa kaldırılan ve tekrar Css 3 ile eski yerini alan komut : @font-face ...

Özellikle psd to xhtml uygulamalarınızda çizimdeki fontları css ile yazdırmak sorun haline gelir. Css dosyamızda yazdığımız font komutları sayfanın okunduğu bilgisayarda font yüklü ise görüntülenir ancak print edilen bilgisayarda font yoksa tarayıcı sayfayı görüntülerken kendi varsayılan fontunu kullandığını hepimiz biliyoruz.

Css3 ile gelen font uygulamaları yardımıyla bu sorunu çözmemiz mümkün oluyor.

@font-face {
	
	 font-family: Brisk;
	 src: url('../fonts/Brisk.eot');/* IE için */
         src: local('Brisk'), local('Brisk'),
              url('../fonts/Brisk.TTF') format('truetype');
         /*Kendi bilgisayarımızda aynı adlı font var ise bizim
           fontumuzu yüklenmeden kullanmamızı sağlar*/
	}

demo

Dönüşümler için kaynaklar :

TTF 2 EOT : kirsle.net

Tüm Dönüşümler : fontsquirrel.com

Font Türkçeleştirme, Fontlara Türkçe Karakter Ekleme :

Güzel Yazı  ( Video Anlatımlı ) : skullcrusher.org

Daha Detaylı Bilgi İçin :  Font-Face Kullanımı