در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

درست کردن لینک "خدمات و سرویس ها" ی سایت itpro

سلام به دوستان itpro !!

توی سایت قسمت بالای سایت itpro یه بخش قشنگ وجود داره که توی اون لینک های "خدمات و سرویس ها "و" تبیلغات "وجود دارد. ما می خوایم امروز یاد بگیریم که چطور این حالت لینک ها رو ایجاد کنیم.

برای شروع کار ما نیاز به Font Awsome داریمکه میتونید از لینک زیر دانلودش کنید:

Font Awesome

اول یک پوشه برای پروژه ی خودمون ایجاد می کنیم و در اون یک فایل 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 ما در هنگام چرخش به روی متن قرار نگیرد.

خروجی:

css hover

همانطور که دیدید هنوز icon دیده نشد. برای همین کمی style به آن می دهیم.

span.fa{
    color:#1d599e;
    position:absolute;
    top:10px;
    left:-20px;
    font-size:8em;
    z-index:1;
    color: rgba(255,255,255,.2);
}

خروجی:

css hover

برای بردن 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 است).

خروجی:

css hover

همانطور که دیدید هیچ تغیری در هنگام رفتن موس به روی div به وجود نیامد. ولی این را از من بشنوید که کد درست کار می کند. در هنگامی که موس شما روی div می رود در کسری از ثانیه icon ما 360 درجه می چرخد و با حالت اول خود باز می گرده برای همین ما چرخشی نمی بینیم برای همین ما باید به icon خودمان transition بدیم تا آهسته بچرخد.

  -moz-transition: transform .5s;
  -o-transition: transform .5s;
  -webkit-transition: transform .5s;
  transition: transform .5s;

در کد بالا ما برای پراپرتی transform یک transition نیم ثانیه ای قرار دادیم.

خروجی:

چرخیدن عکس

کار تمام شد.

پارسا صفوی - itpro باشید!!

0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....