img

خلق افکت‌های زیبا در CSS

/
/
/
ما در اینجا یک مجموعه از نکات عملی پایه برای اعمال محبوب ترین افکتهای بصری را ارائه می دهیم که به کمک آن‌ها می‌توانید افکت های بی نظیری را در صفحات وب طراحی نمائید.

CSS یا Cascading Style Sheets که اسم کامل آن میباشد زبانی است که ما طراحان وب، این روزها از آن بهره زیادی می بریم. این زبان استانداردی است که علیرغم ارتباط ناگسستنی آن با HTML بطور خاص برای جدا نمودن تزئینات صفحه از محتویات آن به کار برده میشود. با آن لذت استفاده از سطوح بالاتری از کنترل بر روی نحوه نمایش صفحات درمرورگر را تجربه خواهیم کرد به قسمی که با امکانات بیشتر قادر به اعمال جلوه های وسیعتری بر روی آنها هستیم.
با این مقدمه درباره CSS3 و توسعه های گوناگون اعمال شده بر آن، این موتور تولید هم اینک برای اجرای طیفی از افکت های زیبا و مهیج به اندازه قابل توجه ایی پیشرفت کرده است. این ویژگیهای جدید به نظر میرسد هرچه بیشتر از برچسبهای خسته کننده نظیر<img> و همچنین ابزار پردازش تصویر شبیه فتوشاپ (و تعدادی دیگر) برای خلق تجارب بصری فاصله گرفته است.
به پاس این توانائی های رو به گسترش، ما تصمیم گرفتیم مروری بر بهترین تکنیکهای موجود CSS3 داشته و چکیده ایی از ۲۵ نکات برتررا برای شما بازگو کنیم. در اینجا سعی کردیم تکنیک های محبوب نظیرایجاد سایه ها، پیش زمینه ها، شفافیت، متن، شیب و خمیدگی همچنین کادربندی ها همراه با چند اشاره مختصر و مفید در کنار ابزاری حیاتی برای سطح جدید شیوه گذاری را درکنارهم جمع نمائیم.
شما با دنبال کردن کدها و مثال های تصویری نه تنها بهتر درخواهید یافت که چگونه CSS3 از سطح بالایی برخوردار است بلکه احساس اطمینان خاطراز به کاربردن آن در پروژه های آتی خود خواهید نمود.

شفافیت
شفافیت با استفاده ازCSS تا مدتها در حاشیه بود و کسی توجه ای به آن نداشت حتی اینترنت اکسپلورر از فیلترهای غیراستاندارد برای این منظور استفاده میکرد. اما CSS3 دامنه انتخاب ما را با اضافه نمودن رنگهای RGBA به خصوصیت مشهور opacity بسط داده است.
دیگر نیازی به تصاویر و اسکریپت های پیچیده نیست در جائیکه ما میتوانیم با اعمال یک مقدار شفافیت آلفا به هر عنصر درون صفحه اینکار را براحتی انجام دهیم. اگر صفحه وب ما شامل یک تصویر زمینه رنگی و یا متنی است که قصد داریم آنرا از پشت نسخه نیمه شفاف تصویر نمایش دهیم، نیازی به باز کردن تصویر، درون برنامه تدوینگر نظیر فتوشاپ نخواهیم بود فقط کافی است کد زیر را استفاده کنیم:

۰۱ img {
۰۲ opacity: .6;
۰۳ }

با استفاده از خصیصه opacity در CSS3 ما مقدار ماتی را ۶۰ درصد تنظیم نموده ایم (برای شما اگر از افرادی باشید که نصف خالی لیوان را می بینید، شفافیت به این ترتیب ۴۰ درصد میگردد!). مقدار opacity هر عددی بین ۰ و ۱ میتواند باشد به قسمی که مقدار ۰ برای شفافیت کامل می باشد.
دو انتخاب دیگر برای شما جهت ایجاد عناصر نیمه شفاف در صفحه ازطریق رنگهای RGBA و HSLA موجود است. وقتی که شما در حال تعریف رنگ با استفاده از این روشها میباشید شما قادربه اضافه نمودن آلفا برروی رنگ تعریف شده خواهید بود. در زیر یک مثال ویژه از اضافه نمودن آلفا را بیان کرده ایم:

۰۱ .example {
۰۲ Background-color: rgba(255, 96, 0, 0.6);
۰۳ }

این یک رنگ نارنجی است که به عنوان زمینه برای تصویرمان استفاده میشود، با این تفاوت که این بار ما از RGB به همراه یک کانال آلفا استفاده کرده ایم. در نهایت همان رنگ با استفاده از کد زیر تعریف میشود:

۰۱ .example {
۰۲ Background-color: hsla(23, 100%, 50%, 0.6);
۰۳ }

این دفعه ما از ترکیب رنگ HSLA در CSS3 استفاده کرده ایم. عبارت HSLA مخفف Hue, Saturation, Ligtness میباشد. اولین مقدار درتابع hsla() مقداری بین ۰ تا ۳۵۹ است (درجه رنگ Hue). دو مقدار دیگر که بصورت درصد میباشند مقدار شدت و ضعف (saturation and lightness) درجه رنگ مورد نظر را تعیین میکند. و آخری هم تنظیمات opacity است.

گوشه های گرد اطراف کادر
اضافه نمودن گوشه های مدور به یک عنصر HTML علی القاعده مابین تکنیکهای طراحی، همیشه و بطورعرف چیزی جز یک کارخسته کننده نبوده است. برای گرد کردن گوشه ها روشهای نه چندان بهینه مانند بریدن تصویر و یا اسکریپتها طولانی و…هرازگاهی مورد استفاده واقع گردیده است.
اما خصیصه border-radius در CSS3 روشهای قدیمی بالا را به کلی منسوخ کرده است. ترکیب زیر را ببینید:

