5 مورد از اثرات باور نکردنی CSS3
CSS3 (همراه با قدرت HTML5) به سرعت از طرف تمامی مرورگرهای اصلی پشتیبانی شده است (بازخوانی هرچیزی به غیر از اینترنت اکسپلورر) ، از این رو فکر می کردم که اکنون زمان خوبی باشد که بعضی از تاثیرهای خوب سیاساس (CSS) را ببینیم ما میتوانیم بااستفادهاز قدرت مرورگرتان و کد CSS محدود این اثرات را ببینیم.اگر از آخرین مدل مرورگر گوگل کروم (Chrome) ، سافاری (Safari) یا مرورگر فایرفاکس (Firefox) استفاده میکنید تمام تاثیرات نشان داده شده در این مقاله را می توانید ببینید.
1 — CSS چیست؟
اگر شما در حال خواندن این مقاله هستید چون فقط مجذوب شده اید ولی هیچ نظری نداری که CSSیعنی چه اجازه بدهید سریع برای شما توضیح دهم.CSS زبان برنامه نویسی است که برای تزیین صفحات وب مورد استفاده قرار گرفته شده است.CSS از حروف اول عبارت Cascading Style Sheet به دست آمده است یعنی برگه شیوه ی آبشاری، و اساسا فقط به سایت یک سبک خاص و برازندگی می افزاید.صفحات وب قطعا بدون CSS هاشان نیز قابل خواندن هستند ولی دقیقا مثل وب سایت های سال 1995 زشت و زننده خواهند بود. در حالی که فایل HTML ساختار و محتوای متنی صفحه را توصیف می کند، CSS باعث میشود که آنها آنگونه که طراح در نظر داشته به نمایش در بیاید. همچنین CSS باعث میشود که آنها همه چیز را از صفحه بندی صفحه، اندازه و رنگ متن را تعین کند. همچنین اکنون باعث تعدادی از اثرات فانتزی با مقدمه CSS3 تعیین شوند. در گذشته ، دستیابی به تاثیرات مشابه آنچه در ای مقاله توصیف آن رفته است به اینگونه بود که CSS ای با حجم زیاد و یا حتی گرافیک بزرگتری دانلود کرد. در حال حاضر،CSS فقط می تواند برای مرورگر شما توصیف کند که چگونه می خواهد صفحه نشان داده شود و مرورگر پردازش را اداره می کند.این درست مثل این است که من به جای فروختن کل خانه فقط طرح ساختن خانه را بدهم که خودتان آنرا بسازید.اینطور بسیار ارزانتر است!
گوشههای گرد
اینترنت به تدریج دارد گردتر میشود، ولی اکنون با CSS از حرکت باز ایستاده و جامد شده است. به مستطیل دور این پارگراف نگاهی بیاندارید.فقط یک تصویر نیست-روی آن کلیک راست کن تا ببینید. CSS بدون نقص و خالص.
کد برای گوشه های گرد شده واقعا ساده است :
.box_round { -moz-border-radius: 20px; /* FF1+ */ -webkit-border-radius: 20px; /* Saf3-4, iOS 1+, Android 1.5+ */ border-radius: 20px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */ }
سایهی متن
متن گاهی اوقات می تواند واقعا به نوبه ی خود خشن به نظر بیایند، اما کمی سایه ساده واقعا به اشیاء کمک می کند.سایه ای را که به این پارگراف داده شده را بررسی کنید.
این هم کد بعضی از سایه های متن:
.box_textshadow { text-shadow: 1px 1px 3px #888; /* FF3.5+, Opera 9+, Saf1+, Chrome */ }
شیب
دیگر رنگ های یکنواخت و تصاویرشیب دارپس زمینه وجود نخواهد داشت. اکنون تنها با استفاده از CSS میتوان شیب های محشری به وجود آورد. متاسفانه، به خاطر مسائل ناسازگاری جاری بین مرورگرها نیاز به چند خط دارید، ولی میتوانید از ابزاری که بعدا برایتان توضیح میدهم برای ایجاد اتوماتیک آن استفاده کنید.
در اینجا کد شیب CSS آمده است :
.box_gradient { background-color: #3f9fe3; background-image: -moz-linear-gradient(top, #3f9fe3, #white); /* FF3.6 */ background:-moz-linear-gradient(top, #1E5799 0%, #207cca 26%, #2989D8 39%, #FFFFFF 100%); /* firefox */ background-image: -ms-linear-gradient(top, #3f9fe3, #white); /* IE10 */ background-image: -o-linear-gradient(top, #3f9fe3, #white); /* Opera 11.10+ */ background-image: -webkit-gradient(linear, left top, left bottom, from(#3f9fe3), to(#white)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #3f9fe3, #white); /* Chrome 10+, Saf5.1+ */ background-image: linear-gradient(top, #3f9fe3, #white); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#3f9fe3', EndColorStr='#white'); /* IE6–IE9 */ }
چرخش
این که کاربردی برای این از لحاظ متن تصور کرد کاری بس دشوار است ولی برای مثال ،هنگام استفاده از تصاویر می توانید عناصر طراحی خوبی به متن اضافه کنید. بعلاوه، توجه داشته باشید که اگرچه این تصویر چرخانده شده است، از آنجا که هنوز متنی عادی است هنوز می توانید آن را انتخاب و با آن ارتباط متقابل داشته باشید.
در اینجا کد چرخش چیزی آمده است:
.box_rotate { -moz-transform: rotate(7.5deg); /* FF3.5+ */ -o-transform: rotate(7.5deg); /* Opera 10.5 */ -webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */ -ms-transform: rotate(7.5deg); /* IE9 */ transform: rotate(7.5deg); filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand'); zoom: 1; }
انیمیشن
آه، بله ، من بهترین نکته را تا حالا نگه داشته ام.CSS اشکال مختلف انیمیشن را برای هرتعداد از تاثیرات خوب CSS که توصیف آن شد معرفی می کند. در این پارگراف انتقال مالکیت را آنگونه که در زیر آمده تعریف کرده ام، همچنین رنگ ساده پس زمینه و چرخش هنگام پرسه روی آن نیز تعریف شده است. اگر هنوز برای شما بیان نشده این متن از پارگراف را ببینید تا تاثیر عملی را ببینید. شما می توانید هر چیزی را به خوبی زنده کنید.
هر عنصری را که در صدد چرخاندنش باشید احتیاج به یک کد انتقالی شبیه به این دارد.همچنین نیاز است که از بعضی از CSS های مشابه استفاده کنید ( مثل: مترصد بودن برای تغییر هر ویژگی که می خواهید انیمیشن کنید مثل رنگ،اندازه ، یا چرخش)
.box_transition { -moz-transition: all 0.5s ease-out; /* FF4+ */ -o-transition: all 0.5s ease-out; /* Opera 10.5+ */ -webkit-transition: all 0.5s ease-out; /* Saf3.2+, Chrome */ -ms-transition: all 0.5s ease-out; /* IE10? */ transition: all 0.5s ease-out; }
ناسازگاری مرورگر متقابل
اگرچه اکثر مرورگرهای امروزی به نوعی از تمام CSS ها پشتیبانی میکند ولی بعضی از آنها هنوز نیازمند کد و یا ضربه ای تا حدودی متفاوت هستند تا آن ها را وادار به کار با اجرای استاندارد بخصوصشان کنند.برای مثال، در کد بالا، نمونه های بسیاری ازمز) (moz یا وب کیت) (weskit را مشاهده می کنید که بعضی از مشخصات CSS را به پیش می راند که یا به مرورگرهای براساس موزیلا و یا وب کیت مربوط میشود. نوشتن این خطهای اضافی می تواند دردسرسازشود، بنابراین توجه داشته باشید ژنراتور CSS3 آن ها را برای شما بنویسد.
نتیجه گیری
وب میخواهد کاری کند که تمام قسمتها با استفاده ازضمیمههای CSS3 و HTML5 جدید هیجان انگیز تر شوند.مسلم بدانید، ما جهش ناگهانی دیگری از متن و همچنین نسبت بالایی از سر و صدا را در متن واقعی خواهیم دید( درست مثل کاری که وقتی GIF های انیمیشن شده برای اولین بار پدیدار شدند انجام دادیم) ولی در دراز مدت خواهیم آموخت که چگونه از ابزارهای CSS3 برای ایجاد هم کنشگرهای وب جالبتری استفاده کرد.و همیشه هم میتوانید هر وقت دلتان خواست خاموشش کنید!
اگر شما خودتان طراح یا توسعه دهنده وب هستید ، فقط به خاطر داشته باشید که CSS3 نباید تنها گزینه ی انتخاب باشد.اگر سایت شما بدون CSS3 کار نمیکند به این خاطر بوده است که از آن به درستی استفاده نکرده اید. از CSS بایستی برای افزایش تجربه استفاده کرد نه کارامدی برنامه.
منبع: makeuseof
سلام
کد های خیلی جالبیه.
در یکی از سایت هام استفاده کردم ممنون.