css

İçeriği farklı kartları aynı satırda eşitlemenin en pratik yolu, kartları saran kapsayıcıyı display: flex veya display: grid yapmaktır. Flex düzeninde kartların varsayılan çapraz eksen davranışı olan stretch sayesinde aynı satırdaki kartlar en uzun kartın yüksekliğine uzar. Grid kullanıyorsanız...

Mobil ekranda yazı boyutunu CSS ile ayarlamak için önce sayfaya doğru viewport bildirimi ekleyin, ardından yazı boyutunu rem, em veya clamp() ile tanımlayın. Sabit bir mobil değer gerekiyorsa medya sorgusu kullanabilirsiniz; farklı ekran genişliklerinde yazının kontrollü biçimde büyüyüp...

Ekran boyutuna göre bir öğeyi gizlemek için CSS medya sorgusu kullanılır. Belirlediğiniz genişlik koşulu sağlandığında öğeye display: none; vererek onu hem görünmez hem de sayfa akışından çıkarabilirsiniz. Örneğin aşağıdaki kod, duyuru kutusunu ekran genişliği 768 pikselin altına düştüğünde...

CSS öğrenmeye başlamak için önce temel HTML yapısını kurun, ardından CSS dosyasını bu sayfaya bağlayıp seçici, özellik ve değer mantığını uygulayın. Başlangıçta renk, yazı, boşluk, kenarlık ve genişlik gibi temel özellikleri kullanarak küçük bir kart tasarlayın. Sayfayı tarayıcıda açıp...

CSS ile mobil menüyü açıp kapatmanın en basit yolu, menünün görünürlüğünü bir checkbox durumuna bağlamaktır. Kullanıcı menü düğmesine dokunduğunda checkbox işaretlenir, CSS de :checked seçicisiyle menüyü görünür yapar. Aşağıdaki örnekte masaüstünde menü normal görünür; dar ekranlarda ise menü...

İstenilen yazıyı görselin üzerine yerleştirmek için görseli ve metni aynı kapsayıcıya alın, kapsayıcıya position: relative, yazıya ise position: absolute verin. Böylece yazı, kapsayıcının sınırları içinde konumlanır. Aşağıdaki örneği doğrudan HTML ve CSS dosyanıza eklediğinizde metin görselin...

İçeriğin üzerinde kaydırma yapılırken arka plan görselinin ekranla birlikte yerinde kalmasını istiyorsanız background-attachment: fixed; kullanın. Görseli sayfanın tamamına sabitlemek için kuralı genellikle body veya html seçicisine ekleyebilirsiniz. Görsel ekranı kaplasın ve tekrar etmesin...

Bir öğeyi diğerinin üzerine konumlandırmak için kapsayıcı öğeye position: relative, üstte duracak öğeye position: absolute verin. Üstteki öğenin konumunu top, right, bottom veya left ile belirleyin; hangi öğenin önde görüneceğini değiştirmek gerekiyorsa z-index kullanın. Kapsayıcıya position...

CSS’te metin satır aralığı line-height, harf aralığı ise letter-spacing özelliğiyle ayarlanır. Satır aralığını okunabilirliği düzenlemek için line-height ile, harflerin birbirine olan uzaklığını değiştirmek için letter-spacing ile tanımlayın. Değerleri birimsiz sayı, px, em veya rem olarak...

İki boyutlu, yani satır ve sütunları birlikte kontrol ettiğiniz responsive düzenler için CSS Grid kullanın; sütun sayısını sabit bir piksel değeriyle değil, repeat(auto-fit, minmax()) ile tanımlayın. Böylece geniş ekranda birden fazla sütun, dar ekranda ise içerik genişliğine göre daha az sütun...

Uzun kelimelerin veya kesintisiz URL’lerin sayfa dışına taşmasını önlemek için ilgili elemana overflow-wrap: anywhere; ya da daha kontrollü olarak overflow-wrap: break-word; ekleyin. Taşma belirli bir bileşende görülüyorsa kuralı doğrudan o bileşene uygulayın; tüm sayfada ortaya çıkıyorsa ortak...

Görselin oranını koruyarak bir kutuya sığmasını istiyorsanız, görsele object-fit: contain uygulayın ve kutuya sabit ya da sınırlı bir genişlik-yükseklik verin. Bu yöntem görselin tamamını gösterir; kutuda boş alan kalabilir ancak görsel ezilmez veya gerilmez. Kutuyu tamamen doldurmak...

İçeriği büyüdükçe kendi yüksekliğini artıran bir yazı alanı için yalnızca CSS çoğu durumda yeterli değildir. En uyumlu yöntem, textarea elemanının yüksekliğini JavaScript ile içeriğinin scrollHeight değerine göre güncellemek; CSS ile de genişlik, başlangıç yüksekliği, taşma ve sınırları...

İçeriğin kaydırma sırasında bulunduğu kapsayıcı içinde sabit kalmasını istiyorsanız position: sticky kullanın. Örneğin top: 20px değeri, öğenin ekranın üst kenarından 20 piksel aşağıda tutulacağı sınırı belirler. Öğenin sayfaya göre, kapsayıcıdan bağımsız biçimde sabit kalması gerekiyorsa...

CSS ile butonun üzerine gelindiğinde rengini değiştirmek için :hover sözde sınıfını kullanmanız gerekir. Butonun normal rengini button seçicisinde, fare üzerine geldiğindeki rengini ise button:hover seçicisinde tanımlayın. Aşağıdaki örneği HTML ve CSS dosyanıza eklediğinizde buton normalde mavi...

Mobil ekranda yatay taşmayı önlemek için önce taşan öğeyi bulun, ardından genişliği sabitleyen CSS kuralını düzeltin. En sık nedenler width: 100vw kullanımı, sabit genişlikli görseller veya kutular, uzun metinler, grid/flex öğelerinin küçülememesi ve negatif dış boşluklardır. Genel çözüm...

İstenen öğeyi hem yatay hem dikey ortalamanın en pratik yolu, öğenin kapsayıcısına display: flex, justify-content: center ve align-items: center vermektir. Kapsayıcının yüksekliği belirli değilse dikey ortalama görünür olmayabilir; bu nedenle örnekte kapsayıcıya min-height veya height de...

Sayfa içi bağlantılarda sabit üst menü hedef başlığın üzerine geliyorsa, hedeflenen başlıklara veya bölümlere scroll-margin-top tanımlayın. Bu özellik, tarayıcının bağlantıya kaydırırken hedefi üst kenardan belirli bir mesafe aşağıda bırakmasını sağlar. Örneğin üst menünüz 72 piksel...

Tabloyu doğrudan kaydırılabilir yapmak yerine tabloyu genişliği sınırlı bir kapsayıcının içine alın ve kapsayıcıya overflow-x: auto; ekleyin. Böylece tablo küçük ekrana sığmadığında sayfanın tamamı taşmaz; kullanıcı yalnızca tablo alanını yatay kaydırarak gizlenen sütunlara ulaşır. Aşağıdaki...

İster sabit ölçülü bir kutuda ister responsive bir alanda çalışın, görseli taşırmadan kırpmak için kutuya overflow: hidden, görsele de width: 100%, height: 100% ve object-fit: cover uygulayın. object-fit: cover, görselin en-boy oranını korur; kutuyu tamamen doldurmak için kenarlardan taşan...