۰۱ .example {
۰۲ Border-radius: 40px;
۰۳ }

کد بالا شعاعی به اندازه ۴۰پیکسل به هر گوشه المان مورد نظر اعمال میکند.
مثال بالا مختصرترین درعین حال ساده ترین و متعارف ترین راه برای استفاده از border-radius میباشد. هر چند که به طرق دیگر نیز میتوان از این خصیصه استفاده کرد که تعدادی از آنها در زیر می آید.
* طولانی ترین راه آن است که برای هر گوشه یک مقدار متفاوت از border-radius را استفاده کنید.
* همچنین با استفاده از آن و بطور افزایشی میتوانید یک بیضی رسم کنید.
* اشکال بیضوی سیال را میتوانید با تنظیم border-radius بر روی۵۰ پیکسل (۵۰px) روی تمام گوشه ها ایجاد کنید.
* شما میتوانید مقادیر افقی و عمودی متفاوت را روی هر گوشه به تنهایی و با استفاده از فرمت slash-based تنظیم کنید.( برای توضیح بیشتر در این خصوص رجوع کنید به bit.ly/o0mmj4).

ایجاد سایه برای متن
در سالهای پیش ایجاد سایه بدون استفاده از تصاویر یا اسکریپتهای پیچیده یا حتی کدهای ویژه تقریباً غیر ممکن بود. در اینجا قصد داریم با کمک چند ترفند ساده در CSS3 برای المان مورد نظرمان سایه ایجاد کنیم.

۰۱ h1 {
۰۲ text-shadow: #999 2px 2px 4px;
۰۳ }

حالا به متن ما یک عمق بصری داده میشود و این کار نه با تصویر ونه جاوا اسکریپت لیکن تنها با یک خط CSS انجام گرفته است.
خب حالا این قطعه کد چگونه کار میکند؟ این خصیصه چهار مقدار می پذیرد. اولین آن مقدار رنگ است که ما در مثال خودمان از #۹۹۹ استفاده میکنیم که خاکستری روشن است. این عدد میتواند هر مقدار رنگ معتبری در CSS3 شامل مقادیر RGBA و HSLA به همراه تنظیم شفافیت باشد.
دو مقدار بعدی فاصله افقی و عمودی سایه از متن میباشد. در این مثال ۲ پیکسل برای آنچه که ما به دنبالش هستیم کفایت میکند. آخرین عدد مقدار اختیاری تندی سایه را انتخاب نموده که ما با تنظیم آن بر روی ۴پیکسل سایه را از اینکه خیلی تیز به نظر برسد محفوظ میداریم.

سایه برای کادر و جلوه های تابش
CSS3 این اجازه را به ما میدهد که با کمک خصیصه box-shadow به هر کادری بر روی صفحه سایه اضافه نمائیم. این کار توسط CSS و بدون نیاز به هیچگونه اسکریپت یا تصویر انجام میشود. اما این کار را CSS3 برای ما با همکاری رنگهای RGBA و ویژگی معروف opacity به انجام میرساند.
در زیر نمونه ساده از کد CSS3 برای ایجاد این سایه میبینید:

۰۱ .shadow {
۰۲ Box-shadow: #aaa 2px 2px 20px 5px;
۰۳ }

ترکیب بالا دقیقاً شبیه همان چیزی است که برای ایجاد سایه روی متن استفاده میکردیم تنها با دو تفاوت کلیدی. در اینجا ما گزینه ایی برای محدوده انتشار داریم (در مثال ما بر روی ۵ پیکسل) و گزینه اختیاری inset (درمثال ما وجود ندارد) برای ایجاد سایه در درون کادر.
اما این تکنیک میتواند برای خلق سایه های بیش ازانواع معمولی مورد استفاده واقع شود. زیرا در اینجا شما قادر به تغییر رنگ (و البته opacity در صورتیکه از RGBA و یا HSLA استفاده کنید) و اعمال تعدادی افکتهای دیگرمیباشید. اجازه دهید در اینجا یک سایه خارجی با جلوه تابش ایجاد کنیم و این افکت را به یک کادری که قرار است بر روی زمینه تاریک قرار گیرد اعمال کنیم.
کد زیر:

۰۱ .shadow {
۰۲ Box-shadow: #f0ff66 0 0 30px 8px;
۰۳ }

در این مثال ما سایه مور نظرمان را بر روی زرد کمرنگ تنظیم نموده همه آفست ها (فواصل جانبی) را حذف، بلور نسبتاً بالا و فاصله انتشار متوسط قرار می دهیم. بسته به طرح و محتویات درون کادر میتوانید با این مقادیر بازی کنید تا تابش مورد نظرتان حاصل شود.
در شکل زیر میتوانید ببینید که کادر تهیه شده درمرورگرهایی با قابلیت پشتیبانی، چگونه به نظر میرسد.

Tooltipها
Tooltipها نیز از المانهای دیگری است که برای خلق آنها به جاوا اسکریپت نیاز است. در حالیکه شما برای نمایش آنها در مرورگر های قدیمی شاید نیاز به عقبگرد داشته باشید مرورگرهای جدید این اجازه را به ما میدهند که با کمک کدهای پسودو(pseudo) و ویژگیهای HTML این tooltipها را ایجاد کنیم.(جهت اطلاع tooltip به نمایش کادر توضیحی بالای یک واژه به مجرد حرکت ماوس گویند). خب حالا فرض کنید کد HTML زیر را دارید:

