Linear-gradient özelliğinin kullanılışı

Aslında olayın sırrı, Internet Explorer için yazılmış küçük bir filter satırında gizli. Hani şu Opacity vermek için de kullandığımız filter‘dan söz ediyorum. O nedenle yabancılık çekeceğinizi hiç sanmıyorum. Html ve CSS temellerini içeren detaylara girip konuyu gereksiz uzatmadan, direkt olarak özelliğin kullanılış şeklini göstermek istiyorum.

Bildiğiniz üzere CSS 3′ün neredeyse bütün özelliklerini mozilla ve webkit tarayıcıları için ayrı ayrı yazıyoruz. Linear-gradient için de aynı şekilde yazmamız gerekiyor. Class’ın adı örnek olarak .gradient ve kullanılan renk kodları: #354bb8 ve #1a3366. Elbette bunları istediğiniz gibi değiştirebilmeniz mümkün.

Safari ve Chrome için:

.gradient {-webkit-gradient(linear, left top, left bottom, from(#354bb8), to(#1a3366));}

Firefox için:

.gradient {background: -moz-linear-gradient(top, #354bb8, #1a3366);}

Buraya kadar her şey bilindiği gibi. Bundan sonra ekleyeceğimiz filter özelliği ile linear-gradient’i Internet Explorer’ın bütün versiyonlarında kullanabilirsiniz:

Internet Explorer için:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#354bb8', endColorstr='#1a3366');

Örneği tarayıcılarınızda test etmek için: DEMO LİNKİ>>

1) Gradient

CSS 3.0′ın bize sunduğu en güzel nimetlerden biri olan Gradient özelliğinin Linear Gradient ve Radial Gradient olmak üzere 2 farklı kullanımı var. Ve bu özellikleri DIV, SPAN, P gibi bütün HTML elementlerinde kullanabiliyorsunuz. Bu özellik sayesinde, hiç resim dosyası kullanmadan gradientli butonlar ve arkaplan görüntüleri yapmak  artık mümkün oluyor. Böylece web sitelerinin yüklenme hızları da katbekat artıyor.

Şimdilik destekleyen tarayıcılar: Firefox 3.5+ , Chrome 2+, Safari 4+

Linear Gradient

Firefox için kullanım şekli:

background-image: -moz-linear-gradient(top, #F00, #F60)

<img class="size-full wp-image-3522 alignnone" title="css-3-linear-gradient" src="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-linear-gradient.jpg" alt="" width="200" height="150" />

Webkit tarayıcıları için kullanım şekli:

background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #F60),color-stop(1, #F00))

Radial Gradient

Firefox için kullanım şekli:

background-image: -moz-linear-gradient(top, #F00, #F60)

Webkit tarayıcıları için kullanım şekli:

background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #F60),color-stop(1, #F00))

<img class="size-full wp-image-3525 alignnone" title="css-3-radial-gradient" src="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-radial-gradient.jpg" alt="" width="200" height="150" />

<strong>Örnekler:</strong> <a href="http://css-tricks.com/examples/CSS3Gradient/">http://css-tricks.com/examples/CSS3Gradient/</a>

2) Açılı Döndürme

CSS 3′ün transform özelliği ile birlikte gelen yeteneklerinden biri de, bütün html elementlerini verilen bir açı değerine göre döndürmesi.

Destekleyen tarayıcılar: Firefox 3.5+ , Chrome 2+, Safari 4+

Kullanım Şekli:

-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);

<img class="alignnone size-full wp-image-3526" title="css-3-transform" src="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-transform.jpg" alt="" width="234" height="197" />

Örnekler: http://css3.bradshawenterprises.com/

3) Yansıma

Favorilerimden biri kesinlikle bu özellik. Yazılara ve DIV’lere yansıma  özelliği vererek harikalar yaratabiliyorsunuz. Şimdilik sadece Chrome ve Safari tarafından destekleniyor. Umarım yakında Firefox tarafından da desteklenir.

Kullanım Şekli:

-webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(100, 100, 100, 0.4)));

<a href="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-reflection.jpg"><img class="alignnone size-full wp-image-3527" title="css-3-reflection" src="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-reflection.jpg" alt="" width="232" height="188" /></a>

Örnek: http://jcargoo.110mb.com/cssreflection/

4) Yeniden Boyutlandırma

CSS 3′ün resize özelliği ile DIV’leri mouse ile tutup sürükleyerek yatay ve dikeyde boyutlandırabiliyoruz. Yani bir kutunun büyüklüğünü gerçek zamanlı olarak istediğimiz kadar değiştirebiliyoruz. Aşağıdaki örnekten ne demek istediğimi daha iyi anlayacaksınız. Bu özelliği de şimdilik sadece Chrome ve Safari destekliyor.

Kullanım Şekli:

overflow: hidden;
resize: both;

<img class="alignnone size-full wp-image-3528" title="css-3-resize" src="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-resize.jpg" alt="" width="223" height="136" />

