css

Kısa sayfalarda footer’ı ekranın altına yerleştirmek için sayfanın ana kapsayıcısını dikey bir flex düzenine alın, kapsayıcıya en az viewport yüksekliği verin ve footer’a margin-top: auto uygulayın. Böylece içerik kısa olduğunda footer alt kenara itilir; içerik uzadığında ise footer ekranın...

İçerik yüksekliği karttan karta değişiyorsa en pratik çözüm, kartları aynı satırda bir flex veya grid kapsayıcısına almak ve kartların kapsayıcının yüksekliğine yayılmasına izin vermektir. Flexbox için kart listesindeki align-items: stretch davranışı çoğu durumda yeterlidir; kartların içindeki...

Bir öğeyi hem görünmez yapmak hem de sayfa düzeninde yer kaplamasını önlemek için CSS’te genellikle display: none; kullanılır. Bu kural öğeyi ekrandan kaldırır ve genişlik-yükseklik hesabına katılmasını engeller. Öğenin görünmemesi, ancak kapladığı alanın korunması gerekiyorsa visibility...

İki sütunlu düzeni mobilde tek sütuna çevirmek için geniş ekran kuralında iki kolon tanımlayıp, ekran daraldığında bir @media sorgusuyla kolon sayısını bire indirin. Aşağıdaki örnekte masaüstünde iki kart yan yana görünür; ekran genişliği 700 pikselin altına düştüğünde kartlar alt alta...

İçeriğin kapladığı alan kadar genişlik için en pratik çözüm, öğeye width: fit-content; vermektir. Bu değer, öğenin genişliğini içeriğin doğal ölçüsüne göre ayarlar; ancak öğe, bulunduğu kapsayıcının kullanılabilir genişliğini aşmaz. Eski tarayıcı desteği veya daha belirgin davranış gerekiyorsa...

Uzun kelimelerin veya kesintisiz metinlerin kutudan taşmasını önlemek için en güvenilir temel çözüm, ilgili elemana overflow-wrap: anywhere; eklemektir. Kelimenin yalnızca uygun yerlerinden bölünmesini istiyorsanız overflow-wrap: break-word; kullanabilirsiniz. Kutunun yatayda genişlemesini de...

İstenen öğeyi şeffaf yapmak için CSS’te opacity kullanabilirsiniz. opacity: 0.5; öğeyi ve içindeki metin, görsel gibi tüm alt içerikleri yüzde 50 görünür bırakır; yalnız arka planı şeffaflaştırmak istiyorsanız renk değerinde alfa kanalı kullanmanız gerekir. Tamamen görünmez olan bir öğe için...

İçeriğin arkasındaki görselin sayfa kaydırılırken ekranda sabit kalmasını istiyorsanız CSS içinde background-attachment: fixed; kullanın. Görseli ilgili elemana background-image ile tanımlayın; okunabilir bir görünüm için genellikle background-size: cover; ve background-position: center...

Fareyle bir öğenin üzerine gelindiğinde rengini değiştirmek için CSS’te :hover sözde sınıfını kullanın. Örneğin bir düğmenin normal rengini background-color ile, fare üzerine geldiğindeki rengini ise .buton:hover seçicisiyle tanımlayabilirsiniz. Aşağıdaki örneği bir HTML dosyasına kaydedip...

CSS’te z-index çalışmıyorsa sorun çoğunlukla değerin küçük olması değil, öğelerin farklı yığılma bağlamlarında bulunması, öğede konumlandırma olmaması veya başka bir üst öğenin yığını sınırlamasıdır. Önce öne almak istediğiniz öğeye position: relative, absolute, fixed ya da sticky verin...

İçeriği hem yatay hem dikey ortalamak için en pratik yöntem, kapsayıcı div öğesine display: flex, justify-content: center ve align-items: center vermektir. Kapsayıcının yüksekliği belirli veya ekran yüksekliğine göre ayarlanmışsa içindeki öğe iki eksende de ortalanır. Aşağıdaki örneği doğrudan...

İçeriğin ekran genişliğine göre kendiliğinden büyüyüp küçülmesini istiyorsanız CSS’te clamp() ile birlikte vw kullanın. Örneğin font-size: clamp(1.125rem, 2vw, 2rem); kuralı yazı boyutunu ekran genişliğine göre değiştirir; ancak belirlediğiniz en küçük ve en büyük değerlerin dışına çıkmaz...

İki boyutlu bir kart alanı için CSS Grid kullanarak sütun sayısını ekran genişliğine göre otomatik değiştirebilirsin. Bunun için kartları taşıyan elemana display: grid ve grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); kurallarını ver; kartlar dar ekranlarda alt alta, geniş...

Görseli bir kutuya sığdırmak için önce kutunun ölçülerini belirleyin, ardından görsele width: 100% ve height: 100% verin. Görselin kutuyu tamamen doldurmasını ve kenarlardan kırpılmasını istiyorsanız object-fit: cover; görselin tamamı görünsün, boşluk kalması sorun değilse object-fit: contain...

İlk olarak menünün HTML yapısını ve mobilde açılıp kapanmasını sağlayacak bir düğmeyi oluşturun. Ardından CSS medya sorgusuyla geniş ekranda görünen bağlantıları mobilde gizleyin; mobil düğmeye basıldığında eklenecek bir sınıf üzerinden bağlantıları tekrar gösterin. Yalnız CSS ile görsel düzen...

CSS ile bir öğeyi ekranda sabit tutmak için çoğu durumda position: fixed kullanılır. Bu değer, öğeyi normal belge akışından çıkarır ve tarayıcı penceresine göre konumlandırır; sayfa aşağı veya yukarı kaydırılsa bile öğe aynı yerde kalır. Örneğin sağ alt köşede sabit duran bir buton için öğeye...

Taşan yazıyı tek satırda üç nokta ile göstermek için öğeye sabit veya sınırlı bir genişlik verip overflow: hidden, white-space: nowrap ve text-overflow: ellipsis özelliklerini birlikte uygulayın. Böylece metin kutuya sığmadığında görünmeyen bölüm yerine ... gösterilir. Birden fazla satırın...

Flexbox ile bir öğeyi hem yatay hem dikey ortalamak için kapsayıcıda display: flex, justify-content: center ve align-items: center birlikte kullanılır. Dikey hizalamanın görülebilmesi için kapsayıcının bir yüksekliği de olmalıdır. Çalışan HTML ve CSS örneği Önce kapsayıcıyı ve içindeki öğeleri...

CSS Nedir? CSS, "Cascading Style Sheets" kelimelerinin kısaltmasıdır. Türkçede "Akışkan Stil Sayfaları" olarak çevrilebilir. Web sayfalarının görünümünü ve düzenini tanımlamak için kullanılan bir dil olan CSS, HTML ile birlikte çalışır ve web tasarımında önemli bir rol oynar. CSS, web...

CSS içindeki *, evrensel seçici olarak bilinir. En kısa anlamıyla, türü ne olursa olsun bütün öğeleri eşleştirebilir. Bu yüzden * tek başına yazıldığında sayfadaki tüm öğelere uygulanır; başka bir seçiciyle birlikte yazıldığında ise kapsamı o ilişkiye göre daralır. Önemli iki ayrıntı şudur: *...