از ویژگی box-shadow برای اضافه کردن سایه به یک عنصر یا باکس استفاده می شود. تمام عناصر در یک صفحه می توانند سایه بگیرند. box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color]; box-shadow: 2px 3px 10px 5px #f0f; اولین مقدار فاصله سایه با باکس را در راستای محور X مشخص می کند, که […]
text-shadow
از ویژگی text-shadow برای اضافه کردن سایه به متن استفاده می شود. می توان به متن یک عنصر چندین سایه اضافه کرد, که در این صورت اولین سایه در بالا و بقیه به ترتیب زیر آن قرار می گیرند. اگر متنی همراه با خط هم باشد (مثلا زیر خط دار باشد) سایه به آن خط […]
قالب نمونه کار
در این مطلب کد آماده یک قالب نمونه کار فارسی در اختیار شما قرار گرفته است. منبع اصلی این قالب از این لینک قابل دسترس است و با توجه به کپی رایت این سایت می توانید از این قالب در هر گونه پروژه ای استفاده کنید اما خود قالب قابل فروش نمی باشد. پشتیبانی مرورگر […]
یک قالب ساده با ترنزیشن زیبا (فقط CSS)
در این مطلب قصد معرفی یک قالب زیبا که تنها با استفاده از HTML و CSS طراحی شده است را داریم. اول از همه این منبع اصلی این قالب است که ما آن را با اعمال چند تغییر و بروزرسانی در اختیار شما قرار داده ایم. پشتیبانی مرورگر ها ie Chrome Firefox Safari Opera +9 […]
چطور یک صفحه وب را قابل ویرایش کنیم؟
به عنوان یک طراح صفحات وب قطعا تابحال به این مورد برخورده اید که رییس یا همکار و یا مشتری در زمان تماشای طرح در کنار شما از شما می خواهد که متنی از صفحه را به متنی دیگر تغییر دهید و یا برای خودتان سوال پیش می آید که اگر فلان متن چوون گردد, […]
انیمیشن ها
انیمیشن ها در CSS باعث می شوند تا ما قادر به متحرک سازی عناصر در صفحات وب باشیم. قبل از ظهور CSS3 بیشتر متحرک سازی ها در دنیای وب بوسیله جاوا اسکریپت صورت می گرفت. از آنجایی که کنترل توالی انیمیشن هایی که بوسیله CSS ساخته می شوند زیر نظر مرورگر می باشد, ساخت انیمیشن […]
animation-play-state
با استفاده از ویژگی animation-play-state می توان یک انیمیشن را متوقف کرد و یا به حرکت در آورد. زمانی که مقدار این ویژگی برای یک انیمیشن برابر با paused شود انیمیشن در هر موقعیتی که باشد متوقف می شود و به محض اینکه مقدار این ویژگی برابر با running شود انیمیشن از همان نقطه ای […]
animation
animation یک ویژگی از نوع ویژگی های مختصر نویسی می باشد که با استفاده از آن می توان ویژگی های زیر را به صورت یکجا و مختصر در CSS تعریف کرد: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state فرض کنید مقادیر یک انیمیشن بصورت زیر برای یک عنصر تنظیم شده اند: .element { animation-name: […]
animation-fill-mode
با استفاده از ویژگی animation-fill-mode می توان برای یک انیمیشن تعریف کرد که در زمانی که اجرا نمی شود چه مقادیری را بر روی عنصر اعمال کند. به بیان واضح تر در زمان مکث قبل از اجرای انیمیشن و همینطور زمانی که انیمیشن به پایان می رسد چه مقادیری برای عنصر تنظیم شوند. بصورت پیشفرض […]
animation-direction
با استفاده از ویژگی animation-direction می توان حرکت انیمیشن را علاوه بر جهت عادی آن بصورت معکوس از آخر به اول هم تنظیم کرد و یا شروع حرکت انیمیشن را از آخر به اول داشته باشیم. نکته قابل توجه اینکه اگر انیمیشنی بوسیله این ویژگی معکوس شود مقدار ویژگی animation-timing-function آن عنصر نیز معکوس خواهد […]