Örnekler: http://www.css3.info/preview/resize/

5) Kenar Çizgi Aralığı

CSS 3′ün outline-offset özelliği ile sahip olduğu bu yetenek de kutulara verdiğimiz çerçeve çizgisine aralık vermeye yarıyor. Yani kutunun kenar çizgisini belirlediğimiz bir değer kadar kenarlardan uzaklaştırabiliyoruz. Chrome veya Safari ile aşağıdaki örnekte ne demek istediğimi görebilirsiniz.

Kullanım Şekli:

outline: solid 1px #f00;
outline-offset: 5px;

<img class="alignnone size-full wp-image-3530" title="css-3-outline-offset" src="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-outline-offset.jpg" alt="" width="225" height="167" />
<strong>
</strong>

Örnek: http://www.css3.info/preview/outline/

CSS 2.1 şemasında Font, Text, Margin, Padding, Border, Position, Background, List ve Media özellikleri ile aldığı değerler gösteriliyor. CSS 3′te ise tanıştığımız günden bu yana neredeyse her projemizde kullanmak istediğimiz yuvarlak köşe ve gölge özelliklerinin yanında Multiple Column, RGBa, Font Face, Box Resize, Outline ve Gradient özelliklerini aldığı değerlerle birlikte görebiliyorsunuz. Tabi ki CSS’in bütün özellikleri bu şemada bulunanlarla sınırlı değil. Ama bu şemaların asıl amacının, en çok kullanılan özellikleri bir araya getirerek web tasarımcılara kullanım kolaylığı sağlamak olduğunu düşünüyorum.

Her iki şemayı da aşağıdaki linklerden isterseniz resim dosyası şeklinde görüntüleyebilir isterseniz PDF formatında bilgisayarınıza indirebilirsiniz.

CSS 2.1 Özellik Şeması: Görüntüle

CSS 2.1 Özellik Şeması: İndir (PDF, 0.2 MB)

CSS 3.0 Özellik Şeması: Görüntüle

CSS 3.0 Özellik Şeması: İndir (PDF, 0.2 MB)

Html 5

CSS ile ilgilenip de Html 5′ten haberi olmayan bir web tasarımcı olduğunu hiç sanmıyorum. Henüz bütün tarayıcılar tarafından bütün özellikleri ile birlikte desteklenmese de, meraklıları olarak Safari, Chrome gibi yeni nesil tarayıcılarla Html 5 örneklerini incelemeye çoktan başladık bile. CSS 3 ve Html 5‘in birlikte kullanımıyla ortaya ne derece müthiş çalışmaların çıktığına hepimiz şahit oluyoruz.  Eğer siz de Html 5 yazmaya başladıysanız ya da bir an önce başlamak istiyorsanız, Veign.com tarafından hazırlanan Html 5 özellik şeması sizin için rehber niteliğinde bir kaynak olacaktır.

Aynı şekilde bu şemayı da aşağıdaki linklerden resim dosyası şeklinde görüntüleyebilir ya da PDF formatında indirebilirsiniz.

Html 5 özellik şeması: Görüntüle (.gif, 1017×836px)

Html 5 özellik şeması: İndir (76 Kb)

Ben de blogumda font-face kullanmaya başladığımdan olsa gerek, konu ile ilgili ayrıntılı bir makale yazmak istedim. (Blogumdaki font-face özelliğini görmeniz için tarayıcınızın geçmişini silmeniz gerekebilir.) @font-face’in bütün tarayıcılarda aynı sonucu alacak şekilde nasıl kullanılacağından bahsetmek istiyorum. @font-face’i doğru kullandığınız takdirde aşağıdaki tarayıcılarda düzgün çalıştırabilir ve istediğiniz fontları web sitenizde sorunsuz kullanabilirsiniz:

• Safari 3.1+
• Opera 10+
• Firefox 3.5+
• Chrome 4.0+
• Internet Explorer 6+

Bütün tarayıcılarda @font-face kullanımı

Font dosyalarınızın bir arada düzgün bir şekilde bulunmasını sağlamak için ilk yapacağınız şey, sunucunuzda “fonts” klasörü oluşturmak olsun. Fontlarınızı bu klasöre kopyaladıktan sonra aşağıdaki satırları CSS dosyanıza yerleştirin. Font seçerken, türkçe karakterleri destekliyor olduğuna dikkat etmelisiniz. Yoksa türkçe karakterleri sistem fontu olarak gösterir. Bunun da pek hoş bir görüntü oluşturduğunu söyleyemem. Gelelim @font-face satırlarına…

@font-face { /* declare fonts */
	font-family: "MuseoLight";
	src: url("fonts/Museo300-Regular.;feot");
	src: local("Museo 300"), local("Museo-300"),
		url("fonts/Museo300-Regular.woff") format("woff"),
		url("fonts/Museo300-Regular.otf") format("opentype"),
		url("fonts/Museo300-Regular.svg#Museo-300") format("svg");
		}

