Sayfa Reklamı

Browsing Tag

css

CSS, HTML, HTML5, JQuery

JQuery Ücretsiz Slider (30 Adet)

1. Basit JQuery Slider:

Sliderın en iyi özelliklerinden birisi bir çok farklı şekilde kullanılmasıdır. Sliderı kullanırken bir tasarıma bağlı kalmıyorsunuz. Metin, resim ve hatta videoları geçiş esnasında görüntülemek mümkündür. Eğer sitenizin düzenini bozmadan Slider için ayırdığınız alana sığdırmak istiyorsanız önceden oluşturulmuş 50 farklı şablondan birini kullanabilirsiniz.

jquery-sliders-01

 

2. Royal Slider:

Sliderın en iyi özelliklerinden birisi bir çok farklı şekilde kullanılmasıdır. Sliderı kullanırken bir tasarıma bağlı kalmıyorsunuz. Metin, resim ve hatta videoları geçiş esnasında görüntülemek mümkündür. Eğer sitenizin düzenini bozmadan Slider için ayırdığınız alana sığdırmak istiyorsanız önceden oluşturulmuş 50 farklı şablondan birini kullanabilirsiniz.

jquery-sliders-02

 

3. JQuery Slider Shock:

jQuery Slider Shock sliderlarda olması gereken özelliklerin tümüne sahiptir. Sliderın kenarına görüntüleri (dahili veya harici kaynaklardan getirilebilir) ve  video gibi farklı içerikler çeşitlilerini ekleyebilirsiniz. 30 farklı geçiş efekti bulunmaktadır. Kendi zevkinize uyacak şekilde özelleştirilebilirsiniz. jQuery Shock blogcular için WordPress desteği ile birlikte geliyor.

jquery-sliders-03

 

4. Responsive Slides:

Bu Slider bulunduğu divin genişliğine göre boyut değiştirmektedir. Internet Explorer 6 ve üstü gibi çoklu tarayıcı ile uyumludur. Eğer responsive temaları destekleyen bir tarayıcı kullanıyorsanız, sliderı görüntülemek için tarayıcıya bir CSS ile max-width özelliği ekliyoruz. Slaytlar geçişlerinde resimlerin görünürlüğü azaltılarak geçiş efekti uygulanmıştır. Slaytların geçiş sürelerini ve bekleme sürelerini ayarlayabilirsiniz.

jquery-sliders-04

 

5. iWiew Slider:

Sitenizinde mobil kullanıcılar için içerik sunmayı düşünüyorsanız iView Slider tam aradığınız sliderdır. Slider aslında dokunmatik ekranlar ile özellikle mobil cihazlar için tasarlanmıştır fakat mobil olamayan sitelerde de rahatlıkla kullanabilirsiniz. Sliderın 35 farklı geçiş efekti bulunmaktadır.

jquery-sliders-05

 

6. Adaptor:

Eğer sitenizin tasarımına güzel bir 3D efekt eklemek istiyorsanız Adaptor slider işinizi kolaylaştıracaktır. 3D efektlerin geçiş hızını ayarlayabilirsiniz. Sliderın kodların biraz karmaşık gibi gelebilir fakat düzenlemeye başladığınızda çok kolay ve anlaşılır olduğunu göreceksiniz.

jquery-sliders-06

7. Refineslide:

Refineslide kendi site düzenleri içinde düzgün görünecek bir slider arayan web masterlar için bulunmaz bir seçim. Sadece 4 kilobayt tan oluşan slider oldukça kullanışlıdır. Slider CSS3 geçişleri kullanır ve 3D efekti oluşturur.

jquery-sliders-07

 

8. Unoslider:

Unoslider sade bir geçiş efektine sahiptir. Mobil cihazlar ile uyumlu bir şekilde çalışır. Kaymak kodu çok fonksiyonludur ve kaynak kod üzerinde değişiklik yapmak çok kolaydır. Ayrıca kodları mobil cihazlar için optimize dilmiştir.  Birbirinden farklı birçok geçiş efekti ile her sliderın farklı bir şekilde açılmasını sağlayabilirsiniz.

jquery-sliders-08

9. Likno Web Scroller Builder:

