M i n i k H a y a l l e r: Blogger'da Kar Yağdırma Efektleri

Blogger'da Kar Yağdırma Efektleri

Kristal Kitap | 12/17/2014 |
Blogger'da Kar Yağdırma Efektleri
Kış ayı demek benim için, hiç göremediğim ve özlemini çektiğim kar demek. Elimde sıcak çikolatam, minik ve kendi halinde olan tarçınlı kurabiye kokularının yükseldiği evimde, pencere kenarına geçip o karı seyretmek ve belki kitap okumak. Noel zamanı yaklaştığında ise, evin bir köşesinde de eşimle -umarım nişanlıma eşim dediğim günlerde gelir :)- süslediğimiz ufak bir noel ağacı... Böyle soğuk günlerde bu hayallerim daha da artıp kendini aklımın bir köşesine yerleştiriyor işte. :)))

Bende hiç kar göremedim en azından blogum kar görsün dedim ve bir çok kar efektini tek tek denedim. Java kodlu olanlar güzel durmuyorlar ve çok hızlı yağıyorlar. Ben daha yavaş ve sakin yağmasını istediğim için CSS kodlarıyla bloga eklenen harika bir kar efekti buldum. Bir kaç kişi mail atınca da paylaşayım istedim. 

Kullanımı çok basit. Zaten resimlerle de anlatacağım için rahatlıkla herkesin yapabileceğini düşünüyorum.

Demo

Aşağıda vermiş olduğum CSS kodlarını ]]></b:skin> kodunun hemen üstüne ekliyorsunuz.
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

#falling-snow {
background-image: url(http://4.bp.blogspot.com/-26HXwn0tlWA/UaJZYbdbDnI/AAAAAAAADfA/AeiBdAIR0zU/s1600/snow.png), url(http://4.bp.blogspot.com/-8RALuvldFh8/UaJZY1tUptI/AAAAAAAADfM/rIaHhS2A4yQ/s1600/snow3.png), url(http://4.bp.blogspot.com/--AYxx7PegOc/UaJZYvy9wVI/AAAAAAAADfE/0Lp5NLrudxc/s1600/snow2.png);
-webkit-animation: snow 20s linear infinite;
-moz-animation: snow 20s linear infinite;
-ms-animation: snow 20s linear infinite;
animation: snow 20s linear infinite;
}

Kodlarınızın aynen resimde gördüğünüz gibi durması gerek.
Daha sonra <body> kodunu buluyorsunuz. Direk <body> diye bulamazsanız <body olarak aratın. Kimi temada kodun yanında başka kodlarda oluyor. Mesela resimde de gördüğünüz gibi bende şu şekilde geçiyor. <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Kodu bulduk artık. Hemen altına <div id='falling-snow'> kodunu ekliyoruz.
Yapmamız gereken son bir işlem kaldı oda div etiketini kapatmak. Kapatmazsak eğer kod çalışmaz ve şablonu kaydet dediğiniz zaman hata verir. </body> kodunu buluyoruz. Hemen üstüne </div> etiketini yapıştırıyoruz ve şablonu kaydet diyoruz.
Yapmanız gereken her şey bu kadar. :)

Daha farklı kar yağdırma efektleri de var. Java kodlarıyla yapılıyor. Eğer bunu yapmak istemezseniz diye alternatif olarak onuda ekledim. Aşağıda vermiş olduğum kodu, Blogger/Yerleşim/Gadget Ekle/Html/Java Script kod ekle yolunu izleyerek ekliyoruz. Bu blogumda yağan karlar, aşağıda ki java koduyla yapıldı. :)

<script type="text/javascript" src="http://www.skincorner.com/snow.js">
</script>

