{"id":2819,"date":"2021-08-10T13:15:32","date_gmt":"2021-08-10T13:15:32","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=2819"},"modified":"2023-02-28T01:01:54","modified_gmt":"2023-02-28T01:01:54","slug":"css-tutorial-cool-css-hover-effects-that-use-background-clipping","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-cool-css-hover-effects-that-use-background-clipping\/","title":{"rendered":"CSS Tutorial &#8211; Cool CSS Hover Effects That Use Background Clipping"},"content":{"rendered":"<p>We\u2019ve walked through a series of posts now about interesting approaches to CSS hover effects. We started with a\u00a0bunch of examples that use CSS\u00a0<code>background<\/code>\u00a0properties, then moved on to the\u00a0<code>text-shadow<\/code>\u00a0property where\u00a0we technically didn\u2019t use any shadows. We also combined them with CSS variables and\u00a0<code>calc()<\/code>\u00a0to optimize the code and make it easy to manage.<\/p>\n<p>In this article, we will build off those two articles to create even more complex CSS hover animations. We\u2019re talking about background clipping, CSS masks, and even getting our feet wet with 3D perspectives. In other words, we are going to explore advanced techniques this time around and push the limits of what CSS can do with hover effects!<\/p>\n<h3 id=\"hover-effects-using-backgroundclip\">Hover effects using\u00a0<code>background-clip<\/code><\/h3>\n<p>Let\u2019s talk about\u00a0<code>background-clip<\/code>. This CSS property accepts a\u00a0<code>text<\/code>\u00a0keyword value\u00a0that allows us to apply gradients to the\u00a0<em>text<\/em>\u00a0of an element instead of the actual\u00a0<em>background<\/em>.<\/p>\n<p>So, for example, we can change the color of the text on hover as we would using the\u00a0<code>color<\/code>\u00a0property, but this way we animate the color change:<br \/>\n<iframe style=\"width: 100%;\" title=\"CSS Tutorial - Cool CSS Hover Effects That Use Background Clipping 01\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/mdxjjMQ?default-tab=result&amp;theme-id=dark\" height=\"300\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/mdxjjMQ\"><br \/>\nCSS Tutorial &#8211; Cool CSS Hover Effects That Use Background Clipping 01<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<h3>HTML<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;h3 class=\"hover\"&gt;Hover Me&lt;\/h3&gt;<\/pre>\n<h3>CSS<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.hover {\r\n  color: #0000;\r\n  background: \r\n    linear-gradient(90deg,#1095c1 50%,#000 0) \r\n    var(--_p,100%)\/200% no-repeat;\r\n  -webkit-background-clip: text;\r\n          background-clip: text;\r\n  transition: .4s;\r\n}\r\n.hover:hover {\r\n  --_p: 0%;\r\n}\r\n\r\nbody {\r\n  height: 100vh;\r\n  margin: 0;\r\n  display: grid;\r\n  place-content: center;\r\n}\r\nh3 {\r\n  font-family: system-ui, sans-serif;\r\n  font-size: 3rem;\r\n  margin:0;\r\n  cursor: pointer;\r\n  padding: 0 .1em;\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>All I did was add\u00a0<code>background-clip: text<\/code>\u00a0to the element and\u00a0<code>transition<\/code>\u00a0the\u00a0<code>background-position<\/code>. Doesn\u2019t have to be more complicated than that!<\/p>\n<p>But we can do better if we combine multiple gradients with different background clipping values.<br \/>\n<iframe style=\"width: 100%;\" title=\"CSS Tutorial - Cool CSS Hover Effects That Use Background Clipping 02\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/RwMBBLe?default-tab=result&amp;theme-id=dark\" height=\"300\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/RwMBBLe\"><br \/>\nCSS Tutorial &#8211; Cool CSS Hover Effects That Use Background Clipping 02<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<h3>HTML<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;h3 class=\"hover\"&gt;Hover Me&lt;\/h3&gt;<\/pre>\n<h3>CSS<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.hover {\r\n  --s: 0.1em;   \/* the thickness of the line *\/\r\n  --c: #1095c1; \/* the color *\/\r\n  \r\n  color: #0000;\r\n  padding-bottom: var(--s);\r\n  background: \r\n    linear-gradient(90deg,var(--c) 50%,#000 0) calc(100% - var(--_p,0%))\/200% 100%,\r\n    linear-gradient(var(--c) 0 0) 0% 100%\/var(--_p,0%) var(--s) no-repeat;\r\n  -webkit-background-clip: text,padding-box;\r\n          background-clip: text,padding-box;\r\n  transition: 0.5s;\r\n}\r\n.hover:hover {\r\n  --_p: 100%\r\n}\r\n\r\nbody {\r\n  height: 100vh;\r\n  margin: 0;\r\n  display: grid;\r\n  place-content: center;\r\n}\r\nh3 {\r\n  font-family: system-ui, sans-serif;\r\n  font-size: 3rem;\r\n  margin:0;\r\n  cursor: pointer;\r\n  padding: 0 .1em;\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>In that example, I use two different gradients and two values with\u00a0<code>background-clip<\/code>. The first background gradient is clipped to the text (thanks to the\u00a0<code>text<\/code>\u00a0value) to set the color on hover, while the second background gradient creates the bottom underline (thanks to the\u00a0<code>padding-box<\/code>\u00a0value). Everything else is straight up copied from\u00a0the work we did in the first article\u00a0of this series.<\/p>\n<p>How about a hover effect where the bar slides from top to bottom in a way that looks like the text is scanned, then colored in:<br \/>\n<iframe style=\"width: 100%;\" title=\"CSS Tutorial - Cool CSS Hover Effects That Use Background Clipping 03\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/XWEBBVR?default-tab=result&amp;theme-id=dark\" height=\"300\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/XWEBBVR\"><br \/>\nCSS Tutorial &#8211; Cool CSS Hover Effects That Use Background Clipping 03<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<h3>HTML<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;h3 class=\"hover\"&gt;Hover Me&lt;\/h3&gt;<\/pre>\n<h3>CSS<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.hover {\r\n  --b: 0.1em;   \/* the thickness of the line *\/\r\n  --c: #1095c1; \/* the color *\/\r\n  \r\n  color: #0000;\r\n  padding-block: var(--b);\r\n  background: \r\n    linear-gradient(var(--c) 50%,#000 0) 0% calc(100% - var(--_p,0%))\/100% 200%,\r\n    linear-gradient(var(--c) 0 0) 0% var(--_p,0%)\/var(--_p,0%) var(--b) no-repeat;\r\n  -webkit-background-clip: text,padding-box;\r\n          background-clip: text,padding-box;\r\n  transition: .3s var(--_s,0s) linear,background-size .3s calc(.3s - var(--_s,0s));\r\n}\r\n.hover:hover {\r\n  --_p: 100%;\r\n  --_s: .3s;\r\n}\r\n\r\nbody {\r\n  height: 100vh;\r\n  margin: 0;\r\n  display: grid;\r\n  place-content: center;\r\n}\r\nh3 {\r\n  font-family: system-ui, sans-serif;\r\n  font-size: 3rem;\r\n  margin:0;\r\n  cursor: pointer;\r\n  padding: 0 .1em;\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<h2 id=\"wrapping-up\">Wrapping up<\/h2>\n<p>Oof, we are done! I know, it\u2019s a lot of tricky CSS but (1) we\u2019re on the right website for that kind of thing, and (2) the goal is to push our understanding of different CSS properties to new levels by allowing them to interact with one another.<\/p>\n<p>You may be asking what the next step is from here now that we\u2019re closing out this little series of advanced CSS hover effects. I\u2019d say the next step is to take all that we learned and apply them to other elements, like buttons, menu items, links, etc. We kept things rather simple as far as limiting our tricks to a heading element for that exact reason; the actual element doesn\u2019t matter. Take the concepts and run with them to create, experiment with, and learn new things!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We\u2019ve walked through a series of posts now about interesting approaches to <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-tutorial-cool-css-hover-effects-that-use-background-clipping\/\" title=\"CSS Tutorial &#8211; Cool CSS Hover Effects That Use Background Clipping\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3803,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[203,202,200,197],"newstopic":[],"class_list":{"0":"post-2819","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"tag-background-clip","9":"tag-cool-css-hover-effects","10":"tag-css-code","11":"tag-css-tutorial"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2819","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=2819"}],"version-history":[{"count":3,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2819\/revisions"}],"predecessor-version":[{"id":2822,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2819\/revisions\/2822"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3803"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=2819"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=2819"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=2819"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=2819"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}