۰۰۱ <p> Lorem ipsum dolor sit amet <a href=”#” data-tooltip=”this is a pure CSS tooltip”>hover over this link</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laborites nisi ut aliquip ex ea commodo consequat.</p>

این متن پاراگراف دارای لینکی به خصیصه data-tooltip بوده که یک داده در HTML5 میباشد. ما ازاین ویژگی میتوانیم برای tooltip خودمان استفاده کنیم.

۰۱ a:link {
۰۲ position: relative;
۰۳ Text-decoration: none;
۰۴ Border-bottom: solid 1px;
۰۵ }
۰۶
۰۷ a:before {
۰۸ content: “”;
۰۹ Position: absolute;
۱۰ Border-top: 20px solid #0090ff;
۱۱ Border-left: 30px solid transparent;
۱۲ Border-right: 30px solid transparent;
۱۳ Display: none;
۱۴ Top: -18px;
۱۵ Left: -26px;
۱۶ }
۱۷
۱۸ A:after {
۱۹ Content: attr(data-tooltip);
۲۰ Position: absolute;
۲۱ Color: white;
۲۲ Top: -35px;
۲۳ Left: -26px;
۲۴ Background: #0090ff;
۲۵ Padding: 5px 15px;
۲۶ -webkit-border-radius: 10px;
۲۷ -moz-border-radius: 10px;
۲۸ Border-radius: 10px;
۲۹ White-space: nowrap;
۳۰ Display: none;
۳۱ }
۳۲
۳۳ A: hover: after , a:hover: before { display: block;
۳۴ }

در کد بالا ما هر لینک را با جایگاه نسبی (relative) ایجاد کرده تا به این ترتیب قادربه خلق المانهای فرزندانش با جایگاه قطعی باشیم. دراینجا خط کشیدن زیرمتن (underlining) را حذف کرده و به شکلی مشابه از مرز پائین متن (bottom border) استفاده می کنیم. دلیل مان نیز اجتناب از پدیدار شدن خط درون tooltip در حالت اول است.
در قدم بعدی ما دو المان شبه کد سودو(pseudo) ایجاد میکنیم که که هنگام hover(عمل شناورشدن ماوس بر روی متن مورد نظر) نمایان میشوند. یکی از اینها :before بوده که یک شکل مثلث با کمک CSS ایجاد کرده و قسمت پائین tooltip ما را میسازد.
:after سودوی بعدی است که قسمت اصلی tooltip را میسازد که با استفاده از border-radius دارای گوشه های گرد و نیزچند ویژگی زیبای دیگر میباشد. اما مهمترین قسمت این المان مقدار خصیصه content میباشد. به جای مقدار سفارشی داخل گیومه و یا یک رشته خالی، که بطورمعمول استفاده میشوند ما دراینجا از تابع attr() استفاده میکنیم که ما را قادرساخته هر مقدار دلخواهی ازعنصر مورد نظرمان (که در اینجا linkمیباشد) دریافت کنیم.
به عنوان یک نکته جانبی ما میتوانستیم از ویژگی title که به نظر میرسد برای منظورمان بسیار مناسب است استفاده کنیم اما در آنصورت ممکن بود بیش از یک tooltip و در زمان شناورنمودن ماوس بر روی متن (hover) نمایان شود که مشکلاتی را میتوانست درخوانایی و قابلیت استفاده ایجاد نماید.
تنها قسمت دیگر کد که شما باید از آن یادداشت بردارید خصیصه های left و right میباشد که محل قرار گرفتن tooltip را نسبت به link معین میسازد. در این مثال ما از مقادیر پیکسل استفاده میکنیم و محل قرارگیری نیز گوشه بالا سمت چپ link میباشد. شما در پروژه خودتان میتوانید بسته به اندازه متن و یا فاکتورهای دیگر مکان مورد نظرخود را تعیین کنید.

سایزبندی کادر
خیلی از طراحان از مدل موجود و پیش فرض کادر در W3C خسته شده اند. اگر شما یک المان با ۵۰۰ پیکسل پهنا و۲۰ پیکسل padding (تورفتگی یا پهنای کادراطراف) دور تا دور آن تعریف کنید درواقع عنصر شما دارای پهنای واقعی ۵۴۰ پیکسل خواهد بود. این به خودی خود یک مشکل محسوب نمی شود تا زمانیکه شما تصمیم به تغییر padding بگیرید. اگر شما بخواهید padding را افزایش دهید در حالیکه فضای اختصاصی کلی تغییری نکند، درآنصورت باید پهنای عنصر خود را دوباره محاسبه کنید.
بنابراین برای اینکه به اندازه های اصلی مان لطمه ای نخورد نیازمند چند ترفند میباشیم. هر چند که با ویژگی box-sizing به راحتی میتوانید درCSS3 و با اعلام به مرورگر که پهنا، ارتفاع کادرها و padding درون آن را تبدیل نماید، به این مشکل غلبه کنید.

۰۱ .element {
۰۲ Width: 200px;
۰۳ Padding: 0 30px;
۰۴ Box-sizing: border-box;
۰۵ }

مقدار پیش فرض content-box (که نمایانگر مدل کادر استاندارد است) توسط مقدار border-box ما ابطال شده تا به این ترتیب مانع از بزرگتر شدن کادر بدلیل تغییر دراندازه های لایه یا مرز گردد.
این روش بیشتر حسی بوده و با همان نحو کارکرد مدل کادردراینترنت اکسپلورر quirks mode( یا IE5.5 mode) اینجا هم کار میکند.

 

