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

ترفند های css


css tricks
css tricks


سلام به همه دوستانی که این روز ها توی قرنطینه حوصلشون سر رفته . امروز براتون تیکه کد 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; }

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

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

emojicsshtmlترفند های css
Just Code | React JS Developer | Wordpress | Website UI/UX
شاید از این پست‌ها خوشتان بیاید