host3nter

آموزش CSS3

CSS3 (همراه با قدرت HTML5) به سرعت از طرف تمامی مرورگرهای اصلی پشتیبانی شده است ...

موضوع آموزش CSS3,.

مباحث مربوط به زبان های برنامه نویسی تحت وب, وی بی پرو, ویبولتین

تاريخ ارسال:2014/08/20

هاست سنتر CSS3 (همراه با قدرت HTML5) به سرعت از طرف تمامی مرورگرهای اصلی پشتیبانی شده است (بازخوانی هر چیزی به غیر از اینترنت اکسپلورر) ، از این رو فکر می کردم که اکنون زمان خوبی باشد که بعضی از تاثیرهای خوب سی*اس*اس (CSS) را ببینیم ما میتوانیم بااستفاده از قدرت مرورگرتان و کد CSS محدود این اثرات را ببینیم.اگر از آخرین مدل مرورگر گوگل کروم (Chrome) ، سافاری (Safari) یا مرورگر فایرفاکس (Firefox) استفاده میکنید تمام تاثیرات نشان داده شده در این مقاله را می توانید ببینید. CSS چیست؟ اگر شما در حال خواندن این مقاله هستید چون فقط مجذوب شده اید ولی هیچ نظری نداری که CSSیعنی چه اجازه بدهید سریع برای شما توضیح دهم.CSS زبان برنامه نویسی است که برای طراحی وب سایت مورد استفاده قرار گرفته شده است.CSS از حروف اول عبارت Cascading Style Sheet به دست آمده است یعنی برگه شیوه ی آبشاری، و اساسا فقط به سایت یک سبک خاص و برازندگی می افزاید.صفحات وب قطعا بدون CSS هاشان نیز قابل خواندن هستند ولی دقیقا مثل وب سایت های سال ۱۹۹۵ زشت و زننده خواهند بود. در حالی که فایل 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(startCo lorStr='#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; } ناسازگاری مرورگر متقابل اگرچه ... هاست,دامین,سایت,وب,طراحی

تغغیر دامنه و اشکال در لود شدن انجمن

هاست پرسرعت و ارزان نیک وب

تفاوت مای بی بی با وی بی

قرمز رنگ کردن نام یک زیر انجمن ؟؟؟

قرمز رنگ کردن نام یک زیر انجمن ؟؟؟

سوال درباره سرعت بازگذاری و …

کلیدی ترین نکات یک لوگو

آموزش, CSS3

آموزش CSS3

میزبانی وب ,هاست,فضای وب,ویندوز,لینوکس,دات نت,پی اچ پی,web hosting,windows host,linux host,asp.net,php,sql server,mysql میزبان پایتخت ارائه دهنده خدمات میزبانی وب، هاست و هاستینگ، میزبانی هاست، دامین، میزبانی نمایندگی، نمایندگی وب، سرور مجازی و سرور مجازی ابری می باشد.هاست,میزبانی وب,دامین,سرور مجازی,میزبان پایتخت,host,domain,vps,mizban paytakht,hosting,share hosting,میزبان وب,میزبانی هاست,هاستینگ

google
logo-samandehi