css

Bir öğenin üste çıkmamasının nedeni genellikle z-index değerinin uygulanmaması, öğenin daha altta kalan bir yığılma bağlamına hapsolması veya içeriğin bir üst kapsayıcı tarafından kırpılmasıdır. Önce tarayıcının geliştirici araçlarında öğenin uygulanan CSS değerlerini inceleyin; ardından onu...

CSS ile yazı tipini değiştirmek için ilgili öğeye font-family özelliği verin. Sayfanın tamamı için bu özelliği body seçicisine, yalnızca belirli bir metin için o metni seçen kurala yazabilirsiniz. Tarayıcının ilk tercihi bulamaması ihtimaline karşı listenin sonuna genel bir yazı tipi ailesi...

CSS'yi güvenli uygulamak için stilleri kontrol ettiğiniz dosyalarda tutun, kullanıcı girdisini doğrudan CSS koduna dönüştürmeyin ve değişiklikleri canlıya almadan önce izole bir ortamda sınayın. Ardından içerik güvenliği politikasıyla stil kaynaklarını sınırlayın; bu politika, güvenli kod ve...

Görseli kutuyu tamamen dolduracak şekilde kırpmak için <img> öğesine belirli bir genişlik ve yükseklik verip object-fit: cover uygulayın. Görselin en-boy oranı korunur; kutuyla oranı farklıysa dışarıda kalan bölüm gösterilmez. Görünmesini istediğiniz alanı da object-position ile seçebilirsiniz...

Arka plan görselinin ekranı boşluk bırakmadan kaplaması için görseli ekran yüksekliğine ulaşan bir öğeye uygulayın ve background-size: cover kullanın. Görsel oranını koruyarak alanı doldurur; ekranla en-boy oranları farklıysa kenarlarının bir kısmı kırpılabilir. Arka planı uygulayın Aşağıdaki...

CSS’te köşeleri yuvarlatmak için öğeye border-radius uygulayın; görünür bir kenarlık da istiyorsanız border ile kalınlığını, stilini ve rengini belirleyin. Örneğin border-radius: 12px, dört köşeyi de yuvarlatır. Kenarlık tanımlanmasa bile öğenin arka planı bu köşe biçimini izler. Kenarlık ve...

Bir öğeyi diğerinin üzerine yerleştirmek için ortak bir kapsayıcıya position: relative, üstte görünecek öğeye position: absolute verin. Ardından top, right, bottom veya left ile konumunu, gerektiğinde z-index ile katman sırasını belirleyin. Böylece üstteki öğeyi kapsayıcıya göre...

Bir öğeyi sayfa kaydırılırken ekranın altında tutmak için öğeye position: fixed ve bottom: 0 uygulayın. Tam genişlikte bir çubuk istiyorsanız left: 0 ve right: 0 da ekleyin. Sabit öğe normal sayfa akışında yer kaplamadığı için, alttaki içeriğin üzerini örtmemesine ayrıca dikkat edin. Alt çubuk...

Bir öğenin ekranın üstünde sabit kalması için ona position: fixed ve top: 0 verin. Diğer içerik normal biçimde kayabilir; ancak sabit öğe sayfa akışında yer kaplamadığı için içeriğin üstüne, öğenin yüksekliği kadar boşluk bırakmanız gerekir. Öğenin yalnız kaydırılarak üst sınıra ulaştığında...

Metnin mobilde satır kaydırması için kapsayıcının ekran genişliğine uyum sağlamasını ve metinde satır kaydırmanın açık olmasını sağlayın. Uzun, boşluksuz sözcükler ve bağlantılar için overflow-wrap: anywhere kullanın. Metin bir flex veya grid öğesindeyse öğenin küçülebilmesi için min-width: 0 da...

Mobil ekranda bir görselin taşmadan ve oranı bozulmadan küçülmesi için görsele max-width: 100% ve height: auto uygulayın. Görsel, içinde bulunduğu alan daraldıkça küçülür; alan genişlediğinde ise normal boyutunun üzerine çıkmaz. Mobil tarayıcının sayfayı cihaz genişliğine göre düzenlemesi için...

Kartların bulunduğu kapsayıcıya CSS Grid uygulayıp sütunları repeat(auto-fit, minmax(...)) ile tanımlayabilirsiniz. Böylece kapsayıcıya sığan sütun sayısı otomatik belirlenir; alan daraldığında kartlar yeni satıra geçer, genişlediğinde ise kullanılabilir alanı paylaşır. Kart düzenini oluşturun...

Uzun bir metni tek satırda üç noktayla göstermek için metin alanının genişliğini sınırlandırın; ardından white-space: nowrap, overflow: hidden ve text-overflow: ellipsis kurallarını birlikte uygulayın. Metin alana sığarsa olduğu gibi görünür; taşarsa görünen kısmın sonunda (…) işareti yer alır...

Mobil menüyü ekran genişliğine göre düzenlemek için önce dar ekran stilini tanımlayın, ardından @media sorgusuyla yeterli alan oluştuğunda bağlantıları yatay yerleştirin. Aşağıdaki örnek, telefonda dikey ve sürekli görünür bir menü oluşturur; geniş ekranda ise aynı bağlantıları yan yana...

Butonun normal rengini CSS’te belirleyip :hover seçicisine farklı bir renk vererek imleç üzerine geldiğinde renk değişimi sağlayabilirsiniz. İsteğe bağlı transition özelliğiyle de bu değişimi yumuşatabilirsiniz. Butona hover rengi ekleyin Aşağıdaki örneği denemek için kodu bir metin...

Bir öğenin kutusuna gölge eklemek için CSS’te box-shadow özelliğini kullanın. Yatay ve dikey uzaklığı, bulanıklığı ve rengi belirleyerek gölgenin konumunu ve görünümünü ayarlayabilirsiniz. Aşağıdaki örneği bir HTML dosyasına kaydedip tarayıcıda açtığınızda kartın altında yumuşak bir gölge...

Bir öğeyi hem yatay hem dikey ortalamak için kapsayıcısına display: flex, justify-content: center ve align-items: center uygulayın. Dikey ortalamanın görünmesi için kapsayıcının içerikten daha yüksek olması gerekir. Alternatif olarak Grid ile place-items: center kullanabilirsiniz. Flexbox ile...

Bir arka plan görselinin kutuyu kaplaması için kutuya background-size: cover uygulayın. Görselin ortalanması için background-position: center, tekrarlanmaması için de background-repeat: no-repeat ekleyin. Cover, görselin oranını korur; kutuyla görselin oranları farklıysa kenarların bir kısmı...

Bir öğenin kapsayıcısını yatay olarak aşmaması için genellikle max-width: 100% ve box-sizing: border-box kullanılır. Ardından içeriğin türüne göre uzun metinleri satıra bölebilir, görselleri orantılı küçültebilir veya flex ve grid öğelerinin daralmasına izin verebilirsiniz. Bu kurallar her...

Yatay kaydırma çubuğunu kaldırmak için önce taşmaya neden olan öğeyi düzeltin; geçici olarak sayfanın yatay taşmasını html, body { overflow-x: hidden; } ile gizleyebilirsiniz. Ancak bu kural, genişleyen öğeyi düzeltmez; yalnızca ekran dışına taşan içeriğin görünmesini ve yatay kaydırılmasını...