Home / css sorgusuna yönelik arama sonuçları
css sorgusu için yayınlar alaka düzeyine göre sıralanmış olarak gösteriliyor. Tarihe göre sırala Tüm yayınları göster
css sorgusu için yayınlar alaka düzeyine göre sıralanmış olarak gösteriliyor. Tarihe göre sırala Tüm yayınları göster

23 Mart 2023 Perşembe

Css Nedir Nelerde Kullanılır

 merhaba degerli webyazilimciniz aılesı bu makelemizde sizlere css nedir nelerde kullanılır css ile ne yapılır onu anlatacam ve css sıstemıyle neler yapabılırsınız bu yazımda sızlere anlatacam ;

Öncelik Css nedir once onu anlatayım size


CSS, yani Cascading Style Sheets (Kademeli Stil Şablonları), web sayfalarının görünümünü düzenlemek ve biçimlendirmek için kullanılan bir stil dilidir. HTML veya XHTML gibi işaretlemelerle oluşturulan web sayfalarına uygulanarak, sayfanın nasıl görüneceğini belirlemek için kullanılır.

CSS, web tarayıcıları tarafından yorumlanır ve sayfanın farklı öğelerine nasıl stil uygulanacağını tanımlayan kurallar setini içerir. Bu kurallar, öğelerin renkleri, boyutları, kenarlık, arka planlar, yazı tipleri ve diğer birçok özelliğini kontrol etmek için kullanılabilir. CSS sayesinde, bir web sitesinin tasarımı ve düzeni ayrı bir şekilde kontrol edilebilir, böylece içerik ve görünüm birbirinden bağımsız hale gelir.

CSS'nin bazı yaygın kullanım alanları şunlardır:

  1. Web Sayfaları Tasarımı: CSS, web sayfalarının görsel tasarımını yapmak için kullanılır. Renkler, tipografi, düzen, arka planlar, buton stilleri, navigasyon menüleri gibi birçok öğenin görünümü CSS ile kontrol edilebilir.

  2. Responsive Web Tasarımı: CSS, web sayfalarının farklı ekran boyutlarına ve cihazlara uyum sağlamasını sağlayan responsive tasarımın oluşturulmasında kullanılır. Medya sorguları ve farklı düzenleme teknikleriyle, bir web sayfasının farklı ekranlarda nasıl görüneceği belirlenebilir.

  3. Web Uygulamaları Tasarımı: CSS, web uygulamalarının kullanıcı arayüzlerini stilize etmek için kullanılır. Formlar, tablolar, düğmeler, modallar gibi arayüz öğelerinin görünümü CSS ile düzenlenebilir.

  4. Baskı Stilleri: CSS, web sayfalarının baskı sürümleri için farklı stil tanımlamaları yapmayı sağlar. Bu sayede web sayfaları yazdırıldığında nasıl görüneceğini kontrol etmek mümkün olur.

  5. Animasyonlar: CSS, hareketli ve etkileşimli web sayfalarının oluşturulmasında kullanılır. Transitions, transforms ve keyframes gibi CSS özellikleri ile animasyonlar tanımlanabilir.

CSS, web tasarım ve geliştirme süreçlerinde yaygın olarak kullanılan bir araçtır ve web sitelerinin kullanıcı deneyimini ve görünümünü geliştirmek için büyük öneme sahiptir.

Yorum

26 Ocak 2025 Pazar

Blogger Karanlık Gece Modu


Blogger'da Karanlık Gece Modu, sitenizin veya blogunuzun ziyaretçiler için daha göz dostu bir görünüm sunmasını sağlayan bir tasarım seçeneğidir. Bu mod, özellikle düşük ışıklı ortamlarda daha rahat bir okuma deneyimi sunmak için koyu arka plan renkleri ve açık yazı renkleri kullanır.

Karanlık Gece Modunun Avantajları:

  1. Göz Yorgunluğunu Azaltır: Gece veya karanlık ortamlarda, parlak arka plan gözleri yorabilir. Karanlık mod, bu yorgunluğu azaltır.
  2. Pil Tasarrufu: OLED ve AMOLED ekranlarda karanlık renkler daha az enerji tüketir, bu da mobil cihazlarda pil ömrünü uzatır.
  3. Modern Görünüm: Karanlık mod, birçok kullanıcı tarafından estetik bir tercih olarak görülür ve profesyonel bir hava katar.
  4. Daha Rahat Okuma: Düşük ışıkta göz kamaşmasını önler ve metinlerin daha kolay okunmasını sağlar.

Blogger'da Karanlık Mod Nasıl Aktif Edilir?

Blogger'da doğrudan bir "karanlık mod" seçeneği bulunmasa da, aşağıdaki yöntemlerle bu görünümü elde edebilirsiniz:

  1. Tema Özellikleri ile:

    • Blogger'ın modern temalarında (Contempo, Soho, Notable gibi) yerleşik olarak karanlık mod tasarımları bulunabilir. Tema ayarlarından koyu renk şemalarını seçebilirsiniz.

Blogger Gece Modu (Karanlık Mod) Nasıl Yapılır?​

Şimdi ilk olarak yapmanız gereken /body> etiketini temanızın içerisinde aratarak bulmak olacak. Bulduğunuz zaman aşağıda vereceğimiz javascript kodunu hemen üstüne yapıştıracaksınız. Yani <body> etiketine dark adında bir class eklemiş olacağız. Bu da temanın özelleştirilmesine olanak sağlamış oluyor.

