پاسخ : # آموزش CSS 3 [h=2]آموزش CSS 3 -چیدمان متن به صورت روزنامه در چند ستون خاصیت columns[/h] خاصیت columns : به وسیله خاصیت columns در CSS 3 ، می توانید متن یک پاراگراف را به صورت روزنامه وار ، در چند ستون قرار دهید . خاصیت columns این امکان را به طراح وب می دهد که بدون طراحی یک جدول یا کد نویسی خاص ، فقط با یک کد ساده CSS ، متن مورد نظر خود را در چندین ستون به کاربر نمایش دهد . شکل کلی استفاده و ساختار دستوری خاصیت columns به صورت زیر است : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] columns : column-width column-count ; مثال : columns: 100px 3 ; [/TD] [/TR] [/TABLE] نکته مهم : خاصیت columns مخفف و ساده شده 2 خاصیت زیر است : column-width column-count شما می توانید این 2 خاصیت را به صورت تک تک مقدار دهی کرده و یا اینکه دو مقدار آنها را در این حالت کوتاه شده به ترتیب قرار دهید . توضیحات کامل راجع هر یک از این خاصیت را در صفحات مربوط به آنها قرار داده ایم . برای دریافت اطلاعات راجع به هر کدام بر روی نام آن کلیک نمایید . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] syntax توضیح هر یک از موارد [/TD] [/TR] [TR] [TD="class: body, align: center"] توضیح [/TD] [TD="class: header"] پارامتر [/TD] [/TR] [TR] [TD="class: body, align: right"] این پارامتر میزان عرض و پهنای هر ستون را در چیدمان متن تعیین می کند . واحد این پارامتر معمولا px قرار داده می شود . تعیین این پارامتر اجباری است . [/TD] [TD="class: header"] column-width [/TD] [/TR] [TR] [TD="class: body, align: right"] این پارامتر تعیین کننده تعداد ستون های متن است . برای مثال اگر مقدار آن 3 در نظر گرفته شود ، متن در 3 ستون جدا نمایش داده می شود . [/TD] [TD="class: header"] column-count [/TD] [/TR] [/TABLE] در مثال های عملی در انتهای صفحه ، کاربرد خاصیت columns را به صورت عملی به شما نمایش داده ایم . [HR][/HR] پشتیانی در مرورگر های مختلف : متاسفانه این خاصیت در مرورگر IE پشتیانی نمی شود ( مگر در نسخه 10 در آینده ) و توسط هیچ کدام از مرورگر های مطرح دیگر به جز اپرا به صورت عادی پشتیانی نمی شود . برای پشتیبانی در مرورگرهای مختلف باید برای هر کدام ، کد لازم آنها که در جدول زیر آمده را استفاده نمود : [TABLE="class: ex"] [TR] [TD="class: header"] کد لازم برای پشتیانی [/TD] [TD="class: header"] نوع مرورگر [/TD] [/TR] [TR] [TD="class: body, align: right"] مرورگر فایرفاکس با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت moz-columns- بنویسید . [/TD] [TD="class: header"] [/TD] [/TR] [TR] [TD="class: body, align: right"] این خاصیت به صورت عادی و بدون نیاز به تغییر در کد پشتیانی می شود . [/TD] [TD="class: header"] [/TD] [/TR] [TR] [TD="class: body, align: right"] این خاصیت پشتیانی نمی شود . [/TD] [TD="class: header"] [/TD] [/TR] [TR] [TD="class: body, align: right"] مرورگر کروم با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت webkit-columns- بنویسید . [/TD] [TD="class: header"] [/TD] [/TR] [/TABLE] [HR][/HR] چند مثال از کاربرد خاصیت columns : در مثال زیر یک پاراگراف داریم که با وسیله خاصیت columns متن را در دو حالت متفاوت با تعداد ستون ها و عرض های مختلف به کاربر نمایش داه ایم . به کدها و مقدار های در نظر گرفته شده برای هر مثال دقت نمایید : [TABLE="class: ex"] [TR] [TD="class: body, colspan: 2, align: center"] مثال 1 - چیدمان نوشته در 3 ستون و عرض هر ستون 100px [/TD] [/TR] [TR] [TD="class: body"] < style > p { columns : 100px 3 ; -moz-columns: 100px 3 ; /* Firefox */ -webkit-columns: 100px 3 ; /* Chrome */ } < /style > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body, align: right"] در بخش آموزش CCS قبلی در سایت ( CSS 2 ) ، به معرفی و آموزش روش قالب بندی صفحات وب با استفاده از استانداردهای CSS 2 پرداختیم . در آن بخش آموزشی درباره مفهوم CSS ، دلیل کاربرد آن و چگونگی استفاده از خواص CSS در صفحات وب پرداختیم . CSS 2 که ورژن قدیمی این زبان است تحولی نوین در طراحی صفحات وب به وجود آورد ، ولی نقص ها و کمبودهایی زیادی نیز داشت . از این رو طراحان استانداردهای وب تصمیم گرفتند تا ورژن جدیدی از این زبان را ایجاد نمایند تا کمبودهای ورژن قبلی را برطرف نمایند . بنابراین CSS 3 متولد شد . CSS 3 روش نوین قالب بندی صفحات وب است که بیشتر خواص های CSS 2 را شامل شده و خواص جدید و بسیار جالبی به آن اضافه شده است . بنابراین در این بخش جدید آموزش CSS 3 ، ما فقط به معرفی خواص و قابلیت های جدیدی که در این ورژن گنجانده شده است می پردازیم و با کلیت کار با CSS کاری نداریم . چنانچه شما اطلاعاتی راجع به CSS و نحوه استفاده از آن ندارید ، ابتدا به بخش آموزش CSS و بخش آموزش تگ < style > در HTML رفته و آنها را مطالعه فرمایید . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: body, colspan: 2, align: center"] مثال 2 - چیدمان نوشته در 2 ستون و عرض هر ستون 150 [/TD] [/TR] [TR] [TD="class: body"] < style > p { columns : 150px 2 ; -moz-columns: 150px 2 ; /* Firefox */ -webkit-columns: 150px 2 ; /* Chrome */ } < /style > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body, align: right"] در بخش آموزش CCS قبلی در سایت ( CSS 2 ) ، به معرفی و آموزش روش قالب بندی صفحات وب با استفاده از استانداردهای CSS 2 پرداختیم . در آن بخش آموزشی درباره مفهوم CSS ، دلیل کاربرد آن و چگونگی استفاده از خواص CSS در صفحات وب پرداختیم . CSS 2 که ورژن قدیمی این زبان است تحولی نوین در طراحی صفحات وب به وجود آورد ، ولی نقص ها و کمبودهایی زیادی نیز داشت . از این رو طراحان استانداردهای وب تصمیم گرفتند تا ورژن جدیدی از این زبان را ایجاد نمایند تا کمبودهای ورژن قبلی را برطرف نمایند . بنابراین CSS 3 متولد شد . CSS 3 روش نوین قالب بندی صفحات وب است که بیشتر خواص های CSS 2 را شامل شده و خواص جدید و بسیار جالبی به آن اضافه شده است . بنابراین در این بخش جدید آموزش CSS 3 ، ما فقط به معرفی خواص و قابلیت های جدیدی که در این ورژن گنجانده شده است می پردازیم و با کلیت کار با CSS کاری نداریم . چنانچه شما اطلاعاتی راجع به CSS و نحوه استفاده از آن ندارید ، ابتدا به بخش آموزش CSS و بخش آموزش تگ < style > در HTML رفته و آنها را مطالعه فرمایید . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : # آموزش CSS 3 [h=2]آموزش CSS 3 -چیدمان متن به صورت روزنامه در چند ستون خاصیت columns[/h] خاصیت columns : به وسیله خاصیت columns در CSS 3 ، می توانید متن یک پاراگراف را به صورت روزنامه وار ، در چند ستون قرار دهید . خاصیت columns این امکان را به طراح وب می دهد که بدون طراحی یک جدول یا کد نویسی خاص ، فقط با یک کد ساده CSS ، متن مورد نظر خود را در چندین ستون به کاربر نمایش دهد . شکل کلی استفاده و ساختار دستوری خاصیت columns به صورت زیر است : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] columns : column-width column-count ; مثال : columns: 100px 3 ; [/TD] [/TR] [/TABLE] نکته مهم : خاصیت columns مخفف و ساده شده 2 خاصیت زیر است : column-width column-count شما می توانید این 2 خاصیت را به صورت تک تک مقدار دهی کرده و یا اینکه دو مقدار آنها را در این حالت کوتاه شده به ترتیب قرار دهید . توضیحات کامل راجع هر یک از این خاصیت را در صفحات مربوط به آنها قرار داده ایم . برای دریافت اطلاعات راجع به هر کدام بر روی نام آن کلیک نمایید . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] syntax توضیح هر یک از موارد [/TD] [/TR] [TR] [TD="class: body, align: center"] توضیح [/TD] [TD="class: header"] پارامتر [/TD] [/TR] [TR] [TD="class: body, align: right"] این پارامتر میزان عرض و پهنای هر ستون را در چیدمان متن تعیین می کند . واحد این پارامتر معمولا px قرار داده می شود . تعیین این پارامتر اجباری است . [/TD] [TD="class: header"] column-width [/TD] [/TR] [TR] [TD="class: body, align: right"] این پارامتر تعیین کننده تعداد ستون های متن است . برای مثال اگر مقدار آن 3 در نظر گرفته شود ، متن در 3 ستون جدا نمایش داده می شود . [/TD] [TD="class: header"] column-count [/TD] [/TR] [/TABLE] در مثال های عملی در انتهای صفحه ، کاربرد خاصیت columns را به صورت عملی به شما نمایش داده ایم . [HR][/HR] پشتیانی در مرورگر های مختلف : متاسفانه این خاصیت در مرورگر IE پشتیانی نمی شود ( مگر در نسخه 10 در آینده ) و توسط هیچ کدام از مرورگر های مطرح دیگر به جز اپرا به صورت عادی پشتیانی نمی شود . برای پشتیبانی در مرورگرهای مختلف باید برای هر کدام ، کد لازم آنها که در جدول زیر آمده را استفاده نمود : [TABLE="class: ex"] [TR] [TD="class: header"] کد لازم برای پشتیانی [/TD] [TD="class: header"] نوع مرورگر [/TD] [/TR] [TR] [TD="class: body, align: right"] مرورگر فایرفاکس با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت moz-columns- بنویسید . [/TD] [TD="class: header"] [/TD] [/TR] [TR] [TD="class: body, align: right"] این خاصیت به صورت عادی و بدون نیاز به تغییر در کد پشتیانی می شود . [/TD] [TD="class: header"] [/TD] [/TR] [TR] [TD="class: body, align: right"] این خاصیت پشتیانی نمی شود . [/TD] [TD="class: header"] [/TD] [/TR] [TR] [TD="class: body, align: right"] مرورگر کروم با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت webkit-columns- بنویسید . [/TD] [TD="class: header"] [/TD] [/TR] [/TABLE] [HR][/HR] چند مثال از کاربرد خاصیت columns : در مثال زیر یک پاراگراف داریم که با وسیله خاصیت columns متن را در دو حالت متفاوت با تعداد ستون ها و عرض های مختلف به کاربر نمایش داه ایم . به کدها و مقدار های در نظر گرفته شده برای هر مثال دقت نمایید : [TABLE="class: ex"] [TR] [TD="class: body, colspan: 2, align: center"] مثال 1 - چیدمان نوشته در 3 ستون و عرض هر ستون 100px [/TD] [/TR] [TR] [TD="class: body"] < style > p { columns : 100px 3 ; -moz-columns: 100px 3 ; /* Firefox */ -webkit-columns: 100px 3 ; /* Chrome */ } < /style > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body, align: right"] در بخش آموزش CCS قبلی در سایت ( CSS 2 ) ، به معرفی و آموزش روش قالب بندی صفحات وب با استفاده از استانداردهای CSS 2 پرداختیم . در آن بخش آموزشی درباره مفهوم CSS ، دلیل کاربرد آن و چگونگی استفاده از خواص CSS در صفحات وب پرداختیم . CSS 2 که ورژن قدیمی این زبان است تحولی نوین در طراحی صفحات وب به وجود آورد ، ولی نقص ها و کمبودهایی زیادی نیز داشت . از این رو طراحان استانداردهای وب تصمیم گرفتند تا ورژن جدیدی از این زبان را ایجاد نمایند تا کمبودهای ورژن قبلی را برطرف نمایند . بنابراین CSS 3 متولد شد . CSS 3 روش نوین قالب بندی صفحات وب است که بیشتر خواص های CSS 2 را شامل شده و خواص جدید و بسیار جالبی به آن اضافه شده است . بنابراین در این بخش جدید آموزش CSS 3 ، ما فقط به معرفی خواص و قابلیت های جدیدی که در این ورژن گنجانده شده است می پردازیم و با کلیت کار با CSS کاری نداریم . چنانچه شما اطلاعاتی راجع به CSS و نحوه استفاده از آن ندارید ، ابتدا به بخش آموزش CSS و بخش آموزش تگ < style > در HTML رفته و آنها را مطالعه فرمایید . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: body, colspan: 2, align: center"] مثال 2 - چیدمان نوشته در 2 ستون و عرض هر ستون 150 [/TD] [/TR] [TR] [TD="class: body"] < style > p { columns : 150px 2 ; -moz-columns: 150px 2 ; /* Firefox */ -webkit-columns: 150px 2 ; /* Chrome */ } < /style > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body, align: right"] در بخش آموزش CCS قبلی در سایت ( CSS 2 ) ، به معرفی و آموزش روش قالب بندی صفحات وب با استفاده از استانداردهای CSS 2 پرداختیم . در آن بخش آموزشی درباره مفهوم CSS ، دلیل کاربرد آن و چگونگی استفاده از خواص CSS در صفحات وب پرداختیم . CSS 2 که ورژن قدیمی این زبان است تحولی نوین در طراحی صفحات وب به وجود آورد ، ولی نقص ها و کمبودهایی زیادی نیز داشت . از این رو طراحان استانداردهای وب تصمیم گرفتند تا ورژن جدیدی از این زبان را ایجاد نمایند تا کمبودهای ورژن قبلی را برطرف نمایند . بنابراین CSS 3 متولد شد . CSS 3 روش نوین قالب بندی صفحات وب است که بیشتر خواص های CSS 2 را شامل شده و خواص جدید و بسیار جالبی به آن اضافه شده است . بنابراین در این بخش جدید آموزش CSS 3 ، ما فقط به معرفی خواص و قابلیت های جدیدی که در این ورژن گنجانده شده است می پردازیم و با کلیت کار با CSS کاری نداریم . چنانچه شما اطلاعاتی راجع به CSS و نحوه استفاده از آن ندارید ، ابتدا به بخش آموزش CSS و بخش آموزش تگ < style > در HTML رفته و آنها را مطالعه فرمایید . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : # آموزش CSS 3 [h=2]آموزش CSS 3 - پس زمینه عناصر در CSS 3[/h] پس زمینه عناصر در CSS 3 : در بخش آموزش پس زمینه عناصر در CSS 2 ، به آموزش نحوه تعیین پس زمینه برای عناصر و تنظیم خصوصیات مورد نظر برای آن پرداختیم . در CSS 3 ، خواص و قابلیت های جدیدی برای کار با پس زمینه عناصر اضافه شده است که بسیار راه گشا و مفید هستند . برای مثال در CSS 3 ، توسط این خواص جدید می توان اندازه پس زمینه عناصر را تعیین کرد . یا اینکه چندین عکس را به صورت همزمان برای پس زمینه عنصر به کار برد . در این بخش از آموزش CSS 3 ، قصد داریم تا شما را با قابلیت های جدید این زبان برای کار با پس زمینه عناصر آشنا نماییم . این خواص جدید در لیست زیر قرار داده شده اند . برای دریافت اطلاعات راجع به هر کدام بر روی نام آن کلیک نمایید : [TABLE="class: ex"] [TR] [TD="class: prname"] نام خاصیت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prname"] background-clip [/TD] [TD="class: prbody"] این خاصیت محل نمایش پس زمینه عنصر را تعیین می کند . [/TD] [/TR] [TR] [TD="class: prname"] background-origin [/TD] [TD="class: prbody"] این خاصیت ، نطقه شروع محل قرار گیری پس زمینه را تعیین می کند . [/TD] [/TR] [TR] [TD="class: prname"] background-size [/TD] [TD="class: prbody"] این خاصیت سایز پس زمینه عنصر را تعیین می کند . [/TD] [/TR] [TR] [TD="class: prname"] امکان جدید تعیین چند تصویر جهت پس زمینه [/TD] [TD="class: prbody"] توسط این امکان جدید در CSS 3 ، می توانید بیش از یک عکس را به صورت همزمان برای پس زمینه عنصر تعیین نمایید . [/TD] [/TR] [/TABLE]
پاسخ : # آموزش CSS 3 [h=2]پس زمینه عناصر در CSS 3 - خاصیت background-clip[/h] خاصیت background-clip : از خاصیت background-clip ، در CSS 3 برای تعیین محل و نحوه قرار گیری پس زمینه در عنصر مورد نظر استفاده می شود . در CSS 2 ، امکان تعیین محل دقیق قرار گیری پس زمینه در عناصر وجود نداشت ، اما در CSS 3 این امکان در اختیار ما قرار گرفته است . برای مثال توسط این خاصیت می توان تعیین کرد که پس زمینه عنصر در تمام محدوده آن قرار گیرد و یا اینکه فقط پشت متن موجود در آن را پوشش دهد . شکل کلی استفاده از این خاصیت به صورت زیر است : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] background-clip : value ; مثال : background-clip : border-box ; [/TD] [/TR] [/TABLE] در جدول زیر به تشریح هر یک از حالت های ممکن برای خاصیت background-clip می پردازیم . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] syntax توضیح هر یک از موارد [/TD] [/TR] [TR] [TD="class: body, align: center"] توضیح [/TD] [TD="class: header"] پارامتر [/TD] [/TR] [TR] [TD="class: body, align: right"] تعیین این پارامتر اجباری است . این پارامتر تعیین کننده نحوه و مکان قرار گیری پس زمینه عنصر می باشد و می تواند یکی از 3 حالت زیر را داشته باشد : border-box : این خاصیت باعث می شود تا پس زمینه عنصر ، تمام محدوده عنصر را پوشش دهد . این مقدار ، مقدار پیش فرض مرورگر است . padding-box : در این حالت ، پس زمینه عنصر تمام سطح عنصر را پوشش داده و فقط مقداری از حاشیه عنصر خالی می ماند . content-box : در این حالت ، پس زمینه عنصر فقط پشت محتویات عنصر را پوشش می دهد . برای مثال اگر عنصر شامل مقداری متن باشد ، پس زمینه فقط پشت متن را پوشش می دهد . [/TD] [TD="class: header"] value [/TD] [/TR] [/TABLE] [HR][/HR] پشتیانی در مرورگر های مختلف : این خاصیت در تمام نسخه های جدید مرورگرهای مطرح پشتیانی می شود . [HR][/HR] مثال های عملی : در 3 مثال عملی زیر ، هر 3 حالت مختلف این خاصیت را در عمل به شما نمایش می دهیم . در این مثال ها یک عنصر تگ < div > د اریم که برای آن پس زمینه رنگی تعیین کرده ایم . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 3"] حالت 1 - border-box [/TD] [/TR] [TR] [TD="class: body"] < div style=" background-clip : border-box ; width: 200px ; border: dashed 5px black ; background-color : Silver ; padding: 20px" > CSS 3 has very intelligent tools for web developers . some work that was a thrick before it that CSS 3 comes , now can be done just with a simple code ! < /div > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] CSS 3 has very intelligent tools for web developers . some work that was a thrick before it that CSS 3 comes , now can be done just with a simple code ! [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header, colspan: 3"] حالت 2 - padding-box [/TD] [/TR] [TR] [TD="class: body"] < div style=" background-clip : padding-box ; width: 200px ; border: dashed 3px black ; background-color : Silver ; padding: 20px" > CSS 3 has very intelligent tools for web developers . some work that was a thrick before it that CSS 3 comes , now can be done just with a simple code ! < /div > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] CSS 3 has very intelligent tools for web developers . some work that was a thrick before it that CSS 3 comes , now can be done just with a simple code ! [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header, colspan: 3"] حالت 3 - content-box [/TD] [/TR] [TR] [TD="class: body"] < div style=" background-clip : content-box ; width: 200px ; border: dashed 3px black ; background-color : Silver ; padding: 20px" > CSS 3 has very intelligent tools for web developers . some work that was a thrick before it that CSS 3 comes , now can be done just with a simple code ! < /div > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] CSS 3 has very intelligent tools for web developers . some work that was a thrick before it that CSS 3 comes , now can be done just with a simple code ! [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : # آموزش CSS 3 [h=2]پس زمینه عناصر در CSS 3 - خاصیت background-origin[/h] خاصیت background-origin : خاصیت 8 در CSS 3 ، تعیین کننده نقطه شروع محل قرار گیری پس زمینه عنصر مورد نظر است . برای مثال می توان تعیین کرد که پس زمینه یک عنصر دقیقا از گوشه بالای سمت چپ عنصر شروع شده و یا مقداری از آن فاصله داشته باشد . همچنین می توانید مکان شروع پس زمینه عنصر را با توجه به محتویات درونی آن تنظیم کنید . شکل کلی استفاده از این خاصیت به صورت زیر است : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] background-origin : value ; مثال : background-origin : border-box ; [/TD] [/TR] [/TABLE] در جدول زیر به تشریح هر یک از حالت های ممکن برای خاصیت background-origin می پردازیم . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] syntax توضیح هر یک از موارد [/TD] [/TR] [TR] [TD="class: body, align: center"] توضیح [/TD] [TD="class: header"] پارامتر [/TD] [/TR] [TR] [TD="class: body, align: right"] تعیین این پارامتر اجباری است . این پارامتر تعیین کننده مکان شروع پس زمینه عنصر می باشد و می تواند یکی از 3 حالت زیر را داشته باشد : border-box : این خاصیت باعث می شود تا پس زمینه عنصر دقیقا از گوشه سمت چپ و بالای عنصر شروع شود . این مقدار ، مقدار پیش فرض مرورگر است . padding-box : در این حالت ، پس زمینه عنصر ، با مقداری فاصله از گوشه بالا و سمت چپ عنصر شروع می شود . content-box : در این حالت ، نقطه شروع پس زمینه عنصر با توجه به محتویات درونی و محل شروع آن تنظیم می شود . [/TD] [TD="class: header"] value [/TD] [/TR] [/TABLE] [HR][/HR] پشتیانی در مرورگر های مختلف : این خاصیت در تمام نسخه های جدید مرورگرهای مطرح پشتیانی می شود . [HR][/HR] مثال های عملی : در 3 مثال عملی زیر ، هر 3 حالت مختلف این خاصیت را در عمل به شما نمایش می دهیم . در این مثال ها یک عنصر تگ < div > د اریم که برای آن یک عکس را به عنوان پس زمینه تعیین کرده ایم . دقت کنید که در هر حالت ، نقطه شروع مکان قرار گیری تصویر به عنوان پس زمینه کجاست . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 3"] حالت 1 - border-box [/TD] [/TR] [TR] [TD="class: body"] < div style=" background-origin : border-box ; width: 200px ; border: dashed 5px black ; padding: 20px ; background-repeat: no-repeat ; background-image: url(../Pic/ADS/css.png)" > CSS 3 has very intelligent tools for web developers . some work that was a thrick before it that CSS 3 comes , now can be done just with a simple code ! < /div > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] CSS 3 has very intelligent tools for web developers . some work that was a thrick before it that CSS 3 comes , now can be done just with a simple code ! [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header, colspan: 3"] حالت 2 - padding-box [/TD] [/TR] [TR] [TD="class: body"] < div style=" background-origin : padding-box ; width: 200px ; border: dashed 3px black ; padding: 20px ; background-repeat: no-repeat ; background-image: url(../Pic/ADS/css.png)" > CSS 3 has very intelligent tools for web developers . some work that was a thrick before it that CSS 3 comes , now can be done just with a simple code ! < /div > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] CSS 3 has very intelligent tools for web developers . some work that was a thrick before it that CSS 3 comes , now can be done just with a simple code ! [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] ../Pic/ADS/css.png [TABLE="class: ex"] [TR] [TD="class: header, colspan: 3"] حالت 3 - content-box [/TD] [/TR] [TR] [TD="class: body"] < div style=" background-origin : content-box ; width: 200px ; border: dashed 3px black ; padding: 20px ; background-repeat: no-repeat ; background-image: url(../Pic/ADS/css.png)" > CSS 3 has very intelligent tools for web developers . some work that was a thrick before it that CSS 3 comes , now can be done just with a simple code ! < /div > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] CSS 3 has very intelligent tools for web developers . some work that was a thrick before it that CSS 3 comes , now can be done just with a simple code ! [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : # آموزش CSS 3 [h=2]پس زمینه عناصر در CSS 3 - خاصیت background-size[/h] خاصیت background-size : خاصیت background-size در CSS 3 ، اندازه عکس پس زمینه عنصر را تعیین می کند . در CSS 2 ، اگر عکسی را به عنوان پس زمینه یک عنصر تعیین می کردید ، قادر نبودید اندازه آن را در هنگام نمایش در مرورگر تغییر دهید و قبلا می بایستی اندازه عکس را به میزان صحیح ، تعیین کرده بودید . اما در CSS 3 ، شما می توانید یک عکس را به عنوان پس زمینه یک عنصر انتخاب کرده و سپس در هنگام نمایش در مرورگر اندازه آن را به اندازه دلخواه خود تغییر دهید . در این حالت برنامه با قابلیت سازگاری بهتری عمل خواهد کرد . به وسیله خاصیت background-size ، می توانید یک عکس واحد را برای چندین عنصر به عنوان پس زمینه تعیین کرده و در هنگام نمایش در مرورگر ، اندازه آن عکس را براساس عنصر مربوطه تنظیم نمایید . شکل کلی استفاده از این خاصیت به صورت زیر است : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] background-size : value ; مثال : background-size : 30px ; [/TD] [/TR] [/TABLE] در جدول زیر به تشریح هر یک از حالت های ممکن برای خاصیت background-size می پردازیم . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] syntax توضیح هر یک از موارد [/TD] [/TR] [TR] [TD="class: body, align: center"] توضیح [/TD] [TD="class: header"] پارامتر [/TD] [/TR] [TR] [TD="class: body, align: right"] تعیین این پارامتر اجباری است . این پارامتر تعیین کننده اندازه عکس پس زمینه برای عنصر است و می تواند به یکی از 4 روش زیر مقدار دهی شود : length : در این حالت اندازه ارتفاع و عرض عکس پس زمینه بر اساس واحدی مثل px تعیین می شود . اگر یک عدد مثل 30px تعیین شود ، اندازه ارتفاع و عرض عکس پس زمینه هر دو ، مقدار 30px را خواهند داشت . اما می توان 2 عدد پشت سر هم را نیز تعیین کرد، که در این حالت عدد اول تعیین کننده ارتفاع و عدد دوم تعیین کننده عرض عکس خواهد بود . % : در این حالت اندازه ارتفاع و عرض عکس پس زمینه بر اساس درصد % نسبت به اندازه واقعی عکس ، تعیین خواهد شد . اگر یک عدد مثل %30 تعیین شود ، اندازه ارتفاع و عرض عکس پس زمینه هر دو ، مقدار %30 اندازه واقعی عکس را خواهند داشت . اما می توان 2 عدد پشت سر هم را نیز تعیین کرد، که در این حالت عدد اول تعیین کننده ارتفاع و عدد دوم تعیین کننده عرض عکس خواهد بود . cover : در این حالت ، عکس پس زمینه به اندازه محتویات درون عنصر کوچک خواهد شد ، تا ارتفاع وعرض آن اندازه عنصر شود . contain : در این حالت ، عکس پس زمینه به اندازه محتویات درون عنصر بزرگ خواهد شد ، تا ارتفاع وعرض آن اندازه عنصر شود . [/TD] [TD="class: header"] value [/TD] [/TR] [/TABLE] [HR][/HR] پشتیانی در مرورگر های مختلف : این خاصیت در تمام نسخه های جدید مرورگرهای مطرح پشتیانی می شود . [HR][/HR] مثال های عملی : در 4 مثال عملی زیر ، هر 4 حالت مختلف این خاصیت را در عمل به شما نمایش می دهیم . در این مثال ها یک عنصر تگ < div > د اریم که برای آن یک عکس را به عنوان پس زمینه تعیین کرده ایم . دقت کنید که در 2 حالت اول و دوم به ترتیب اندازه عکس پس زمینه را بر اساس واحد های px و درصد % تعیین کرده ایم . در حالت سوم عکس برای اینکه هم اندازه محتویات عنصر شود ، خود را کوچک کرده و در حالت چهارم نیز عکس برای هم اندازه شدن با محتویات عنصر خود را بزرگ کرده است . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 3"] حالت 1 - اندازه بر حسب پیکسل px [/TD] [/TR] [TR] [TD="class: body"] < div style=" background-size: 90px 100px ; width: 200px ; border: dashed 5px black ; padding: 20px ; background-repeat: no-repeat ; background-image: url(../Pic/ADS/css.png)" > CSS 3 has very intelligent tools for web developers . some work that was a thrick before it that CSS 3 comes , now can be done just with a simple code ! < /div > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] [TABLE="width: 100%"] [TR] [TD] CSS 3 has very intelligent tools for web developers . some work that was a thrick before it that CSS 3 comes , now can be done just with a simple code ! [/TD] [TD="align: center"] اندازه واقعی عکس به کار رفته [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header, colspan: 3"] حالت 2 - اندازه بر حسب درصد % [/TD] [/TR] [TR] [TD="class: body"] < div style=" background-size: 110% ; width: 200px ; border: dashed 3px black ; padding: 20px ; background-repeat: no-repeat ; background-image: url(../Pic/ADS/css.png)" > CSS 3 has very intelligent tools for web developers . some work that was a thrick before it that CSS 3 comes , now can be done just with a simple code ! < /div > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] [TABLE="width: 100%"] [TR] [TD] CSS 3 has very intelligent tools for web developers . some work that was a thrick before it that CSS 3 comes , now can be done just with a simple code ! [/TD] [TD="align: center"] اندازه واقعی عکس به کار رفته [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] ../Pic/ADS/css.png [TABLE="class: ex"] [TR] [TD="class: header, colspan: 3"] حالت 3 - حالت cover [/TD] [/TR] [TR] [TD="class: body"] < div style=" background-size: cover ; width: 200px ; border: dashed 3px black ; padding: 20px ; background-repeat: no-repeat ; background-image: url(../Pic/ADS/css.png)" > CSS 3 has very intelligent tools for web developers . some work that was a thrick before it that CSS 3 comes , now can be done just with a simple code ! < /div > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] [TABLE="width: 100%"] [TR] [TD] CSS 3 has very intelligent tools for web developers . some work that was a thrick before it that CSS 3 comes , now can be done just with a simple code ! [/TD] [TD="align: center"] اندازه واقعی عکس به کار رفته [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] ../Pic/ADS/css.png [TABLE="class: ex"] [TR] [TD="class: header, colspan: 3"] حالت 4 - حالت contain [/TD] [/TR] [TR] [TD="class: body"] < div style=" background-size: contain ; width: 200px ; border: dashed 3px black ; padding: 20px ; background-repeat: no-repeat ; background-image: url(../Pic/ADS/css.png)" > CSS 3 has very intelligent tools for web developers . some work that was a thrick before it that CSS 3 comes , now can be done just with a simple code ! < /div > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] [TABLE="width: 100%"] [TR] [TD] CSS 3 has very intelligent tools for web developers . some work that was a thrick before it that CSS 3 comes , now can be done just with a simple code ! [/TD] [TD="align: center"] اندازه واقعی عکس به کار رفته [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : # آموزش CSS 3 [h=2]پس زمینه عناصر در CSS 3 - تعیین چند عکس به عنوان پس زمینه عنصر[/h] تعیین چند عکس به عنوان پس زمینه عنصر : در بخش آموزش پس زمینه در CSS 2 ، که قبلا در همین سایت بدان اشاره کرده ایم ، با نحوه تعیین یک عکس به عنوان پس زمینه یک عنصر آشنا شدید . در CSS 2 شما می توانید فقط یک عکس را به عنوان پس زمینه برای عناصر تعیین کنید . اما این کار در CSS 3 ، تغییر کرده است . در CSS 3 ، شما می توانید 2 یا چندین عکس را به صورت همزمان به عنوان پس زمینه یک عنصر تعیین کرده و مرورگر تمام عکس ها را نمایش خواهد داد . برای این منظور کافی است آدرس عکس هایی که می خواهید به عنوان پس زمینه یک عنصر قرار دهید ، را به ترتیب در خاصیت backgroun-image عنصر تعیین نمایید . شکل کلی استفاده از این خاصیت به صورت زیر است : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] background-image : url ( آدرس عکس 1 ) , url ( آدرس عکس 2 ) , url ( آدرس عکس 3 ) ; مثال : background-image:url ( Pic/1.jpg ) , url ( Pic/2.jpg ) ; [/TD] [/TR] [/TABLE] [HR][/HR] پشتیانی در مرورگر های مختلف : این خاصیت در تمام نسخه های جدید مرورگرهای مطرح به جزء مرورگر معظم اینترنت اکسپلورر پشتیانی می شود . [HR][/HR] مثال عملی : در مثال زیر به تشریح نحوه استفاده از این راهکار پرداخته ایم . در این مثال یک تگ < div > داریم ، که برای آن 2 عکس را به صورت همزمان به عنوان پس زمینه تعیین کرده ایم . به کد و خروجی مثال دقت نمایید : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 3"] Example - Multi backgrounds [/TD] [/TR] [TR] [TD="class: body"] < div style=" border: dashed 5px black ; background-image: url(../Pic/ADS/java.png) , url(../Pic/ADS/HTML_Ico.png)"" > CSS 3 has very intelligent tools for web developers . some work that was a thrick before it that CSS 3 comes , now can be done just with a simple code ! < /div > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] CSS 3 has very intelligent tools for web developers . some work that was a thrick before it that CSS 3 comes , now can be done just with a simple code ! ! ! ! ! ! ! ! ! ! ! ! ! [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : # آموزش CSS 3 [h=2]آموزش CSS 3 - تغییر وضعیت عناصر[/h] تغییر وضعیت نمایش عناصر در CSS 3 - خاصیت transform : به وسیله خاصیت transform در CSS 3 ، شما می توانید وضعیت نمایش عنصر مورد نظر خود را به صورت 2 بعدی یا 3 بعدی تغییر دهید . به وسیله متدهای خاصیت transform ، شما می توانید عناصر مورد نظر خود را چرخانده ، بزرگ یا کوچک کرده ، حرکت داده و یا تبدیل نمایید . این متدها ، افکت های تصویری بسیار زیبا و متنوعی را در اختیار طراحان وب قرار می دهند که تمامی آنها با نوشتن یک کد ساده امکان پذیر خواهند بود . مطمننا تا قبل از این ، طراحان وب برای انجام این امور ، نیاز به استفاده از ترفندها و یا برنامه های جانبی مختلفی بودند . شکل کلی استفاده از این خاصیت به صورت زیر است : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] transform : effect ( ) ; مثال : transform : rotate ( 90deg ) ; [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] syntax توضیح هر یک از موارد [/TD] [/TR] [TR] [TD="class: body, align: center"] توضیح [/TD] [TD="class: header"] پارامتر [/TD] [/TR] [TR] [TD="class: body, align: right"] این پارامتر تعیین کننده نوع متدی است که خاصیت به وسیله آن ، وضعیت نمایش عنصر مورد نظر را تغییر می دهد . به وسیله این متدها می توانید عنصر مورد نظر خود را چرخانده ، برعکس کرده ، بزرگ یا کوچک نموده و یا تبدیل کنید . این پارامتر می تواند یکی از مقادیر زیر را داشته باشد . برای دریافت اطلاعات راجع به هر کدام ، به بخش معرفی متدهای خاصیت transform در بخش پایین صفحه بروید : ( ) translate ( ) rotate ( ) scale ( ) skew [/TD] [TD="class: header"] effect ( ) [/TD] [/TR] [/TABLE]
پاسخ : # آموزش CSS 3 [h=2]آموزش CSS 3 - تغییر وضعیت عناصر[/h] تغییر وضعیت نمایش عناصر در CSS 3 - خاصیت transform : به وسیله خاصیت transform در CSS 3 ، شما می توانید وضعیت نمایش عنصر مورد نظر خود را به صورت 2 بعدی یا 3 بعدی تغییر دهید . به وسیله متدهای خاصیت transform ، شما می توانید عناصر مورد نظر خود را چرخانده ، بزرگ یا کوچک کرده ، حرکت داده و یا تبدیل نمایید . این متدها ، افکت های تصویری بسیار زیبا و متنوعی را در اختیار طراحان وب قرار می دهند که تمامی آنها با نوشتن یک کد ساده امکان پذیر خواهند بود . مطمننا تا قبل از این ، طراحان وب برای انجام این امور ، نیاز به استفاده از ترفندها و یا برنامه های جانبی مختلفی بودند . شکل کلی استفاده از این خاصیت به صورت زیر است : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] transform : effect ( ) ; مثال : transform : rotate ( 90deg ) ; [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] syntax توضیح هر یک از موارد [/TD] [/TR] [TR] [TD="class: body, align: center"] توضیح [/TD] [TD="class: header"] پارامتر [/TD] [/TR] [TR] [TD="class: body, align: right"] این پارامتر تعیین کننده نوع متدی است که خاصیت به وسیله آن ، وضعیت نمایش عنصر مورد نظر را تغییر می دهد . به وسیله این متدها می توانید عنصر مورد نظر خود را چرخانده ، برعکس کرده ، بزرگ یا کوچک نموده و یا تبدیل کنید . این پارامتر می تواند یکی از مقادیر زیر را داشته باشد . برای دریافت اطلاعات راجع به هر کدام ، به بخش معرفی متدهای خاصیت transform در بخش پایین صفحه بروید : ( ) translate ( ) rotate ( ) scale ( ) skew [/TD] [TD="class: header"] effect ( ) [/TD] [/TR] [/TABLE] [HR][/HR] پشتیانی در مرورگر های مختلف : متاسفانه این خاصیت به صورت عادی توسط هیچ یک از مرورگر های مطرح پشتیانی نمی شود . برای پشتیبانی در مرورگرهای مختلف باید برای هر کدام ، کد لازم آنها که در جدول زیر آمده را استفاده نمود : [TABLE="class: ex"] [TR] [TD="class: header"] کد لازم برای پشتیانی [/TD] [TD="class: header"] نوع مرورگر [/TD] [/TR] [TR] [TD="class: body, align: right"] مرورگر فایرفاکس با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت moz-transform- بنویسید . [/TD] [TD="class: header"] [/TD] [/TR] [TR] [TD="class: body, align: right"] مرورگر اپرا با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت o-transform- بنویسید . [/TD] [TD="class: header"] [/TD] [/TR] [TR] [TD="class: body, align: right"] مرورگر اینترنت اکسپلورر با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت ms-transform- بنویسید . [/TD] [TD="class: header"] [/TD] [/TR] [TR] [TD="class: body, align: right"] مرورگر کروم با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت webkit-transform- بنویسید . [/TD] [TD="class: header"] [/TD] [/TR] [/TABLE] [HR][/HR] متدهای خاصیت transform : پس از توضیح اولیه خاصیت transform و نحوه استفاده از آن ، باید با انواع متدهای این خاصیت آشنا شوید . در جدول زیر لیست متدهای این خاصیت آمده است . برای دریافت اطلاعات بیشتر راجع به هر کدام بر روی نام آن کلیک نمایید : [TABLE="class: ex"] [TR] [TD="class: prname"] نام متد [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prname"] translate ( ) [/TD] [TD="class: prbody"] به وسیله این متد می توانید عنصر مورد نظر را کپی کرده و به یک نقطه دیگر منتقل نمایید . [/TD] [/TR] [TR] [TD="class: prname"] rotate ( ) [/TD] [TD="class: prbody"] به وسیله این متد می توانید عنصر مورد نظر را در جهت های مختلف بچرخانید . [/TD] [/TR] [TR] [TD="class: prname"] scale ( ) [/TD] [TD="class: prbody"] به وسیله این متد می توانید اندازه عنصر مورد نظر را تغییر داده و بزرگ یا کوچک نمایید . [/TD] [/TR] [TR] [TD="class: prname"] skew ( ) [/TD] [TD="class: prbody"] به وسیله این متد می توانید عنصر مورد نظر را با زوایای مختلف حتی 360 بچرخانید . [/TD] [/TR] [/TABLE]
پاسخ : # آموزش CSS 3 [h=2]آموزش CSS 3 - تغییر وضعیت عناصر - متد translate[/h] خاصیت transform - متد translate : به وسیله متد translate در خاصیت transform می توانید عنصر مورد نظر خود را به یک نقطه دیگر در صفحه منتقل کنید . برای این منظور باید میزان اندازه ای که می خواهید ، عنصرتان جابجا شود را به صورت دو مقدار افقی و عمودی در مقابل پرانتز متد translate تعیین کنید . برای این منظور معمولا از واحدهایی مثل px یا pt استفاده می شود . شکل کلی استفاده از این خاصیت به صورت زیر است : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] transform : translate ( value1 , value2 ) ; مثال : transform : translate ( 90px , 80px ) ; [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] syntax توضیح هر یک از موارد [/TD] [/TR] [TR] [TD="class: body, align: center"] توضیح [/TD] [TD="class: header"] پارامتر [/TD] [/TR] [TR] [TD="class: body, align: right"] این پارامتر میزان اندازه ای که عنصر در جهت افقی جابجا می شود را براساس واحدی مثل px با pt تعیین می کند . تعیین این پارامتر اجباری است . [/TD] [TD="class: header"] value1 [/TD] [/TR] [TR] [TD="class: body, align: right"] این پارامتر میزان اندازه ای که عنصر در جهت عمودی جابجا می شود را براساس واحدی مثل px با pt تعیین می کند . تعیین این پارامتر اجباری است . [/TD] [TD="class: header"] value2 [/TD] [/TR] [/TABLE] [HR][/HR] پشتیانی در مرورگر های مختلف : متاسفانه این خاصیت به صورت عادی توسط هیچ یک از مرورگر های مطرح پشتیانی نمی شود . برای پشتیبانی در مرورگرهای مختلف باید برای هر کدام ، کد لازم آنها که در جدول زیر آمده را استفاده نمود : [TABLE="class: ex"] [TR] [TD="class: header"] کد لازم برای پشتیانی [/TD] [TD="class: header"] نوع مرورگر [/TD] [/TR] [TR] [TD="class: body, align: right"] مرورگر فایرفاکس با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت ( ) moz-transform- : translate بنویسید . [/TD] [TD="class: header"] [/TD] [/TR] [TR] [TD="class: body, align: right"] مرورگر اپرا با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت ( ) o-transform- : translate بنویسید . [/TD] [TD="class: header"] [/TD] [/TR] [TR] [TD="class: body, align: right"] مرورگر اینترنت اکسپلورر با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت ( ) ms-transform- : translate بنویسید . [/TD] [TD="class: header"] [/TD] [/TR] [TR] [TD="class: body, align: right"] مرورگر کروم با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت ( ) webkit-transform- : translate بنویسید . [/TD] [TD="class: header"] [/TD] [/TR] [/TABLE] [HR][/HR] مثال عملی : در مثال زیر به تشریح نحوه استفاده از این متد پرداخته ایم . در مثال زیر یک عکس تگ < / img > داریم که ابتدا در حالت عادی نمایش داده شده است . اما در حالت دوم آن عکس را در جهت افقی و عمودی به ترتیب 20 و 30 پیکسل جابجا نموده ایم . به کدها و خروجی مثال دقت نمایید : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 3"] حالت 1 - مکان اولیه عکس [/TD] [/TR] [TR] [TD="class: body"] < img src="../Pic/ADS/css.png" /> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header, colspan: 3"] حالت 2 - تغییر مکان عکس به یک نقطه دوم [/TD] [/TR] [TR] [TD="class: body"] < img src="../Pic/ADS/css.png" style="-ms-transform: translate(20px,30px); /* ie 9 */ -webkit-transform: translate(20px,30px); /* chrome */ -o-transform: translate(20px,30px); /* opera */ -moz-transform: translate(20px,30px); /* firefox */" /> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] [/TD] [/TR] [/TABLE]
