CSS İle Neler Yapılabilir?

CSS (Cascading Style Sheets), web sayfalarının görünümünü düzenlemek için kullanılan bir stil dilidir. CSS ile birçok tasarım özelliği ve efekti uygulamak mümkündür. İşte CSS kullanarak gerçekleştirilebilecek bazı önemli şeyler:

1. Renk ve Arka Planlar:

   • color özelliği ile metin renkleri belirlenebilir.
   • background-color özelliği ile arka plan renkleri belirlenebilir.
   • Saydam arka planlar için rgba veya hsla kullanılabilir.

   body { color: #333; background-color: #f0f0f0; } .box { background-color: rgba(255, 0, 0, 0.5); } 

   Canlı Dene Kopyala

2. Tipografi:

   • Metin boyutu, tipi ve ağırlığı belirlenebilir.
   • font-family ile yazı tipi belirlenebilir.

   p { font-size: 16px; font-family: 'Arial', sans-serif; font-weight: bold; } 

   Canlı Dene Kopyala

3. Düzen ve Pozisyon:

   • Öğelerin konumları ve düzeni position, float, margin, padding gibi özelliklerle kontrol edilebilir.
   • flexbox ve grid gibi modern düzenleme teknikleri kullanılabilir.

   .container { display: flex; justify-content: center; align-items: center; } 

   Canlı Dene Kopyala

4. Gölgeler ve Kenarlık:

   • box-shadow ile kutulara gölgeler ekleyebilirsiniz.
   • border özellikleri ile kenarlıklar belirlenebilir.

   .box { box-shadow: 2px 2px 5px #888888; border: 1px solid #333; } 

   Canlı Dene Kopyala

5. Animasyonlar ve Geçişler:

   • @keyframes ile özel animasyonlar oluşturabilirsiniz.
   • transition özellikleri ile geçiş efektleri uygulayabilirsiniz.

   @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 1s ease-in-out; } 

   Canlı Dene Kopyala

6. Responsive Tasarım:

   • @media sorguları ile ekran boyutlarına bağlı olarak farklı stil kuralları uygulayabilirsiniz.
   • Mobil cihazlar için düzenlemeler yapabilirsiniz.

   @media (max-width: 768px) { .menu { display: none; } } 

   Canlı Dene Kopyala

7. Transformasyonlar:

   • transform özellikleri ile öğeleri döndürebilir, ölçeklendirebilir ve konumlandırabilirsiniz.

   .rotate { transform: rotate(45deg); } .scale { transform: scale(1.5); } 

   Canlı Dene Kopyala

Bu sadece CSS'nin temel özelliklerine birkaç örnek. CSS'nin zengin özellik seti sayesinde web sayfalarını daha çekici, düzenli ve kullanıcı dostu hale getirmek mümkündür.