{"tag":{"id":"56744721958ef13879b94b91","name":"CSS","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1513316949083/By6UMkbfG.png","slug":"css","tagline":"A style sheet language used for describing the presentation of a document written in a markup language.","__typename":"Tag"},"publication":{"id":"6277bd99dc122f5a4f21fcc1","url":"https://blog.alicalimli.com","canonicalURL":"https://blog.alicalimli.com","title":"Ali Calimli","displayTitle":null,"descriptionSEO":"","username":"alicalimli","about":{"html":"","__typename":"AboutPublication"},"enabledFeatures":{"newsletter":true,"viewCount":false,"readTime":true,"__typename":"PublicationFeatures"},"ogMetaData":{"image":null,"__typename":"OpenGraphMetaData"},"author":{"id":"61fd31d88d15cb3e7ce61084","name":"Ali Calimli","username":"alicalimli","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1669534247642/LG_gbPXOd.jpeg","coverPhoto":"https://cdn.hashnode.com/res/hashnode/image/upload/v1652014315645/CagpFj94l.png","__typename":"User"},"preferences":{"logo":null,"darkMode":{"logo":null,"enabled":true,"__typename":"DarkModePreferences"},"customCSS":{"enabled":true,"staticMin":".blog-page-title{color:green !important}","homeMin":null,"__typename":"CustomCSSPreferences"},"navbarItems":[],"enabledPages":{"badges":true,"newsletter":true,"members":null,"__typename":"PagesPreferences"},"customCSSDraft":{"enabled":null,"staticMin":null,"homeMin":null,"__typename":"CustomCSSPreferences"},"layout":"magazine","disableFooterBranding":false,"__typename":"Preferences"},"favicon":"https://cdn.hashnode.com/res/hashnode/image/upload/v1682422242684/Ho6Z42pg6.webp","headerColor":"","metaTags":"","integrations":{"fbPixelID":"","fathomSiteID":"","fathomCustomDomainEnabled":null,"fathomCustomDomain":"","hotjarSiteID":"","matomoSiteID":null,"matomoURL":"","gaTrackingID":"G-S7CH89Q1T4","plausibleAnalyticsEnabled":null,"wmPaymentPointer":"","__typename":"PublicationIntegrations"},"postsCount":5,"impressum":"","isTeam":false,"links":{"twitter":"https://twitter.com/alicalimli_dev","instagram":"","github":"https://github.com/alicalimli/","website":"https://alicalimli.com/","hashnode":"https://hashnode.com/@alicalimli","youtube":"","dailydev":"","linkedin":"https://www.linkedin.com/in/alicalimli/","mastodon":"","__typename":"PublicationLinks"},"domainInfo":{"domain":{"value":"blog.alicalimli.com","certIssued":true,"ready":true,"__typename":"DomainStatus"},"wwwPrefixedDomain":{"value":"","certIssued":false,"ready":false,"__typename":"DomainStatus"},"__typename":"DomainInfo"},"__typename":"Publication","posts":{"edges":[{"node":{"id":"644e6542d52418fec1855a6f","title":"Windows 10 Setting Hover Effect: A Step By Step Tutorial","slug":"windows-10-setting-hover-effect-a-step-by-step-tutorial","publishDate":"2023-04-30T12:55:30.719Z","cuid":"clh3eztzz00000amthi2k023n","url":"https://blog.alicalimli.com/windows-10-setting-hover-effect-a-step-by-step-tutorial","subtitle":"Learn how to create this windows 10 settings hover effect that you can use in your website with HTML, CSS and JavaScript","brief":"HTML Structure\n

Lorem Ipsum

\n Hover me\n\n\nCSS Styles\nbody{\n background: #111;\n}\n\n.btn {\n bac...","readTimeInMinutes":3,"views":282,"author":{"id":"61fd31d88d15cb3e7ce61084","username":"alicalimli","name":"Ali Calimli","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1669534247642/LG_gbPXOd.jpeg","followersCount":65,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1682599718632/d77cc287-2543-40a2-ba16-c5f09cf71449.gif","isPortrait":false,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"NjQ0YTcxODJiOTIzZGRjOWE3ZDU4M2UyXzIwMjMtMDQtMjdUMTI6NTg6NDIuMjIzWg==","__typename":"PostEdge"},{"node":{"id":"6447d0a49a816f5f18090539","title":"Windows 10 Calendar Hover Effect: A Step By Step Tutorial","slug":"windows-10-calendar-hover-effect-a-step-by-step-tutorial","publishDate":"2023-04-25T13:07:48.059Z","cuid":"clgwa8dln001309lbcfaqf2mi","url":"https://blog.alicalimli.com/windows-10-calendar-hover-effect-a-step-by-step-tutorial","subtitle":"Learn how to achieve this awesome windows 10 calendar like border hover effect that you can use in your website","brief":"HTML Structure\nLet's start by creating the HTML structure, We will create four boxes only to keep this tutorial simple.\n

\n ...","readTimeInMinutes":3,"views":1827,"author":{"id":"61fd31d88d15cb3e7ce61084","username":"alicalimli","name":"Ali Calimli","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1669534247642/LG_gbPXOd.jpeg","followersCount":65,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1682325302988/21c10456-6db5-431a-be27-924244bf2e31.gif","isPortrait":false,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"NjQ0N2QwYTQ5YTgxNmY1ZjE4MDkwNTM5XzIwMjMtMDQtMjVUMTM6MDc6NDguMDU5Wg==","__typename":"PostEdge"},{"node":{"id":"64452049b4fbd7a7510f32a2","title":"Learn how to create this awesome border hover effect","slug":"learn-how-to-create-this-awesome-border-hover-effect","publishDate":"2023-04-23T12:10:49.980Z","cuid":"clgtdbev0000109mf9ep0afo1","url":"https://blog.alicalimli.com/learn-how-to-create-this-awesome-border-hover-effect","subtitle":"In this blog you'll be able to learn how to achieve this awesome gradient border effect that circles in an element on hover","brief":"HTML Setup\n\n\nCSS Styles\nbody {\n background: #111;\n}\n\n.btn {\n cursor: pointer;\n background: none;\n border: none;\n color: white;\n border-radius: 100vmax;\n padding: 1rem 2rem;\n position: relative;\n}\n\nTh...","readTimeInMinutes":2,"views":319,"author":{"id":"61fd31d88d15cb3e7ce61084","username":"alicalimli","name":"Ali Calimli","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1669534247642/LG_gbPXOd.jpeg","followersCount":65,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1682241709896/48a4796d-22b4-497e-a4c9-afd16c0ef924.gif","isPortrait":false,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"NjQ0NTIwNDliNGZiZDdhNzUxMGYzMmEyXzIwMjMtMDQtMjNUMTI6MTA6NDkuOTgwWg==","__typename":"PostEdge"}],"pageInfo":{"endCursor":"NjQ0NTIwNDliNGZiZDdhNzUxMGYzMmEyXzIwMjMtMDQtMjNUMTI6MTA6NDkuOTgwWg==","hasNextPage":false,"__typename":"PageInfo"},"__typename":"PostConnection"}}}

CSS

How CSS Works In Browsers