16 yorum:

  1. Çok güzel olmuş, ben de istiyorum kar efekti :) Daha önce denedim ama beyaz üzerinde belli olmadı.

    YanıtlaSil
  2. Bunları deneyebilirsin. :) Yapamazsan yardımcı olurum. ^_^

    YanıtlaSil
  3. Denemek istiyorum valla :) Yardımcı olursan çok sevinirim. Eğer yapamazsam sorarım. Aslında ben senin slayt manşet için o resimleri nasıl yaptığını çok merak ediyorum. Sadece Dex kitaplarının kapaklarını kullanabiliyorum, boyutlarını değiştirebiliyorum :)

    YanıtlaSil
  4. Onlar için photoshop programını kullanıyorum canım. Cs6 sürümünü.

    YanıtlaSil
  5. Ben de cs5 kullanıyorum ama bir türlü yapamadım :)

    YanıtlaSil
  6. Kar efektini yapamadım ben :) En sonda verdiğin kodu ben ekleyemeyeceğim değil mi? Bir de kodunu böyle buluyorum. Verdiğin kodu tam olarak bulamadım.

    YanıtlaSil
  7. kodu Css kodlarının başında olan. Birde sonunda var. Sen kapanış kodunu bulacaksın. Bulamazsan, Şablona gel oradan özelleştir de, sonra css kodu ekle de. Bloga uygula dedikten sonra eklemen gereken yere eklemiş olur kendisi zaten.

    En altta verdiğim kod başka bir efektin kodu. İstersen sadece onu kullanabilirsin. İsteren yukarıda ki kodları kullanarakta ekleyebilirsin kar efektini.

    YanıtlaSil
  8. ]]> kodu illaki vardır. Çünkü o olmazsa Css kodlarının hiç biri çalışmaz. Kodların yazdığı yerde her hangi bi yere tıkla. Sonra ctrl+f ye bas, kod panelinin sağ üst kenarında bi kutucuk çıkacak. Oraya bulman gereken kodu yazıp aratabilirsin.

    YanıtlaSil
  9. Çok teşekkür ederim Kristal'im, yaptım şimdi :) Alt taraftaki kodu da ekleyeceğim.

    YanıtlaSil
  10. Cs5 le de yapabilirsin fark etmez. Sadece araçları kullanmayı öğrenmen gerek. Mesela 'Siyah Damar' resmini ele alırsak. İlk önce kitapta kullanılan arka planı buldum. Hemen üstüne ekstra bir layer oluşturup layeri siyaha boyadım. Opcity kısmını 80 civarına indirdim ve 'Normal' yazan kısmını soft light yaptım. Ufak bi renk efekti vermiş gibi oldu. :)

    Daha sonra, kapak resminde ki kızı 'L'ye atanmış araçla kestim. Daha sonra Refine Edge -böyle olması lazım tam hatırlamıyorum- menüsüyle kesilmiş alanları yumuşattım ki daha hoş bir görünüm elde edeyim. Yoksa kadını başka bir resim üzerinden kesip aldığım belli olacaktı. Sonra kadının layer'ine gölge efekti verdim. Gölgenin alanını genişletip daha yumuşak görünmesini sağladım. Böylece etrafında karanlık bir alan olmuş oldu.

    Siyah Damar yazısını kitabın kapağındakine benzesin diye, benzer font kullandım. Ayrı ayrı text oluşturdum Siyah yazısı ayrı Damar yazısı ayrı. Sonra üst üste getirdim onları. Damar yazısının rengini kırmızı yapıp her ikisine de aynı gölge efektini uyguladım. Böylece biraz daha 3 boyutlu gözükmesini sağladım.

    En sonda 3 boyutlu kitap kapağı resmini ekledim. Onu da cover actions ile yapıyorum. Cs5'te de kullanabilirsin aynı actionsu.

    Shop programını kullanmak biraz deneyim istiyor. Ha diyince yapamıyorsun. Ben de ilk başladığım zamanlarda yaptıklarıma baktıkça bu ne yaa böyle falan diyorum. :) Ama yapa yapa el alışıyor. Yani pes etme beceremesen de uğraş. Farklı farklı resimler üzerinde dene. Özellikle kesim yapmayı.

    YanıtlaSil
  11. Çok tatlı olmuş güle güle kullan. :)

    YanıtlaSil
  12. Gerçekten çok güzel oldu :) Harikasın, ne kadar çok şey biliyorsun. Ne çok uğraştın benimle. Photoshop programından pek anlamıyorum. Basit şeyleri yapıyorum ancak. Yazdıklarını yapmaya çalışacağım. Çooooook teşekkür ederim canım :)

    YanıtlaSil
  13. Bende çok anlamıyorum. Beni idare edecek kadar şey biliyorum aslında. Çok fazla değil. Bu anlattıklarımın dışına pek çıkamam. Anca anlatımları izleyip izleyip benzerlerini yapmaya çalışırsam bir şeyler elde edebilirim. :))

    İstediğin zaman takıldığın bir konuyu sorabilirsin. Blogunla ilgili olur photshopla ilgili olur fark etmez. Eğer çözümünü biliyorsam seve seve yardımcı olmaya çalışırım. :)

    YanıtlaSil
  14. Sen çok anlamıyorsan benim için ne denir ki bilmiyorum :) Ben senin için ne yapabilirim yaptıklarından sonra. Elimden gelen bir şey olursa ben de buradayım :) Tekrar teşekkürler...

    YanıtlaSil
  15. Anlatım için çok teşekkürler canım.Bende yararlanmış oldum bundan.Gerçi temadan dolayı pek görünmüyor ama olsun. :D

    http://minninwonderland.blogspot.com.tr

    YanıtlaSil
  16. Sonunda geçttiiiiiinnnn. :D Yeni blogun hayırlı olsun. :) Görünüyor yine yaa gayet tatlı duruyor. ^_^

    YanıtlaSil

Related Posts Plugin for WordPress, Blogger...
ALL RIGHTS RESERVED © MİNİK HAYALLER DESIGN BY MLEKOSHI BLOGGER TEMPLATE BY KRİSTALKİTAP