Fontları çağırdığınız bağlantı yollarının doğru olduğundan emin olmalısınız. Bu satırlarda örnek olarak kullanılan MuseoLight font ailesini istediğiniz gibi değiştirebilirsiniz.

Daha sonra da bu fontu sitenin neresinde kullanacaksanız, CSS dosyasına bu özelliği aşağıdaki gibi tanımlamanız yeterli olur.

h1 { font: 24px/1 MuseoLight, Verdana, sans-serif; }
		h2 { font: 18px/1 MuseoLight, Verdana, sans-serif; }
		h3 { font: 14px/1 MuseoLight, Verdana, sans-serif; }

@font-face’in bütün tarayıcılarda düzgün çalışacak şekilde kullanımı bu kadar basit aslında.

Fark ettiğiniz üzere, bir fontu kullanabilmek için birden fazla font uzantısı kullanmamız gerekiyor. Bunun sebebi en çok kullanılan font uzantısı olan TTF’nin bütün tarayıcıların bütün versiyonları tarafından desteklenmiyor olması.  Hatta Internet Explorer yine yapacağını yapıyor ve hiç bir versiyonunda TTF uzantısını desteklemiyor. Aşağıdaki tabloda hangi font uzantılarının hangi tarayıcılar ve versiyonlar tarafından desteklendiğini görebilirsiniz.

Font uzantılarını değiştirme

İsterseniz font uzantılarını birbirine çeviren ücretsiz programları indirip kullanabilirsiniz. Ama TTF uzantısını font-face’de kullanılan bütün uzantılara çevirebilen bir o kadar çok online araç varken, program indirmekle uğraşmanıza gerek yok. Bunların bana göre en iyisi fontsquirre, bu işin başarıyla üstünden geliyor.

@font-face kullanımına örnekler

İlk örneği zaten OZD Tasarım’ın yeni halinde görüyorsunuz. Tasarıma hem alışılmışın dışında bir hava hem de daha şık bir görünüm kazandırdığı kesin. Daha fazla örnek görmek isteyenlere bu sayfayı tavsiye ederim. Bu örnekleri gördükten sonra siz de sitenize @font-face’i uygulamak isteyebilirsiniz. Yeniliklere açık olun ve denemekten çekinmeyin.

En son web teknolojilerini destekleyen tarayıcılara “yeni nesil tarayıcı” denildiği gibi o teknolojiyi kullanan tasarımcıya da “yeni nesil web tasarımcı” diyebiliriz bence. Ve bu konuyla ilgili giriş paragrafından iki ana başlık çıkarabiliriz.

1. Trendi takip etmenin yolları

2. Web tasarım trendleri

Konuyu birbiriyle doğrudan bağlantılı bu başlıklar halinde incelediğimizde,  yeni nesil web tasarımcı olmak için gerekli ipuçlarını öğrenmiş olacaksınız.

1. Trendi takip etmenin yolları

Yeni nesil web tasarımcı olmanın yolu bu sektörde trendi takip etmekten geçiyor. Hızla gelişen ve dolayısıyla değişen web teknolojisini takip etmek kolay sayılsa da işiniz sadece takip etmekle bitmiyor. Bir de o teknolojiyi öğrenip web sitelerinizde kullanmanız gerekiyor. Bu da tabi ki fazladan efor ve zaman kaybı demek. Ama bunu başardığınızda, size getirdiği itibar ve finansal kazanç, harcadığınız emeğe kesinlikle değer.

Blogları takip edin: Web tasarım trendini takip etmenin en kolay yolu, dünyanın belki de en iyi freelance tasarımcılarının düzenli olarak yazdığı web tasarım bloglarını okumaktır. İngilizceniz olmasa bile “mavi renk kullanılan web siteleri”, “grunge efektli web siteleri” gibi güzel web sitelerinden derlenen harika örnekler yayınlanıyor. Bu tasarımları incelemek için ingilizcenizin olması gerekmiyor. Ayrıca Webrazzi, Bilgirgec gibi internet dünyasını yakından izleyen Türkçe blogları mutlaka düzenli olarak okuyun.

Sosyal Medyada Yer Alın: Zamanınızı Facebook’ta sadece Farmville oynayıp, komik video izleyerek geçirmek yerine sosyal medyayı iş konusunda lehinize çevirebilirsiniz. Sosyal medya ortamlarında tasarım gruplarına katılın ve aktif olarak yer alın. Beğendiğiniz web tasarımcıların Twitter sayfalarını takip edin. Araştırmalara göre, haberler en hızlı sosyal medya ortamlarında yayılıyormuş. Tasarım dünyasındaki haberleri de en hızlı sosyal medyadan öğrenebilirsiniz.

