arşiv

yazılar buna göre etiketlendi; ‘CSS’

Jquery ile Kıvrılan Sayfa (Page Peel) Örneği

Perşembe, 05 Kas 2009 1 yorum

Merhabalar

jQuery

jQuery

İlk çıktığı zamanlar pek sıcak bakmasamda son zamanlarda yazılım dünyasında hızla artan uygulama sayısıyla popüler olan jQuery’den yine muhteşem bir uygulama. Peki nedir bu jQuery;

jQuery, hem Javascript hem Ajax hem de efekt kütüphanesi olarak kullanılabilen bir framework’dür. Açık kaynak bir framework olmasından dolayı üzerine bir çok eklenti yazılmış ve bu sayede de tüm dünyada kullanıcı kitlesi bir anda artmıştır.

Gelelim uygulamamıza; Hazırladığım bir projemde kullanmak üzere yabancı bir kaynaktan yararlandığım bu uygulamayı hem kendim test ederek hemde size küçük bir demo hazırlayarak paylaşmak istedim.

Hemen uygulamamıza geçelim.

Öncelikle HEAD etiketi arasına Jquery javascript kütüphanemizi ekliyoruz.

<script type="text/javascript" src="jquery-latest.js"></script>

Jquery kodumuzu ekliyoruz..

</pre>
<pre><script type="text/javascript">
$(document).ready(function(){

//Page Flip on hover

$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});

});
</script>

Son olarak eklememiz gereken CSS ise şöyle

#pageflip {
position: relative;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
z-index: 50;
right: 0; top: 0;
background: url(subscribe.png) no-repeat right top;
text-indent: -9999px;
}</pre>

Örnek ekran görüntüsü şöyle :

Örnek Page Peel görüntüsü

Evet bu kadar. Uygulamanın görsel öğelerine ve demosuna buraya tıklayarak indirebilirsiniz.

Demo ve Kaynak dosyaları için tıklayın!

Hepinizi İyi Çalışmalar ;)

Baş Harfi Büyük Paragraflar Hazırlamak

Pazartesi, 15 Haz 2009 yorum yok
Cascading Style Sheets

Cascading Style Sheets

Merhabalar,

Bugün bir arkadaşımın yardım isteği üzerine böyle bir yazı yazmaya karar verdim. Aslında yapacağınız işlem çok basit, yapacağınız küçük bir CSS class’ı ile sitenize her eklediğiniz yazının baş harfini büyük yapabilir ve bu sayede kullanıcılarınıza güzel bir görüntü vermiş olursunuz. Bazı kitaplarda görmüşsünüzdür, pragrafların hepsinin ilk harfi büyük ve ilgi çekicidir. Hemen nasıl yapabileceğimize geçelim…

Eklemeniz gereken css kodu;

.buyukHarf{
float:left;
display:inline;
margin-right:.1em;
font-size:48px;
font-weight:bold;
font-style:normal;
line-height:48px;
height:48px;
color:#000000;
}

Eklemeniz gereken html kodu;

<span class="buyukHarf">M</span>erhaba Dünya!

Örnek Görüntü;

Hepinize iyi çalışmalar ;)