Jump to content
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

CSS fill, stroke , stroke-width Özellikleri ve TailwindCSS Sınıf Karşılığı


Doğuhan ELMA

59 views

CSS'de stroke ve fill özellikleri, SVG (Scalable Vector Graphics) öğelerinin çizgi (stroke) ve dolgu (fill) renklerini belirlemek için kullanılır. Bu özellikler, HTML içinde doğrudan SVG öğeleri üzerinde veya CSS ile SVG öğelerine stil verirken kullanılabilir. Ancak, bu özellikler geleneksel HTML öğeleri üzerinde doğrudan uygulanamaz.

SVG Öğesinde stroke ve fill Kullanımı:

SVG içerisinde, stroke ve fill özellikleri, SVG'nin <path>, <circle>, <rect> gibi şekil öğelerine doğrudan uygulanabilir.

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Bu örnekte, stroke özelliği çemberin çizgi rengini yeşil yapar, stroke-width çizginin kalınlığını belirler, ve fill özelliği çemberin iç kısmını sarı renk ile doldurur.

CSS ile SVG Öğelerine stroke ve fill Stili Verme:

CSS kullanarak SVG öğelerine stroke ve fill özelliklerini uygulamak da mümkündür. Bu, SVG'nizi HTML belgenize gömülü olarak kullanırken özellikle yararlıdır.

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" class="my-circle" />
</svg>
.my-circle {
  stroke: blue;
  stroke-width: 2;
  fill: red;
}

Bu örnekte, .my-circle sınıfı, çemberin çizgi rengini maviye, çizgi kalınlığını 2 birime ve iç dolgu rengini kırmızıya ayarlar.

Notlar:

stroke ve fill özellikleri yalnızca SVG öğeleri için geçerlidir ve HTML öğeleri üzerinde bir etkisi yoktur.

SVG öğeleri web sayfalarına zengin grafikler eklemenizi sağlar ve CSS ile stilize edilebilirler, bu sayede dinamik ve interaktif kullanıcı arayüzleri oluşturabilirsiniz.

SVG'nin CSS ile stilize edilmesi, SVG'nizi HTML'e gömülü olarak kullanıyorsanız mümkündür. Harici olarak yüklenen SVG dosyaları için, stil değişiklikleri SVG dosyası içinde yapılmalıdır veya SVG dosyasının bir <style> etiketi içermesi gerekir.

 

TailwindCSS:

Fill

Class
Properties
fill-none fill: none;
fill-inherit fill: inherit;
fill-current fill: currentColor;
fill-transparent fill: transparent;
fill-black fill: #000;
fill-white fill: #fff;
fill-slate-50 fill: #f8fafc;
fill-slate-100 fill: #f1f5f9;
fill-slate-200 fill: #e2e8f0;
fill-slate-300 fill: #cbd5e1;
fill-slate-400 fill: #94a3b8;
fill-slate-500 fill: #64748b;
fill-slate-600 fill: #475569;
fill-slate-700 fill: #334155;
fill-slate-800 fill: #1e293b;
fill-slate-900 fill: #0f172a;
fill-slate-950 fill: #020617;
fill-gray-50 fill: #f9fafb;
fill-gray-100 fill: #f3f4f6;
fill-gray-200 fill: #e5e7eb;
fill-gray-300 fill: #d1d5db;
fill-gray-400 fill: #9ca3af;
fill-gray-500 fill: #6b7280;
fill-gray-600 fill: #4b5563;

 

devamı var..

1.png

Stroke:

 

Class
Properties
stroke-none stroke: none;
stroke-inherit stroke: inherit;
stroke-current stroke: currentColor;
stroke-transparent stroke: transparent;
stroke-black stroke: #000;
stroke-white stroke: #fff;
stroke-slate-50 stroke: #f8fafc;
stroke-slate-100 stroke: #f1f5f9;

 

1.png

 

Stroke Width:

 

Class
Properties
stroke-0 stroke-width: 0;
stroke-1 stroke-width: 1;
stroke-2 stroke-width: 2;

 

1.png

 

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...