اگر از علاقه مندان به طراحی وب باشید احتمالا از نسخۀ جدید CSS و خصوصیات فوق العاده ای که به آن اضافه شده است مطلع هستید. در یکی از آموزش های قبل (ساخت گالری عکس) 2 خصوصیت از CSS 3.0 به صورت ساده معرفی شد. در این مقاله نیز دو خصوصیت دیگر به همراه ساخت طرحی به مراتب جذاب تر از قبل معرفی خواهد شد. بله این طرح همانطور که در تصویر زیر مشاهده می کنید، ساخت لوگوی مرورگر اپرا، تنها با استفاده از خصوصیات CSS 3.0 و بدون استفاده از هیچ تصویری است.
در ابتدای کار عرض کنم که IE را از انجام این کار کلا معاف بفرمایید، اپرا نیز به صورت کامل قادر به نمایش این کار نیست و تنها firefox 3.6، safari 4.0 و chrome 5 به خوبی از خصوصیات مورد استفاده در این آموزش پشتیبانی می کنند.
بعد از توضیحات اولیه کار خود را شروع می کنیم. تمام کد html این کار به صورت زیر است و تنها از عنصر div در آن استفاده شده است:
<div id="opera-logo">
<div class="light-shadow"></div>
<div class="dark-shadow"></div>
<div class="outer-edge"></div>
<div class="highlight"></div>
<div class="fill"></div>
<div class="inner-edge"></div>
<div class="inner"></div>
<div class="ring"></div>
</div>
حالا شروع به استایل دهی تگ ها می کنیم، خصوصیات جدید نیز در حین آموزش معرفی خواهند شد:
#opera-logo
{
margin: 0 auto;
width: 500px;
height: 550px;
position: relative;
}
#opera-logo div
{
position: absolute;
}
برای اینکه div ها را در داخل div والد موقعیت دهی کنیم، به عنصر والد position: relative و به کلیۀ div های داخلی خصوصیت position: asbsolute نسبت داده شده است.
برای ایجاد سایۀ زیر لوگو از دو تگ div استفاده شده که یکی قسمت تاریک سایه و دیگری قسمت روشن تر سایه را ایجاد می کند، استایل مربوط به قسمت روشن سایه به صورت زیر است:
#opera-logo .light-shadow
{
width: 300px;
height: 50px;
left: 100px;
top: 350px;
-moz-border-radius: 200px/50px;
-webkit-border-radius: 200px 50px;
border-radius: 200px/50px;
-moz-box-shadow: 0 100px 30px #c9c9c9;
-webkit-box-shadow: 0 100px 30px #c9c9c9;
box-shadow: 0 100px 30px #c9c9c9;
}
از قسمت موقعیت دهی المان که بگذریم به خصوصیت border-radius که یکی از خصوصیات جدید CSS 3.0 است می رسیم. این خصوصیت برای ایجاد گوشه های گرد کاربرد دارد. کاری که قبلا توسط تصاویر انجام میشد، در CSS 3.0 با این خصوصیت به راحتی قابل انجام است.
شرکت موزیلا خصوصیات جدید رو با پیشوند moz- برای فایرفاکس آماده کرده است، همچنین کروم و سافاری هم به دلیل استفاده از موتور وبکیت، از پیشوند webkit- استفاده می کنند. ناگفته نماند که اپرا 10.5 از خصوصیت border-radius بدون هیچ پیشوندی پشتیبانی می کند.
چهار خصوصیت دیگر برای گرد کردن گوشه های خاص به این شکل هستند:
border-radius-topright
border-radius-bottomright
border-radius-bottomleft
border-radius-topleft
نکتۀ قابل ذکر در کلاس light-shadow، به کارگیری این خصوصیت با دو مقدار و یک / در بین آن ها است. مقدار سمت چپ نشان دهندۀ تعداد پیکسلی است که در راستای محور افقی باید گرد شود و مقدار دوم تعداد پیکسل در راستای محور عمودی می باشد (این مورد رو خودتون تست کنید تا بهتر متوجه بشید)، در واقع به این شکل می توان المان هایی به شکل بیضی یا دایره ایجاد کرد. نکتۀ دیگر هم اینکه برای webkit نیازی به آوردن / نیست و به جای آن کافی است از یک space استفاده کنید.
خصوصیت دیگر مورد استفاده box-shadow می باشد که برای المان مورد نظر سایه ایجاد می کند. این خصوصیت در آموزش ساخت گالری عکس نیز مورد استفاده قرار گرفت، بنابراین توضیحات داده شده در آن مقاله را همین جا ذکر می کنم:
Box-shadow چهار پارامتر دریافت می کند که به صورت زیر است:
box-shadow: x-offset y-offset blur-radius color
x-offset: این پارامتر میزان انحراف سایه را در راستای افقی بر اساس پیکسل مشخص می کند.
y-offset: این پارامتر میزان انحراف سایه را در راستای عمودی بر اساس پیکسل مشخص می کند.
blur-radius: این پارامتر میزان محو شدگی از لبه های سایه را تعیین می کند.
color: این گزینه هم برای تعیین رنگ سایه به کار می رود.
نمونه ای از ایجاد سایه توسط این خاصیت را در تصویر زیر مشاهده می کنید:
خصوصیات قسمت سایه تاریک (کلاس dark-shadow) نیز به این شکل است:
#opera-logo .dark-shadow
{
width: 200px;
height: 50px;
left: 150px;
top: 350px;
-moz-border-radius: 200px/50px;
-webkit-border-radius: 200px 50px;
border-radius: 200px/50px;
-moz-box-shadow: 0 100px 30px #535252;
-webkit-box-shadow: 0 100px 30px #535252;
box-shadow: 0 100px 30px #535252;
border: 1px solid #000;
}
دو سایه را به گونه ای موقعیت می کنیم که بر روی هم قرار گیرند. با توجه به توضیحات ارائه شده در مورد box-shadow، در اینجا سایه ما در راستای افقی جابجایی ندارد اما در راستای عمودی 100 پیکسل پایین تر از خود div قرار دارد. طرح ما تا اینجا به صورت زیر خواهد بود، البته به div ها boder دادم تا کاملا مشخص باشد (بعد از تست border ها را حذف کنید):
بعد از ایجاد سایه شروع به ساخت خود لوگو می کنیم، خصوصیات مربوط به کلاس outer-edge که قسمت کروی لوگو را تشکیل می دهد به این شکل است:
#opera-logo .outer-edge
{
width: 400px;
height: 430px;
left: 50px;
top: 60px;
-moz-border-radius: 330px/350px;
-webkit-border-radius: 330px 350px;
border-radius: 330px/350px;
background: #800;
background: -moz-linear-gradient(-90deg, #FE878A, #E71616 50%, #800000 80%, #800000 85%, #b80304);
background: -webkit-gradient(linear, left top, left bottom, from(#FE878A),
color-stop(50%, #E71616), color-stop(80%, #800000),
color-stop(85%, #800000), to(#b80304));
}
با دادن مقدار 330px در راستای افقی و 350px در راستای عمودی به خصوصیت border-radius قسمت کروی لوگو را ایجاد می کنیم. پارامتر جدید در این قسمت خصوصیت مربوط به Gradient است که یک شیب رنگ را برای ما ایجاد می کند.
برای ایجاد شیب رنگ، mozilla و webkit دو سینتکس متفاوت دارند که در ادامه توضیح خواهم داد.
-moz-linear-gradient در موزیلا به عنوان یه مقدار برای خصوصیت background/background-image به کار می رود و یک شیب رنگ خطی را ایجاد می کند. پارامتر های این خصوصیت به این شکل می باشند:
-moz-linear-gradient([<point>|<angle>],<color>,<color>,...,<color>]);
<point>: این پارامتر مکان شروع شیب رنگ را مشخص می کند. در واقع معادل background-position است که می تواند مقادیر top, bottom, left, right, center را بگیرد. همچنین به جای این مقادیر می توان از مقادیر درصدی و یا پیکسلی نیز استفاده کرد.
<angle>: این پارامتر زاویۀ شیب رنگ را مشخص خواهد کرد.
<color>: رنگ های شیب رنگی ما توسط این پارامتر تعیین می شوند، به شکلی که <color> اول رنگ ابتدا و <color> آخر رنگ انتها را مشخص می کند. در این بین نیز می توان از رنگ های دیگری استفاده کرد و آن ها را با کاراکتر "," از هم جدا نمود. در ادامۀ رنگی که تعیین می شود می توان موقعیت آن رنگ را در شیب رنگی تعیین کرد.
به مثال زیر توجه کنید:
background: -moz-linear-gradient(-45deg, red,orange 60%,blue);
در این مثال سه رنگ قرمز، نارنجی و آبی برای شیب رنگ مشخص شده است. زاویۀ شیب رنگ نیز 45- درجه است که باعث می شود شیب ما از گوشه سمت چپ بالا شروع و به گوشه سمت راست پایین ختم شود. به جای مقدار 45deg- می توان از top left برای تعیین موقعیت استفاده کرد که باز هم همین نتیجه به دست می آید.
نکته قابل ذکر دیگر این است که بعد از رنگ نارنجی مقدار %60 قرار گرفته است. این مقدار مشخص می کند که رنگ نارنجی باید در چه مکانی قرار گیرد. مثلا اگر به جای 60، مقدار 50 درصد بدهیم، رنگ نارنجی ما در راستای قطر مربع قرار خواهد گرفت. همچنین به جای مقادیر درصدی از مقادیر px، em و ... هم می توان بهره برد.
اما در مورد webkit دستور کلی به صورت زیر است:
-webkit-gradient(<type>, <point>, <point>, from(color), color-stop(<point>, color), to(color));
<type>: نوع Gradient را تعیین می کند که می تواند linear باشد یا radial. (در مورد radial در این مقاله صحبت نخواهد شد و در صورت تمایل خودتان جستجو کنید)
<point>: همانند موزیلا.
(from(color: رنگ ابتدایی برای Gradient را تعیین می کند.
(color-stop(<point>, color: رنگ های میانی برای gradient در webkit توسط این تابع مشخص می شوند. قسمت <point> موقعیت قرار گیری رنگ (همانند موزیلا) و color خود رنگ را مشخص می کند.
(to(color: رنگ انتهایی را در Gradient مشخص می کند.
به مثال زیر توجه کنید:
background: -webkit-gradient(linear, left center, right center, from(blue), color-stop(50%, red), to(yellow));
خوب فکر می کنم با توضیحات ارائه شده، خصوصیات CSS کلاس outer-edge به خوبی واضح باشد.
اگر نگاهی به کار خود تا انجا بیاندازیم، به این صورت خواهد بود:
سایر کلاس ها نیز خصوصیت جدیدی ندارند و تنها با تغییر اندازه div ها و ایجاد دایره های داخلی سبک های خاصی را ایجاد می کنند. مثلا کلاس highlight همانند کلاس outer-edge است اما کمی ارتفاع div و رنگ gradient در آن تغییر یافته است. به همین دلیل از توضیحات اضافی در مورد دیگر کلاس ها خودداری می کنم. خصوصیات دیگر کلاس ها:
#opera-logo .highlight
{
width: 400px;
height: 427px;
left: 50px;
top: 63px;
-moz-border-radius: 330px/350px;
-webkit-border-radius: 330px 350px;
border-radius: 330px/350px;
background: #d40009;
background: -moz-linear-gradient(-90deg, #FCC, #E71616 50%, #d40009);
background: -webkit-gradient(linear, left top, left bottom, from(#FCC),color-stop(50%, #E71616), to(#d40009));
}
#opera-logo .fill
{
width: 400px;
height: 420px;
left: 50px;
top: 70px;
-moz-border-radius: 330px/350px;
-webkit-border-radius: 330px 350px;
border-radius: 330px/350px;
background: #E71616;
background: -moz-linear-gradient(-90deg, #FE878A, #E71616 50%, #800000 80%, #800000 85%, #b80304);
background: -webkit-gradient(linear, left top, left bottom, from(#FE878A),
color-stop(50%, #E71616), color-stop(80%, #800000),
color-stop(85%, #800000), to(#b80304));
}
#opera-logo .inner-edge
{
width: 150px;
height: 350px;
left: 175px;
top: 100px;
-moz-border-radius: 110px/250px;
-webkit-border-radius: 110px 250px;
border-radius: 110px/250px;
background: #d20000;
background: -moz-linear-gradient(-90deg, #cc3836, #d9100f 50%, #d20000);
background: -webkit-gradient(linear, left top, left bottom, from(#cc3836),
color-stop(50%, #d9100f), to(#d20000));
}
#opera-logo .inner
{
width: 144px;
height: 344px;
left: 178px;
top: 103px;
-moz-border-radius: 110px/250px;
-webkit-border-radius: 110px 250px;
border-radius: 110px/250px;
background: #b80000;
background: -moz-linear-gradient(-90deg, #9a0000, #b80000);
background: -webkit-gradient(linear, left top, left bottom, from(#9a0000), to(#b80000));
}
#opera-logo .ring
{
width: 120px;
height: 320px;
left: 190px;
top: 115px;
-moz-border-radius: 100px/250px;
-webkit-border-radius: 110px 250px;
border-radius: 100px/250px;
background-color: #fff;
}
در نهایت با اعمال کلیه خصوصیات، طرح ما به شکل زیر در خواهد آمد:
دانلود: کد html + css لوگوی اپرا