نخستين جلسه آموزش css3 - گرد كردن گوشه هاي اشياء صفحه با اینكه هنوز نسخه جدید css3 بطور كامل معرفی نشده , و برخی از مرورگرها نیز از قبیل اینترنت اكسپلورر (كه از بدترین نوع این مرورگرها هست) ، تقریباً از ویژگیهای جدید این نسخه پشتیبانی نمیكنند. اما سایت سورس گذر در این راه قدم پیشه كرده و به معرفی این ویژگیها خواهد پرداخت. پس با نظرات خودتون ما را دراین راه یاری كنید. با نام خداوند متعال اولین جلسه این سری آموزشی رو شروع میكنیم. برای دیدن این آموزش به ادامه مطلب مراجعه كنید. در این آموزش كه اولین آموزش زبانcss3 میباشد، به معرفی نخستین ویژگی این نسخه ، كه گرد كردن گوشه های اشیای صفحه وب میباشد میپردازم. این ویژگی در مرورگرهای زیر قابل مشاهده می باشد: 1- IE9 2- Firefox 3 3- Chrome 4 4- Safari 3.1 برای مشاهده تمام ویژگیهای این نسخه میتوانید نسخه جدید فایرفاكس 4.6 رو از سایت فایرفاكس دانلود كنید. میتوانید با تغییر اعداد میزان گرد شدن گوشه ها را تنظیم كنید. این اعداد از عدد 2 شروع شده و به عدد 35 ختم میشوند. #border-radius { -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; } منبع: سورس گذر
دومين جلسه آموزش css3 – سايه دادن به متن سلام. در این جلسه که دومین جلسه این سری آموزشی می باشد، نحوه ی سایه دادن به متن را همراه با توضیحات این ویژگی آموزش خواهم داد. این خصوصیت توسط مرورگرهای : فایر فاکس ۳٫۵ ، اپرا ۹٫۶ ، کروم ۲ ، سافاری ۴ ونسخه های بالاتر این مرورگرها پشتیبانی می شود. #text-shadow { text-shadow: #555 4px 2px 5px; } #555 : این قسمت رنگ سایه را نشان میدهد که با تغییر آن رنگ سایه متن نیز تغییر خواهد کرد. ۴px : با تغییر این عدد ، می توانید سایه متن را بر روی محور افقی یا همان محور X تنظیم کنید. ۲px : این قسمت نیز بر عکس قسمت بالاست . ,یعنی با تغییر این عدد میتوان سایه را بر روی محور عمودی یا همان محور Y تنظیم کرد. ۵px : اگر این مقدار برابر با عدد صفر باشد سایه دیده نمی شود ، مگر در شرایط خاص. ,مثلاً اگر محور افقی را مقدار دهی کرده باشید یا بلعکس. و با افزایش این مقدار میتوان میزان سایه متن ,را تنظیم و رفته رفته با بیشتر شدن عدد سایه محو میشود.
سومین جلسه آموزش css3 – سایه دادن به باکس سلام. امروز جلسه سوم آموزش css3 رو آماده کردم .در این آموزش نحوه سایه دادن به یک باکس آموزش داده می شود، امیدوارم مطالب این سایت برای شما عزیزان مفید واقع شود. این خصوصیت توسط مرورگرهای : فایر فاکس ۳٫۵ ، کروم ۲ ، سافاری ۴ ونسخه های بالاتر این مرورگرها پشتیبانی می شود. برای مشاهده آموزش به ادامه مطلب مراجعه. #box-shadow { -webkit-box-shadow: #244766 4px 2px 5px; -moz-box-shadow: #244766 4px 2px 5px; box-shadow: #244766 4px 2px 5px; } #244766 : این قسمت رنگ سایه را نشان میدهد که با تغییر آن رنگ سایه متن نیز تغییر خواهد کرد. ۴px : با تغییر این عدد ، می توانید سایه باکس یا جعبه را بر روی محور افقی یا همان محور X تنظیم کنید. ۲px : این قسمت نیز بر عکس قسمت بالاست . یعنی با تغییر این عدد میتوان سایه را بر روی محور عمودی یا همان محور Y تنظیم کرد. ۵px : اگر این مقدار برابر با عدد صفر باشد سایه دیده نمی شود ، مگر در شرایط خاص. مثلاً اگر محور افقی را مقدار دهی کرده باشید یا بلعکس. و با افزایش این مقدار میتوان میزان سایه متن را تنظیم و رفته رفته با بیشتر شدن عدد سایه محو میشود. منبع : سورس گذر
چهارمین جلسه آموزش css3 – چند ستونه کردن متن سلام. با چهارمین جلسه آموزش Css3 در خدمت شما عزیزان هستیم. در این جلسه نحوه چند ستونه کردن متن آموزش داده خواهد شد. برای دریافت کد مورد نظر و مشاهده آموزش به ادامه مطلب مراجعه کنید. نظر یادتون نره!!! این خصوصیت توسط مرورگرهای : فایر فاکس ۳ ، کروم ۲ ، سافاری ۳٫۱ ونسخه های بالاتر این مرورگرها پشتیبانی می شود. #columns { -webkit-column-count: 2; -webkit-column-width: 250px; -webkit-column-gap: 35px; -webkit-column-rule: 1px solid #6d94b4; -moz-column-count: 2; -moz-column-width: 240px; -moz-column-gap: 35px; -moz-column-rule: 1px solid #6d94b4; column-count: 2; column-width: 240px; column-gap: 35px; column-rule: 1px solid #6d94b4; } نکته : دستوراتی که اولین حرفشان webkit می باشد مربوط به مرورگر کروم , و دستوراتی که کلمه اولشان با Moz آغاز می شود مربوط به مرورگر فایرفاکس می باشند. column-count : تعداد ستون ها را مشخص می کند. column-width : پهنای هر ستون را تنظیم می کند . با افزایش پهنا ، تعداد ستونها کاهش پیدا خواهد کرد. column-gap : این گزینه مانند دستور padding عمل می کند. دستور gap فاصله ی بین متن ستون , و خط جدا کننده ستونها را تنظیم میکند. column-rule : میزان ضخامت ، رنگ , و نوع خط را مشخص می کند ، مانند خصوصیت Border . منبع : سورس گذر