Sörf yapın: Sörf yapma sözünü uzun zamandır kullanmıyorum sanırım. İnternette gezmenin adına “sörf yapmak” diyorduk yıllar önce : ) Sadece blogları değil, ne kadar çok web sitesi gezerseniz aklınızda o kadar fazla tasarım kalacaktır. Sitelerde ilk defa karşılaştığınız özellikleri ve stilleri inceleyin. Sadece “güzelmiş” diyip geçmeyin. Beğendiyseniz onu öğrenmenin bir yolunu bulun. İnternette istemediğiniz kadar tasarım dersi bulunuyor.

Esinlenin: Tasarımda trendi takip ederken kendinizi geliştirmenin en basit yolu esinlenmektir. Beğendiğiniz tasarımlardaki yeni stilleri öğrenerek tekniğinizi geliştirin. Bu noktada dikkat etmeniz gereken nokta, tasarımın aynısını kopyalayıp çalmak yerine esinlenerek kendi  tarzınızı yaratmaya çalışmaktır. Böylelikle trendi kendinize göre yorumlamış olacaksınız.

2. Web tasarım trendleri

Web tasarım trendleri bir yana, yeni nesil web tasarımcı olmanın bana göre ilk koşulu, öncelikle Table‘lardan tamamıyla vazgeçip html kodlaması için DIV kullanmaya başlamanızdır. Eğer hala Table ile kodlama yapıyorsanız daha fazla geç kalmamak için bir an önce Div yapısına alışsanız iyi olur.

Hiç kuşkusuz, web tasarım trendine bu yıl CSS 3 ve Jquery hakim. Tarayıcıların CSS 3′ü hala bütün özellikleriyle desteklememesini de düşünürsek, bu trend en az bir kaç yıl daha devam edecek gibi geliyor. CSS 3 ve Jquery’nin hayatımıza girişi ile birlikte bakalım web sitelerinde neler moda?

@font-face:

Arial, Times New Roman gibi standart sistem fontlarını web sitelerinde kullanmaktan sıkılanlar ya da başlıklarda ve Header, Banner gibi özel alanlarda farklı yazı tipi kullanmak isteyenler, daha önce sIFR, Cufon gibi Flash ve Javascript’in ortak uygulamalarını kullanmak zorunda kalıyordu. Bu da oldukça zahmetli bir uygulamaydı. CSS 3 dahilinde @font-face özelliğinin yayınlanmasıyla birlikte kullanım kolaylığı dolayısıyla hızlıca yaygınlaştı. Neredeyse bütün yeni web sitelerinde karşılaşmaya başladık.

Siz de aşağıdaki satırları CSS dosyasına ekleyerek, sitenizde @font-face kullanmaya bir an önce başlasınız iyi olur. Böylece daha etkileyici başlıklar ve Header’lar oluşturabilirsiniz.

