خواندن ۱ دقیقه·۵ سال پیش

ترفند های css

سلام به همه دوستانی که این روز ها توی قرنطینه حوصلشون سر رفته . امروز براتون تیکه کد html و css آوردم شاید بدردتون بخوره و با اون میتونید کارای خلاقانه خفن بکنین .

با این ترفند میتونین موس رو در جای های مختلف به شکل های متفاوتی در بیارین :

اول کد های html

`<body>
<div id=&quothappy&quot class=&quotcursor&quot><p> happy </p></div>
<div id=&quotsad&quot class=&quotcursor&quot><p> sad </p></div>
<div id=&quotpoker&quot class=&quotcursor&quot><p> poker </p></div>
</body>

به همین سادگی htmlش تموم شد آماده اید بریم css هم انجام بدیم ؟؟؟

سعی کن کپی پیست نکنی تا تو ذهنت بمونه همش

حالا کد های css :

.cursor{
   width: 186px;
   height: 186px;
   position: relative;
   border-radius: 12px;
   background-color: #881238;
   box-shadow: 0px 4px 12px rgba(105, 6, 38, 0.25);
   display: inline-block;
   margin-left: 24px;
   transition: 200ms ease;
}
.cursor:hover{
   background-color: #BC144A;
}
.cursor:first-of-type{
   margin-left: 0;
}
.cursor p {
   width: 100%;
   text-align: center;
   margin-top: 0px;
   margin-bottom: 0px;
   line-height: 186px;
   color: white;
   pointer-events: none;
}
#poker{
   cursor: url(&quothttps://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/meh.png&quot),auto;
}
#sad{
   cursor: url(&quothttps://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png&quot),auto;
}
#happy{
   cursor: url(&quothttps://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png&quot),auto;
}

اگر سوالی داشتید بهم پیام بدید خوشحال میشم کمکتون کنم ..

تا ترفندی دیگه خدانگهدار

emoji css html ترفند های css

masoodsh73

Just Code | React JS Developer | Wordpress | Website UI/UX

شاید از این پست‌ها خوشتان بیاید