css

İki öğeden biri diğerinin arkasında kalıyorsa önce öne almak istediğiniz öğeye position değeri verin, ardından daha yüksek bir z-index kullanın. Örneğin position: relative; z-index: 2; çoğu durumda yeterlidir. Değişiklik etkili olmuyorsa sorun genellikle öğenin kendi stacking context katmanında...

İki sütunlu düzeni mobilde tek sütuna çevirmek için masaüstünde kullanılan sütun yapısını koruyup, ekran genişliği belirli bir değerin altına düştüğünde grid-template-columns veya flex-direction değerini tek sütun olacak şekilde değiştirebilirsiniz. En pratik yöntem, masaüstü düzenini varsayılan...

İlk olarak öğeye position: fixed verin; ardından ekranın üst kenarına top: 0 ve yatay konumuna göre left: 0, right: 0 ya da genişlik tanımlayın. Böylece öğe, sayfa kaydırılsa bile tarayıcı penceresinin üstünde kalır. Eğer öğenin yalnızca belirli bir kapsayıcı içinde kaydırılırken üstte kalmasını...

CSS ile yazı tipini değiştirmek için font-family, metin boyutunu değiştirmek için font-size özelliğini kullanırsınız. Bu kuralları bir seçiciye, örneğin body, p veya bir sınıfa uyguladığınızda ilgili HTML öğelerinin yazı görünümü değişir. Yazı tipinin gerçekten görüntülenebilmesi için...

İmgenin en-boy oranını bozmadan bir kutuya sığmasını sağlamak için görsele width: 100%; height: 100%; object-fit: contain; uygulayın. Böylece resim kutuya tamamen sığar; kutu oranı ile resmin oranı farklıysa boşluk kalabilir. Kutuyu tamamen doldurmak istiyorsanız object-fit: cover; kullanın; bu...

CSS ile bir öğenin hem görünmemesini hem de sayfada hiç yer kaplamamasını istiyorsanız display: none; kullanın. Öğe yeniden gösterildiğinde display değerini elemanın türüne uygun biçimde block, inline veya flex olarak geri vermeniz gerekir. Yalnızca görünürlüğü kaldırıp mevcut boşluğu korumak...

İlk olarak metin kutusuna overflow-wrap: anywhere; veya daha kontrollü olarak overflow-wrap: break-word; ekleyin. Uzun ve boşluksuz bir metnin kutudan taşmasını önlemek için çoğu durumda overflow-wrap: anywhere; yeterlidir. Metnin normal boşluklardan alt satıra geçmesini istiyor, ancak uzun URL...

Kutuların birbirine olan dış boşluğunu ayarlamak için en pratik özellik gap özelliğidir. Kutular display: flex veya display: grid ile aynı kapsayıcı içinde duruyorsa kapsayıcıya gap: 20px; yazın. Eski veya farklı yerleşimlerde kutuların dış kenar boşluğu için margin, kutunun kendi içindeki...

CSS ile bir öğeye hover efekti eklemek için öğenin seçicisine :hover sözde sınıfını ekleyip, fare imleci öğenin üzerine geldiğinde değişmesini istediğiniz stilleri yazmanız yeterlidir. Örneğin bir düğmenin rengini ve arka planını değiştirmek için HTML öğesini oluşturun, ardından CSS içinde...

CSS Grid ile duyarlı kart düzeni yapmak için kartları bir kapsayıcı içine alın ve kapsayıcıya display: grid, grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) ve gap tanımlayın. Böylece tarayıcı, kullanılabilir genişliğe göre sütun sayısını otomatik ayarlar; kartlar dar ekranda alt...

İçeriği hem yatay hem dikey olarak ortalamak için öğenin kapsayıcısına display: flex, justify-content: center ve align-items: center tanımlayın. Dikey hizalamanın görünür olması için kapsayıcının bir yüksekliği veya min-height değeri bulunmalıdır; aksi durumda ortalanacak kullanılabilir dikey...

CSS konusunda sık yapılan hataları önlemenin en güvenilir yolu, stilleri rastgele eklemek yerine tarayıcının hangi kuralı neden uyguladığını sistemli biçimde kontrol etmektir. Önce HTML yapısını ve sınıf adlarını doğrulayın, ardından seçici önceliğini, kutu modelini, responsive kırılma...

İçerik kısa olduğunda footer’ın ekranın ortasında kalmaması için sayfanın ana kapsayıcısını en az ekran yüksekliği kadar büyütün ve içeriği esnek bırakın. En pratik çözüm, body üzerinde sütun yönlü Flexbox kullanıp footer’a margin-top: auto vermektir. Böylece içerik azsa footer ekranın altına...

İstenilen sonucu almak için resme border-radius: 50%; uygulayın. Resmin genişliği ve yüksekliği eşitse görsel daire olur; farklıysa elips görünür. Görselin oranını bozmadan daire içine sığması için genellikle object-fit: cover; da eklenir. Resmi daireye dönüştürme Önce resmi HTML içinde normal...

İlk olarak yatay taşmanın kaynağını düzeltin; yalnızca body { overflow-x: hidden; } eklemek sorunu gizleyebilir. Mobilde yatay kaydırmayı engellemek için sayfa genişliğini aşan görsel, tablo, sabit genişlikli kutu veya flex öğesini daraltın; ardından kök öğelerde yatay taşmayı sınırlayın...

İstenen görünüm için arka plan görselini kapladığı alana bozulmadan yaymak istiyorsanız background-size: cover; kullanın. Görsel, kapsayıcının tamamını doldurur; en-boy oranını koruduğu için kenarlardan bir miktar kırpılabilir. Görselin tamamı mutlaka görünsün, ancak boşluk kalabilsin...

İçeriğin farklı ekranlarda okunabilir kalması için yazı boyutunu sabit bir piksel değeriyle sınırlamak yerine rem, vw ve clamp() birlikte kullanılabilir. En pratik çözüm, yazı boyutuna bir alt ve üst sınır koyan clamp() işlevidir: ekran genişledikçe metin kontrollü biçimde büyür, ancak çok küçük...

CSS ile sabit başlık nasıl çalışır? Bir başlığın sayfa kaydırılırken görünür kalmasını istiyorsanız çoğu durumda position: sticky kullanmanız yeterlidir. Başlığa top: 0 değeri verin, arka plan ve z-index tanımlayın; ardından başlığın içinde bulunduğu alanın yüksekliğinin kaydırma sırasında...

İki öğenin üst üste binmesi genellikle normal akışın devre dışı kalmasından, öğelerin konumlandırılmasından, katman sırasından veya ebeveyn yüksekliğinin yanlış hesaplanmasından kaynaklanır. Önce tarayıcının geliştirici araçlarında üstte görünen öğeyi ve kapladığı alanı inceleyin; ardından...

İçeriğin hem görünmesini hem de yer kaplamasını kaldırmak için display: none; kullanın. Öğe sayfanın düzeninden çıkarılır; çevresindeki öğeler boşalan alana yerleşir. Yalnızca görünmez olmasını, ancak bulunduğu alanın korunmasını istiyorsanız visibility: hidden; kullanın. Saydamlaştırma için...