یک تریک فوق العاده و جذاب برای درک بهتر سی اس اس۳ و مبحث ترنسفورم ها.
در مثال فوق یک متن بصورت کاراکتر های جدا از هم نوشته شده که با استفاده از :before و :after سایه و کاراکتر اضافه ۳ بعدی دقیقا روی هم و از جهت left:0 تعیین شده است.
قسمت استایل های کد فوق :
[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=””]
[/box]
دریافت مستقیم فایل : کلیک کنید