@font-face {
font-family: Helvetica;
src: url(http://site/fonts/Helvetica.ttf);
}

Bütün tarayıcılarda sorunsuz olarak çalışması için Fatih Hayrioğlu‘nun konuyla ilgili bu yazısından yardım alabilirsiniz.

Text-shadow:

Şüphesiz CSS 3′ün en çekici özelliklerinden biri text-shadow. Internet Explorer ısrarla desteklememeye devam etse de Firefox, Chrome, Safari gibi yeni nesil tarayıcı kullanıyorsanız, sitelerde sıkça kullanılmaya başlanan gölgeli yazılarla siz de karşılaşmışsınızdır.

Kullanımı da çok basit. text-shadow: #000 1px 1px 1px şeklinde yazarak istediğiniz gibi düzenleyebilirsiniz.
border-radius: explorer desteklemiyormuş, kimin umurunda? Explorer’ın kendisi utansın.

Box-shadow:

Son zamanlarda web sitelerinde gölgeli kutulara rastlıyoruz. CSS 3′te box-shadow özelliği ile DIV’lere gölge vererek sitedeki kutuların gölgeli görünmesini sağlayabiliyorsunuz. Explorer desteklemese de diğer tarayıcılarda sitenizin daha şık görünmesini sağlayabilirsiniz.

Box-shadow’un Mozilla (Firefox) ve Webkit (Safari, Chrome..) tarayıcıları şeklinde olmak üzere 2 farklı şekilde kullanımı var.

-moz-box-shadow: #000 1px 1px 1px

-webkit-box-shadow: #000 1px 1px 1px

Renk kodu ve gölge değerleri ile oynayarak farklı stiller elde edebilmeniz mümkün. Bu sayfadaki örnekler işinize yarayabilir.

Border-radius:

Ve nihayet yuvarlak köşeler yapmak için imaj kullanmak zorunda değiliz artık. DIV’lerin köşelerini box-radius özelliği ile istediğimiz yarı çapta yuvarlayabiliyoruz. Box-shadow ve box-radius’ü bir arada kullanarak çok şık kutular oluşturulabiliyor. Siz de bu şekilde bir kullanıma alışmakta iyi edersiniz.

Border-radius de aynen box-shadow’da olduğu gibi mozilla ve webkit için ayrı ayrı yazılmak zorunda.

Bütün köşelerin yarı çapı aynı olduğu durumlarda;

-moz-border-radius: 5px

-webkit-border-radius: 5px

Ancak her köşe için ayrı ayrı yarı çap yazılan durumlarda kullanımı Mozilla ve Webkit özelliklerinin yazılımı biraz farklı.

Mozilla tarayıcıları için;

• -moz-border-radius-topleft:5px
• -moz-border-radius-topright:4px

• -moz-border-radius-bottomleft:5px
• -moz-border-radius-bottomright:2px


Webkit tarayıcıları için;

• -webkit-border-top-left-radius: 5px
• -webkit-border-top-right-radius: 4px
• -webkit-border-bottom-left-radius: 5px
• -webkit-border-bottom-right-radius: 2px


Jquery:

Yazılımcıların yanında tasarımcıların da yeniden javascript’e yönelmesini sağlayan bir javascript kütüphanesi, Jquery. Özellikle görsel etkiler üzerine geliştirilmiş yapısıyla birbirinden güzel animasyonlu menüler, resim slaytları ve daha bir çok hareketli yapılar hazırlanabiliyor Jquery ile. Ajax bilen yazılımcılar çok daha gelişmiş uygulamalar hazırlayabilir pek tabi. Ama hiç javascript bilmeyen tasarımcıların bile html kodlarına kolaylıkla ekleyebileceği şekilde basit ve kullanışlı bir yapısı var.  Bu nedenle 2009′dan itibaren en çok kullanılan, neredeyse 3 siteden 2′sinde karşılaştığımız Jquery ile küçük ama etkileyici uygulamalar oluşturabilirsiniz. Bu müşterilerinizin de hoşuna gidecektir.

Örnek olarak referanslarımdan biri olan www.camateknik.com ‘da ana menüye Jquery ile uyguladığım  animasyonu inceleyebilirsiniz. Sitelerinizde hala flash menü kullanıyorsanız, Jquery’e geçme vaktiniz gelmiş demektir.

Tipografi:

Web 2.0 anlayışının iyice benimsenmesi ve yaygın olarak kullanılmaya başlanmasıyla birlikte, web tasarımında da tipografi düzenine çok önem veriliyor artık. Önem sırasına göre düzenlenen yerleşim düzeni ve yazı tipi boyutlarının doğru seçimi ile siz de web tasarımında tipografiye önem vermelisiniz. Web tasarımında tipografi ile ilgili daha kapsamlı bir yazı yazmayı düşünüyorum. Şimdilik aşağıdaki örnekleri inceleyerek ne demek istediğimi anlayabilirsiniz.

Makaleyi beğendiniz mi?

Konu ile ilgili aklıma gelenler bunlar. Umarım beğenmişsinizdir. Web tasarımcıların kendini yenilemesi ve geliştirmesi için önemli ipuçlarından bahsettiğimi düşünüyorum. Eğer unuttuğum varsa sizin yorumlarınızla eksikleri beraber tamamlayabiliriz.

Makale ile ilgili yorum ve eleştiri yapmaktan çekinmeyin.

“Bunu kesinlikle web sitemde kullanmalıyım” dediğim ve  sizin de mutlaka beğeneceğinizi düşündüğüm tam 10 adet  CSS3 & Jquery çalışmasını bir araya getirdim. Özellikle düzenli olarak takip ettiğim Tympanus.net bu konuda etkileyici örnekler sunmaya ve ücretsiz paylaşıma açmaya devam ediyor. Ben de bu makaleyi hazırlarken  Tympanus’tan faydalandım.

Bu uygulamaları kullanmak için dosyaları indirip, javascript ve css dosyası ile birlikte html sayfasındaki ilgili yapıyı kendi sayfanıza ekleyin. Daha ayrıntılı bilgi için resimlere tıklayarak istediğiniz uygulamanın orijinal sayfasına gidebilir ve ingilizce açıklamalardan faydalanabilirsiniz. Ayrıca yine hatırlatmakta fayda var: Bu uygulamaların bir çoğu Internet Explorer’da çalışmıyor. Bütün özellikleri ile birlikte görüntülemek için Safari’yi tercih edin.

Kayarak açılan buton

Photoshop.com‘da Flash kullanılarak yapılan bir butondan etkilenerek hazırlanmış sevimli bir uygulama. Ve hiç imaj dosyası kullanmadan sadece CSS 3 ile şekil verilip Jquery ile de hareketlendirilerek hazırlanmış.

Demo | İndir

Kayarak ortaya çıkan nagivasyon menü

Menüdeki butonların üstüne gelindiğinde kayarak ortaya çıkan butonlarda gidilecek sayfayla ilgili bir de açıklama yer alıyor. Menünün siyah-beyaz olması da ayrı bir güzellik katmış.

Demo | İndir

Grunge tarzı açılı sayfa ve kayan menü

CSS 3′ün transform özelliği ile sayfanın ve menünün belli bir açıda görünmesi sağlanarak hazırlanmış konsept bir çalışma. Butonlar üstüne gelindiğinde farklı açılarda kayarak ortaya çıkıyor.

Demo | İndir

Yeniden boyutlandırılabilen menü

Bazı durumlarda navigasyon menünüzü bulunduğu alana göre kısaltmak ya da uzatmak isteyebilirsiniz. Bunu, CSS 3 ve biraz da Jquery ile hazırlanmış bu çalışmayı kullanarak sağlayabilirsiniz.

Demo | İndir

Kayarak ortaya çıkan navigasyon menü

Üstüne gelindiğinde ikon ile birlikte ortaya çıkan butonlardan oluşan çok güzel bir navigasyon.

Demo | İndir

Gündüz & Gece Animasyonu

Gündüzden geceye dönüşümü animasyon şeklinde gösteren, ağırlıklı olarak Jquery ile hazırlanmış oldukça yaratıcı ve güzel bir çalışma.

Demo | İndir

Reklam Panosu Şeklinde Resim Galerisi

Reklam panosunda hareketli değişen resimlerden oluşan çok yaratıcı bir resim galerisi.

Demo | İndir

Kayarak gelen mesaj penceresi

Artık neredeyse her sitede kullanılan mesaj pencerelerine Jquery ile hareket vererek, bu örnekteki gibi kayarak gelmesini sağlayabilirsiniz.

Demo | İndir

Foto galerileri için mouse over efekti

Özellikle foto galerilerinizde kullanabileceğiniz Jquery ve CSS 3 ile yapılmış çok şık bir efekt. Demoda resimlerin üstüne gelince oluşan efekti görebilirsiniz.

Demo | İndir

Gerçek zamanlı değiştirilebilen stiller

Bu uygulama ile sayfanızın görünümünü gerçek zamanlı olarak değiştirebilirsiniz. Demodaki style menüsü ile ne demek istediğimi uygulamalı olarak görebilirsiniz.

Demo | İndir

Bu uygulamalar, deneyimli tasarımcıların CSS 3 tekniklerini geliştirmek ve modası geçmiş tasarımlarını yenisiyle değiştirmek için son derece kullanışlı ve etkili olacaktır. Böylelikle artık Internet Explorer 6′yı tamamen terk etmek için biraz daha yol alabilirsiniz. Yalnız şunu da belirteyim, bu örneklerin bir çoğu Jquery, Mootools gibi javascript kütüphaneleri ile bir arada kullanılmış CSS 3 teknikleridir.

CSS 3 İLE GÖRSEL EFEKTLER

Analog Saat

CSS 3′ün webkit (Safari, Google Chrome…) uyumlu transform ve transition özellikleri ile analog saatin nasıl yapıldığını görebilirsiniz. Javascript, sadece saatin gerçek zamanı göstermesi için kullanılıyor. Firefox ve Explorer’ın şu anki versiyonlarında çalışmamakta.

Hareketli Kart Destesi

Bu örnekte, sadece Html ve CSS (transform ve transition özellikleri) kullanarak hareketli kart desteleri oluşturuluyor. Ayrıca font-face, box-shadow, border-radius gibi CSS’in yeni özelliklerinin de nasıl kullanıldığını görmek için güzel bir uygulama.

PNG resimlerde Hareketli Gölge ve Işık

Önce ışığı yakın. Sonra ışığın ve logonun yerlerini mouse ile sürükleyerek değiştirin. Işığın bulunduğu konuma göre logonun gölgesinin de değiştiğini göreceksiniz. Hoşunuza gideceğini düşündüğüm çok farklı bir uygulama.

Jquery ve CSS 3 ile kayarak açılan bölüm

Sayfa içinde kayarak açılan bölümlerle ilgili bir çok javascript ve CSS 3 uygulaması var. Ancak bu diğerlerinden şıklığı ve biraz da esnek görünümü ile farkını gösterip güzel bir alternatif oluyor. Örnekteki “infos” butonuna basınca ne demek istediğimi göreceksiniz.

CSS 3 ile oluşturulmuş gösterişli overlay

Bu uygulamadaki asıl nokta, CSS’e sonradan eklenen özelliklerden biri olan border-image özelliği ile çerçevede gradient resim (turuncudan sarıya doğru renk geçişini görebilirsiniz) kullanılmış olması.

CSS 3 ile değişik arabirim tasarımları

Özellikle mobil internet sitelerinde kullanılan arabirim tasarımları çok hoşuma gidiyor. Bu örnekte de aynen mobil tasarımlardaki gibi arabirimler yapabileceğiniz uygulamalar mevcut. İncelemenizi tavsiye ederim.

Sadece CSS ile 3D şerit tasarımları

Daha çok ribbon adı ile bildiğimiz şeritleri sadece bir kaç CSS 3 özelliğini kullanarak oluşturabilirsiniz.

Jquery ve CSS 3 ile şık diyalog kutusu

Bir çok web sitesinde karşılaştığımız, diyalog kutusu diye tabir edilen ama bizim daha çok mesaj penceresi adını verdiğimiz uygulamalara sade ve şık bir örnek.

Kayarak Açılan Pencere

Sadece webkit tarayıcılar (Safari, Chrome..) için CSS 3′ün animation ve transform gibi yeni özellikleriyle oluşturulmuş bir pencere uygulaması.

CSS 3 ile sütunlu gazete taslağı

Şu sıralar gazete görünümlü bu tarz sitelere ve bloglara sık sık rastlamaya başladım. CSS 3 ile oluşturulmuş hazır gazete taslağı bu tarz bir çalışma için epey kullanışlı görünüyor.

CSS 3 İLE NAVİGASYON MENÜLER

Navigasyon Menü

Bu uygulamada Jquery ve CSS 3 kullanılarak AJAX destekli sekmeli (tab) menü yapımı anlatılıyor.

CSS 3 ile Sekmeli Navigasyon Menü

Yine CSS 3′ün yeniliklerinden faydalanarak yukarıdaki menüye alternatif bir sekmeli navigasyon oluşturabilirsiniz. Buton ve sayfalar arasındaki bağlantıyı sağlamak için elbette jquery’den faydalanılıyor.

Animasyonlu Transparan Menü

PNG resimlerde Hareketli Gölge ve Işık uygulamasından sonra en çok hoşuma giden bu oldu. Her butonun üstüne gelindiğin yan tarafta akarak beliren transparan objeler sayfanızın çekiciliğini artırabilir.

Coverflow efektli Resim Geçişleri

Coverflow efekti, flow’dan yani kayarak gelen anlamında kullanılan efektten türeyen bir tabir. Bu efektin bir çok metodu var aslında. Ancak bu örnekte CSS 3′ün Transform özellikleriyle yapılıyor.

Sadece CSS İle Tab Menü

Javascript kullanmadan, sadece CSS ile üstüne gelindiğinde değişen tab menü yapabilirsiniz. Ancak Internet Explorer’ın desteklemediğine şaşırmamanız gerekiyor.

CSS 3.0 GEÇİŞLERİ VE ANİMASYONLARI

Transition (Geçiş) özelliği ile sıradışı olun

Resim galerilerinizi diğerlerinden farklı yapmak isteyenler için şahane bir örnek. Transform ve Webkit Transition özellikleri kullanılarak yapılıyor. Bu da şimdilik sadece Safari ve Chrome’da bütün özellikleriyle birlikte düzgün çalıştığı anlamına geliyor. Diğer tarayıcılarda animasyon kısmı çalışmasa da oldukça güzel ve canlı görünüyor.

CSS 3 ile Dönerek Gelen Plak

Bir kaç albüm kapağı, bir tutam Html ve biraz da CSS 3 transitions ve transform özelliğini bir kaba koyup karıştırıyoruz. 10 dakika sonra karışımımız hazır. Karşınızda kutusundan dönerek çıkan Plak (ya da CD ile yapabilirsiniz) efekti. Bu efekt yalnızca Safari’de sorunsuz çalışıyor.

Mootools ve CSS 3 İle Sitenizi Daha Eğlenceli Yapın

Mootools’da yeni yeni kullanılmaya başlanan bir özelliği CSS 3 ile birleştirince oldukça eğlenceli işler ortaya çıkıyor. Firefox, Safari ve Google Chrome’un son versiyonlarında sorunsuz çalışıyor. Demoya kesinlikle göz atmanızı tavsiye ederim.

HTML ve CSS İle STARWARS: Yeni Umut

“Uzun bir zaman önce, çok uzak bir galakside yıldız savaşları devam ediyordu” Hiç bir şey anlamadınız değil mi? :) Örneği izleyin ve Html 5 ve CSS 3 ile neler yapılabileceğini görün.

