gelistirici:diaform:tasarim_stil

🎨 CSS Özellikleri

Form nesnelerine uygulanabilecek CSS özelliklerini JSON formatında açıklamaktadır. Form tasarım ekranında nesne özellikleri kısmında yer alan Stil alanından tanımlamalar yapılabilir.

🎨 Background

background-color özelliği, nesnenin arka plan rengini belirler.

📝 Örnek Tanımlamalar

{
  "background-color": "#3498db"
}

💡 Görsel Örnek

🔵 Mavi Arka Plan 

"background-color": "#3498db"

🔲 Border

border özelliği, nesnenin kenarlığını tanımlar. Kalınlık, stil ve renk belirlenebilir.

🔧 Temel Özellikler

* border: Tüm kenarlar için kısa yazım * border-top: Üst kenarlık * border-right: Sağ kenarlık * border-bottom: Alt kenarlık * border-left: Sol kenarlık * border-radius: Kenarlık köşe yuvarlaklığı * border-width: Kenarlık kalınlığı * border-style: Kenarlık stili (solid, dashed, dotted, double, groove, ridge, inset, outset) * border-color: Kenarlık rengi

📝 Örnek Tanımlamalar

Basit Kenarlık 

{
  "border": "2px solid #333"
}

Yuvarlak Köşeli 

{
  "border": "1px solid #d0d0d0",
  "border-radius": "10px"
}

Farklı Kenarlar 

{
  "border-top": "3px dashed #e74c3c",
  "border-right": "2px solid #3498db",
  "border-bottom": "1px dotted #2ecc71",
  "border-left": "4px double #f39c12",
  "border-radius": "5px"
}

🎭 Border Style Görünümleri

🎨 Stil Değeri 📖 Açıklama 💻 Örnek Tanımı
solid Düz çizgi “border”: “3px solid #3498db”
dashed Kesikli çizgi “border”: “3px dashed #e74c3c”
dotted Noktalı çizgi “border”: “3px dotted #2ecc71”
double Çift çizgi “border”: “3px double #f39c12”
groove İçe doğru 3D efekt “border”: “5px groove #9b59b6”
ridge Dışa doğru 3D efekt “border”: “5px ridge #1abc9c”
inset İçe gömülü görünüm “border”: “5px inset #34495e”
outset Dışa çıkıntılı görünüm “border”: “5px outset #e67e22”

💡 Diğer Örnekler

* Yuvarlak köşeli kenarlık: “border”: “1px solid #d0d0d0” ve “border-radius”: “10px” * Tam yuvarlak: “border”: “3px dashed #e74c3c” ve “border-radius”: “50%”

🔤 Font

font-family, font-size, font-weight ve font-style özellikleri metin görünümünü kontrol eder.

🔧 Temel Özellikler

* font-family: Yazı tipi ailesi (Segoe UI, Arial, sans-serif gibi) * font-size: Yazı boyutu (px) * font-weight: Yazı kalınlığı (normal, bold, 100-900) * font-style: Yazı stili (normal, italic, oblique) * font-variant: Yazı varyantı (normal, small-caps)

📝 Örnek Tanımlamalar

Normal Font 

{
  "font-family": "Segoe UI, Arial, sans-serif",
  "font-size": "13px",
  "font-weight": "normal"
}

Kalın ve İtalik 

{
  "font-family": "Georgia, serif",
  "font-size": "18px",
  "font-weight": "bold",
  "font-style": "italic"
}

💡 Görsel Örnek

* Normal font: “font-family”: “Segoe UI, Arial, sans-serif” ve “font-size”: “13px” * Kalın ve italik: “font-weight”: “bold” ve “font-style”: “italic” * Serif font: “font-family”: “Georgia, serif” ile klasik görünüm

📦 Margin

margin özelliği, nesnenin dış boşluklarını kontrol eder.

🔧 Temel Özellikler

* margin: Tüm yönler için kısa yazım * margin-top: Üst dış boşluk * margin-right: Sağ dış boşluk * margin-bottom: Alt dış boşluk * margin-left: Sol dış boşluk

📋 Değer Formatları

* Tek değer: Tüm yönler için aynı (örn: “20px”) * İki değer: Dikey ve yatay (örn: “10px 20px”) * Üç değer: Üst, yatay, alt (örn: “10px 20px 30px”) * Dört değer: Üst, sağ, alt, sol (örn: “10px 20px 30px 40px”)

📝 Örnek Tanımlamalar

Tüm Yönler 

{
  "margin": "20px"
}

Dikey/Yatay 

{
  "margin": "10px 20px"
}

Ayrı Ayrı 

{
  "margin-top": "15px",
  "margin-right": "20px",
  "margin-bottom": "15px",
  "margin-left": "20px"
}

💡 Görsel Örnek

* Tüm yönler için aynı: “margin”: “20px” ile tüm yönlerde 20px boşluk * Dikey ve yatay: “margin”: “10px 40px” ile 10px dikey, 40px yatay boşluk * Otomatik merkezleme: “margin”: “0 auto” ile nesne yatay olarak ortalanır

📥 Padding

padding özelliği, nesnenin iç boşluklarını kontrol eder.

🔧 Temel Özellikler

* padding: Tüm yönler için kısa yazım * padding-top: Üst iç boşluk * padding-right: Sağ iç boşluk * padding-bottom: Alt iç boşluk * padding-left: Sol iç boşluk

📋 Değer Formatları

* Tek değer: Tüm yönler için aynı (örn: “12px”) * İki değer: Dikey ve yatay (örn: “10px 20px”) * Üç değer: Üst, yatay, alt (örn: “10px 20px 30px”) * Dört değer: Üst, sağ, alt, sol (örn: “10px 20px 30px 40px”)

📝 Örnek Tanımlamalar

Tüm Yönler 

{
  "padding": "12px"
}

Dikey/Yatay 

{
  "padding": "10px 20px"
}

Ayrı Ayrı 

{
  "padding-top": "15px",
  "padding-right": "20px",
  "padding-bottom": "15px",
  "padding-left": "20px"
}

💡 Görsel Örnek

* Tüm yönler için aynı: “padding”: “12px” ile tüm yönlerde 12px iç boşluk * Dikey ve yatay: “padding”: “20px 40px” ile 20px dikey, 40px yatay iç boşluk * Ayrı ayrı tanımlama: “padding-top”: “15px” gibi özelliklerle her yön ayrı ayrı ayarlanabilir

🎨 Örnek

Tüm özelliklerin birlikte kullanıldığı örnek:

📝 Örnek Tanımı

{
  "background-color": "#f9fafb",
  "border": "1px solid #d0d0d0",
  "border-radius": "10px",
  "padding": "12px",
  "font-family": "Segoe UI, Arial, sans-serif",
  "font-size": "13px",
  "color": "#222",
  "line-height": "1.6"
}

💡 Görsel Örnek

Bu örnek, tüm CSS özelliklerinin birlikte kullanıldığı tipik bir form nesnesi stilidir:

* 🎨 Arka plan: “background-color”: “#f9fafb” ile açık gri arka plan * 🔲 Kenarlık: “border”: “1px solid #d0d0d0” ve “border-radius”: “10px” ile yuvarlak köşeli kenarlık * 📥 İç boşluk: “padding”: “12px” ile içerik etrafında boşluk * 🔤 Font: “font-family”: “Segoe UI, Arial, sans-serif” ve “font-size”: “13px” ile modern font * ✒️ Renk: “color”: “#222” ile koyu gri metin rengi

⚠️ Not: Tüm özellikler JSON formatında tanımlanmalıdır. Değerler string olarak verilmelidir.