Bir kez uygulandığında CSS'nin neye benzediğini görmek için bir sürü tipik HTML'ye sahip bir site var mı?
Ben, tam bir anlamı table, a, div, span, p, her neyse. Oraya gidip CSS'nize yapıştırın ve sonuçları görün.
Yanıtlar:
Wow, birisi bunu SO'ya gönderdi.
Bu sadece doktorun sipariş ettiği şeydir: http://jsfiddle.net/
Html, css ve javascript yazabilir ve doğrudan orada çalıştırabilirsiniz !! Ayrıca zaten Jquery ve diğer şeylere referansları var!
Internet kuralı 33 istiyorsanız / hayal, onun orada olduğunu düşünüyorum! ;)
Ben sadece http://colorschemedesigner.com/ tökezledi .
Renkleri seçmek harika ve renk düzeninin tipik bir sayfaya nasıl uygulanacağını görmek için size örnek sayfalar gösterecek.
Güncelleme: web sitesi şimdi http://paletton.com
Hiçbirini bilmiyorum, ama bu kendinizi kurmak için basit. Açıkladığınız tüm öğeleri içeren basit bir HTML belgesi oluşturun. (Gerekirse Lipsum.com'dan metin oluşturabilirsiniz .) Ardından stillerinizin iliştirildiğini görmek için belge başlığındaki bir CSS dosyasına bağlanın. Bir daha test etmek istediğinizde, başka bir CSS dosyasına işaret edecek şekilde değiştirin.
Tam olarak ne istediğini değil, ama less.js canlı izleme modunu seviyorum .
Genellikle HTML veya XHTML'nin ne olursa olsun el ile herhangi bir öğeyi / kombinasyonu alay ediyorum, ancak kendi ana öğe belgenizi oluşturabilirsiniz. Tüm tarayıcıları açmak için ikinci bir monitör (veya iki, üç vb.) Takarsanız (veya ikinci bir bilgisayar kullanırsanız) kaydettiğiniz tüm değişiklikler bir kerede canlı olarak uygulanır.
LessCSS sözdizimi normal CSS ile birlikte kullanılabilir, ancak daha hızlı ve daha kolay alınabilir (sonuçlar daha sonra normal CSS'ye dönüştürülebilir).
Aviary gibi araçlar , hızlı bir şekilde açıklanabilen (paylaşılabilir bağlantılarla çevrimiçi) veya başka bir araçta ( Photoshop , GIMP , Paint gibi) kaydedilebilen ve karşılaştırılabilen ekran görüntülerini (aşağı kaydırma ve dikiş otomasyonu dahil) kolayca çekmenizi sağlar. .NET , vb.) Katmanlar olarak üst üste bindirerek ve üstteki saydamlığı değiştirerek.
Düzenle:
Ekran görüntüsü alma işlemini (dosya kaydetmede) otomatikleştirmek istiyorsanız, böylece:
ekran tutucusu ile bir dosya izleyici gibi bir şey kullanabilirsiniz (lütfen Python yönünü bahane edin, diğer birçok çözüm vardır) . Sonradan işleme otomatikleştirilebilir ve tutarlı pencere konumları (bir program / masaüstü ortamı buna yardımcı olabilir) kullanıyorsanız, tarayıcıların etrafındaki "krom" komut dosyasının bir parçası olarak kesilebilir.
w3schools HTML ve CSS kuralları ile oynamanıza izin verir. Oynamak istediğiniz CSS / HTML'yi bulun ve "Kendiniz deneyin" dediği yere bakın. İşte onların border CSSsayfası ve işte oyun alanları .
Tüm sayfalarımı html / css ile derledim, ardından stilleri eklemek / değiştirmek / denemek için kundakçı veya krom web yöneticisi araçları kullanıyorum. Hızlı, basit ve geçicidir, bu da deneyler için harikadır. Ayrıca, kendi sunucularınızda kendi kodunuzla çalışabilirsiniz, bu da başka bir avantajdır.
Buzzkill: UI Geliştirici bölümüm, gerçek bir tasarım aracında konsept oluşturmanın ve ardından tarayıcılardaki farklılıklar nedeniyle taklit etmek için kod yazmanın daha iyi olduğu konusunda sizi uyarıyor ...
Yan not - Ben Jquery'nin UI Themeroller hayranıyım. Themeroller'ın yandaki stilleri değiştirmesi için böyle bir araç var. Bir siteyi tamamen Themeroller'ın CSS'si üzerinden temalamak, ardından farklı temalar arasında geçiş yapmak mümkündür. Daha önce hiç denemediyseniz, özellikle şu anda çok popüler olan bu "parlak" görünümü arıyorsanız, kurulumu gerçekten hızlandırabilir.
Oraya gidip css'inize yapıştırın ve sonuçları görün.
İşte burada: http://www.oswt.co.uk/developments/style_sheet_viewer/
Soruda tam olarak ne gerekiyor!
İstediğiniz şeyin bu olduğundan emin değilsiniz, ancak CSS Zen Garden'da bir sürü CSS tasarımı içeren bir HTML sayfası var. Bu site için kendi CSS'nizi yazabilirsiniz, örnekler çok ilham vericidir.