CSS İle 3 Boyutlu Sayfalar ve Açılı Videolar

Zach Johnson, CSS 3 ile izometrik küpün yüzeylerine yazı ve video ekleyerek 3 boyutlu sayfa tasarımları yapmayı başarmış. Çok da güzel görünüyor.

CSS 3 ile Jquery Benzeri Animasyonlar

Jquery ile yapılan bazı animasyon efektlerinin aynısı CSS 3 ile yapılabiliyor. CSS 3 ve Jquery ile yapılan aynı animasyonları demoya göz atarak karşılaştırabilirsiniz. Tabi ki şu an için sadece Webkit tarayıcılarında düzgün çalışıyor.

“Yükleniyor” Animasyonu

Gezdiğiniz web sitesinin ya da evinizdeki internetin ne kadar hızlı olduğu önemli değildir. “Preload” diye ifade ettiğimiz genelikle dönerek “Yükleniyor” mesajını veren görsellere her zaman ihtiyacımız olur. “Bu sadece CSS 3 ile yapılabilir mi?” diye merak edenler için en güzel örnek.

Kar Yağma Efekti

Fazla söze gerek yok. Safari ve Chrome’da çalışan bu efekt sayesinde CSS 3 ile web sayfanıza kar yağdırabilirsiniz.

Küp Şeklinde 3 Boyutlu Sayfalar