Genel olarak eticaret sitelerinde ürün listelemeleri için kullanılan sliderın birçok geçiş özelliğini bulabilirsiniz. Benzer ürünler, yanında alınanlar, çok satanlar, indirimdekiler ve aynı kategorilerdeki ürünleri listelerken sitenizde yerden tasarruf etmenizi sağlamaktadır.

jquery-sliders-09

10. Nivo Slider:

Eğer iyi bir WordPress slider istiyorsunuz ve profesyonel sliderların ücretlerini ödemek istemiyorsanız NivoSlider Sizin için çok güzel bir alternatif. Sliderı uygulamak çok kolaydır. Aynı zamanda sade ve şık bir görün verir. Diğer sliderlara göre geçiş efektleri biraz daha azdır. 16 adet. Ne kadar sliderlardan bahsederken WordPress gibi sisleri ön planda tutsakta bizim yazdığım ASP.NET MVC sistemlere de çok kolay uyum sağlamaktadır.

jquery-sliders-10

 

11. Rhinoslider:

Rhinoslider da büyük grafikler ve esneklik ön plana çıkmaktadır. Sliderda resimler ve videolar gibi farklı HTML içerik çeşitleri kullanıla bilmektedir. Ayrıca geçiş efektleri için büyük bir kütüphaneye sahiptir.

jquery-sliders-11

12. Camera: JQuery Slider with Touch Support:

Mobil uyumlu siteler hazırlayan tasarımcılar için geliştirilmiş güzel bir jQuery sliderdır. Slider hareketleri mobil cihazlara duyarlıdır, dokunmatik ekranlı cihazlarda kolay entegrasyon sağlanır. Slider geçişleri için çok sayıda özellik bulunmaktadır.

jquery-sliders-12

 

13. Flow Slider:

Flow Slider Mouse hareketlerine duyarlı bir sliderdır. Mouse u sağa ve sola hareket ettirdiğiniz sliderda bulunan resimlerde Mouse hareket yönünün tersine hareket etmektedir.

jquery-sliders-13

 

14. Crafyslide:

Sadece standart ve yaygın olarak kullanılan özelliklere sahip bir slider istiyorsanız, Craftyslide mükemmel bir seçimdir. Diğer sliderlarda bulunana gereksiz bir çok özellik slidera eklenmemiştir. Fakat fonksiyonları sayesinde slider üzerinde bir çok değişiklik yaparak çeşitli özellik ekleme imkanına sahipsiniz.

jquery-sliders-14

15. RSlider:

RSlider büyük arka plan resimleri için güzel bir slider örneğidir. Ayrıca, otomatik olarak üzerinde çalıştığınız sitenin genişliğine uyuyor.

jquery-sliders-15

 

16. JCoverflip:

Bu web sitenizde kullanabileceğiniz harika bir jQuery sliderdır. CSS kullanarak yazıları resimleri değiştirebilir, slider içerisinde kaç adet resim görmek istiyorsanız bunu ayarlayabilirsiniz.

jquery-sliders-16

 

17. Slidedeck:

Slidedeck ile sitenizde listelediğiniz resimleri gruplayabilir ve bu gruplardan biri tıklandığın diğer guruba ait resimleri gizleyerek sadece o gruba ait resimlerin kalmasını sağlayabilirsiniz.  Referans sayfalarında kolaylıkla kullanabileceğiniz güzel bir slider örneğidir.

jquery-sliders-17

 

18. Liquid Slider 2:

HTML5 ile ekran genişliği otomatik olarak yararlanmaktadır. CSS3 geçişlerinin tümü desteklenmektedir. Ayrıca API sayesinde çok basit ve kolay düzenleme imkanı sunmaktadır.

jquery-sliders-18

 

19. Parallax İçeren Sliden (CSS ve JQuery):

Geniş ekran kullanılabilen slider ile yazıları, iconları, butonları ve resimleri birbirinden farklı bir şekilde hareket ettirebilirsiniz. Yeni temaların bir çoğunda kullanılan yazı, resim, icon değişikliği Parallax slider ile sağlanmaktadır.

jquery-sliders-19

 

20. Rotating Image Slider:

Fotoğraflar sıra ile çevrilerek gelmektedir. Kuaför salonları, modacılar ve fotoğraf stüdyoları için hazırlanan sitelerde rahatlıkla kullanabileceğiniz güzel bir slider örneği.

jquery-sliders-20

 

