استفاده از فونت ها در چند لایه با CSS3

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

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

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

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

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

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

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

<div id="first">
 <h1>Using Layer Fonts In CSSh1>
div>
<div id="second">
 <h1>Using Layer Fonts In CSSh1>
div>
<div id="third">
 <h1>Using Layer Fonts In CSSh1>
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 CSSh1>
div>

h1 {
 font: 5em lsquo;Displayrsquo;;
 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;
}

نمونه ای از وب سایت های در این زمینه و مثال های آنها

وب سایتHomestead ($50 commercial use, donation for personal use)

وب سایتCanter (free)

وب سایتCore circus (from $5 approx.)

وب سایتSummit (donation)

وب سایتTeip ($117 approx.)

وب سایتFrontage (from $5 approx.)

وب سایتPlayer ($49 approx.)

وب سایتScratch (free)

وب سایتIndustry Inc ($69)

وب سایتAmerican Chromatic (from $24.95)

وب سایتDetroit (from $24 approx.)

وب سایتIdentification ($59 approx.)

وب سایتNaga (from $24 approx.)

وب سایتTrend (from $5 approx.)

وب سایتFestivo Letters (from $17 approx.)

وب سایتLettrage (Private)