94-8-1، 10:13 عصر
با نام و یاد خدا
سلام؛ تاسوعا و عاشورا را به همه ی مسلمانان تسلیت میگم.
* برای فراگیری این آموزش، لازم است به اندازه ی کافی با css و html آشنایی داشته باشید.
* در این آموزش، مراحل به طور مفید و مختصر گفته میشود:
1- ابتدا تگ های اصلی صفحه (+ تگ استایل) را مینویسیم:
2- حالا ساختار اصلی لوگو را (بدون hover) طراحی می کنیم:
3- حالا hover رو اضافه میکنیم. طوری که با هاور شدنِ «logo#»، دو دستور اعمال شود: 1- «pic#» بچرخد 2- رنگ «txt#» آبی شود:
* امیدوارم که کمکتون کرده باشم.
* اگه در رابطه با این مبحث سوال داشتید، لطفا مطرح کنید.
پایان
سلام؛ تاسوعا و عاشورا را به همه ی مسلمانان تسلیت میگم.
* برای فراگیری این آموزش، لازم است به اندازه ی کافی با css و html آشنایی داشته باشید.
* در این آموزش، مراحل به طور مفید و مختصر گفته میشود:
1- ابتدا تگ های اصلی صفحه (+ تگ استایل) را مینویسیم:
کد:
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>کد:
<html>
<head>
<style type="text/css">
#logo{font:125px'calibri';color:#333;display:inline-block;line-height:150px;}
#logo #pic{background-image:url('http://blogers.ir/forum/uploads/avatars/avatar_11687.png?dateline=1445605635');width:150;height:150;float:left;}
#logo #txt{float:right;}
</style>
</head>
<body>
<div id="logo">
<div id="txt">Smile</div>
<div id="pic"></div>
</div>
</body>
</html>کد:
<html>
<head>
<style type="text/css">
*{transition:transform 1s ease-in-out,color 1s ease-in-out;
-o-transition:transform 1s ease-in-out,color 1s ease-in-out;
-moz-transition:transform 1s ease-in-out,color 1s ease-in-out;
-webkit-transition:transform 1s ease-in-out,color 1s ease-in-out;}
#logo{font:125px'calibri';color:#333;display:inline-block;line-height:150px;}
#logo #pic{background-image:url('http://blogers.ir/forum/uploads/avatars/avatar_11687.png?dateline=1445605635');width:150;height:150;float:left;}
#logo #txt{float:right;}
#logo:hover #pic{transform:rotate(360deg);}
#logo:hover #txt{color:rgb(0,150,250);}
</style>
</head>
<body>
<div id="logo">
<div id="txt">Smile</div>
<div id="pic"></div>
</div>
</body>
</html>* اگه در رابطه با این مبحث سوال داشتید، لطفا مطرح کنید.
پایان
