فونت در CSS3

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

در این مقاله از سلسله مقاله های طراحی وب سایت که در شرکت طراحی وب سایت اطلس وب برای شما فراهم شده است, قصد داریم تا شما را با این تکنیک بسیار جالب آشنا نموده و همچنین وب سایت های بسیار خوبی را به عنوان منبع در اختیار شما قرار دهیم تا بتوانید در طراحی های خود از این منابع استفاده نمایید.

برای ایجاد نمودن چنین افکت هایی باید از لایه های مختلف استفاده نمایید.

پشتیبانی Layer Font در مرورگرها

در نرم افزارهای فتوشاپ و یا Iluustrator و یا دیگر نرم افزارای گرافیکی که با تکنولوژی های لایه ها کار میکنند, Layer Fontها کاملا مشخص هستند. اما آیا این ها در مرورگرهای کاربران وب سایت پشتیبانی میشود یا خیر؟

Layer Font با استفاده از تگ div

یکی از این دیدگاه ها این میباشد که شما میتوانید از چندین تگ div و متصل نمودن آنها به یک بخش این قابلیت را ایجاد نمایید:

<!-- HTML-->
<div id="first">
 <h1>Using Layer Fonts In CSS</h1>
</div>
<div id="second">
 <h1>Using Layer Fonts In CSS</h1>
</div>
<div id="third">
 <h1>Using Layer Fonts In CSS</h1>
</div>
/* CSS */
#first, #second, #third{
 display: block;
 position:absolute;
 top:10px;
 left:5px;
}
h1 {
 font:5em 'One';
 color:rgba(200,0,0,.85);
}
#second h1 {
 font-family:'Two';
 color:rgba(0,200,0,.85);
 }
#third h1 {
 font-family:'Three';
 color:rgba(0,0,200,.85);
}

 
ایجاد Layer Font با استفاده از pseudo Element
با استفاده از :before و :after در زبان CSS میتوانید آنها را به وجود بیاورید.
نمونه ای از آن مانند مثال زیر میباشد:
 
برای درست نمودن آن به کدهایی که در زیر آمده است توجه نمایید و آنها را در طراحی وب سایت خود پیاده سازی نمایید

<div>
 <h1 text="Using Layer Fonts In CSS">Using Layer Fonts In CSS</h1>
</div>

h1 {
 font: 5em ‘Display’;
 color:rgba(100,60,20,1);
}

h1::before {
 content: attr(text);
 font-family:'Two';
 color:rgba(150,150,100,.5);
}
h1::after {
 content: attr(text);
 font-family:'Three';
 color: rgba(180,150,50,.5);
}

div {
 position: relative;
 top:10px;
 left:5px;
 background-color: rgba(200,150,150,0.2);
 border-radius: 10px;
 max-width:1190px;
}