css

Yazının kutudan taşmasını önlemek için önce metnin satıra bölünebilmesini sağlayın: uzun ve kesintisiz metinlerde overflow-wrap: anywhere; veya overflow-wrap: break-word; kullanın. Taşmanın nedeni tek satırda kalma, sabit genişlik ya da taşan içeriği gizleme isteğiyse buna göre white-space...

İlk olarak mobil ekranı hedefleyen bir medya sorgusu ekleyip öğeler arasındaki gap, margin ve padding değerlerini masaüstüne göre küçültün. Boşluk yalnız iki öğe arasındaysa genellikle gap veya dış kenar boşluğu (margin); öğenin içindeki metin ile kenarı arasındaysa padding değiştirilmelidir...

Görselin en-boy oranını koruyarak kapsayıcıya sığmasını istiyorsanız, görsele width: 100%; height: auto; verin. Görsel kapsayıcının tamamını doldurmalı, ancak kırpılmasına izin veriliyorsa object-fit: cover; kullanın. Kapsayıcı belirli bir genişlik ve yüksekliğe sahip olduğunda seçim, görselin...

İçeriği küçük ekranlarda açılır hâle getirmek için menüyü HTML içinde bir kontrol kutusuyla oluşturup, CSS’te bu kutunun seçili durumuna göre menüyü görünür yapabilirsiniz. Aşağıdaki örnekte JavaScript kullanılmaz; kullanıcı menü düğmesine dokunduğunda bağlantılar açılır, tekrar dokunduğunda...

Eşit genişlikte sütunlar oluşturmanın en pratik yolu CSS Grid kullanmaktır. Sütun sayısını grid-template-columns: repeat(3, 1fr); ile belirlediğinizde kullanılabilir alan üç eşit parçaya bölünür; gap ise sütunlar arasındaki boşluğu ayırır. Flexbox da aynı işi yapabilir, ancak düzenin iki boyutlu...

İçeriği hem yatay hem dikey olarak sayfanın tam ortasına yerleştirmenin en pratik yolu, kapsayıcı elemana display: flex, justify-content: center ve align-items: center vermektir. Kapsayıcının ekran yüksekliğini kaplaması için ayrıca min-height: 100vh kullanılmalıdır. Böylece div, farklı ekran...

Öğeler arasına eşit boşluk vermek için en doğru yöntem, kapsayıcı elemana display: flex veya display: grid verdikten sonra gap kullanmaktır. Örneğin gap: 20px, kapsayıcı içindeki öğeler arasında yatay ve dikey olarak 20 piksel boşluk oluşturur. Böylece her çocuğa ayrı ayrı margin vermeniz ve ilk...

CSS ile yazıya gölge eklemek için text-shadow özelliğini kullanabilirsiniz. En temel kullanımda yatay ve dikey uzaklığı, bulanıklık miktarını ve gölge rengini belirtmeniz yeterlidir. Aşağıdaki örnekte başlık, sağa ve aşağıya 2 piksel kaydırılmış, 4 piksel bulanık siyah gölgeyle görüntülenir...

İlk paragrafta ana yanıtı, izlenecek yolu ve ulaşılabilecek sonucu doğrudan ver. Konunun önemini öven genel açılış veya bu makalede anlatacağız vaadiyle başlama. Okuru asıl bilgiye ulaşmak için gereksiz paragraflar okumaya zorlama. Görselin üzerine metin yerleştirmenin temel yöntemi Görseli ve...

İkonu ve yazıyı aynı satırda düzgün hizalamak için butona display: inline-flex, align-items: center ve gap verin. Böylece ikon ile metin dikey olarak ortalanır, aralarındaki boşluk sabit kalır ve butonun içeriği farklı yazı boyutlarında da daha düzenli görünür. Flexbox ile ikon ve yazıyı...

İstenen görselin alanı tamamen doldurmasını ve kenarlarda boşluk kalmamasını istiyorsanız background-size: cover; kullanın. Görselin tamamı görünsün, ancak gerekirse boşluk oluşabilsin istiyorsanız contain değerini seçin. Bunun çalışması için arka planın uygulandığı öğenin görünür bir genişliği...

Sayfa kaydırılırken menünün ekranın üstünde kalmasını istiyorsanız en pratik yöntem, menüye position: sticky ve top: 0 vermektir. Menü, normal akıştaki yerini korur; kullanıcı o noktaya kadar kaydırdığında üst kenara yapışır. Menü her durumda ekranın üstünde görünmeliyse position: fixed...

İki sütunlu düzeni mobil ekranda alt alta geçirmek için geniş ekranda iki sütun tanımlayıp, ekran genişliği belirli bir değerin altına indiğinde grid-template-columns: 1fr veya flex-direction: column kullanın. Böylece masaüstünde yan yana duran içerikler mobilde üst üste sıralanır. En önemli...

İçerik kısa olduğunda alt bölümün ekranın altına dayanması için sayfanın ana kapsayıcısını dikey bir flex düzenine alın, kapsayıcıya en az ekran yüksekliği verin ve alt bölüme margin-top: auto uygulayın. Böylece içerik azsa boş alan alt bölümden önce kalır; içerik uzarsa sayfa normal biçimde...

Uzun metni tek satırda gösterip kutuya sığmayan kısmı üç noktayla kısaltmak için elemana white-space: nowrap, overflow: hidden ve text-overflow: ellipsis özelliklerini birlikte verin. Metnin kısalması için ayrıca elemanın genişliği veya üst kapsayıcısının sınırı belirlenmiş olmalıdır; aksi hâlde...

İstenen görünümü oluşturmanın temel yolu, görsele float vermektir. Görsel sola veya sağa hizalandığında metin, görselin kapladığı alanın yanından akarak etrafına sarılır. Görselin altına geçmek istediğiniz noktada clear kullanabilir, görselin metinle birlikte akmasını istemediğiniz durumlarda...

Yatay kaydırmayı önlemek için önce sayfanın genişliğini aşan öğeyi bulup onun neden taşındığını düzeltin; ardından yalnız gerekli durumlarda overflow-x: hidden veya overflow-x: clip kullanın. En güvenli temel yaklaşım, kutu genişliklerinde box-sizing: border-box kullanmak, görselleri kapsayıcıya...

CSS ile bir öğenin üzerine gelindiğinde renk değiştirmek için :hover sözde sınıfını kullanmalısınız. Öğenin normal rengini temel seçicide, fareyle üzerine gelindiğinde uygulanacak rengi ise :hover seçicisinde tanımlayın. Aşağıdaki örnekte düğme, imleç üzerine geldiğinde mavi renkten yeşile...

İçeriği bozulmadan ve kenarları kırpılmadan bir görseli kutuya sığdırmak için görselde object-fit: contain kullanın. Görselin kutuya sığmayan oranı varsa boş kalan alanlar korunur; böylece görselin tamamı görünür. Kutunun yüksekliği ve genişliği belirlenmiş olmalı, aksi durumda object-fit...

İçeriği hem yatay hem dikey ortalamak için en pratik yöntem, kapsayıcı elemana display: flex, justify-content: center ve align-items: center vermektir. Kapsayıcının yüksekliği belirlenmişse çocuk öğe iki eksende ortalanır; tüm ekranın ortası isteniyorsa kapsayıcıya en az 100vh yüksekliği...