Yukarda benzerini verdiğimiz uygulamanın başka bir örneği. Modern CSS tekniklerini kullanarak Javascript’e ihtiyaç duymadan sayfalarınızı 3 boyutlu hale getirebilmenin en kolay yolu.

CSS Transform Özelliği ile Daha Fazla 3 Boyut

Nesneleri CSS Transform özelliği ile 3 boyutlu bir görünümde dizmeyi sağlayan bir animasyon efekti.

CSS 3′TE RGBa VE HSL RENK KODLARI

RGBa Renkleriyle Çalışmak

CSS 3 bize renklerle ilgili çalışmak için yeni imkanlar sunuyor. Bunlardan bir tanesi de RGBa. Sonundaki “a” harfi rengin opasite seviyesini ( ya da transparanlık değerini) belirleyen Alpha’yı temsil ediyor. Bu teknik sayesinde Photoshop’ta tasarladığımız görsellerin benzerini CSS 3 ile oluşturabiliriz.

Resim Kullanmadan Gradient Buton Yapmak

Bütün özellikleriyle birlikte en düzgün şekilde sadece webkit tarayıcılarında görünen bu örnekte, hiç resim kullanmadan Photoshop’ta tasarladığınız gradientli parlak butonların aynısını CSS 3 ile nasıl yapabileceğiniz anlatılıyor.

