Posts Tagged "css"
35+ CSS 3 & Javascript Uygulaması
Bilindiği üzere CSS 3 tamamıyla gelmek üzere ve henüz malesef sınırlı sayıda tarayıcı CSS 3′ü destekliyor. Tasarımcılar olarak CSS 3′ün kullanışlı ve çekici özellikleriyle deneyim kazanmaya başladıkça demode olmuş eski tarayıcılara burun kıvırmaya başlayıp, yeni nesil modern tarayıcıları tercih eder olduk. Bu sektörde güncel kalmanın en akla yatkın çözümü de modern tarayıcılara geçerek gelecekte daha çok kullanacağımız CSS 3′ü öğrenmek zaten. Aslında bu makalenin amacı yakın gelecekte CSS 3 tekniğiyle neler yapmanın mümkün olacağına kısaca göz atmak diyebiliriz. Çünkü aşağıdaki örnekler günümüzde çok da yaygın olmayan uygulamalar.
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.
CSS ve JQuery ile hareketli navigasyon menü
Apple’ın kurumsal kimliği dahilindeki grafik tasarım stili her zaman hoşuma gitmiştir. Bu stili web sitelerinde kullanmak isteyen tasarımcılar için tympanus.net, CSS ve Jquery ile hazırlanmış çok güzel bir navigasyon menü dersi yayınlamış. Menü ilk bakışta gerçekten de Apple stiline çok benziyor. Ancak butonların üstüne gelindiğinde kayarak ortaya çıkan ikonlar, menüyü Apple stilinden bir adım öteye taşıyıp kendine özgü göz alıcı bir fark yaratıyor. Fare imlecini butonun üstünden çektiğimizde ikonlar tekrar kayarak kayboluyor. Diğer yandan ikonların butonların üstünden gelip, altına gitmesi bir anlamda “oyun kartı karıştırma” efektini andırıyor.
Menüde kullanılan ikonlar Dyricons.com‘da lisanslı olarak bulunduğundan burada paylaşmak istemedim. Ancak yine aynı sitede bulunan ücretsiz ikon setlerinden faydalanabilir ya da kendi arşivinizden istediğiniz ikonu kullanabilirsiniz.
Şimdi gelelim menünün hazırlanışına…
HTML
Html yapısı sırasız olarak dizilmiş liste elementlerinden ve bunların içine link ve ikonlar için yerleştirilmiş span elementlerinden oluşuyor.
CSS
CSS Stili sırasız olup aşağıdaki gibidir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
<span style="color: #252525;">.navigation{
position:relative;
margin:0 auto;
width:915px;
}
ul.menu{
list-style:none;
font-family:"Verdana",sans-serif;
border-top:1px solid #bebebe;
margin:0px;
padding:0px;
float:left;
}
ul.menu li{
float:left;
}
ul.menu li a{
text-decoration:none;
background:#7E7E7E url(../images/bgMenu.png) repeat-x top left;
padding:15px 0px;
width:128px;
color:#333333;
float:left;
text-align:center;
border-right:1px solid #a1a1a1;
border-left:1px solid #e8e8e8;
font-weight:bold;
font-size:13px;
-moz-box-shadow: 0 1px 3px #555;
-webkit-box-shadow: 0 1px 3px #555;
text-shadow: 0 1px 1px #fff;
}
ul.menu li a.hover{
background-image:none;
color:#fff;
text-shadow: 0 -1px 1px #000;
}
ul.menu li a.first{
-moz-border-radius:0px 0px 0px 10px;
-webkit-border-bottom-left-radius: 10px;
border-left:none;
}
ul.menu li a.last{
-moz-border-radius:0px 0px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
}
ul.menu li span{
width:64px;
height:64px;
background-repeat:no-repeat;
background-color:transparent;
position:absolute;
z-index:-1;
top:80px;
cursor:pointer;
}
ul.menu li span.ipod{
background-image:url(../icons/ipod.png);
left:33px; /*128/2 - 32(half of icon) +1 of border*/
}
ul.menu li span.video_camera{
background-image:url(../icons/video_camera.png);
left:163px; /* plus 128 + 2px of border*/
}
ul.menu li span.television{
background-image:url(../icons/television.png);
left:293px;
}
ul.menu li span.monitor{
background-image:url(../icons/monitor.png);
left:423px;
}
ul.menu li span.toolbox{
background-image:url(../icons/toolbox.png);
left:553px;
}
ul.menu li span.telephone{
background-image:url(../icons/telephone.png);
left:683px;
}
ul.menu li span.print{
background-image:url(../icons/print.png);
left:813px;
}
</span> |
JAVASCRIPT
İlk önce ikonların kaybolma efekti oluşturuluyor, daha sonra üstüne gelince ortaya çıkması için li elementleri tanımlanıyor.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<span style="color: #252525;">$(function() {
var d=1000;
$('#menu span').each(function(){
$(this).stop().animate({
'top':'-17px'
},d+=250);
});
$('#menu > li').hover(
function () {
var $this = $(this);
$('a',$this).addClass('hover');
$('span',$this).stop().animate({
'top':'40px'
},300).css({
'zIndex':'10'
});
},
function () {
var $this = $(this);
$('a',$this).removeClass('hover');
$('span',$this).stop().animate({
'top':'-17px'
},800).css({
'zIndex':'-1'
});
}
);
});
</span> |
Hepsi bu kadar!
Jquery 1.3.2.js’i ve html sayfasına eklenmesi gereken diğer satırları menüyü indirerek görebilirsiniz.
Devamını Oku2010 Web Tasarım Trendleri
Sitenin kurulumu, güvenlik ayarları, Türkçe’ye çevirisi, düzenlemesi vs derken ilk makalemi yayınlamak biraz zaman aldı ama yine de “geç olsun, güç olmasın” diyerek karşınızda olmaktan son derece mutluyum.
Her şeyin bir modası olduğu gibi web tasarımın da bir modası var elbette. Ve bu moda, web teknolojisinin gelişmesiyle doğru orantılı olarak o kadar hızlı değişiyor ki takip etmekte zorlanmaya başladık. Çok değil, daha bir kaç önce yaptığımız en küçük bir buton tasarımı bile bugün demode olabiliyor. Yeni stillere gözümüz alıştığından kendimiz dahi eski tasarımlarımızı beğenmeyebiliyoruz. O nedenle sadece yazılım değil tasarım konusunda da sektörü takip etmemiz, eski tasarımlarımızı yeni trendlere göre güncellememiz gerekiyor.
Yılın modası: CSS 3
2010′a henüz girmişken, web tasarımların bu yıl daha eğlenceli ve deneysel çalışmalar olacağını tahmin ettiğimi söyleyebilirim. CSS 3.0 ve Html 5‘in kullanılmaya başlanmasıyla birlikte tasarımcılar ve yazılım geliştiriciler daha etkileyici web siteleri oluşturmak için yeni özellikler kullanmayı deniyorlar. Gelişigüzel tasarlanmış büyük arkaplan resimleri artık pek kullanılmaz oldu. Serifli yazı tipleri ve döşeli arkaplanlar bu yıl çok tercih ediliyorlar. Bir çok web sitesinde sıklıkla görmeye başladığımız yuvarlak köşeler, gölgeli ve transparan tasarımları hiç resim dosyası kullanmadan oluşturmamızı sağlayan CSS 3’e teşekkürü bir borç biliriz:)
Mobil tasarımlar yaygınlaşıyor
Diğer bir yandan, neredeyse küçük bir bilgisayar görevi gören cep telefonlarının yaygınlaşmasıyla mobil web tasarımlar da bu yıl yükselişe geçecek gibi görünüyor. Ülkemizde de geniş kitlesi olan websitelerinin mobil versiyonları çıkmaya başladı. Tasarımcılar kendilerini bu konuda ne kadar kısa sürede geliştirirse, maddi getirisi de o kadar çok olacaktır.
Artık bu yılın web trendi haline gelecek görsel stilleri ana başlıklar halinde örnekleriyle birlikte inceleyebiliriz:
SERİFLİ YAZI TİPLERİ
Son 10 yılda web sitelerinde serifsiz (sans-serif) diye tabir ettiğimiz Verdana ve Arial haricinde neredeyse başka hiç bir yazı tipi kullanılmadı desek yalan olmaz sanırım. Fakat önümüzdeki 10 yılda web sitelerinde serifsiz fontlar yerini Times New Roman gibi serifli fontlara bırakacak gibi görünüyor.
BÜYÜK BAŞLIKLAR
Web sitelerinin Header (en üst) bölümünde kullanılan büyük puntolu başlıkları 2010 yılında daha çok göreceğiz.
ÖZEL FONT KULLANIMI
CSS 3′ün en güzel özelliklerinden biri olan @font-face sayesinde, web sitelerine sistemde olmayan yazı tipleri yerleştirilebiliyor. Böylece Arial, Verdana, Times New Roman gibi web sitelerinde görmekten sıkıldığınız yazı tipleri haricinde istediğiniz yazı tipini sitenize yerleştirebilirsiniz. 2010’da web sitelerinde bu özellikle daha sık karşılacağımıza eminim.
DÖŞELİ VE DOKULU ARKAPLANLAR
Web 2.0 anlayışının ve CSS’in web tasarımında yer edinmesiyle birlikte büyük arkaplan resimleri ortadan tamamıyla kalkıp, yerini yanyana dizilerek tüm siteye döşenen küçük boyutlu dokulu arkaplanlar alıyor.
MİNİMALİST VE GRİD TASARIMLAR
Bir kaç yıldır gördüğümüz minimalist ve grid tasarımlar 2010’da daha popüler olacağa benziyor. Çok beğendiğim bir tarz olan minimalist web tasarımlarıyla ilgili bir makale yazmayı planlıyorum.
CSS 3.0 İLE GELEN YENİ ÖZELLİKLER
CSS 3’ün bütün özellikleri hala her tarayıcı tarafından desteklenmiyor. Ancak tasarımcılar yuvarlak köşe, gölge, çoklu arkaplan, transparanlık, çerçeve resmi (border-image) gibi CSS 3’ün bir çok özelliğinde deneyim kazanmaya başladılar. CSS’in şu an için sadece webkit (Chrome, Safari) tarayıcıları tarafından desteklenen animasyon özelliğini de bazı sitelerde görmeye başladık. 2010 yılı içerisinde CSS 3 özellikleriyle donatılmış web sitelerini daha çok göreceğiz.
MOBİL WEB SİTELERİ
2007 yılında iPhone’un piyasaya sürülmesiyle birlikte, bütün tasarımcılar mobil tasarım hakkında konuşmaya başlamıştı. CSS ve Javascript’i destekleyen daha çok cep telefonunun çıkmasıyla birlikte web tasarımın geleceği kesinlikle mobil tasarım olacak. Başta alışveriş siteleri olmak üzere bir çok web sitesi şimdiden mobil versiyonlarını çıkardı. Bu yıl içerisinde bu sınıfa dahil olan daha çok web sitesi göreceğiz.
http://www.webdesignerwall.com adresindeki ilgili yazıyı kaynak olarak kullanıp, kendi tecrübelerime göre düzenleyerek hazırladığım ilk makalem ile ilgili yorumlarınızı bekliyorum.
Devamını Oku
Sponsorlar
Facebook’ta beğen.
