افزودن سایه ها

یکی دیگر از ویژگی‌های جالب اضافه شده در CSS3، امکان ایجاد سایه‌هایی از عناصر در صفحه وب است. سایه ها به شما این امکان را می دهند که اثر نوری را که به سمت پایین می تابد در صفحه وب ایجاد کنید. شما می توانید سایه ها را در پشت عناصر متن و جعبه قرار دهید.

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

ویژگی CSS3 text-shadow style به شما این امکان را می‌دهد تا مشخص کنید که سایه چگونه باید به نظر برسد. فرمت ویژگی text-shadow style در اینجا آمده است:

text-shadow: رنگ offsetx offsety blur; پارامتر رنگ، رنگ مورد استفاده برای سایه را مشخص می کند. پارامترهای offsetx و offsety فاصله سایه از متن را مشخص می کنند. شما می توانید استفاده کنید

مقادیر مثبت یا منفی برای نشان دادن مقادیر افست. مقادیر مثبت سایه را به سمت پایین و سمت راست متن حرکت می دهند. ارزش های منفی حرکت می کند سایه بالا و سمت چپ متن. پارامتر blur مقدار را مشخص می کند فضایی که سایه استفاده می کند هر چه فضا بزرگتر باشد، ظاهر کشیده تر می شود سایه ظاهر می شود.

در اینجا یک مثال از یک قانون CSS3 است که یک سایه برای همه عناصر h1 قرار می دهد:

h1 {

text-shadow: سیاه، 10 پیکسل، 5 پیکسل، 15 پیکسل؛

}

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

text-shadow: shadow1, shadow2, …; مرورگر سایه ها را به ترتیبی که شما تعریف کرده اید نشان می دهد و هر سایه در بالای سایه های قبلی قرار می گیرد.

سایه های جعبه

سایه جعبه به عنصر کمک می کند تا تقریباً با یک جلوه سه بعدی در صفحه وب برجسته شود. سایه‌های جعبه مانند سایه‌های متن عمل می‌کنند، اما شما آن‌ها را روی عناصر کادر، مانند فیلدهای ورودی فرم، نواحی متن یا حتی کل بلوک‌های div اعمال می‌کنید.

بخش در صفحه وب فرمت ویژگی box-shadow شبیه به ویژگی text-shadow است.

با چند مورد اضافه:

box-shadow: [inset] color offsetx offsety blur [گسترش];

کلمه کلیدی inset اختیاری است. تعیین می کند که آیا مرورگر باید سایه را در داخل عنصر نمایش دهد یا خیر.

به طور پیش فرض، اندازه سایه با شی یکسان است. با افزودن مقدار spread، می توانید اندازه سایه را کم یا زیاد کنید.

ایجاد فونت

در ادامه مقالات این مینی بوک به مشکل فونت ها در یک صفحه وب اشاره می کنم. در گذشته، مرورگرها فقط می توانستند از فونت هایی استفاده کنند که قبلاً روی ایستگاه کاری نصب شده بودند. یافتن فونت‌هایی که در همه ایستگاه‌های کاری در دسترس هستند تا حدودی امکان‌پذیر است.

استاندارد CSS3 سعی کرده است این وضعیت را با ارائه راهی برای طراحان وب برای ایجاد فونت های خود و ارائه آنها به بازدیدکنندگان سایت خود به عنوان بخشی از دانلود صفحه وب، اصلاح کند. قانون font-face@ راهی برای تعیین a ارائه می دهد فایل فونتی که مرورگر مشتری باید به عنوان بخشی از تعاریف سبک دانلود کند. وقتی مرورگر فایل فونت را دانلود می کند، برنامه وب شما می تواند از آن فونت استفاده کند برای استایل دادن به متن در صفحات وب این فونت ها به عنوان فونت وب شناخته می شوند.

بخش‌های زیر انواع مختلف فونت‌های وب و نحوه استفاده از آنها در برنامه‌های کاربردی وب را شرح می‌دهند.