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

در مثال فوق یک متن بصورت کاراکتر های جدا از هم نوشته شده که با استفاده از :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]

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

trainingsitedesign

من، پارسا قربانیان موسس مدرسه اینترنتی پرنیان و برگزارکننده اولین دوره های آموزشی تضمین استخدام در ایران هستم. هدف من ایجاد یک معادله برد، برد هست. میخواهیم آرزوهایمان را با هم بسازیم♥