Blogger Gece Modu İçin Javascript Kodları​

JavaScript:
<script>
 $(document).ready(function($) { 
    var mode = localStorage.getItem('mode');
  if (mode)
      $('body').addClass(mode);
  $(".darkmode").click(function() {
    $("body").addClass("dark");
    localStorage.setItem('mode', 'dark');
  });
  $(".normalmode").click(function() {
    $("body").removeClass("dark");
 $("body").addClass("normal");
    localStorage.setItem('mode', null);
  });
});
 </script>

Daha sonra CSS kodları ile yapılması gereken işlemler geliyor. Aşağıda belirttiğimiz CSS kodları sizlere örnek olması amacıyla sunulmuştur. Çünkü kodlar içinde yer alan etiketler tema ya da şablona göre değişiklik gösterebilmektedir. Bu değişikliğe örnek verecek olursak, .post class değil de tema içerisinde .yazi ya da .content class şeklinde kod yapısı olabilmektedir. Tabi bizim için buradaki önemli durumlardan bir tanesi de CSS düzenlemesi yaparken body.dark .post{} veya body.dark .sidebar{} şekillerinde düzenleme yapılması gerektiğidir.

CSS:
<style>
body.dark {background:#212121 !important; color: #f9f9f9;}
body.dark .header{background:#424242}
body.dark a, body.dark h1, body.dark h2, body.dark h3{color: #f9f9f9;}
body.dark .blog {background:#212121 !important; color: #f9f9f9;}
body.dark .blog-post__content{background:#424242}
body.dark .footer{background:#424242}
body.dark .footer__credit{background:#616161}
body.dark .footer__text{color:#f9f9f9}
body.dark #comments{background:#424242}
body.dark #comments a.comment-reply{background:#616161; color: #f9f9f9;}
body.dark ul.trail-items a{color:#f9f9f9}
body.dark .blog-post__content pre{background:#212121; margin-top:15px; margin-bottom:15px; color:#f9f9f9;}
body.dark #xsidebar .widget {margin-bottom: 20px; background:#424242; padding: 20px; box-shadow: 0 10px 30px gba(0,0,0,.05);
}
body.dark .light, body:not(.dark) .dark {display: none;}
</style>

Son olarak elbette ki gece modu ile normal mod arasında geçiş yapılabilmesi için bir ikon ya da bir yazı oluşturmamız gerekecek. Eğer ikon eklemesi yapacaksanız fontawesome kullanmanız gerekiyor. Olur da fontawesome kullanmıyorsanız ikonlar görünmüyor.

CSS:
<a class="normalmode"><i class="dark fal fa-sun"></i>Normal Mod</a>
<a class="darkmode"><i class="light fal fa-moon"></i>Gece Modu</a>



 

Yorum

8 Ekim 2023 Pazar

.Htaccess Güvelik Önlemleri

 


.htaccess dosyası, bir Apache web sunucusu üzerindeki web sitenizin davranışını özelleştirmenize ve güvenlik önlemleri almanıza yardımcı olan önemli bir konfigürasyon dosyasıdır. .htaccess dosyasını kullanarak web sitenizi güvende tutmak için çeşitli güvenlik önlemleri alabilirsiniz. İşte bazı yaygın .htaccess güvenlik önlemleri:

  1. Erişim Kontrolü:

    • Tüm dizinlerin listelenmesini engellemek için: Options -Indexes
    • Sadece belirli IP adreslerinden erişime izin vermek için:
      css
      order deny,allow
deny from all
allow from 192.168.1.100

  2. Hotlink Koruması:

    • Diğer sitelerin resimlerinizi kullanmasını engellemek için:
      ruby
      RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?example.com/ [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [F]

  3. Dosya Türü Kısıtlaması:

    • İzin verilen dosya türlerini sınırlamak için:
      css
      <FilesMatch "\.(php|html|htm)$">
Order allow,deny
Deny from all
</FilesMatch>

  4. Dizin Güvenliği:

    • .htaccess dosyasının güvenliğini sağlamak için:
      css
      <Files .htaccess>
order allow,deny
deny from all
</Files>

  5. Güvenlik Duvarı (Firewall) Ekleme:

    • Belirli IP adreslerine veya IP aralıklarına erişimi engellemek için:
      css
      order deny,allow
deny from 192.168.1.100
allow from all

  6. Zararlı URL'lere Karşı Korumak:

    • Zararlı URL'leri engellemek için:
      scss
      RewriteEngine On
RewriteCond %{QUERY_STRING} (eval\() [NC,OR]
RewriteCond %{QUERY_STRING} (127\.0\.0\.1) [NC,OR]
RewriteCond %{QUERY_STRING} ([a-z0-9]{2000,}) [NC]
RewriteRule ^(.*)$ - [F]

  7. Dosya Erişimini Kısıtlamak:

    • Özel dosyalara erişimi engellemek için:
      sql
      <FilesMatch "(config\.php|config\.inc|config\.cfg)">
Order allow,deny
Deny from all
</FilesMatch>

Bu örnekler, .htaccess dosyası ile yapabileceğiniz bazı temel güvenlik önlemlerini göstermektedir. Web sitenizin gereksinimlerine göre bu önlemleri uygun şekilde özelleştirebilirsiniz. Ancak unutmayın ki .htaccess dosyasını düzenlerken dikkatli olmalı ve hatalı yapılandırmalardan kaçınmalısınız, aksi takdirde web sitenizin işlevselliği etkilenebilir.


Yorum
Kaydol: Kayıtlar (Atom)