Salı 21 Mart 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. CSS
  3. Gutenberg.css ile Baskı Dostu Sayfa Oluşturma
 Gutenberg.css ile Baskı Dostu Sayfa Oluşturma
CSS

Gutenberg.css ile Baskı Dostu Sayfa Oluşturma

Yazar : Fatih 22 Ocak 2017 0 Comment

Web tasarımcılar genellikle baskı konusunu ihmal ederler çünkü günümüzde çok az gerekli gibi gözüküyor olabilir. Bazen bir web sitedeki makaleyi yazdırmak isteyebiliyoruz. Ctrl+P yaptığımız vakit tüm sayfayı olduğu yazdırmak gibi durumla karşı karşıya kalabiliyoruz. Ctrl+P ile direk makaleyi yazdırmak sizce nasıl olurdu?

Bilgilendirici web sitelerinde özel bir baskı stili sunmak faydalı bir uygulamadır. Gutenberg yardıma hazır olduğu için kendi tasarımınızı tasarlamanız gerekmez. Çünkü Gutenberg.css kendi temalarıyla özel baskı sayfalar oluşturmanız size pratiklik kazandıracaktır.

Modern Matbaacılığın Babası olarak kabul edilen matbaa devriminin başlangıcını yapan Johannes Gutenberg‘in adını alan bu CSS kütüphanesi, baskı sayfası tasarımları için bağımsız bir kaynaktır.

Johannes Gutenberg css

Sadece Gutenberg.css dosyasını sayfanızın head kısmına eklediğiniz zaman kullanıma hazır hale gelecektir.

Bir ziyaretçi sayfanızı yazdırmaya gittiğinde yazdırma ayarına bağlı olarak otomatik olarak yeniden yapılandırılmalıdır. Buda media = "print" HTML özelliğini kullanarak ayarlanabilir.

Baskı sayfa stilleri ve nasıl bir çalışma mantığı olduğu hakkında biraz daha bilgi edinmek isterseniz bu kılavuzu gözden geçirebilirsiniz.

Gutenberg’in güzel bir yanıda ekstra sınıflar ve stiller ile geliyor olmasıdır.

Temalar klasörüne göz atın ve üç alternatif baskı teması bulacaksınız: book, modern ve old style.

different-gutenberg-themes

Bunlardan herhangi birini varsayılan gutenberg.css dosyasının üstüne ekleyerek varsayılan yapabilirsiniz.

Bir Kaç Örnek

Element Gizleme

Ayrıca belirli CSS sınıflarını ekleyerek sayfayı basmak için farklı şekilde stil uygulayabilirsiniz. Örneğin .no-print sınıfı, bir elementi baskı stilinde tamamen gizleyecektir.

Sayfa Sonu Ekleme

Gutenberg de çıktı alacağımız yazıda sayfa sonu(page break) yapmamızada olanak sağlar. Sayfa sonu çıktı alınırken özellikle çok dikkat edilmesi gereken bir özelliktir. page-break sınıfı kullanılarak yeni bir sayfaya yazdırılması sağlanır.

Gutenberg’in kurulumunu 5 dakikadan daha kısa bir sürede alacak ve tüm sitenizi yazdırmaya uygun hale getirebilirsiniz. Daha fazla bilgi edinmek için dokümantasyonlara göz atabileceğiniz Gutenberg GitHub sayfasını ziyaret edebilirsiniz.

Geri bildiriminizi aşağıdaki yorum bölümüne bırakmayı unutmayın. Umarım faydalı olmuştur. Herkese iyi çalışmalar diliyorum. Webmaster Mutfakta kalın. ?

İşin mutfağını öğrenmek herkesin hakkı! Webmaster Kitchen işin mutfağını öğrenin.  ?

Etiketler: baskı dostu sayfa oluşturma baskı dostu web sayfası css ile sayfa sonu ekleme Gutenberg.css Gutenberg.css nasıl kullanılır Gutenberg.css ne işe yarar Gutenberg.css nedir
Önceki Yazı
Sonraki Yazı

Fatih

author

Yorum Yap Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.