- Katılım
- 1 Eyl 2024
- Mesajlar
- 22
- Tepkime puanı
- 2
- Puanları
- 3
Yazılım sektörüne Front-end geliştirici olarak başladım ve bu süreçte tasarım ekibiyle sürekli beraber çalıştım. Verilen tasarımların kullanıcıya daha güzel hitap edebilmesi için bazı yardımcı kaynaklara ihtiyaç oluyor ve bunların el altında erişilebilir olması iş süreçlerini inanılmaz bir şekilde hızlandırıyor. Burada paylaştığım siteler de bunlar arasında. Burada olmayıp ekleyeceklerim de olacaktır çünkü sürekli yenilenen bir tasarım geliştirme alanı var. Siz de bu siteleri kaydedip tasarımlarınızda bunlardan yararlanabilirsiniz.
- CSS Tricks (css-tricks.com): CSS ile ilgili geniş kapsamlı dersler, makaleler, ipuçları ve püf noktaları sunan kapsamlı bir kaynaktır. Başlangıçtan ileri seviyeye kadar geniş bir konu yelpazesini kapsar.
- CodePen (codepen.io): HTML, CSS ve JavaScript kod parçacıklarını test etmek ve sergilemek için çevrimiçi bir topluluktur. Mevcut kalemleri keşfedebilir, çatallayabilir ve değiştirebilir veya kendi kalemlerinizi oluşturabilirsiniz.
- Can I Use (caniuse.com): CSS özellikleri ve özellikleri için güncel tarayıcı uyumluluk bilgisi sağlayan bir web sitesidir. Tarayıcı uyumluluğuna dayalı olarak hangi CSS özelliklerini kullanacağınıza dair bilinçli kararlar almanıza yardımcı olur.
- CSS Gradient Generator (cssgradient.io): CSS gradientleri kolayca oluşturmanıza yardımcı olan bir araçtır. Görsel olarak gradientler oluşturabilir, renkleri ve açıları ayarlayabilir ve oluşturulan CSS kodunu kopyalayabilirsiniz.
- CSS Grid Generator (cssgrid-generator.netlify.app): CSS Grid düzenlerini oluşturmak için etkileşimli bir araçtır. Grid yapısını tanımlayabilir, sütun ve satır boyutlarını ayarlayabilir ve düzeni gerçek zamanlı olarak önizleyebilirsiniz.
- Flexbox Froggy (flexboxfroggy.com): CSS Flexbox düzenini öğrenmek için eğlenceli ve etkileşimli bir oyundur. Flexbox kavramlarını öğrenmek için pratik alıştırmalar sunar.
- Grid Garden (cssgridgarden.com): Flexbox Froggy’ye benzer şekilde, CSS Grid düzenine odaklanır ve bahçe temalı zorluklarla Grid kavramlarını öğretir.
- Sass (sass-lang.com): CSS işleyicisi olarak kullanılan Sass, değişkenler, mixin’ler, iç içe geçme ve daha fazlası gibi özelliklerle CSS’nin işlevselliğini genişletir. Daha temiz ve bakımı kolay CSS kodları yazmanıza yardımcı olur.
- Autoprefixer (autoprefixer.github.io): Autoprefixer, CSS kurallarınızı Can I Use veritabanına dayanarak otomatik olarak tarayıcı öneki ekler. Elle ön ek eklemeye gerek kalmadan tarayıcı uyumluluğunu sağlar.
- CSS Validator (jigsaw.w3.org/css-validator): W3C’nin resmi CSS doğrulayıcı aracı, CSS kodunuzu sözdizimi hataları ve CSS standartlarına uygunluk açısından doğrular. Kodunuzun en iyi uygulamaları ve standartlara uygun olduğundan emin olmanıza yardımcı olur.
- CSS Minifier (cssminifier.com): CSS kodunu gereksiz boşlukları ve yorumları kaldırarak sıkıştıran bir araçtır. Dosya boyutunu azaltarak sayfa yükleme sürelerini ve performansı artırır.
- CSS Analyzer (cssstats.com): CSS kodunuzu analiz eder ve karmaşıklık, seçicilerin kullanımı ve daha fazlası hakkında içgörüler sağlar. CSS’nizi daha iyi bakım ve performans için optimize etmenize yardımcı olur.
- CSS Buttons:
- Farklı Stillerde Düğmeler: CSS Buttons, düz, dolgulu, çerçeveli, yuvarlatılmış köşeli, gradyan, iç gölge, kenarlık ve daha pek çok farklı düğme stiline sahiptir. Kullanıcılar, ihtiyaçlarına ve tasarım tercihlerine uygun olanı seçebilirler.
- Renk Seçenekleri: Her düğme stili için geniş bir renk seçeneği sunar. Kullanıcılar, arka plan rengini, metin rengini, kenarlık rengini ve daha fazlasını kolayca özelleştirebilirler.
- Boyut Ayarları: Düğmelerin boyutunu ayarlamak için seçenekler sunar. Küçük, orta ve büyük boyutlar arasından seçim yapabilir veya özel boyutlar belirleyebilirsiniz.
- İkon ve Metin: Düğmelerin içine metin veya ikon eklemek mümkündür. Metin ve ikonların konumu ve hizalaması ayarlanabilir.
- Kod Üretme: CSS Buttons, belirlediğiniz tüm özelliklere göre CSS kodunu otomatik olarak oluşturur. Bu sayede, oluşturulan düğmeleri kolayca web sitenize entegre edebilirsiniz.
- Önizleme: Her düğme stili ve özelleştirme seçeneği için önizleme sağlar. Bu sayede, düğmenin nasıl görüneceğini önceden görebilirsiniz.
- CSS Buttons‘un kullanımı oldukça basittir. Kullanıcılar istedikleri düğme stili ve özelleştirme seçeneklerini seçerler, ardından oluşturulan CSS kodunu kopyalar ve projelerinde kullanırlar. Bu şekilde, hızlı ve görsel bir şekilde çeşitli düğmeler oluşturabilir ve tasarım sürecini kolaylaştırabilirler. CSS Buttons, web tasarımcılarının ve geliştiricilerin düğme oluşturma işini hızlandırır ve daha profesyonel görünümlü düğmeler elde etmelerini sağlar.
- Neumorphism .io
- Neumorphism Tasarımı Oluşturma: Neumorphism.io, kullanıcıların görsel olarak neumorphism tarzında düğmeler, kartlar, form elemanları ve diğer UI öğeleri oluşturmasını sağlar. Görsel arayüzü sayesinde, tasarımı anında görebilir ve özelleştirebilirsiniz.
- Kolay Özelleştirme: Site, oluşturulan neumorphism öğelerinin renklerini, gölge efektlerini, vurguları ve arka planları özelleştirmenize olanak tanır. Renk paleti seçenekleri ve gölge ayarları gibi kolay kullanılabilir araçlarla tasarımı hızlıca kişiselleştirebilirsiniz.
- CSS ve HTML Kodları: Neumorphism.io, tasarladığınız neumorphism öğeleri için CSS ve HTML kodlarını otomatik olarak oluşturur. Bu kodları kopyalayıp projenize yapıştırarak hemen kullanabilirsiniz.
- Canlı Önizleme: Her adımda, yaptığınız değişikliklerin canlı önizlemesini görüntüleyebilirsiniz. Bu, tasarımınızın nasıl görüneceğini anında görebilmenizi sağlar.
- Responsive Tasarım: Neumorphism.io, oluşturduğunuz tasarımların nasıl davranacağını ve nasıl görüneceğini farklı cihazlarda test etmenize olanak tanır. Bu sayede, mobil, tablet ve masaüstü cihazlarda tutarlı bir deneyim sağlayabilirsiniz.
- Neumorphism.io, tasarımcılar ve geliştiriciler için neumorphism tarzında modern ve şık UI öğeleri oluşturmayı kolaylaştırır. Tasarımlarınızı hızlıca görselleştirebilir, özelleştirebilir ve kodlarını alarak projelerinizde kullanabilirsiniz. Bu site, neumorphism tasarım trendini takip etmek isteyen herkes için değerli bir araçtır.
- Get Waves
- SVG Dalga Deseni Oluşturma: Get Waves, kullanıcılara çeşitli dalga deseni seçenekleri sunar. Basit bir arayüzle, farklı şekil, boyut, hız ve yoğunlukta dalga desenleri oluşturabilirsiniz.
- Renk ve Opaklık Ayarları: Her dalga deseni için arka plan rengini, dalga rengini ve opaklığını özelleştirebilirsiniz. Bu sayede, tasarımınızın renk şemasına ve tarzına uygun bir görünüm elde edebilirsiniz.
- Canlı Önizleme: Yaptığınız her değişikliği anında görsel olarak görebilirsiniz. Canlı önizleme özelliği, tasarımınızın nasıl görüneceğini gerçek zamanlı olarak kontrol etmenizi sağlar.
- Kod Üretme: Oluşturduğunuz dalga deseninin SVG kodunu otomatik olarak oluşturur. Bu sayede, projenize hızlıca entegre edebilir ve arka planları kullanabilirsiniz.
- Responsive Tasarım: Get Waves, oluşturduğunuz dalga desenlerinin farklı ekran boyutlarında nasıl görüneceğini önizlemenize olanak tanır. Bu, mobil, tablet ve masaüstü cihazlarda tutarlı bir deneyim sağlamanıza yardımcı olur.
- Ücretsiz Kullanım: Get Waves, ücretsiz olarak kullanılabilir. Herhangi bir üyelik veya kayıt gerektirmez ve herkesin erişebileceği bir web aracıdır.
- Get Waves, web siteleri ve uygulamalar için çekici arka planlar oluşturmanın hızlı ve kolay bir yolunu sunar. Dalga desenleri, modern ve dinamik bir görünüm sağlayarak kullanıcı deneyimini artırabilir ve tasarımınızı daha ilgi çekici hale getirebilir. Get Waves’i kullanarak, görsel olarak etkileyici ve özelleştirilebilir arka planlar oluşturabilir ve projelerinizi daha çekici hale getirebilirsiniz.