CSS 3′te HSL Ve HSLA Renk Kodları

CSS 3′ün bize sunduğu diğer bir renk kodu tekniği de HSL. Bütün tarayıcıların desteklediği bu teknik, CSS 3 ile gradient oluşturmak için oldukça kullanışlı görünüyor.

CSS 3 ile Şık Buton Tasarımı

CSS 3′ün en güzel nimetlerinden biri de Photoshop’la uğraşmadan oldukça şık buton tasarımları yapmak için gerekli bütün özelliklere sahip olması sanırım. Ne kadar az resim dosyası kullanırsak sitemizde o kadar az yer kaplayacağı için sitenin daha hızlı olması açısından da çok kullanışlı bir teknik bu.

CSS 3′TE GÖLGE ÖZELLİĞİNİN KULLANIMI

Text-shadow Özelliği ile gömülü yazı efekti

Son zamanlarda ben dahil bir çok web tasarımcının en çok kullandığı CSS 3 özelliklerden biri olan text-shadow sayesinde içe doğru gömülü gibi görünen yazılar oluşturabilirsiniz. Firefox, Safari, Chrome gibi bütün  modern tarayıcıların bu özelliği destekliyor olması da tercih edilmesindeki en büyük etken sanırım. Çok kolay ve kullanışlı bu teknik sayesinde web sitenizde kusursuz bir görünüm elde edebilirsiniz.

CSS 3 İle Gelen Gölge Efektleri

Artık neredeyse bütün tasarımlarımda kullandığım box-shadow ve text-shadow özellikleriyle web sitelerinde hem yazılara hem de kutulara (çerçevelere) gölge verebilisiniz. Aslında aşağıdaki örnek her şeyi açıklıyor. Fazla söze gerek yok, siz en iyisi örneği inceleyin.

CSS 3 İLE RESİM GALERİLERİ

CSS 3 ile Polaroid Fotoğraf Galerisi

CSS’in yeni özelliklerini bir arada kullandığımız zaman, artık sihir yapmak bile mümkün hale geldi :)  Polaroid fotoğraf görünümlü kusursuz bir resim galerisinin CSS ile nasıl yapıldığına bir göz atalım.

Jquery ve CSS 3 İle Lightbox Resim Galerisi

Bu derste Jquery ve CSS 3′ün en yeni teknikleri ile lightbox (tıklanınca açılan kutu içinde resim gösterimi) ve sürükle & bırak özelliğine resim galerisi yapımı anlatılıyor. Ve scriptin en önemli özelliği web sunucunuzda bulunan bir resim klasörünün içindeki resimlerle bir galeri oluşturabilmesi.

Düzenlenebilir CSS 3 Resim Galerisi

Html 5, Jquery ve CSS 3′ün birlikte kullanımı ile oluşturulan bu resim galerisi, aynı zamanda web tasarımcıların kullandığı bir içerik yönetim sistemi olan Pagelime için uyumlu bir yapıya sahip.

CSS 3 HACKLERİ

CSS 3 İle Internet Explorer ‘da Yuvarlak Köşe

CSS 3′ün yuvarlak köşe oluşturmayı sağlayan border-radius özelliğini Internet Explorer hariç şu an piyasadaki bütün tarayıcılar destekliyor. Bu htc dosyası sayesinde Internet Explorer da bu özelliği desteklemeye başlıyor.

Bu hack’le Overflow: hidden ‘a güle güle

Özellikle divlere gölge veren box-shadow özelliğinde yaşadığımız sorun bu hack ile ortadan kaldırılıyor.