با سلام خدمت بازدیدکنندگان عزیز ایران هکس . تصمیم گرفته ام تا در طی چند قسمت ، خواص جدید و مفید فناوری CSS3 را به شما معرفی کنم . ویژگی های جدید و بسیار کاربردی که آماده شده اند و یا در آینده ای نزدیک قابل استفاده خواهند بود . در این قسمت ، یعنی قسمت اول قصد دارم تا توضیحات مختصری در مورد مرورگرها و پیشوندهای خواص CSS3 و همینطور معرفی چند مورد جدید بپردازم . برای مطالعه به ادامه مطلب مراجعه کنید . - کدهایی که در ابتدای آنها کلمه “WebKit” آورده شده است ، قابل استفاده و شناسایی در مرورگرهایی می باشند که از این موتور استفاده میکنند . مرورگر سافاری ، مرورگر کروم ، سیستم عامل آندروید ، آیفون و آیپد از موتور “WebKit” استفاده میکنند . بنابراین تمامی خواصی که در ابتدای آنها “WebKit” وجود دارد در موارد فوق قابل پشتیبانی می باشند . کدهای “Gecko” که در ابتدای آنها کلمه “Moz” قرار دارد ، قابل پشتیبانی و اجرا در مرورگر Mozilla میباشد . - در این بخش به معرفی چند مورد از خواص جدید CSS3 مربوط به WebKit می پردازم . ۱- -moz-border-colorsشما با استفاده از این خاصیت می توانید به تعداد بیشتری حاشیه ی رنگی به محل مورد نظر خود اضافه کنید . این خاصیت به صورت کلی -moz-border-colors می باشد و شما میتوانید از کدهای زیر برای مکان های مورد نظر استفاده کنید . استفاده در حاشیه ی بالا -moz-border-top-colorsاستفاده در حاشیه ی پایین-moz-border-bottom-colorsاستفاده در حاشیه ی راست-moz-border-right-colorsاستفاده در حاشیه چپ-moz-border-left-colorsمثال :div { border: 3px solid orange; -moz-border-top-colors: red yellow blue; -moz-border-bottom-colors: red yellow blue; }2- -webkit-text-strokeشما با استفاده این خاصیت توانایی قرار دادن حاشیه یا Border برای متن ها خواهید داشت ! جهت درک بیشتر به مثال های زیر توجه کنید .مثال ۱ : استفاده شده در H1h1 {-webkit-text-stroke: 2px blue}مثال ۲ : حاشیه قرمز به صورت outlineh3 { color: transparent; -webkit-text-stroke: 4px red; }3- -webkit-maskبا استفاده از این خاصیت می توانید به تصاویر خود Mask اضافه کنید . این خاصیت ۲ حالت دارد . یکی استفاده از طیف رنگ برای Mask کردن است و دیگری استفاده از عکس میباشد . در مثال های زیر هر ۲ حالت توضیح داده شده است .مثال : با استفاده از عکس.element { background: url(img/image.jpg) repeat; -webkit-mask: url(img/mask.png); }مثال : با استفاده از طیف رنگ (Gradient).element2 { background: url(img/image.jpg) repeat; -webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); } در بالا به طور مختصر چند مورد جدید را در بخش WebKit معرفی کردم که امیدوارم مورد استفاده قرار بگیرد . در قسمت های بعد خواص بیشتری را معرفی خواهم کرد . با تشکر…موفق باشید .
پاسخ : معرفی خواص جدید CSS3 در قسمت قبل از این مقاله به مطالبی در مورد مرورگرهای مختلف و نوع پشتیبانی آنها از CSS3 پرداختم و چند مورد از خواص جدید CSS3 را معرفی و بررسی کردم . خواص جدید و جالب دیگری نیز هستند که معرفی آنها میتواند برای طراحان وب و علاقمندان مفید باشد . در این قسمت به چند مورد دیگر اشاره میکنم و در مورد هر کدام مثال و توضیحات مختصری خواهم داد ! خواص معرفی شده در این قسمت نیز مربوط به موتور webkit میباشند که در قسمت قبل در مورد آن توضیح دادم . لازم به ذکر است که بگویم ، برخی از موارد مربوط به CSS 2.1 می باشند و به خاطر مفید بودن ، به آنها نیز اشاره می کنم . برای خواندن مقاله به ادامه مطلب مراجعه کنید . ۱- zoomاین خاصیت بسیار جالب و جذاب می باشد که در مرورگرهای سافاری و کروم قابل اجرا است . با استفاده از این قابلیت می توانید حالت های بزرگنمایی یک شئ را در مرورگر خود کنترل کنید ! به این صورت که بعد از زوم ، شئ مورد نظر شما ثابت باشد و یا تغییر کند ! مثلا اگر بخواهید بعد از زوم شئ مورد نظر شما اندازه طبیعی و ۱۰۰% خود را داشته باشد میتواند از کد زیر استفاده کنید .zoom: reset;یا می توانید به آن مقدار بدهید . مثلا اگر مقدار ۱۲۰% را به آن بدهید شئ شما در حالی که تمام صفحه در حالت ۱۰۰% است ، بزرگنمایی ۱۲۰% پیدا میکند ! به صورت زیر :zoom: 120%;بهتر است خودتان آن را به صورت عملی امتحان کنید و نتیجه را ببینید . تاکید میکنم که در مرورگرهای سافاری و کروم قابل اجرا است . 2- -webkit-box-reflectاین خاصیت نیز بسیار جالب می باشد . با استفاده از این قابلیت می توانید به اشیاء مورد نظر خورد رفلکس یا بازتاب بدهید ! این کار در ۴ حالت مختلف بالا (above) ، پایین (below) ، چپ (left) و راست (right) امکان پذیر می باشد . به کدهای زیر توجه کنید :-webkit-box-reflect: below; -webkit-box-reflect: above; -webkit-box-reflect: right; -webkit-box-reflect: left;از یکی از کدهای فوق می توانید استفاده کنید . حالا شاید بخواهید بازتاب از جهات مختلف نسبت به شئ اصلی فاصله داشته باشد . برای این کار کافیست مانند کدهای دیگر اعداد را به پیکسل اضافه کنید . مانند کد زیر :-webkit-box-reflect: below 5px;نکته جالب تر این است که شما می توانید از Mask نیز استفاده کنید ! کافیست آدرس تصویر Mask مورد نظر خود را به صورت زیر در کد قرار دهید :-webkit-box-reflect: right 0 url(mask.png); 3- -webkit-marqueeاگر با HTML آشنا باشید ، میدانید که تگ marquee در آن وجود دارد و از آن برای حرکت دادن شئ مورد نظر در جهات مختلف و با سرعت های متفاوت استفاده می شود . در CSS3 نیز این امکان وجود دارد و به راحتی می توانید شئ مورد نظر خود را با تنظیمات کامل به حرکت در آورید ! و اما نحوه استفاده از آن ! کافیست کد را به جای مقدار overflow در سلکتور مورد نظر قرار دهید و سپس تنظیمات آن را در ادامه بنویسید . به صورت زیر :.marquee { white-space: nowrap; overflow:-webkit-marquee; }white-space نیز به خاطر تک لاینه بودن در بالا مورد استفاده قرار گرفته است .این خاصیت ویژگی های زیادی دارد که در مورد تمامی آنها توضیح خواهم داد .پارامترها :۱- directionبرای مشخص کردن جهت حرکت۲- incrementمقدار فاصله بین حرکتی۳- repetitionبرای مشخص کردن دفعات تکرار۴- styleبرای تعیین نوع حرکت۵- speedتعیین سرعت حرکت نحوه استفاده :-webkit-marquee-direction -webkit-marquee-increment -webkit-marquee-repetition -webkit-marquee-speed -webkit-marquee-styleتوضیحات در مورد هرکدام از پارامترها : -webkit-marquee-directionپارامترهای مربوط به این کد (نوع حرکات مربوط به LTR بودن نوشته ها می باشد در صورت RTL بودن برعکس است):aheadحرکت از پایین به بالاautoحرکت به صورت پیشفرضbackwardsحرکت از راست به چپdownحرکت از بالا به پایینforwardsحرکت از چپ به راستleftحرکت از راست به چپreverseحرکت از بالا به پایینrightحرکت از چپ به راستupحرکت از پایین به بالا -webkit-marquee-incrementپارامترهای مربوط به این کد :Largحرکت های بزرگMediumحرکت های متوسطSmallحرکت های کوچک -webkit-marquee-repetitionپارامترهای مربوط به این کد :این پارامتر فقط قابلیت دریافت عدد را دارد . -webkit-marquee-speedپارامترهای مربوط به این کد :با استفاده از ۳ پارامتر زیر امکان دادن عدد را دارید :speedجهت دادن مقدار سرعتdistanceجهت دادن فاصلهtimeجهت دادن زمانمثال :-webkit-marquee-speed: speed -webkit-marquee-speed: distance / time3 پارامترهای زیر ثابت هستند :fastسریعnormalعادیslowآرام -webkit-marquee-styleپارامترهای مربوط به این کد :alternateحرکت به صورت هشدار – رفت و برگشتnoneبدون حرکتscrollحرکت به صورت اسکرولی و متداولslideحرکت به صورت اسلایدیحالا به مثالی کلی برای خاصیت webkit-marquee توجه کنید : .marquee { white-space: nowrap; overflow:-webkit-marquee; width: 70px; -webkit-marquee-direction: forwards; -webkit-marquee-speed: slow; -webkit-marquee-style: alternate; } در این قسمت نیز به ۳ خاصیت جدید و بسیار جذاب اشاره کردم که امیدوارم مورد استفاده و همینطور رضایت شما قرار گرفته باشد .
