CSS

İşinize Yarayacak CSS Kütüphane, Framework ve Araçlar

Hakan
Yazan Hakan

Web tasarımda CSS ( Cascading Style Sheets ) konusunda, son bi kaç yıldır süren değişiklikler ve yeniliklerle birlikte, piyasaya sürülen açık kaynak kodlu kütüphanelerin, frameworklerin ve araçların bildiğiniz gibi haddi hesabı yok.

Bunların kullanılması da zamandan tasarruf edilmesine yarar sağladığını biliyoruz. Bende sizlere bu yazımda işinize yarıyacak, kolay kullanımı olanları toparladım.

Ayrıca her hafta pazar günleri yayınladığım tasarımcı haberlerine de göz atarak web tasarım hakkında yeni şeyler keşfedebilirsiniz.

CSS KÜTÜPHANELERİ

Hamburgers.css

Jonathan Suh tarafından hazırlanmış, css animasyon ve hamburger menü ikonlarının bir birleşimidir. İkonlara tıklanılınca animasyonları görebilirsiniz.

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar - Hamburger.css

İşinize Yarayacak CSS Kütüphane, Framework ve Araçlar – Hamburger.css

Balloon.css

Claudio Holanda tarafından hazırlanmış, buton üzerine gelince çıkan bir tooltip (  ipucu ) kütüphanesi. Sadece yukarı  değil her yöne ve tek yazı yerine emojilerde kullanabilirsiniz.

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar - Balloons.css

İşinize Yarayacak CSS Kütüphane, Framework ve Araçlar – Balloons.css

Basscss

CSS’le yapılanları bir kütüphanede  toplayan basscss, hem hız hemde ölçeknebilirlik güzel bir CSS araçları topluluğudur.

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar - Basscss

İşinize Yarayacak CSS Kütüphane, Framework ve Araçlar – Basscss

Tootik Library

Yine güzel bir tooltip kütüphanesi. Üstelik demo sitesinde tarayıcı üzerinden önizleme yaparak istediğiniz gibi seçebiliyosunuz. Aşağıdaki gif’den ne demek istediğimi görebilirsiniz.

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar - Tootik Library

İşinize Yarayacak CSS Kütüphane, Framework ve Araçlar – Tootik Library

voxel.css

Web tasarımda 3D kullanacağınız zaman bu kütüphaneye bi göz atmanızı öneririm. Sandığınızdan daha hafif ve kullanışlı bi css  kütüphanesi.

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar - voxel.css

İşinize Yarayacak CSS Kütüphane, Framework ve Araçlar – voxel.css

YÜKLEME ANİMASYON KÜTÜPHANELERİ

Spinners

HTML ve CSS ile yükleme animasyonları yapabileceğiniz güzel bir kütüphanesi. Web sitelerinize bağlanmaya çalışan kullanıcılar için görsel bir yükleme animasyonu sitenizi çok daha güzel hale getirebilir.

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar - Spinners

İşinize Yarayacak CSS Kütüphane, Framework ve Araçlar – Spinners

Loading Indicators

Butonlarınızda kullanabileceğiniz yükleme animasyonları.

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar - Loading Indicators

İşinize Yarayacak CSS Kütüphane, Framework ve Araçlar – Loading Indicators

CSS Loader

Farklı yükleme animasyonları arıyorsanız css loader ile bulabilirsiniz. Web sitesine bi göz atmanızda fayda var.

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar - CSS Loader

İşinize Yarayacak CSS Kütüphane, Framework ve Araçlar – CSS Loader

CSS Resim Efektleri

Imagehover.css

44 Adet farklı hover efekti ile resimlerinize biraz  daha canlılık katabilirsiniz. Ayriyetten 216 efekt daha isterseniz 19€ gibi bir ücretle satın alabilirsiniz.

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar - Imagehover.css

İşinize Yarayacak CSS Kütüphane, Framework ve Araçlar – Imagehover.css

HUE.css

CSS gradyanları ile yapılan resim efektleri.

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar - HUE.css

İşinize Yarayacak CSS Kütüphane, Framework ve Araçlar – HUE.css

CSSGram

İnstagramda ki gibi resim filtreleri kullanmak istiyorsanız bu kütüphane tam size göre.

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar - CSS Gram

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar – CSS Gram

CSS ARAÇLARI

Brand Colors

1100’den fazla rengi tarayıcı üzerinden anlık olarak önizleyebilirsiniz.

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar - Brand Colors

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar – Brand Colors

CSS Matic

Gradıent, Border Radıus, Noıse Texture ve Box Shadow 4 farklı araç sunuyor.

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar - cssmatic

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar – cssmatic

CSS Compressor

CSS kodlarınızı sıkıştırarak daha küçük boyutlu CSS dosyası oluşturabilir ve bu şekilde site hızınızı artırabilirsiniz.Uygulama 4 farklı moda göre sıkıştırma işlemi gerçekleştirebiliyor.

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar - CSS Compressor

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar – CSS Compressor

RQRWD

Web sitelerini responsive hale getirmek için çoğunlukla px (pixsel) yerine % (yüzde) ölçü birimi kullanılıyor. Ve birçok web tasarımcıda pixsel yerine yüzde ölçümü birimi kullanırken zorluk çekiyor. Bu araç ile basit bi şekilde pixsel boyutlarını, yüzde olarak çevirebilirsiniz.

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar - RQRWD

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar – RQRWD

GRIDPAK

Responsive tasarım yaparken iskelet oluşturmanıza yarayan bir araç. Grid tekniğine dayanılarak iskelet oluşturmanızı sağlıyor.

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar - GRIDPAK

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar – GRIDPAK

Flexbox Grid

Önceden yapılmış hazır gridleri kullanabilirsiniz.

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar - Flexbox Grid

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar – Flexbox Grid

CSS FRAMEWORK

Simple Grid

Web sitelerinizde kullanabileceğiniz duyarlı ve hafif bir ızgara frameworkü

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar - Simple Grid

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar – Simple Grid

Blaze CSS
İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar - Blaze CSS

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar – Blaze CSS

Picnic CSS
İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar - Picnic CSS

İşinize Yarıyacak CSS Kütüphane, Framework ve Araçlar – Picnic CSS

Yazar hakkında

Hakan

Hakan

WebYardimci.com'un kurucusu ve yazarı...

4 Yorumlar

  • Harika css ler bunların hepsini kütüphaneme ekliyorum. Paylaşım için çok teşekkürler. Paylaşımlarınızın kalitesi sitenizdende belli iyi çalışmalar 🙂

  • Gerçkten çok yararlı olmuş. Hele ki sizin blog tasarımınıza bayılıyorum fakat yeni yeni HTML5 yazmaya başlayanlarında ihtiyacına değecek sağlam kütüphanelerden oluşan yazı paylaşmışsınız. Her birinden faydanılmalı diye düşünüyorum

Yorum Yap