CSS3   مانند  نسخه های قبل خود انقلابی در صنعت طراحی وب سایت است .  پدیده ای که قادر است مناسبات کدنویسی را تغییر دهد و موجب سادگی هرچه بیشتر طراحی سایت شود .  چیزی که در حال حاضر طراحان به آن نیاز دارند ساختاری ساده تر و خلاصه تر و با انعطاف پذیری بیشتر است . خوشبختانه افراد معروفی در پروژه CSS3  شرکت کردند .

CSS3 در سایت های فارسی برخلاف سایر دنیا نسبتا موج کوتاهی داشته است و از مطالب خوب در این زمینه  می توان به آموزش فونت ها در CSS3  اشاره کرد .

در ادامه مطلب به بررسی چند خصوصیت مهم CSS3 می پردازیم که از آن جمله می توان به شکل فونت ها , قالب بندی  و  الحاق مرجع مورد نظر  - خصوصیات HSL  ( رنگ پردازی ) و ...  اشاره کرد .

الحاق فونت  ( طریقه پیوست فونت دلخواه به وب سایت ) 

@font-face  تگی است که شما را قادر می سازد تا فونت مورد دلخواه خود را در CSS  سایت خود پیوست کنید . در ادامه مثالی از طریقه پیوست فونت دلخواه مشاهده می کنید :

 

@font-face {
font-family: SketchRockwell;
src: url(‘SketchRockwell.ttf’);
}
.NewCSS3_class {
font-family: SketchRockwell;
font-size: 3.2em;
letter-spacing: 1px;
text-align: center;
}

در ضمن می توانید به فونت خود سایه نیز  اضافه کنید :

@font-face {
font-family: SketchRockwell;
src: url(‘SketchRockwell.ttf’);
}
.NewCSS3_class {
font-family: SketchRockwell;
font-size: 3.2em;
letter-spacing: 1px;
text-align: center;
text-shadow: 3px 3px 7px #111;
}

  قالب بندی در CSS
layout-grid خصوصیتی است که روش قبلی برای تعیین خصوصیاتی مانند ‘layout-grid-mode’, ‘layout-grid-type’, ‘layout-grid-line’, ‘layout-grid-char’, and ‘layout-grid-char-spacing’   را خلاصه تر می کند و همه را در یک تگ جا می دهد  :
 

div.LayoutGrid {layout-grid: both loose 15px 15px 2cm;}

پیوست محتوا در CSS

این خصوصیت شما را قادر به پیوست محتوایی دیگر در درون  برگه کنونی می کند . که با انجام این عمل محتوای دلخواه شما در تگ مربوطه جایگزین می شود .
This property gives you a freedom to inserts another do*****ent into the current do*****ent, replacing the current element’s content.

div {
position: absolute;
top: 100px; left: 300px;
width: 200px; height: 200px;
border: thin solid black;
include-source: url(http://www.example.com/testpage.htm);
}

خصوصیات HSL

واژه HSL  بیشتر به خصوصیات مربوط به رنگ Hue  , غلظت Saturation و  درخشش Lightness  یک عنصر  اطلاق می شود .  که اختضار سه واژه لاتین مذکور می باشد .  Hue  مربوطه به رنگ عنصر می شود که بازه ای مابین 0 تا 360 را شامل می شود  . Saturation   مربوط به  غلظت یک رنگ می شود که گاهی آن را تیره تر و بی روح  تر می کند و گاهی رنگ را روشن تر و نمایان تر  که بازه ای 0 تا 100 درصد را شامل می شود .  و در آخر Lightness   که مربوط به میزان نور یک عنصر است که گاهی به تاریکی و گاهی به روشنی میل می کند و 0 تا 100 بازه آن است

HSL CSS code:

div.L1 { background:hsl(320, 100%, 50%); height:20px; }
div.L2 { background:hsl(320, 50%, 50%); height:20px; }
div.L3 { background:hsl(320, 100%, 75%); height:20px; }

HSLS CSS code:

div.L1 { background:hsla(165, 35%, 50%, 0.2); height:20px; }
div.L2 { background:hsla(165, 35%, 50%, 0.4); height:20px; }
div.L3 { background:hsla(165, 35%, 50%, 0.6); height:20px; }
div.L4 { background:hsla(165, 35%, 50%, 0.8); height:20px; }
div.L5 { background:hsla(165, 35%, 50%, 1.0); height:20px; }

خصوصیت فاصله خودکار متن

این خصوصیت که ایده ای بسیار جالب است مربوط به فاصله یک متن است که در بسیاری از نرم افزارهای ویرایشگر یا  طراحی آن را مشاهده کرده ای

div { text-autospace: ideograph-numeric; }

خصوصیت اندازه اشیاء

این خصوصیت مربوط به سایز عنصر است که  جهت گیری یک شی را در صفحه کنترل می کند . یک باکس در صفحه می توان اندازه ای مطلق یا نسبی باشد .
 

body { size: 8.5in 11in;}

CSS Ruby-Align

این خصوصیات را شاید خیلی ها متوجه نشده باشند چون مربوط به متونی است که محتوای Ruby یا Rubi دارند مثلا زبان هایی مانند چینی یا عربی که از حروف راهنما در بالای متن اصلی استفاده می شود  . این خصوصیت می توان ارتفاع آن را تعیین و تغییر بدهد .
 

ruby { ruby-align: right; ruby-position: above; ruby-overhang: whitespace }

<ruby style=”ruby-align: right; ruby-position: above; ruby-overhang: whitespace”>Ruby base content<rt>Ruby text</rt></ruby>

 

دیگر ابداعات و امکانات جدید CSS3  را اضافه خواهم کرد

منبع : 1

موفق باشید

نیوک لرن