21. Bxslider: (Benim şiddetle tavsiye ettiğim bir slider)

Dikey ya da yatay geçişler istiyorsanız BxSlider’ı sitenizde kolaylıkla uygulaya bilirsiniz. CSS ile slayt geçişlerini düzenleyebilirsiniz. Sitesinde birçok detaya ulaşarak kendinize özel bir slider hazırlayabilirsiniz. Çoklu resim, video gibi birçok özelliği bulunmaktadır.

jquery-sliders-21

 

22. Fullscreen Slit Slider:

Slide geçişi resimleri ortadan bölerek yatay ve dikey şekilde sağlamaktadır. Resimleri ve yazıları ayrı hareket ettirerek mesela yuvarlayarak slide içerine getire bileceğiniz güzel efektleri bulunmaktadır.

jquery-sliders-22

23. Simple Multi-İtem Slider:

Çoklu ürün listelemeleri için kullana bileceğiniz güzel bir slider örneği. ETicaret sitelerine görsellik ve sadelik katacaktır. Kategoride bulunan ürünleri 4lü ya da 3lü değiştirebilirsiniz.

jquery-sliders-23

 

24. SlidesJS:

Basit geçişlere sahip iconları ve ileri, geri butonları ile resimleri hareket ettirmenize olanak sağlamaktadır.

jquery-sliders-24

25. Lean Slider:

Basit ve sade geçişleri ile düzenlemesi kolay standart bir sliderdır.

jquery-sliders-25

 

26. Easy Rotator:

Javascript ile sliderın tüm özelliklerini kullanabilirsiniz. Bir birinden güzel geçişleri sayesinde sitenize ayrı bir dinamizm katacaktır.

jquery-sliders-26

27. Slicebox:

3D ile görsel olarak küp şeklinde parçalanarak ya da bütün bir şekilde değişen slide geçişlerine sahip bir sliderdır. Eskiden flash olarak kullanılan ücretsiz bir slider vardı adını şu anda hatırlayamadım. Sitelerin neredeyse %70 inde kullanılan bu flash sliderın CSS ve Jquery ile uyarlanmış versiyonunu andırmaktadır.

jquery-sliders-27

28. Swiper:

Mobil cihazlar için kullanabileceğiniz çok güzel bir slider daha. Örnek siteye ilk girdiğiniz slider örneklerinin slide olduğunu zannedeceksiniz. Fakat o slide zannettiğiniz her ekranın içinde aynı bir örnek bulunmakta. Yazılı resimli bir çok örneği bulunan güzel bir slider örneği.

jquery-sliders-28

 

29. Elastic Image Slideshow:

Resimleri ve yazıları ayrı hareket ettirerek getirebileceğiniz sade basit geçişli slider.

jquery-sliders-29

 

30. JqRange Slider:

Sayısal veriler üzerinde oynayabileceğiniz ve çeşitli şekillerde bunları gösterebileceğiniz güzel bir slider örneği.

jquery-sliders-30

CSS, Genel

PineCSS – Kolay Kullanımlı, Responsive Destekli CSS Kütüphanesi

Geliştiricisi olduğum bir ürün olan PineCSS, Bootstrap ile kıyaslama yada bootstrap‘a rakip olarak değilde PHP‘de nasıl sizin ihtiyacınıza göre framework’ler mevcut buda CSS‘de bu şekilde ihtiyaçları karşılıyor.

Resmi Web Sitesi : http://pinecss.com

Resmi Github Adresi : https://github.com/PineCSS

Tarafımca Geliştirilen Github Adresi : https://github.com/orhanbhr/pine

Proje’nin kurucusu Savaş Can Altun‘dur.

CSS, Genel

CSS ile Yazıyı Büyük yada Küçük Harflere Dönüştürme

Merhaba Arkadaşlar,

Bildiğimiz üzere bir div’in içerindeki yazının hertürlü css özelliğini değiştirebilirsiniz bu tabiki illa div olacak gibi bir kural yok örnek vermek gerekirse diye düşünün bir div’in içerisinde Merhaba Dünya yazıyor ve ben bu merhaba dünya kelimesini CSS ile büyük küçük harflere dönüştürmek istesem css’de bulunan text-transform özelliğini kullanmam gerekecek bunuda aşağıdaki gibi kullanabilirsiniz: