[h=2]آموزش CSS 3 - روش نوین قالب بندی صفحات وب[/h] مقدمه و معرفی CSS 3 : در بخش آموزش CCS قبلی در سایت ( CSS 2 ) ، به معرفی و آموزش روش قالب بندی صفحات وب با استفاده از استانداردهای CSS 2 پرداختیم . در آن بخش آموزشی درباره مفهوم CSS ، دلیل کاربرد آن و چگونگی استفاده از خواص CSS در صفحات وب پرداختیم . CSS 2 که ورژن قدیمی این زبان است تحولی نوین در طراحی صفحات وب به وجود آورد ، ولی نقص ها و کمبودهایی زیادی نیز داشت . از این رو طراحان استانداردهای وب تصمیم گرفتند تا ورژن جدیدی از این زبان را ایجاد نمایند تا کمبودهای ورژن قبلی را برطرف نمایند . بنابراین CSS 3 متولد شد . CSS 3 روش نوین قالب بندی صفحات وب است که بیشتر خواص های CSS 2 را شامل شده و خواص جدید و بسیار جالبی به آن اضافه شده است . بنابراین در این بخش جدید آموزش CSS 3 ، ما فقط به معرفی خواص و قابلیت های جدیدی که در این ورژن گنجانده شده است می پردازیم و با کلیت کار با CSS کاری نداریم . چنانچه شما اطلاعاتی راجع به CSS و نحوه استفاده از آن ندارید ، ابتدا به بخش آموزش CSS و بخش آموزش تگ < style > در HTML رفته و آنها را مطالعه فرمایید . [HR][/HR] خواص جدید CSS 3 : در CSS 3 ، خواص جالب و کاربردی زیادی اضافه شده است . از جمله این خواص می توان به خطوط حاشیه با گوشه های منحنی ، افکت سایه برای خطوط حاشیه عناصر و یا استفاده از چندین عکس همزمان در پس زمینه یک عنصر نام برد . در مثال زیر خاصیت جدید خطوط حاشیه با گوشه های منحنی را نشان داده ایم . نمایش صحیح خروجی به ورژن مرورگر شما بستگی دارد . An exaplme of new CSS 3 Utilities در بخش های بعدی آموزش به معرفی و نحوه استفاده از این خواص پرداخته ایم . [HR][/HR] نگرانی از پشتیبانی از CSS 2 : هیچ نگرانی برای پشتیانی از خواص قبلی CSS 2 در CSS 3 وجود ندارد . تمام این خواص و امکانات در ورژن CSS 3 لحاظ شده و مرورگرهای مطرح از آنها به طور کامل پشتیبانی می کنند . CSS 3 فقط امکانات جدید و بی نظیری را در اختیار ما قرار داده است . [HR][/HR] نکاتی راجع به نحوه آموزش CSS 3 : در این بخش آموزشی ، ابتدا به معرفی خواص جدید پرداخته و سپس سعی شده تا با ارایه مثال های عملی و سورس کد آنها ، کاربردشان را به صورت اکتیو توسط مرورگر نشان دهیم . تمامی مثال ها و مطاب این بخش بر اساس استاندارهای مرجع های آموزشی رسمی این زبان طراحی شده و با مرورگر های مطرح IE , Opera , FireFox و Chrome تست شده اند . به این بخش یک قسمت جدید نیز اضافه کرده ایم که در آن پشتیانی یا عدم پشتیبانی مرورگرهای مطرح از خواص ذکر شده را بررسی کرده ایم .
پاسخ : # آموزش CSS 3 [h=2]خطوط حاشیه در CSS 3[/h] خطوط حاشیه در CSS 3 : در بخش آموزش خطوط حاشیه در CSS 2 که قبلا در همین سایت بدان پرداختیم ، مشاهده نمودید که کاربر صرفا می توانست خط ساده ، نقطه و یا خطوط بریده بریده را به عنوان خطوط حاشیه برای عناصر استفاده نماید . اما در CSS 3 این قسمت متحول شده است . شما می توانید از یک عکس به عنوان خطوط حاشیه استفاده کرده یا گوشه های خطوط حاشیه را به صورت منحنی در آورید . همچنین می توانید برای خطوط حاشیه سایه ایجاد نمایید . بدو ن اینکه از هیچ برنامه کمکی استفاده نمایید . در این بخش قصد داریم تا این امکانات جالب را به شما معرفی نماییم . سه خاصیتی که در لسیت زیر آمده اند ، امکانات لازم را برای کار با خطوط حاشیه در CSS 3 در اختیار شما قرار می دهند . برای دریافت اطلاعات راجع به هر کدام بر روی نام آن کلیک نمایید : [TABLE="class: ex"] [TR] [TD="class: prname"] نام خاصیت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prname"] border-image [/TD] [TD="class: prbody"] به وسیله این خاصیت می توان یک عکس را به عنوان خطوط حاشیه برای عنصر مورد نظر خود به کار ببرید . [/TD] [/TR] [TR] [TD="class: prname"] border-radius [/TD] [TD="class: prbody"] به وسیله این خاصیت می توانید گوشه های خطوط حاشیه را به صورت گرد ( منحنی ) در بیاورید . [/TD] [/TR] [TR] [TD="class: prname"] box-shadow [/TD] [TD="class: prbody"] به وسیله این خاصیت می توانید برای خطوط حاشیه عناصر سایه ایجاد نمایید . [/TD] [/TR] [/TABLE]
پاسخ : # آموزش CSS 3 [h=2]خطوط حاشیه در CSS 3 - خاصیت border-image[/h] خاصیت border-image در خطوط حاشیه : به وسیله این خاصیت می توان یک عکس را به عنوان خطوط حاشیه برای یک عنصر به کار برد . شکل کلی استفاده از این خاصیت به شرح زیر است : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] border-image : source width outset repeat ; مثال : border-image : url(../Pic/border_image.png) 30 30 round ; [/TD] [/TR] [/TABLE] این خاصیت یک خاصیت چند مقداری بوده و حالت کوتاه و خلاصه شده چندین خاصیت border-image-source, border-image-width, border-image-outset و border-image-repeat است . برای تعیین خواص فوق دو راه وجود دارد : تعیین مقدار کلیه خواص در خاصیت چند مقداری border-image . تعیین هر کدام از خواص به صورت جداگانه . راه اول راهی بهتر و متداول است . زیرا حجم کدنویسی را کاهش داده و نظم بهتری به کد نویسی می دهد . در روش اول در واقع باید مقدار هر کدام از خاصیت های border را به ترتیب قرار داد . در جداول زیر به توضیح هر یک موارد بالا می پردازیم و سپس با ارایه چند مثال آنها را در عمل به شما نمایش می دهیم : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 3"] syntax توضیح هر یک از موارد [/TD] [/TR] [TR] [TD="class: body, align: center"] توضیح [/TD] [TD="class: header"] معادل کوتاه نشده [/TD] [TD="class: header"] خاصیت کوتاه syntax شده در [/TD] [/TR] [TR] [TD="class: body, align: right"] این خاصیت آدرس عکسی که قرار است به عنوان خط حاشیه مورد استفاده قرار بگیرد را تعیین می کند . اگر مقدار آن برابر با none قرار داده شود ، هیچ عکسی به عنوان خطوط حاشیه به کار برده نمی شود . [/TD] [TD="class: header"] border-image-source [/TD] [TD="class: header"] source [/TD] [/TR] [TR] [TD="class: body, align: right"] این خاصیت عرض خطوط نمایش را تعیین می کند . مقدار پیش فرض خاصیت width برایر صفر است و می تواند به یکی از 3 حالت زیر مقدار دهی شود : مقدار عددی بر حسب pixel یا pt مثلا px 10 . مقدار بر حسب درصد مثلا % 10 . قردادن مقدار برابر با auto . که باعث می شود مقدار خود را از عنصر مادر به ارث ببرد . [/TD] [TD="class: header"] border-image-width [/TD] [TD="class: header"] width [/TD] [/TR] [TR] [TD="class: body, align: right"] این خاصیت میزان فاصله محتویات درون عنصر با خطوط حاشیه را تعیین می کند . [/TD] [TD="class: header"] border-image-outset [/TD] [TD="class: header"] outset [/TD] [/TR] [TR] [TD="class: body, align: right"] این خاصیت تعیین می کند که اگر عکس مورد نظر برای خطوط حاشیه کوچکتر از مقدار لازم بود ، آیا برای پوشش کل ناحیه خطوط حاشیه ، تکرار ( repeat ) یا بزرگنمایی ( stretch ) شود . این خاصیت می تواند با یکی از 3 حالت زیر مقدار دهی شود : stretch : این مقدار باعث می شود تا عکس برای پوشاندن کل ناحیه خطوط نمایش ، بزرگنمایی و کشیده تر از حالت معمولی شود . repeat : این مقدار باعث می شود تا عکس برای پوشاندن کلیه ناحیه خطوط نمایش ، به دفعات لازم تکرار شود . round : این مقدار باعث می شود تا عکس برای پوشاندن کل ناحیه خطوط نمایش ، به صورت کاشی وار ( tile ) در تمام ناحیه قرار بگیرد . به عبارت دیگر با تکرار در 2 جهت عمودی و افقی کل فضا را پوشش خواهد داد . [/TD] [TD="class: header"] border-image-repeat [/TD] [TD="class: header"] repeat [/TD] [/TR] [/TABLE] [HR][/HR] پشتیانی در مرورگر های مختلف : متاسفانه این خاصیت به صورت عادی توسط هیچ یک از مرورگر های مطرح پشتیانی نمی شود . برای پشتیبانی در مرورگرهای مختلف باید برای هر کدام ، کد لازم آنها که در جدول زیر آمده را استفاده نمود : [TABLE="class: ex"] [TR] [/TR] [TR] [TD="class: header"] کد لازم برای پشتیانی [/TD] [TD="class: header"] نوع مرورگر [/TD] [/TR] [TR] [TD="class: body, align: right"] مرورگر فایرفاکس با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت moz-border-image- بنویسید . [/TD] [TD="class: header"] [/TD] [/TR] [TR] [TD="class: body, align: right"] مرورگر اپرا با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت o-border-image- بنویسید . [/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-border-image- بنویسید . [/TD] [TD="class: header"] [/TD] [/TR] [/TABLE] [HR][/HR] مثال های عملی : پس از توضیح روش استفاده از خاصیت و نحوه سازگاری آن با انواع مرورگر ها ، کاربرد آن را چند مثال به صورت عملی به شما نمایش می دهیم . دقت کنید که اگر مرورگر شما IE باشد ، به علت عدم پشتیبانی این مرورگر از خاصیت border-image ، خروجی ها به صورت صحیح نمایش داده نخواهند شد : عکس استفاده شده در مثال ها ، عکس زیر است . منبع : 3schools.com: The Leading Schools Site on the Net : مثال 1 : در مثال اول یک عکس را به عنوان خط حاشیه برای یک تگ < div > به کار برده و کد اصلی و کد متناسب برای هر نوع مرورگر را به شما نمایش داده ایم . در کد خاصیت ابتدا آدرس کامل عکس را تعیین کرده و سپس مقدار پارامترهای width و outset را به ترتیب برابر با 30 و 30 قرار داده ایم . همچنین برای نحوه تکرار عکس گزینه round برای تکرار ،انتخاب شده است : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < html > < head > < style > div { -moz-border-image:url(border.png) 30 30 round; /* Firefox */ -webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */ -o-border-image:url(border.png) 30 30 round; /* Opera */ border-image:url(border.png) 30 30 round; /* کد اصلی */ } < /style > </head> <body> < div > border image example < /div > </body> </html> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] border image example [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] مثال 2 : در مثال دوم ، کد بالا را بازنویسی کرده و در آن مقدار پارامتر repeat را برابر با stretch قرار داده ایم . تفاوت را در خروجی مثال ها مقایسه نمایید : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < html > < head > < style > div { -moz-border-image:url(border.png) 30 30 stretch; /* Firefox */ -webkit-border-image:url(border.png) 30 30 stretch; /* Safari and Chrome */ -o-border-image:url(border.png) 30 30 stretch; /* Opera */ border-image:url(border.png) 30 30 stretch; /* کد اصلی */ } < /style > </head> <body> < div > border image example < /div > </body> </html> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] border image example [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [HR][/HR]
پاسخ : # آموزش CSS 3 [h=2]خطوط حاشیه در CSS 3 - خاصیت border-radius[/h] خاصیت border-radius در خطوط حاشیه : از خاصیت border-radius در CSS 3 می توان برای ایجاد گوشه های منحنی برای خطوط حاشیه عناصر استفاده کرد . قبل از این ، طراحان وب برای ایجاد منحنی در خطوط حاشیه عناصر مجبور بودند از ترفندهایی مثل قرار دادن عکس در چهار گوشه یک عنصر استفاده کنند ، اما به وسیله این خاصیت به راحتی و فقط با نوشتن یک کد ساده می توانید گوشه های خطوط حاشیه را از حالت ساده به منحنی تبدیل کنید . شکل کلی استفاده از این خاصیت به صورت زیر است : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] border-radius : length; مثال : border-radius : 25px ; [/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"] به وسیله پارامتر length می توانید میزان و درجه انحنای گوشه های خطوط حاشیه را تعیین نمایید . هر چه مقدار این پارامتر بیشتر باشد ، انحنای گوشه ها نیز بیشتر خواهد بود . این پارامتر را می توانید به دو روش مقدار دهی کنید : مقدار دهی بر حسب اندازه : در این حالت باید مقدار پارامتر را بر حسب واحدی مثال px یا em تعیین کنید . مثلا px10. مقدار دهی بر حسب درصد % : در این حالت باید مقدار انحنای گوشه ها را بر حسب درصد تعیین کنید . مثلا % 10 . [/TD] [TD="class: header"] length [/TD] [/TR] [/TABLE] چند نکته مهم : 1. برای استفاده از این خاصیت باید حتما برای عنصر توسط خاصیت border خطوط حاشیه لازم را تعیین کرده تا سپس گوشه های آن را منحنی کنید . این مسئله را در مثال های عملی نشان داده ایم . 2. می توانید میزان انحنای هر گوشه خطوط حاشیه را به صورت مجزا نیز تعیین کنید . در حالت بالا میزان انحنای در نظر گرفته شده ، برای هر چهار گوشه عنصر به یک اندازه تعیین می شود . اما می توانید به یکی از روش های زیر انحنا در هر گوشه را مجزا تعریف کنید : A : تعیین میزان انحنای هر گوشه در خاصیت چند مقداری border-radius . به ترتیب تعیین شده برای هر جهت دقت نمایید : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] border-radius : border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius ; مثال : border-radius : 25px 20px 25px 20px ; [/TD] [/TR] [/TABLE] B : یا تعیین میزان انحنای هر گوشه توسط یک خاصیت جداگانه : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] border-top-left-radius : length ; border-top-right-radius : length ; border-bottom-right-radius : length ; border-bottom-left-radius : length ; مثال : border-top-left-radius : 25px ; border-top-right-radius : 20px ; border-bottom-right-radius : 25px ; border-bottom-left-radius : 20px ; [/TD] [/TR] [/TABLE] [HR][/HR] پشتیانی در مرورگر های مختلف : این خاصیت در تمام مرورگر های مطرح پشتیبانی می شود . مرورگر IE از نسخه 9 به بعد ، مرورگر فایرفاکس از نسخه 4 به بعد و مرورگر های کروم و اپرا نیز از این خاصیت پشتیبانی می کنند . [HR][/HR] مثال های عملی : در مثال های عملی زیر سعی می کنیم تا مطالب ارائه شده را در عمل به شما نمایش دهیم . مثال 1 : در مثال اول یک تگ < div > داریم که ابتدا توسط خاصیت border برای آن خطوط حاشیه تعریف کرده ایم . سپس با استفاده از خاصیت border-radius میزان انحنای تمام گوشه های آن را به یک اندازه یکسان 25px تعیین کرده ایم : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < html > < head > < style > div { border : solid 2px blue ; border-radius : 25px ; } < /style > </head> <body> < div > border radius example < /div > </body> </html> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] border raduis example [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] مثال 1 : در مثال دوم ، مثال قبل را بازنویسی کرده ایم . با این تفاوت که میزان انحنای هر یک از گوشه ها را به صورت مجزا و برحسب درصد در خاصیت چند مقداری border-radius تعیین کرده ایم . در این مثال برای گوشه های سمت راست مقدار %10 و برای گوشه های چپ %30 را در نظر گرفته ایم : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < html > < head > < style > div { border : solid 2px blue ; border-radius: 30% 10% 10% 30% ; } < /style > </head> <body> < div > < br /> border radius example < br /> < br /> < /div > </body> </html> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] border raduis example [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [HR][/HR]
پاسخ : # آموزش CSS 3 [h=2]خطوط حاشیه در CSS 3 - خاصیت box-shadow[/h] خاصیت box-shadow در خطوط حاشیه : از خاصیت box-shadow در CSS 3 ، برای ایجاد سایه برای عناصر HTML استفاده می شود . این امکان یک ابزار جدید و فوق العاده است که به کاربر اجازه می دهد ، بدون استفاده از هیچ ابزار جانبی و فقط با نوشتن یک کد ساده ، برای عناصر مورد نظر خود سایه ایجاد کند . برای سایه مورد نظر خود می توانید فاصله عمودی و افقی از عنص تعیین کرده و نیز رنگ و اندازه آن را نیز تنظیم کنید . شکل کلی استفاده از این خاصیت به صورت زیر است : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] box-shadow : h-shadow v-shadow blur spread color inset ; مثال : box-shadow : 10px 10px 5px 5px blue inset ; [/TD] [/TR] [/TABLE] خاصیت box-shadow به ما امکان تعیین دقیق مشخصات سایه را با پارامترهای خود می دهد . در جدول زیر به تعریف و نحوه استفاده از پارامترهای این خاصیت می پردازیم : [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"] h-shadow [/TD] [/TR] [TR] [TD="class: body, align: right"] این پارامتر میزان فاصله سایه از لبه سمت چپ عنصر را بر حسب مقداری مثل px یا pt تعیین می کند . هر چه این مقدار بیشتر باشد ، فاصله محل قرار گیری سایه از لبه سمت چپ عنصر ( به سمت چپ ) بیشتر می شود . تعیین این پارامتر اجباری است . نکته : امکان مقدار دهی منفی برای این خاصیت نیز وجود دارد . چنانچه مقدار این خاصیت منفی در نظر گرفته شود ، سایه در سمت چپ لبه چپ عنصر قرار می گیرد . [/TD] [TD="class: header"] h-shadow [/TD] [/TR] [TR] [TD="class: body, align: right"] این پارامتر یک افکت تصویری به سایه داده و باعث می شود اطراف سایه ایجاد شده به صورت مه آلود و تیره در بیاید . مقدار این پارامتر بر حسب واحد px تعیین می شود مثل 10px . هر چه مقدار آن بیشتر باشد ، میزان مه آلودگی اطراف سایه نیز بیشتر خواهد شد . تعیین این پارامتر اختیاری است . امکان مقدار دهی منفی برای این پارامتر وجود ندارد . [/TD] [TD="class: header"] blur [/TD] [/TR] [TR] [TD="class: body, align: right"] این پارامتر اندازه سایه را بر حسب واحد پیکسل px تعیین می کند . تعیین این پارامتر اختیاری است . ولی چنانچه تعیین نشود ، اندازه سایه دقیقا برابر با اندازه عنصر خواهد بود . امکان مقدار دهی منفی برای این پارامتر وجود ندارد . [/TD] [TD="class: header"] spread [/TD] [/TR] [TR] [TD="class: body, align: right"] این پارامتر رنگ سایه را تعیین می کند . تعیین این پارامتر اختیاری است . ولی چنانچه رنگ خاصی تعیین نشود ، رنگ سایه مشکی خواهد بود . [/TD] [TD="class: header"] color [/TD] [/TR] [TR] [TD="class: body, align: right"] پارامتر inset تعیین می کند که آیا سایه با فاصله از عنصر قرار گیرد ، یا در پشت عنصر و بدون فاصله عمودی و افقی از آن باشد . مقدار پیش فرض این پارامتر خالی ( Null ) است . تعیین این پارامتر اختیاری است . چنانچه مقدار آن خالی باشد ، سایه با فاصله عمودی و افقی از عنصر قرار می گیرد . ولی اگر مقدار آن بر روی inset باشد ، سایه در پشت عنصر و ظاهرا درون خود آن قرار می گیرد . [/TD] [TD="class: header"] inset [/TD] [/TR] [/TABLE] [HR][/HR] پشتیانی در مرورگر های مختلف : این خاصیت در تمام مرورگر های مطرح پشتیبانی می شود . مرورگر IE از نسخه 9 به بعد ، مرورگر فایرفاکس از نسخه 4 به بعد و مرورگر های کروم و اپرا نیز از این خاصیت پشتیبانی می کنند . [HR][/HR] مثال های عملی : در مثال های عملی زیر سعی می کنیم تا مطالب ارائه شده را در عمل به شما نمایش دهیم . مثال 1 : در مثال اول یک تگ < div > داریم که برای آن یک سایه ایجاد کرده ایم . برای سایه این عنصر ، فقط سه پارامتر های v-shadow , h-shadow و color که تعیین کننده فاصله سایه از عنصر و رنگ آن است را تعیین کرده ایم . در حالت اول مقادیر فاصله مثبت و در حالت دوم منفی دز نظر گرفته شده است . به تفاوت ها و پشتیانی مرورگر خود دقت کنید . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 3"] Example [/TD] [/TR] [TR] [TD="class: body"] حالت 1 [/TD] [TD="class: body"] حالت 2 [/TD] [TD="class: header"] [/TD] [/TR] [TR] [TD="class: body"] < html > < head > < style > div { width: 200px ; background-color: blue ; box-shadow: 10px 10px yellow ; } < /style > </head> <body> < div > box-shadow 1 example < /div > </body> </html> [/TD] [TD="class: body"] < html > < head > < style > div { width: 200px ; background-color: blue ; box-shadow: -10px -10px yellow ; } < /style > </head> <body> < div > box-shadow 2 example < /div > </body> </html> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] box-shadow 1 example [/TD] [TD="class: body"] box-shadow 2 example [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] مثال 2: در مثال دوم ، مثال اول را بازنویسی کرده ایم با این تفاوت که در حالت 2 برای پارامتر blur و spread نیز مقدار تعیین کرده ایم . مقدار دهی پارامتر blur باعث مه آلوده شدن سایه و نیز مقدار دهی پارامتر speard باعث تغییر اندازه سایه شده است . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 3"] Example [/TD] [/TR] [TR] [TD="class: body"] حالت 1 [/TD] [TD="class: body"] حالت 2 [/TD] [TD="class: header"] [/TD] [/TR] [TR] [TD="class: body"] < html > < head > < style > div { width: 200px ; background-color: blue ; box-shadow: 10px 10px brown ; } < /style > </head> <body> < div > box-shadow 1 example < /div > </body> </html> [/TD] [TD="class: body"] < html > < head > < style > div { width: 200px ; background-color: blue ; box-shadow: 10px 10px 10px 5px brown ; } < /style > </head> <body> < div > box-shadow 2 example < /div > </body> </html> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] box-shadow 1 example [/TD] [TD="class: body"] box-shadow 2 example [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] مثال 3: در مثال سوم ، باز هم مثال اول را بازنویسی کرده ایم با این تفاوت که پارامتر inset را مقدار دهی کرده و به نشان دادن تفاوت دو مقدار متفاوت این پارامتر پردخته ایم : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 3"] Example [/TD] [/TR] [TR] [TD="class: body"] حالت 1 [/TD] [TD="class: body"] حالت 2 [/TD] [TD="class: header"] [/TD] [/TR] [TR] [TD="class: body"] < html > < head > < style > div { width: 200px ; background-color: blue ; 10px 10px 10px 5px brown ; } < /style > </head> <body> < div > box-shadow 1 example < /div > </body> </html> [/TD] [TD="class: body"] < html > < head > < style > div { width: 200px ; background-color: blue ; 10px 10px 10px 5px brown inset ; } < /style > </head> <body> < div > box-shadow 2 example < /div > </body> </html> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] box-shadow 1 example [/TD] [TD="class: body"] box-shadow 2 example [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : # آموزش CSS 3 [h=2]افکت های متن در CSS 3[/h] افکت های متن در CSS 3 : در CSS 2 ، صرفا اعمال محدودی مثل تغییر رنگ ، اندازه و ... را می توانستیم بر روی متن ها اعمال نماییم . اما در CSS 3 ، قابلیت های جدیدی و بسیار موثری اضافه شده است که به وسیله آنها می توان افکت های زیبایی را به متون داد . در این بخش قصد داریم تا شما را با افکت های جدیدی که برای کار با متون در CSS 3 در نظر گرفته شده اند ، آشنا نماییم . این افکت های جدید در لیست زیر قرار داده شده اند . برای دریافت اطلاعات راجع به هر کدام بر روی نام آن کلیک نمایید : [TABLE="class: ex"] [TR] [TD="class: prname"] نام خاصیت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prname"] text-justify [/TD] [TD="class: prbody"] این افکت نحوه چیدمان نوشته را در زمانی که مقدار خاصیت text-align متن بر روی مقدار justify تنظیم شده است ، تعیین می کند . [/TD] [/TR] [TR] [TD="class: prname"] text-overflow [/TD] [TD="class: prbody"] این خاصیت نحوه نمایش یک متن را در زمانی که اندازه آن از عنصر در برگیرنده خود بیشتر می شود ، تعیین می کند . [/TD] [/TR] [TR] [TD="class: prname"] text-shadow [/TD] [TD="class: prbody"] از این خاصیت برای سایه دار شدن متن استفاده می شود . این خاصیت یکی از قابلیت های جدید در CSS 3 است . [/TD] [/TR] [TR] [TD="class: prname"] word-wrap [/TD] [TD="class: prbody"] این خاصیت باعث می شود تا مرورگر اجازه داشته باشه تا کلمات بزرگ را در هنگام نمایش ، چنانچه به آخر خط رسیده باشند نصف کرده و نصف دوم را به خط بعدی انتقال دهد . [/TD] [/TR] [/TABLE]
پاسخ : # آموزش CSS 3 [h=2]افکت های متن در CSS 3 - خاصیت text-justify[/h] خاصیت text-justify : از خاصیت text-justify برای تعیین نحوه چیدمان متن در زمانی که مقدار خاصیت text-align آن بر روی مقدار justify تنظیم شده است ، استفاده می شود . همانطور که در بخش آموزش CSS 2 و در قسمت خاصیت text-align مشاهده کرده اید ، قرار دادن مقدار این خاصیت بر روی مقدار justify باعث می شود تا نوشته از هر دو طرف راست و چپ تراز شود . تنظیم خاصیت text-justify ، چیدمان نوشته را در این حالت تنظیم می کند . نکته مهم : برای استفاده از این خاصیت ، حتما باید ابتدا مقدار خاصیت text-align عنصر را بر روی مقدار justify تنظیم کرده باشید . در غیر اینصورت این خاصیت کار نخواهد کرد . شکل کلی استفاده از این خاصیت به صورت زیر است : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] text-justify : value ; مثال : text-justify : auto; [/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"] تعیین کننده نحوه چیدمان نوشته در خاصیت text-justify است و می تواند یکی از مقادیر زیر را داشته باشد : auto : در این حالت مرورگر به صورت خودکار نحوه چیدمان نوشته را تعیین می کند . inter-word : در این حالت مرورگر برای تنظیم چیدمان نوشته فاصله بین حروف را کم یا زیاد می کند . inter-ideograph : در این حالت نوشته با استفاده از متن ideograph چیدمانش تنظیم می شود . در مثال های عملی این حالت را نمایش داده ایم . inter-cluster : . در مثال های عملی این حالت را نمایش داده ایم . این مقدار برای زبان های آسیایی کار نمی کند . none : . در این حالت خاصیت text-justify غیر فعال می شود . [/TD] [TD="class: header"] value [/TD] [/TR] [/TABLE] [HR][/HR] پشتیانی در مرورگر های مختلف : این خاصیت در تمام مرورگر های مطرح پشتیبانی می شود . مرورگر IE از نسخه 9 به بعد ، مرورگر فایرفاکس از نسخه 4 به بعد و مرورگر های کروم و اپرا نیز از این خاصیت پشتیبانی می کنند . مثال های عملی : در مثال های عملی زیر سعی می کنیم تا مطالب ارائه شده را در عمل به شما نمایش دهیم . خروجی چهار حالت اول جدول توضیح syntax را به ترتیب در مثال ها نشان داده ایم . مثال 1 : حالت auto : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < div style = " text-align : justify ; text-justify : auto ; width : 400px ; border : solid 1px black "> in developerstudio.ir we are trying to teach every thing you may need for web design amd programming . some lanuages include asp.net , html , javascript and css is described in this site and new thigns every day is added . in every section , first we introduce a subject , then try to declare the syntax for usage . after that we show the subject in action with real examples , that are exucted by native browser . in constrution of this site we are trying to use international resourses like msdn and w3schools . < /div > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] in developerstudio.ir we are trying to teach every thing you may need for web design amd programming . some lanuages include asp.net , html , javascript and css is described in this site and new thigns every day is added . in every section , first we introduce a subject , then try to declare the syntax for usage . after that we show the subject in action with real examples , that are exucted by native browser . in constrution of this site we are trying to use international resourses like msdn and w3schools . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] مثال 2 : حالت inter-word : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < div style = " text-align : justify ; text-justify : inter-word ; width : 400px ; border : solid 1px black "> in developerstudio.ir we are trying to teach every thing you may need for web design amd programming . some lanuages include asp.net , html , javascript and css is described in this site and new thigns every day is added . in every section , first we introduce a subject , then try to declare the syntax for usage . after that we show the subject in action with real examples , that are exucted by native browser . in constrution of this site we are trying to use international resourses like msdn and w3schools . < /div > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] in developerstudio.ir we are trying to teach every thing you may need for web design amd programming . some lanuages include asp.net , html , javascript and css is described in this site and new thigns every day is added . in every section , first we introduce a subject , then try to declare the syntax for usage . after that we show the subject in action with real examples , that are exucted by native browser . in constrution of this site we are trying to use international resourses like msdn and w3schools . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] مثال 3 : حالت inter-ideograph : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < div style = " text-align : justify ; text-justify : inter-ideograph ; width : 400px ; border : solid 1px black "> in developerstudio.ir we are trying to teach every thing you may need for web design amd programming . some lanuages include asp.net , html , javascript and css is described in this site and new thigns every day is added . in every section , first we introduce a subject , then try to declare the syntax for usage . after that we show the subject in action with real examples , that are exucted by native browser . in constrution of this site we are trying to use international resourses like msdn and w3schools . < /div > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] in developerstudio.ir we are trying to teach every thing you may need for web design amd programming . some lanuages include asp.net , html , javascript and css is described in this site and new thigns every day is added . in every section , first we introduce a subject , then try to declare the syntax for usage . after that we show the subject in action with real examples , that are exucted by native browser . in constrution of this site we are trying to use international resourses like msdn and w3schools . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] مثال 4 : حالت inter-cluster : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < div style = " text-align : justify ; text-justify : inter-cluster ; width : 400px ; border : solid 1px black "> in developerstudio.ir we are trying to teach every thing you may need for web design amd programming . some lanuages include asp.net , html , javascript and css is described in this site and new thigns every day is added . in every section , first we introduce a subject , then try to declare the syntax for usage . after that we show the subject in action with real examples , that are exucted by native browser . in constrution of this site we are trying to use international resourses like msdn and w3schools . < /div > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] in developerstudio.ir we are trying to teach every thing you may need for web design amd programming . some lanuages include asp.net , html , javascript and css is described in this site and new thigns every day is added . in every section , first we introduce a subject , then try to declare the syntax for usage . after that we show the subject in action with real examples , that are exucted by native browser . in constrution of this site we are trying to use international resourses like msdn and w3schools . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : # آموزش CSS 3 [h=2]افکت های متن درCSS 3 - خاصیت text-overflow[/h] خاصیت text-overflow : خاصیت text-overflow تعیین می کند هنگامی که مقدار متن درون یک عنصر ، از اندازه و ظرفیت عنصر در بر گیرنده آن بیشتر باشد ، چگونه نمایش داده شود . در این حالت مرورگر باید تعیین کند که ادامه متن چگونه نمایش داده شود . این خاصیت معمولا برای عناصری مثل تگ تگ < div > یا تگ < p > به کار می رود . نکته مهم : برای استفاده از این خاصیت حتما بایستی مقدار خاصیت overflow عنصر را بر روی مقدار hidden و مقدار خاصیت white-space را برابر با nowrap قرار دهید . شکل کلی استفاده از این خاصیت به صورت زیر است : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] text-overflow : value ; مثال : text-overflow : clip ; [/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"] تعیین این پارامتر اجباری است . این پارامتر تعیین کننده نحوه نمایش ادامه متن در عنصری است که مقدار متن درون آن از اندازش بیشتر است و نمی تواند متن را به صورت کامل نمایش دهد . این پارامتر می تواند یکی از 2 مقدار زیر را داشته باشد : clip : این مقدار باعث می شود تا مرورگر متن را به اندازه ای که می تواند نمایش داده و ادامه آن را بریده و نمایش ندهد . ellipsis : این مقدار باعث می شود تا مرورگر متن را به اندازه ای که می تواند نمایش داده و ادامه آن را به صورت نقطه چین ... نمایش دهد . استفاده از این حالت توصیه می شود ، زیرا به کاربر می فهماند که متن ، ادامه دارد . [/TD] [TD="class: header"] value [/TD] [/TR] [/TABLE] [HR][/HR] پشتیانی در مرورگر های مختلف : این خاصیت در تمام مرورگر های مطرح پشتیبانی می شود . مرورگر IE از نسخه text-overflow به بعد ، مرورگر فایرفاکس از نسخه 4 به بعد و مرورگر های کروم و اپرا نیز از این خاصیت پشتیبانی می کنند . [HR][/HR] مثال های عملی : در مثال های عملی زیر سعی می کنیم تا مطالب ارائه شده را در عمل به شما نمایش دهیم . مثال 1 : در مثال اول یک تگ < div > داریم که مقداری متن را در خود جای داده ، ولی اندازه متن از اندازه آن بزرگتر است . در این حالت مقدار خاصیت text-overflow را روی clip تعیین کرده ایم ، تا عنصر ادامه متن را که نمی تواند نمایش دهد ، قیچی نماید : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 3"] Example [/TD] [/TR] [TR] [TD="class: body"] < div style=" text-overflow: clip ; overflow : hidden ; width: 200px ; height: 100px ; border: solid 1px black ; background-color : Blue" > 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] مثال 2 : در مثال دوم نیز یک تگ < div > داریم که مقداری متن را در خود جای داده ، ولی اندازه متن از اندازه آن بزرگتر است . در این حالت مقدار خاصیت text-overflow را روی eliopissis تعیین کرده ایم ، تا عنصر ادامه متن را که نمی تواند نمایش دهد ، به صورت نقطه چین در آورد: [TABLE="class: ex"] [TR] [TD="class: header, colspan: 3"] Example [/TD] [/TR] [TR] [TD="class: body"] < div style=" text-overflow: ellipsis ; overflow : hidden ; white-space : nowrap ; width: 200px ; height: 100px ; border: solid 1px black ; background-color : Blue" > 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 - خاصیت text-shadow[/h] خاصیت text-shadow : از خاصیت text-shadow در CSS 3 ، برای سایه دار کردن متن و نوشته در صفحات وب استفاده می شود . به وسیله این خاصیت و به راحتی فقط با نوشتن یک کد ساده می توانید ، افکت تصویری بسیار زیبایی سایه را ، به متون خود اضافه نمایید . کاری که پیش از به هیچ عنوان در طراحی صفحات وب ممکن نبود . شکل کلی استفاده از این خاصیت به صورت زیر است : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] text-shadow : h-shadow v-shadow blur color; مثال : text-shadow : 10px 10px 5px blue ; [/TD] [/TR] [/TABLE] خاصیت text-shadow به ما امکان تعیین دقیق مشخصات سایه را با پارامترهای خود می دهد . در جدول زیر به تعریف و نحوه استفاده از پارامترهای این خاصیت می پردازیم : [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"] h-shadow [/TD] [/TR] [TR] [TD="class: body, align: right"] این پارامتر میزان فاصله سایه از لبه سمت چپ متن را بر حسب مقداری مثل px یا pt تعیین می کند . هر چه این مقدار بیشتر باشد ، فاصله محل قرار گیری سایه از لبه سمت چپ متن ( به سمت چپ ) بیشتر می شود . تعیین این پارامتر اجباری است . نکته : امکان مقدار دهی منفی برای این خاصیت نیز وجود دارد . چنانچه مقدار این خاصیت منفی در نظر گرفته شود ، سایه در سمت چپ لبه چپ متن قرار می گیرد . [/TD] [TD="class: header"] h-shadow [/TD] [/TR] [TR] [TD="class: body, align: right"] این پارامتر یک افکت تصویری به سایه داده و باعث می شود اطراف سایه ایجاد شده به صورت مه آلود و تیره در بیاید . مقدار این پارامتر بر حسب واحد px تعیین می شود مثل 10px . هر چه مقدار آن بیشتر باشد ، میزان مه آلودگی اطراف سایه نیز بیشتر خواهد شد . تعیین این پارامتر اختیاری است . امکان مقدار دهی منفی برای این پارامتر وجود ندارد . [/TD] [TD="class: header"] blur [/TD] [/TR] [TR] [TD="class: body, align: right"] این پارامتر رنگ سایه را تعیین می کند . تعیین این پارامتر اختیاری است . ولی چنانچه رنگ خاصی تعیین نشود ، رنگ سایه مشکی خواهد بود . [/TD] [TD="class: header"] color [/TD] [/TR] [/TABLE] پشتیانی در مرورگر های مختلف : این خاصیت در تمام مرورگر های مطرح ، به جز اینترنت اکسپلورر IE پشتیبانی می شود . قرار است در نسخه 10 IE ، نواقص پشتیانی از CSS 3 و HTML 5 بر طرف شود . [HR][/HR] مثال های عملی : در مثال های عملی زیر سعی می کنیم تا مطالب ارائه شده را در عمل به شما نمایش دهیم . مثال 1 : در مثال اول یک تگ < h2 > داریم که برای آن یک سایه ایجاد کرده ایم . برای سایه این عنصر ، فقط سه پارامتر های v-shadow , h-shadow و color که تعیین کننده فاصله سایه از عنصر و رنگ آن است را تعیین کرده ایم . در حالت اول مقادیر فاصله مثبت و در حالت دوم منفی در نظر گرفته شده است . به تفاوت ها و پشتیانی مرورگر خود دقت کنید . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 3"] Example [/TD] [/TR] [TR] [TD="class: body"] حالت 1 [/TD] [TD="class: body"] حالت 2 [/TD] [TD="class: header"] [/TD] [/TR] [TR] [TD="class: body"] < html > < head > < style > h2 { text-shadow: 10px 10px blue ; } < /style > </head> <body> < h2 > text-shadow 1 example < /h2 > </body> </html> [/TD] [TD="class: body"] < html > < head > < style > h2 { text-shadow: -10px -10px blue ; } < /style > </head> <body> < h2 > text-shadow 2 example < /h2 > </body> </html> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] [h=2]box-shadow 1 example[/h] [/TD] [TD="class: body"] [h=2]box-shadow 2 example[/h] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] مثال 2: در مثال دوم ، مثال اول را بازنویسی کرده ایم با این تفاوت که در حالت 2 برای پارامتر blur نیز مقدار تعیین کرده ایم . مقدار دهی پارامتر blur باعث مه آلوده شدن سایه شده است . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 3"] Example [/TD] [/TR] [TR] [TD="class: body"] حالت 1 [/TD] [TD="class: body"] حالت 2 [/TD] [TD="class: header"] [/TD] [/TR] [TR] [TD="class: body"] < html > < head > < style > h2 { text-shadow: 10px 10px blue ; } < /style > </head> <body> < h2 > text-shadow 1 example < /h2 > </body> </html> [/TD] [TD="class: body"] < html > < head > < style > h2 { text-shadow: 10px 10px 3px blue ; } < /style > </head> <body> < h2 > text-shadow 2 example < /h2 > </body> </html> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] [h=2]text-shadow 1 example[/h] [/TD] [TD="class: body"] [h=2]text-shadow 2 example[/h] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : # آموزش CSS 3 [h=2]افکت های متن در CSS 3 - خاصیت word-wrap[/h] خاصیت word-wrap : خاصیت word-wrap در متون ، باعث می شود چنانچه یک کلمه طولانی بوده و به انتهای یک خط برسد ، به دو قسمت تبدیل شده و قسمت دوم آن به سطر بعدی نوشته منتقل شود . به صورت پیش فرض ، چنانچه یک کلمه طولانی بوده و به انتهای یک خط برسد ، ادامه آن از شی در برگیرنده بیرون تر رفته و به سطر بعدی منتقل نمی شود . از نظر من استفاده از این خاصیت می تواند یک مورد نادر باشد و عملا شاید کاربردی نداشته باشد . اما به هر حال در CSS 3 این امکان اضافه شده است . شکل کلی استفاده از این خاصیت به صورت زیر است : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] word-wrap : value ; مثال : word-wrap : break-word ; [/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"] این پارامتر تعیین کننده نحوه عملکرد مرورگر در زمانی است ، که یک کلمه طولانی به انتهای سطر در نوشته رسیده و تعیین می کند آیا آن را به دو نیم کرده و ادامه را به سطر بعدی منتقل کند یا خیر . این پارامتر می تواند یکی از 2 مقدار زیر را داشته باشد : normal : در این حالت ، چنانچه یک کلمه طولانی به انتهای یک سطر برسد ، مرور گر بدون هیچ گونه تغییری آن را نمایش داده و ممکن است از عنصر در برگیرنده خود نیز بیرون برود . در این حالت کلمه به دو نیم تقسیم نخواهد شد . این مقدار ، مقدار پیش فرض مرورگر است . break-word : در این حالت چنانچه یک کلمه طولانی به انتهای یک سطر برسد ، مرورگر آن را به دو قسمت تقسیم کرده و ادامه آن را به سطر بعدی نوشته منتقل می کند . [/TD] [TD="class: header"] value [/TD] [/TR] [/TABLE] [HR][/HR] پشتیانی در مرورگر های مختلف : این خاصیت در تمام نسخه های جدید مرورگر های مطرح پشتیبانی می شود . مثال عملی : مثال 1 : در مثال زیر یک تگ پاراگراف < p > داریم که در یک از سطرهای آن یک کلمه طولانی وجود دارد . در 2 حالت مختلف ، استفاده و یا عدم استفاده از خاصیت 8 را در عمل به شما نمایش داده ایم . به خروجی ها و کدهای مثال دقت کنید : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 3"] Example [/TD] [/TR] [TR] [TD="class: body"] حالت 1 [/TD] [TD="class: body"] حالت 2 [/TD] [TD="class: header"] [/TD] [/TR] [TR] [TD="class: body"] < p style="width: 200px; border: solid 1px black; word-wrap: normal" > in developerstudio.ir we are trying to teach every thing you may need for web designe andsdfresfewrewfwerfwdcsdfghjkliuytrewqand programming . some lanuages include asp.net , html , javascript and css is described in this site and new thigns every day is added . < /p > [/TD] [TD="class: body"] < p style="width: 200px; border: solid 1px black; word-wrap: break-word " > in developerstudio.ir we are trying to teach every thing you may need for web designe andsdfresfewrewfwerfwdcsdfghjkliuytrewqand programming . some lanuages include asp.net , html , javascript and css is described in this site and new thigns every day is added . < /p > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] in developerstudio.ir we are trying to teach every thing you may need for web designe andsdfresfewrewfwerfwdcsdfghjkliuytrewqand programming . some lanuages include asp.net , html , javascript and css is described in this site and new thigns every day is added . [/TD] [TD="class: body"] in developerstudio.ir we are trying to teach every thing you may need for web designe andsdfresfewrewfwerfwdcsdfghjkliuytrewqand programming . some lanuages include asp.net , html , javascript and css is described in this site and new thigns every day is added . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