ریبون‌ها و نوارهای CSS
سرتیترهای نوار مانند از دیگر عناصر گرافیکی میباشد که برای خلق به تصاویر ویژه احتیاج دارند. اما با CSS ما قادر به انجام آن با کمک ترفندهای کلاس pseudo-element و border خواهیم بود.
بعد از اینکه ما طرح اولیه را برای تیترمان انتخاب کردیم در آنصورت میتوانیم با اعمال CSS روی pseudo-element، عناصر خودمان را روی صفحه قرار دهیم. با کد زیراقدام به ساخت دو قسمت از نوار ریبون مان را آغاز مینمائیم.

۰۱ h2:before, h2:after {
۰۲ content: “”;
۰۳ Position: absolute;
۰۴ Width: 0;
۰۵ Height: 0;
۰۶ }

این کد دو المان با جایگاه قطعی بدون پهنا و ارتفاع تنظیم میکند. حالا ما به کدنویسی
المان :before پرداخته که قسمت ابتدایی تای (چین نوار) ما میباشد.

۰۱ h2:before {
۰۲ width: 30px;
۰۳ Left: -39px;
۰۴ Top: 16px;
۰۵ Border-width: 34px 15px;
۰۶ Border-style: solid;
۰۷ Border-color: mediumaquamarine
Mediumaquamarine mediumaquamarine transparent;
۰۸ }

مقادیر پهنا، چپ و بالا بسته به اندازه تیتر تغییر میکند. همچنین میتواند تحت تاثیر خصیصه های دیگری نظیر اندازه فونت، ارتفاع خط، padding و غیره هم باشد.
کدی که ریبون را ایجاد میکند border-width است، با این مقدار، border مرز ریبون را به ما میدهد. تنها چیزی که مانده قسمت سایه مانند، ریبون است که به نظر میرسد سمت دیگر تا (چین نوار) را مشخص میکند.

۰۱ h2:after {
۰۲ left: 0;
۰۳ Top: 100%;
۰۴ Border-width: 8 px 10px;
۰۵ Border-style: solid;
۰۶ Border-color : #666 #666 transparent transparent;
۰۷ }

کادر منحصربه فرد درکنارشفافیت، نوار ما را شکل میدهند. در آخر فقط از مکان آن مطمئن شوید تا بطور صحیح در جای خود قرار گرفته باشد.

حبابهای گفتاری
حبابهای گفتاری نیز مانند بقیه میتواند تنها با کمک CSS ایجاد شود. برای این کار ما باز هم از pseudo-element و البته gradient برای یک حباب خوش فرم و کمیک بهره میبریم.
برای فرم دادن و رنگ آمیزی حباب مان از گوشه های گرد (border-radius) و gradient به شکل زیر استفاه میکنیم:

