توی سایت قسمت بالای سایت itpro یه بخش قشنگ وجود داره که توی اون لینک های "خدمات و سرویس ها "و" تبیلغات "وجود دارد. ما می خوایم امروز یاد بگیریم که چطور این حالت لینک ها رو ایجاد کنیم. برای شروع کار ما نیاز به Font Awsome داریمکه میتونید از لینک زیر دانلودش کنید:
اول یک پوشه برای پروژه ی خودمون ایجاد می کنیم و در اون یک فایل index.html قرار میدیم. بعد فایل font-awsome.min.css رو درفولدر css کپی و به پوشه ی پروژه اضافه می کنیم. font-awsome به ما کمک می کنه که به جای استفاده از عکس برای عکس برای icon ها ، از فونت استفاده کنیم. خب ابتدا در فایل html خودمون المان های مورد نیاز رو قرار می دیم:
<!DOCTYPE html>
<html>
<head>
<title>Css</title>
<style>
*{
margin:0;
padding:0;
}
body{
background-color:gainsboro;
direction:rtl;
}
div#main{
width:250px;
height:100px;
margin:200px 200px 0 0;
background-color:#1d536e;
position: relative;
color:white;
display: block;
text-align: center;
font-family: 'Yekan';
line-height: 90px;
background-color: #1d536e;
}
div#main p{
font-family:tahoma;
z-index:2;
}
</style>
<link rel="stylesheet" href="font-awesome.min.css"/>
</head>
<body>
<div id="main">
<p>متن داخل باکس</p>
<span class="fa fa-key"></span>
</div>
</body>
</html>
در کد های بالا ما style های اولیه رو به div دادیم و سپس font-awesome رو به فایل html خودمون لینک کردیم و سپس از اون استفاده کردیم.(برای استفاده از font-awesome باید span با کلاس های fa و fa-x قرار دهیم، برای مشاهده ی icon هایی که font-awesome دارد و میتونیم نام آنها را به جای X نوشتن با سایت font awesome مراجعه کنید.) و بعد به پاراگراف داخل باکس z-index دادیم که icon ما در هنگام چرخش به روی متن قرار نگیرد. خروجی:
همانطور که دیدید هنوز icon دیده نشد. برای همین کمی style به آن می دهیم.
span.fa{
color:#1d599e;
position:absolute;
top:10px;
left:-20px;
font-size:8em;
z-index:1;
color: rgba(255,255,255,.2);
}
خروجی:
برای بردن icon به بیرون از div مجبور به استفاده از position هستیم و اگر دقت کرده باشید برای این که از divاصلی ما بیرون نزند در قسمت style درdiv اصلی overflow:hidden قرار گرفته تا قسمت های بیرون زده شده محو شوند. حالا کافی است هنگامی که موس روی div اصلی رفت icon ما بچرخد. برای چرخیدن کد زیر را اضافه می کنیم:
div#main:hover span.fa{
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
در کد بالا از Selector های css استفاده کردیم تا در هنگامی که div اصلی ما hover شد style های مورد نظر ما به icon اضافه ، شود.(transform:rotate برای چزخش المان های html است). خروجی:
همانطور که دیدید هیچ تغیری در هنگام رفتن موس به روی div به وجود نیامد. ولی این را از من بشنوید که کد درست کار می کند. در هنگامی که موس شما روی div می رود در کسری از ثانیه icon ما 360 درجه می چرخد و با حالت اول خود باز می گرده برای همین ما چرخشی نمی بینیم برای همین ما باید به icon خودمان transition بدیم تا آهسته بچرخد.
-moz-transition: transform .5s; -o-transition: transform .5s; -webkit-transition: transform .5s; transition: transform .5s;
در کد بالا ما برای پراپرتی transform یک transition نیم ثانیه ای قرار دادیم. خروجی:
کار تمام شد. پارسا صفوی - itpro باشید!!