Now we’re going to create an interaction that will be a trigger for the whole page. Voila! Your beautiful cursor is ready to be used! Creating an interaction Borders: solid 2px line with the color of #f07 (we may make it transparent so that it doesn’t get in the way too much).Position: absolute (do not align it in any way or the centering will be off).The outer circle is a div with these parameters: Border-radius: 50% for the perfect roundness.The inner dot is a div with these parameters: ![]() Since we’re going to create a slightly complex cursor, the object will consist of two elements: an inner dot and an outer circle. Now we’ll create the actual cursor object. We centered the cursor’s children to create the interaction that follows the pointer device. ![]() ![]() This div will contain our always-on-top cursor. Z-index: 100 (this has to be the highest number on your site).Setting the scene and creating our elementsĬreate a cursor-wrapper div with the following parameters:
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |