دوره های پرنیان

تریک فوق العاده آرسام، برجسته سازی متن با CSS3

یک تریک فوق العاده و جذاب برای درک بهتر سی اس اس۳ و مبحث ترنسفورم ها.

در مثال فوق یک متن بصورت کاراکتر های جدا از هم نوشته شده که با استفاده از :before و :after سایه و کاراکتر اضافه ۳ بعدی دقیقا روی هم و از جهت left:0 تعیین شده است.

تریک فوق العاده آرسام، برجسته سازی متن با CSS3
تریک فوق العاده آرسام، برجسته سازی متن با CSS3

 

 

قسمت استایل های کد فوق :

[box type=”success” align=”aligncenter” class=”” width=””]

 

  <style>
*, ::before, ::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #4e07af;
}
.para1{
text-align: center;
margin-top: 200px;
}
.para1>span{
font-size: 7em;
margin: 0 50px;
font-family: tahoma;
font-weight: bolder;
color: white;
position: relative;
}
.para1>span:nth-of-type(1):before{
content: ‘A’;
}
.para1>span:nth-of-type(2):before{
content: ‘R’;
}
.para1>span:nth-of-type(3):before{
content: ‘S’;
}
.para1>span:nth-of-type(4):before{
content: ‘A’;
}
.para1>span:nth-of-type(5):before{
content: ‘M’;
}
.para1>span:before{
position: absolute;
left: 1px;
color: #660fde;
transform: perspective(200px) rotateY(-55deg);
text-shadow: -1px 0 1px #684da3, 1px 0 1px rgba(0,0,0,0.8);
transform-origin: left;
z-index: 2;
transition: 1s;
}
.para1>span:after{
content: attr(data-text);
position: absolute;
left: 1px;
color: rgba(70, 70, 70, 0.38);
transform: scale(1.4, 1) skew(0 , 15deg);
transform-origin: left top;
transition: 1s;
}
.para1>span:hover:after{
transform: scale(1.1, 1) skew(0 , 2deg);
}
.para1>span:hover:before{
transform: perspective(200px) rotateY(-2deg);
}
.para2{
font-size: .5em;
}

</style>

[/box]

قسمت HTML کد فوق:

[box type=”success” align=”aligncenter” class=”” width=””]

  <div class=”para1″>
<span data-text=”A”>A</span>
<span data-text=”R”>R</span>
<span data-text=”S”>S</span>
<span data-text=”A”>A</span>
<span data-text=”M”>M</span>
</div>
<div class=”para1 para2″>
<span>coming soon</span>
</div>

[/box]

دریافت مستقیم فایل : کلیک کنید

 

دیدگاهتان را بنویسید

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

کلاس طراحی سایت