فونت در CSS3
فونت در CSS3
Want create site? Find Free WordPress Themes and plugins.

فونت در CSS3

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

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

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

پشتیبانی 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;
}

 

Did you find apk for android? You can find new Free Android Games and apps.
نویسندهسایت اصفهان
منبعسایت اصفهان
اشتراک
مقاله قبلی۸ افکت بسیار ساده transition
مقاله بعدیگربه ها در اینترنت
طراحی سایت پوشش همواره تلاش کرده است تا با بکار گیری جدیدترین و بروز ترین متد های طراحی وب سایت روز دنیا, دست به طراحی انواع پورتال یا وب سایت دولتی,سایت شرکتی,سایت فروشگاهی,سایت خبری,سایت مذهبی,سایت ورزشی,سایت دانلود و بازی,سایت شخصی و حتی طراحی سایت رایگان نماید تا تحولی جدید در دنیای طراحی وبسایت بوجود آورد به گونه ای که دیگر در طراحی های وب سایت پوشش, سایت های معمولی و سه ستونه و دو ستونه و پر زرق و برق قدیمی که حوصله ی هر کاربری را به سر می برد جای خود را به سایت هایی با گرافیک و کیفیت و از همه مهمتر سئوی بالا می دهند و هر کاربری را مجذوب خود کرده و اینگونه است که راندمان کار یک وب سایت بالا رفته و طراحی سایت مورد نظر به هدف خود که رضایت و بازدید بیشتر کاربران است, می رسد.

بدون نظر