۰۱ .speech-bubble (
۰۲ Border-radius: 50%;
۰۳ Background-image: linear-gradient(#ff8000, #ff9500, #ffaa00);
۰۴ Position: relative;
۰۵ }

برای ایجاز ما تعدادی از استایل ها را حذف کرده ایم. تنها مهمترین آنها در بالا نشان داده شده اند. ما یک linear-gradient اعمال کرده ایم که به زمینه یک گذار(transition) تدریجی زیبا و ۳ رنگ اعمال میکند. ما همچنین border-radius را روی۵۰ درصد تنظیم نموده که یک شکل بیضی میسازد. درضمن ما جایگاه حباب خود را بطورنسبی قرارمیدهیم تا به این شکل بتوانیم pseudo-elementها را بطور دقیق درمحل قرار دهیم. حالا pseudo-elementها را برای شکل دادن حباب های اشاره، قرار میدهیم.

۰۱ .speech-bubble:before {
۰۲ Content: ‘ ‘;
۰۳ Display: block;
۰۴ Width: 20px;
۰۵ Height: 20px;
۰۶ Border-radius: 50%;
۰۷ Position: absolute;
۰۸ Background-image: linear-gradient(#ff8000, #ff9500, #ffaa00);
۰۹ Bottom: -3px;
۱۰ }
۱۱
۱۲ .speech-bubble:after {
۱۳ Content: ‘ ‘;
۱۴ Display: block;
۱۵ Width: 14px;
۱۶ Height: 14px;
۱۷ Border-radius: 50%;
۱۸ Position: absolute;
۱۹ Background-image: linear-gradient(#ff8000, #ff9500, #ffaa00);
۲۰ Bottom: -20px;
۲۱ Left: 20px;
۲۲ }

هر دو حباب بطور قطعی در محل خود قرار میگیرند هرکدامشان در فاصله پائین سمت چپ از محل حباب اصلی. پائین ترین حباب کوچکتر بوده و به اندازه ۲۰ پیکسل به سمت چپ قرار میگیرد بنابراین راستای قرارگیری این حباب ها مشخص میباشد وبرای جلوه بصری، ما همان border-radius و gradient را نیز روی حباب های کوچکتر اعمال میکنیم.

تغییر شکل مبداء
اگر شما سرتان با تغییر شکل های CSS گیج رفته است ممکن است به خاطر مواجه با یک محدودیت باشد و آن اینکه هرباری که شما یک تغییر شکل ایجاد میکنید نقطه آغاز آن تغییر درمرکز المان قرار دارد. لذا برای مثال اگر شما یک تغییر دورانی ایجاد کنید موضوع شما در جا به سمت راست میچرخد.
با خصیصه transform-origin در CSS3 شما میتوانید یک نقطه آغاز سفارشی برای تغییر شکل های خود تعریف کنید. کد آن در زیر میآید:

۰۱ .element {
۰۲ Transform-origin: top left;
۰۳ }

در این مثال دو مقدار وجود دارد که فاصله جانبی عمودی و افقی را مشخص میکند. این مقادیر میتواند کلمات کلیدی و یا اعداد باشند(مانند ۳۰px 30px).

ستونهای چندگانه
محتویات درون صفحه درCSS، بطورمعمول توسط float به چندین ستون تقسیم میشود. با CSS3 و به تنهایی ما میتوانیم محتویات قسمتی از متن را به ستون های مجزا تقسیم کنیم. در زیر کد مرسوم برای تقسیم بندی به سه ستون مختلف را میبینید:

۰۱ .example-columns {
۰۲ Column-count: 3;
۰۳ Column-width: 75px;
۰۴ Column-gap: 20px;
۰۵ Column-rule: 1px;

سه خصیصه متفاوت درCSS ما را قادر میسازد تا ویژگیهای گوناگون ستونها شامل تعداد ستونها، پهنای هر ستون، فاصله بین آنها واندازه خط عمودیی که ستونها را از هم جدا میکند، را تعریف کنیم.
مهمترین نکته درباره ستونهای چندگانه این است که اگر مرورگر شما آنرا پشتیبانی نکند به سادگی به یک ستون تبدیل میشوند.

متن های Tilt-shift (قسمتی تارو قسمتی صاف)
اگر شما از قبل با تکنیکهای عکسبرداری آشنا باشید حتماً این عبارت به گوش شما رسیده است. این کار با جابجایی لنزهای دوربین صورت می پذیرد بطوریکه یک قسمت مشخص از عکس را بسته به این که روی کجا متمرکز شده، بلور مینماید.
با استفاده ازtext-shadow ، علاوه بر تغییر شکل های CSS3 میتوانیم اثر مزبور را بر روی متن نیز شبیه سازی کنیم.
ما دراین مثال دربلور نمودن نسبتاً غلو نموده ایم برای اینکه بطور وضوح نمایش دهیم که قصد انجام چه کاری را داریم. خب حالا چگونه آنرا انجام دهیم؟ برای ایجاد این افکت ما استایل های متفاوتی را به هر کدام از سه کلمه اعمال و هر کلمه را در المان پاراگراف خودش قرارمی دهیم.
برای خلق این تصورکه چنین مینماید که متن به پشت تکیه کرده است، باید چند چرخش و انحراف به هر سه المان اعمال کنیم:

۰۱ p {
۰۲ -webkit-transform: rotate(8deg)
۰۳ skewX(-15deg);
۰۴ }

هر عنصر پاراگراف سایه های اعمال شده بر روی متن را با درجات متفاوت از بلوروآفست لایه بندی نموده است:

۰۱ p:nth-child(1) {
۰۲ text-shadow: #eee 0 5px 2px,
۰۳ #eee 2px 8px 8px,
۰۴ #eee 4px 12px 10px,
۰۵ #eee 6px 14px 14px;
۰۶ }
۰۷
۰۸ P:nth-child(2) {
۰۹ Text-shadow: #eee 0 5px 2px,
۱۰ #eee 2px 8px 4px,
۱۱ #eee 4px 12px 4px,
۱۲ #eee 6px 14px 18px;
۱۳ }
۱۴
۱۵ P:nth-child(3) {
۱۶ Text-shadow: #eee 0 5px 6px,
۱۷ #eee 2px 8px 10px,
۱۸ #eee 4px 12px 18px,
۱۹ #eee 6px 14px 26px;
۲۰ }

در نتیجه متن ما شامل افکت بلوراعمال شده به قسمتهای مختلف آن میباشد چنانکه گویی با کمک تکنیکهای عکاسی، عکسبرداری شده است. شما میتوانید یک نمونه ارزنده از این کار را در وبلاگ Simurai، طراح Swiss CSS و در آدرس bit.ly/aVDnoG مشاهده کنید.

کادرهای خط چین
در اینجا قصد داریم یکی از اون ترفندهای کوچک ومعروف که از ترکیب CSS و CSS3 بدست می آید تا کادرهای خط چین را به ما دهد، بازگو نمایم.
بیشتر طراحان میدانند که خصیصه border-style میتواند مقادیر متفاوتی را بپذیرد جزاینکه ۹۹ درصد اوقات همه از solid استفاده میکنند. اگر کنجکاو هستید میتوانید در آدرس bit.ly/ri3pZt یک مقایسه از تمام مقادیر مختلف کادر را ببینید.
موردی که ما قرار است در اینجا استفاده کنیم ‘dash’ میباشد یعنی دومین الگوی مورد پسند برای کادر.
حالا این افکت چگونه کار میکند؟ خب شما میتوانید به چند طریق آن را انجام دهید. اما ما آنرا همراه با ترکیب با box-shadow انجام خواهیم داد. کد CSS آن :

۰۱ .stitched {
۰۲ Background: #ff5500;
۰۳ Border: dashed 3px #222;
۰۴ Border-radius: 10px;
۰۵ Box-shadow: 0 0 0 10px #ff5500;
۰۶ }

این کادر خط چین ما به رنگ خاکستری تیره بوده و ۳پیکسل پهنا دارد که جلوه خط چین بزرگ را داشته باشد. اما از آنجائیکه این کادر در لبه خارجی المان ظاهر میگردد باید چیزی اضافه کنیم که تصور این را به وجود آورد که سطح عنصر ما به بیرون از محل خط چین سرازیراست. این کار با اضافه کردن box-shadow غیر بلوروهمرنگ با زمینه خود عنصر انجام میشود.
بعلاوه ما گوشه های گرد را به المان اضافه کرده که طبیعی تر جلوه نماید. شما میتوانید با رنگ و اندازه خط چین ها آنرا به نحوی که دوست دارید نمایش دهید. درنهایت این مثال تنها ایده ایی کلی از این روش را به ما میدهد.

گذارها (TRANSITION)
با کمک CSS3 ما میتوانیم انیمیشن های ساده که به محض رویداد خاصی روی صفحه به نمایش در میآیند را انجام دهیم.
این گذارها که بر روی لینکها اعمال میشوند امروزه بسیار رایج و متداولند. برای مثال این یک گذار رنگی است که شما میتوانید بر روی تمام لینکهای متنی درون سایت خود قراردهید:

۰۱ a:link, a:visited {
۰۲ color: #ffff;
۰۳ Transition: color .5s ease;
۰۴ }
۰۵
۰۶ A:hover {
۰۷ Color: #ac3600;
۰۸ }

رخدادی که باعث ایجاد این گذار میشود عمل hover(شناور شدن ماوس بر روی موضوعی) میباشد که با کلاس :hover pseudo-class تعریف شده است. خصیصه transition مقادیر شما را قبول میکند. اولین مقدار نام خصیصه است که میتواند هر خصیصه ازCSS که قابل حرکت است، باشد. شما همچنین میتوانستید ازکلمه all برای اعلام اینکه تمام خصیصه ها متحرک میشوند، به جای تعدادی خاص استفاده کنید.
مقدار بعدی که باید تعریف شود مدت زمان این گذار است که میتواند براساس ثانیه (s) و میلی ثانیه(ms) تعریف شود. سومین مقدار تابع زمانبندی است که زمانبندی و یا سرعت را تعریف میکند. شما همچنین میتوانید یک تاخیر نیز اعمال نمائید( مجدداً براساس ثانیه و یا میلی ثانیه) که ما اینجا در مثال خود به آن اشاره ایی نکرده ایم.

پیش زمینه های چندگانه
با شرط پشتیبانی مرورگرها، ما توانایی قراردادن بیش از یک تصویر زمینه بر روی یک تصویر تک خواهیم داشت. به سادگی جداکردن مقادیر زمینه با کاما مانند زیر:

۰۱ .element {
۰۲ Background: url(image-1.jpg) no-repeat top left,
۰۳ Repeat top left, url(image-2.jpg) no-repeat bottom right;
۰۴ }

شما میتوانید تعدادی تصاویر زمینه را بی نهایت بار یکی برروی دیگری لایه بندی نمائید یا از جنبه تئوری هر مقداری که خصیصه background-image قبول میکند. دیگر نیازی به ساختار اضافی نیست، این به شما کمک میکند که HTML تان را مرتب نگاه داشته و تمام کد را درون CSS و جایی که به آن تعلق دارد قرار دهید.
فقط در خاطر داشته باشید که اگر شما قصد دارید که یک مرورگر غیرپشتیبان، اولین تصویر را نمایش دهد، شما میبایست آنرا بعنوان یک تصویر زمینه تک بر روی خط قبلی اظهار (declare) کنید تا بر روی این یکی بازنویسی شود.

استفاده از مرتب نویسی CSS
نوشتن کدهای خوانا و سبک گرچه الزامی نیست اما شکی وجود ندارد که خواست همه میباشد. خلاصه نویسی CSS میتواند به تعداد زیادی المان برای خلق کدهای کارآمد اعمال گردد.
مرتب نویسی کادرهای margin و padding باید در جهت چرخش عقربه های ساعت باشد یعنی بالا، راست، پائین و چپ.
کادرها میتوانند پهنا، استایل و رنگ را درون یک خط نظیر مثال زیر و با فرم :size, style, colour قرار دهند.
فونتها باید اندازه و خانواده فونت را همراه با المانهای دیگری نظیر وزن، استــــــایل و line-height دربربگیرند که این موارد به شکل نمادین پیشترهم ظاهرگردیده است style,weight,size,font-family.

۰۱ header {
۰۲ margin: 10px 0px 5px 2px;
۰۳ border: 1px solid #999;
۰۴ font: 36px Arial, Helvetica, sans- serif; }

تصویر بدون کادر
اضافه نمودن لینک به یک تصویر باعث ایجاد یک کادر بلوری دورتادور تصویر در زمان استفاده از اینترنت اکسپلورر میشود . برای خلاصی از آن و اینکه تصاویر لینک شده در تمام مرورگرها به یک شکل نشان داده شوند از کد زیر استفاده کنید. این کد باعث حذف کادر دور تمام تصاویر داخل صفحه مرورگرتان میشود.

۰۰۱ a img {border: none;}

تکرار الگوی پیش زمینه
تکنیک دیگر در زمینه طراحی وب که همیشه با کمک تصویر انجام میشود تکرار الگوی زمینه است. اینک ما قصد استفاده از خصیصه background-image برای قرار دادن یک تصویر لایه بندی شده CSS3 که از یک الگوی تکراری تقلید میکند، را داریم.
برای مثال ما در اینجا یک افکت چهارخانه تولید میکنیم. برای این کار ما قصد استفاده از linear-gradient در کنار خصیصه جدید background-size در CSS3 را داریم.

۰۱ body {
۰۲ background-color: #c2c2d6;
۰۳ Background-image: linear-gradient(left, hsla(250, 100%, 50%, 0.5)
۵۰%, transparent 50%),
۰۴ linear-gradient(top, hsla(240, 100%, 50%, .5) 50%,
۰۵ Transparent 50%);
۰۶ Background-size: 100px 100px;
۰۷ }

در ابتدا ما یک رنگ زمینه برای تمام بدنه المان <body> تنظیم نموده ایم که در فواصل ایجاد شده درون الگو نمایش داده خواهد شد و سپس دو لایه تصویر در خصیصه background-image. که اولین تصویر خطوط چپ به راست است که با بنفش نیمه شفاف شروع شده و به شفاف ختم میشود. کلید انجام این کار داشتن نواری است که نقطه پایانی رنگ، همان نقطه آغازین وضوح و شفافیت باشد. این ما را مطمئن میسازد که هیچ تغییر تدریجی (gradient) پیش نخواهد آمد در حالیکه به جای آن تغییر ناگهانی خواهد بود یعنی هیچ احساس شیبی را القاء نمی کند.
تصویر دوم نیز اثر مشابه دارد به جز اینکه از بالا به پائین بوده و از سایه نیمه آبی استفاده میکند. سپس ما با کمک خصیصه background-size اندازه زمینه را محاسبه تا اندازه دقیق نوارها را بدست آوریم. در نهایت بدلیل اینکه تصاویر زمینه بطور پیش فرض تکرار میشود این الگوها برای پر کردن المان تکرار خواهند شد که حس تکرارمرسوم تصویر زمینه را القاء مینماید.

انیمیشن ابتدایی
با CSS3 ما دیگر نیازی به jQuery یا کتابخانه های خاص متحرک سازی برای انجام انیمیشن های پیچیده نخواهیم داشت. اکثر مرورگرهای امروزی از فریم های کلیدی CSS3 با بهره گیری از @keyframes at-rule همراه با خصیصه های animation- پشتیبانی میکنند.
اجازه دهید با یک مثال ساده به شما نشان دهیم که این کار چقدر راحت میتواند باشد. ما میخواهیم یک توپی را که مدام در حال بالا و پائین رفتن است بسازیم. اول از همه کدی برای فرم دهی خود توپ:

۰۱ .ball {
۰۲ Background: firebrick;
۰۳ Border-radius: 50%;
۰۴ Width: 160px;
۰۵ Height: 160px;
۰۶ Position: absolute;
۰۷ Bottom: 0;
۰۸ Left: 45%;
۰۹ Animation-name: ballbounce;
۱۰ Animation-duration: 1s;
۱۱ Animation-iteration-count: infinite;
۱۲ Animation-direction: alternate;
۱۳ Animation-timing-function: ease-out;
۱۴ Animation-delay: 0;
۱۵ Animation-play-state: running;
۱۶ Animation-fill-mode: none;
۱۷ }

چند تا چیز است در اینجا که باید بدانید: ما توپ را با انتخاب مقدار ۵۰ درصد برای border-radius شکل داده ایم. این ما را مطمئن میسازد که توپ حتی اگر ما پهنا و ارتفاع را تغییر دهیم گرد خواهد بود و یا دربدترین حالت بیضوی (توپ راگبی!). ما همچنین جایگاه قرارگرفتن توپ را قطعی انتخاب نموده ایم.
در قدم بعد ما چند خصیصه مربوط به animation را تعریف کرده ایم. نام آنرا انتخاب کرده ایم، مدت زمان و همچنین برایش تعریف کرده ایم تا در یک چرخه بی نهایت حرکت کند و ضمناً مسیر انتخابی برای آن قرار داده ایم. ما برای اینکه عمل بالا و پائین رفتن واقعی به نظر برسد از یک مقدار ease-out برای زمانبندی تابع استفاده کرده ایم.
حالا وقت آن رسیده که گزاره های keyframe را همراه با مقادیر خصیصه های مربوطه تعریف کنیم :

۰۱ @keyframes ballbounce {
۰۲
۰۳ From {
۰۴ Bottom: 0;
۰۵ Height: 90px;
۰۶ }
۰۷
۰۸ ۱۰% {
۰۹ Bottom: 0;
۱۰ Height: 160px;
۱۱ }
۱۲
۱۳ To {
۱۴ Bottom: 50%;
۱۵ }
۱۶
۱۷ }

نامی که برای انیمیشن در @keyframes مشخص میکنیم باید با نام آن (قسمت قبلی کد) مطابقت داشته باشد. در این مثال ما نام ballbounce را از روی مجموعه .ball انتخاب کرده ایم.
دو اتفاق قرار است اینجا بیافتد: اول پائین توپ تغییر کرده تا به ۵۰ درصد برسد ( به این معنی که به نسبت ۵۰ درصدی از پائین نقطه نگاه ناظر یا محل اصلی آن قرار میگیرد).
ما ضمناً یک فریم کلیدی اضافه کردیم که تنها ۱۰ درصد درهربار تکرار رخ میدهد. کار آن نگاه داشتن توپ درپائین برای طول مدتی است که تا به این نقطه برسد و ما درهمین جا نیز ارتفاع توپ را تغییر میدهیم. این تغییر ارتفاع چنین به نظر میرساند که توپ هنگام اصابت با زمین پهن میشود. تابع زمانبندی ease-out که ما قرار داده ایم باعث میشود که عمل بالا و پائین رفتن در انیمیشن نهائی خیلی طبیعی به نظر برسد.

متن سه بعدی
متن سه بعدی از آندسته ایی است که همیشه نیازمند راه های غیر بهینه و طولانی نظیر تصاویر، اسکریپت و فونتهای سفارشی میباشد. با CSS3 ما میتوانیم متن های سه بعدی و برجسته تنها با کمک چند خط کد بسازیم.
در کنار سایر ویژگیهای طراحی، CSS3 این افکت را از طریق روش زیر به انجام میرساند. در واقع افکت بسیار آسانی است فقط کافی است مقداری سایه متن را با فواصل روبه افزایش لایه بندی نمائیم تا به این ترتیب حس سه بعدی یا برجسته بودن را القاء نماید :

۰۱ .۳d-text {
۰۲ Color: #ff8000;
۰۳ Text-shadow: #ff5500 1px -1px 0,
۰۴ #ff5500 2px -2px 0,
۰۵ #ff5500 3px -3px 0,
۰۶ #ff5500 4px -4px 0;
۰۷ #ff5500 5px -5px 0;
۰۸ #ff5500 6px -6px 0;
۰۹ #ff5500 7px -7px 0;
۱۰ #ff5500 8px -8px 0;
۱۱ #ff5500 9px -9px 0;
۱۲ #ff5500 10px -10px 0;
۱۳ }

نکته کلیدی این افکت برای جلوه خوب، وجود رنگ سایه ها و فقدان بلور است. با انتخاب رنگی نزدیک به رنگ متن ما، این حس را ایجاد میکنیم که سایه قسمتی از متن است . و از طریق فواصل یک پیکسلی و استفاده از همان رنگ سایه مطمئن میگردیم که سایه یکپارچه به نظر برسد. در نهایت مقدار بلور هم صفر خواهد بود.

تغییرات رنگ خطی و دایره ایی(شعاعی)
این ویژگی فوق از جمله موارد CSS3میباشد که ما را چون قبل، از وجود یک برنامه ویرایشگر بی نیاز مینماید. ما با این تکنیک می توانیم تغییرات خطی یا دایره ایی و یا هر دو را برای خلق الگوها و یا زمینه های پیچیده تر اعمال کنیم. اجازه دهید از هر کدام مثال ساده ایی را ببینیم.
برای ایجاد یک تغییر خطی دو رنگ کافی است CSS زیر را به المان مورد نظر خود اضافه کنید:

۰۱ .example {
۰۲ Background-image: linear-gradient(top, #ff9500, #eaff00);
۰۳ }

این کد به مرورگر اعلام میکند که یک تغییر تدریجی دو رنگ بر روی المان مورد نظر و با کمک رنگ های مشخص شده اعمال کند. کلمه کلیدی top میگوید که نقطه شروع این تغییر تدریجی باید بالا باشد.
اگر شما میخواهید از رنگهای بیشتری استفاده کنید کافی است آنها را به لیست درون پرانتز که با کاما از هم جدا شده اند اضافه کنید. خود مرورگر بطورمساوی این رنگها را توزیع مینماید. اما اگر شما میخواهید تعیین کنید که از کجا رنگ تغییر کند (نه بطور مساوی) باید مطابق زیر از درصد برای هر کدام استفاده نمائید:

۰۱ .example {
۰۲ Background-image:
linear-gradient(top, #ff9500 20%, #eaff00 80%);
۰۳ }
اما درباره تغییرات شعاعی چگونه است؟ کمی نیاز به ترفند دارد اما نمونه ساده آن را میتوانید با CSS3 زیر ایجاد کنید:
۰۱ .example {
۰۲ Background-image: radial-gradient(center center, circle contain,
#eaff00 0%, #ff9500 100%);
۰۳ }

نظیر آنچه که درباره مدل خطی گفتیم اینجا نیز برای اضافه کردن رنگ های بیشتر و همچنین اینکه کجا تغییرات شروع و کجا ختم شود، کافی است رنگها را به همراه درصد درون پرانتز اضافه کرده و با کاما از هم جدا کنیم.
شاید تا بحال درباره آناگلیف چیزی نشنیده باشید در اینصورت اینجا شروع خوبی برای این آشنایی است. این به آن معنی است که اشیاء درون تصویر دو تا شده و فاصله اندک بین آنها، یک افکت سه بعدی استروسکوپی ایجاد نماید. معمولاً تصاویر آناگلیفی بصورت دو رنگ قرمز و لاجوردی ارائه میشوند. در اینجا ما قصد داریم از بعضی تکنیکهای CSS برای تولید متن آناگلیف استفاده کنیم.
برای این کار روشهای متعددی وجود دارد که مرسوم ترین آنها کپی کردن تصویر و قرار دادن هر کدام از آنها در یک عنصر لایه متفاوت است. اما این کار مشکل معرفی متغیرهایی را دارد که در چند خط پائیتر برنامه با مشکل دسترسی روبرو خواهند شد.
پس به جای آن یک المان HTML اضافه، آنگاه از عنصر pseudo استفاده میکنیم مانند زیر:

۰۱ h1 {
۰۲
۰۳ Font-size: 150px;
۰۴ Font-family: sans-serif;
۰۵ Letter-spaccing: -5px;
۰۶ Color: rgba(0, 0 , 255, 0.5);
۰۷ }
۰۸
۰۹ H1: after {
۱۰ Content: “۳D ROCKS”;
۱۱ Position: absolute;
۱۲ Left: 10px;
۱۳ Top: 5px;
۱۴ Color: rgba(255,0,0,0.5);
۱۵ }

المان h1 ما متن ‘۳D ROCKS’ را درون HTML قرارمیدهد. متن سایز بندی شده و یک رنگ آبی با کدورت ۵۰% به آن اعمال شده است. ما آنرا بصورت نسبی قرار داده تا به این ترتیب المان های فرزند را بطور قطعی داخل آن جایگذاری کنیم.
بعد ازآن نوبت به المان :after میرسد. در خصیصه content ما متن درون HTML را کپی نموده و آنرا بصورت قطعی قرار داده ویک رنگ قرمز با کدورت ۵۰(opacity) درصد مجدداً به آن اعمال می کنیم. این کدورت تنظیم شده روی دو المان، المان سومی را در نظر تداعی میکند که به دلیل روی هم قرار گرفتن این دو المان، سایه تیره تری را موجب میگردد.

3 نظرات

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

It is main inner container footer text