Sözde Ögelerle Dekoratif Desenler
Ek HTML kullanmadan ::before ve ::after ile dekoratif şekiller, ayırıcılar ve kaplamalar oluşturun.
Sözde Ögelerle Dekoratif Desenler, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
Yalnızca CSS ile Dekorasyon Felsefesi
Sözde öğeler, ek HTML kullanmadan zengin dekoratif efektler oluşturmanızı sağlar. Amaç, dekorasyon için sıfır div öğesi kullanmak ve tüm görsel süslemeleri CSS'e taşımaktır.
CSS Üçgeni
Saydam kenarlıklara sahip, sıfır boyutlu öğeler kullanarak üçgenler oluşturun:
<div class="triangle"></div>Araç İpucu Oku
::before kullanılarak oluşturulan bir araç ipucu oku:
<div class="tooltip" style="position:relative;display:inline-block;background:#333;color:#fff;padding:6px 12px;border-radius:4px;margin-top:16px;">Tooltip text</div>Çapraz Bölüm Ayırıcı
::after üzerinde eğme veya clip-path kullanarak oluşturulan eğik bir bölüm ayırıcısı:
<div class="section" style="background:linear-gradient(135deg,#4f8cff,#7ee787);height:120px;position:relative;"></div>Dekoratif Alt Çizgiler
::after kullanılarak oluşturulan hareketli alt çizgi efektleri:
<a href="#">Hover me (underline animates in on :hover)</a>::after ile Rozet
Ek HTML öğeleri kullanmadan oluşturulan bir bildirim rozeti katmanı:
<span class="nav-icon" data-count="3" style="position:relative;display:inline-block;font-size:1.5rem;margin:16px;">🔔</span>Görseller Üzerinde Degrade Katmanı
Metnin okunabilirliği için görsellerin üzerine koyu bir degrade katmanı:
<div class="card-image" style="width:100%;height:160px;background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>::before ile Onay İşareti
CSS kenarlıklarıyla çizilen özel bir onay kutusu onay işareti:
<div class="custom-check" style="width:20px;height:20px;background:#34c759;border-radius:4px;padding:2px;"></div>Kurdele Başlık
Negatif konumlandırmayla ::before kullanarak kartlar üzerinde oluşturulan kurdele efekti:
<div class="card featured" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;width:200px;">Featured product</div>Parıltılı Yükleme Efekti
JavaScript kullanmadan oluşturulan CSS iskelet yükleme parıltısı:
<div class="skeleton" style="width:100%;height:60px;border-radius:6px;"></div>Hızlı Kontrol
Hangi özellik birleşimi yalnızca CSS kullanarak yukarı bakan bir üçgen oluşturur?
Özet
Sözde öğeler, ek HTML kullanmadan zengin dekoratif desenlerin önünü açar: oklar, katmanlar, hareketli alt çizgiler, rozetler, kurdeleler ve parıltı efektleri. Bunların tümü content: "" + position: absolute + kenarlıkların, clip-path'in ve dönüşümlerin yaratıcı kullanımına dayanır.
Sıkça Sorulan Sorular
“Sözde Ögelerle Dekoratif Desenler” dersi ücretsiz mi?
Evet — “Sözde Ögelerle Dekoratif Desenler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“Sözde Ögelerle Dekoratif Desenler” dersinde ne öğreneceğim?
Ek HTML kullanmadan ::before ve ::after ile dekoratif şekiller, ayırıcılar ve kaplamalar oluşturun. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Sözde Ögelerle Dekoratif Desenler” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- ::before ve ::after İçeriği
- ::placeholder ::selection ve ::marker
- ::before ile CSS Sayaçları
- Sözde Ögelerle Dekoratif Desenler