ئینتەرنێت

زنجیرەی ئاشنابوون و کارکردن بە CSS3 – زنجیرەی دووەم – کاریگەرییە دەقییەکان Text Effects

CSS 3 - 2

کاریگەرییە دەقییەکان  Text Effects

یەكەم : Text shadow ( سێبەری تێكست ) :
ئەم تایبەتمەندیە بەكاردێت بۆ دانانی سێبەر بۆ تێكست ( هەر تێكستێك بێت )، هەر وەك چۆن زۆر جار ئەبینین تێكستێك ڕەنگێكی لە شێوەی سێبەر پێدراوە، ئەمەش وا دەكات كە تێكستەكە لە پێش چاو زۆر جیاوازتر دەربكەوێت. ئەم كردارە لە بەرنامە ڕووکارییەکان (ئینتەرفەیسییەكان) زۆر سادەیە، لێرەدا با بزانین چۆن دەكرێت.

دەستورەكەی بەم شێوەیە ئەبێت:

E { text-shadow: x y value color }

ڕوون كردنەوە :
E : هەر نرخێك بێ ( هەر ئیڵیمێنتێكی پێناسە كراو ).
text-shadow : تایبەتمەندیە ( نەگۆڕە ).
x : پێدانی سێبەر بە گوێرەی تەوەرەی x .
y : پێدانی سێبەر بە گوێرەی تەوەرەی y .
value : لێرە نرخێكی ژمارەیی دادەنرێت، كاری كاڵ و تێر كردنی ڕەنگی سێبەرەكەیە (color blur ) .
color : ڕەنگی سێبەرەكەیە .
نمونەی ١ :

h1  {text-shadow: 5px 3px 3px black; }

٢

٣

نمونەی یەکەم

 ڕوون كردنەوە :

لەو نمونەی سەرەوە تێكستێكمان هەیە ( هێدەرە )، 5 پیكسڵ سێبەر بۆ لای ڕاست بە تەوەرەی x و 3 پیكسڵ بۆ لای خوارەوە بە تەوەرەی y  2 پیكسڵ كاڵ كردنەوەی سێبەرەكە بە شێوەی (  color blur).  وە ڕەنگی سێبەرەكەش ڕەشە .

بۆ زیاتر تێگەشتن با بڕوانینە ئەم وێنەی خوارەوە :
٤وەك لە وێنەكە زۆر جوان ڕوونە , تەوەرەی x بۆ لای ڕاست و تەوەرەی y بۆ خوارەوە . دەتوانین نرخی x و y بكەینە سالب (  -x , -y) لەم كاتەدا نرخی -x بۆ لای چەپە و نرخی -y بۆ سەرەوەیە .

نمونەی ٢:

h1 { text-shadow: -5px -3px 2px black }

٥

نمونەی دووەم

نمونەی دووەم

ڕوون كردنەوە :
ئەمجارە نرخەكانی تەوەرەی x و y مان كرد بە سالب (- )، وەك ئەبینین لە نمونەكەی سەرەوە چۆن كاریگەرە، 5 پیكسڵ بۆ لای چەپ بە تەوەری -x ،3 پیكسڵ بە سەرەوە بە تەوەرەی -y .
ڕادەی كاڵ كردنەوەی سیبەرەكەش 2 پیكسڵ بە شێوەی ( color blur ) .

نمونەی ٣ :

h1 { text-shadow:2px 2px 1px black; }

 ٧

نمونەی سێیەم

نمونەی سێیەم

ڕوون كردنەوە :
نمونەی سەرەوە هەر وەكو نموونەكانی دیكەیە. تێكستێك ( هێدەر ) بە گوێرەی تەوەری x و y سێبەری پێدراوە , بەڵام ڕەنگی تێكستەكە سپیە ,  (color: white;) .

دووەم : word wrap :

ئەم تایبەتمەندیە بۆ (break  ) كردنی وشەیەكە، ئەكەر وشەكە زۆر درێژ بوو و سنوری دیاری كراوی بەزاند.
دەستورەكەی بەم شێوەیە ئەبێت.

E { word-wrap: keyword ;}

ڕوون كردنەوە :

E هەر ئیڵیمێنتێكی دیاری كراوی پێناسە كراو بێت.
word-wrap تایبەتمەندیەكەیەو جێگیرە.
keyword ئەو نرخەی كە كارەكەمان بۆ ئەنجام ئەدات (break-word  ) .

نمونە :

٩ئەو وێنەی سەرەوە (div  ) ێك دەنوێنێت،  پارەگرافێكی تێدایە، وشەیەك لەو پارەگرافە هەیە كە لە سنوری دیڤەكە دەرچووە. دەتوانرێت بە تایبەتمەندی (word-wrap  ) ئەو كێشە چارەسەر بكرێت.

.after {word-wrap: break-word;}

١٠

نمونەی چوارەم

نمونەی چوارەم

تا زنجیرەی داهاتوو و سەربەرز و سەرفرازبن.

نوسینی: ئارام صلاح

9 تشرینی دووه‌م، 2014