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

Çoğu kişi bunu bekliyordu sanırım. Visual Studio geliştiricileri " Web Standards Update for Microsoft Visual Studio 2010 SP1 " adında eklenti yayınladı. Bu bizler için süper haber :) Artık CSS 3.0 seçimini yaparak, intellisense sayesinde kodlamak daha kolay olacak.

“Web Standards Update for Microsoft Visual Studio 2010 SP1″ eklentisi için de HTML5 Video, Ses, Giriş Tipleri, Sürükle & Bırak  gibi yeniliklere de destek veriyor. 

 

Hemen İNDİR

 

 

 

tasarım

 

 

Çalışmalarınızda sizi yönlendirecek, ufkunuzu genişletecek, güzel, ilgi çekici 10 grafik tasarım blogu.

 

 

SpoonGraphics

Line25

24ways

4-) Noupe

5-) PSDFan

6-) Nettuts

7-) SixRevisions

8-) NaldzGraphics

9-) SmashingMagazine

10-) VandelayDesign

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