{"id":3291,"date":"2020-09-29T15:45:31","date_gmt":"2020-09-29T15:45:31","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3291"},"modified":"2023-03-02T09:48:44","modified_gmt":"2023-03-02T09:48:44","slug":"css-tutorial-css-block-revealing-effect","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-css-block-revealing-effect\/","title":{"rendered":"CSS Tutorial &#8211; CSS Block Revealing Effect"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; The <em>effect<\/em>\u00a0first shows a decorative\u00a0<em>block<\/em> element drawn and when it starts to decrease its size, it uncovers some content underneath. Change\u00a0<code>--td<\/code>\u00a0(total duration) to increase\/decrease the time of the effect.<\/p>\n<p>&nbsp;<\/p>\n<p><iframe style=\"width: 100%;\" title=\"Untitled\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/bGvXGmG?default-tab=result&amp;theme-id=dark\" height=\"400\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/bGvXGmG\"><br \/>\nUntitled<\/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<p>&nbsp;<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;h1 class=\"block-effect\" style=\"--td: 1.2s\"&gt;\r\n  &lt;div class=\"block-reveal\" style=\"--bc: #4040bf; --d: .1s\"&gt;Block&lt;\/div&gt;\r\n  &lt;div class=\"block-reveal\" style=\"--bc: #bf4060; --d: .5s\"&gt;Revealing Effect&lt;\/div&gt;\r\n&lt;\/h1&gt;\r\n\r\n&lt;div class=\"info\"&gt;\r\n  &lt;p&gt;Change --td (total duration) to increase\/decrease the time of the effect in HTML panel.&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">\/* reset *\/\r\n*,\r\n*::before,\r\n*::after {\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: space-around;\r\n  align-items: center;\r\n\r\n  min-height: 100vh;\r\n  padding: 20px;\r\n\r\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\r\n}\r\n\r\n\r\n\/* other *\/\r\n.info {\r\n  margin: 20px 0;\r\n  text-align: center;\r\n}\r\n\r\np {\r\n  color: #2e2e2e;\r\n  margin-bottom: 20px;\r\n}\r\n\r\n\r\n\/* block-$ *\/\r\n.block-effect {\r\n  font-size: calc(8px + 6vw);\r\n}\r\n\r\n.block-reveal {\r\n  --t: calc(var(--td) + var(--d));\r\n\r\n  color: transparent;\r\n  padding: 4px;\r\n\r\n  position: relative;\r\n  overflow: hidden;\r\n\r\n  animation: revealBlock 0s var(--t) forwards;\r\n}\r\n\r\n.block-reveal::after {\r\n  content: '';\r\n\r\n  width: 0%;\r\n  height: 100%;\r\n  padding-bottom: 4px;\r\n\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n\r\n  background: var(--bc);\r\n  animation: revealingIn var(--td) var(--d) forwards, revealingOut var(--td) var(--t) forwards;\r\n}\r\n\r\n\r\n\/* animations *\/\r\n@keyframes revealBlock {\r\n  100% {\r\n    color: #0f0f0f;\r\n  }\r\n}\r\n\r\n@keyframes revealingIn {\r\n\r\n  0% {\r\n    width: 0;\r\n  }\r\n\r\n  100% {\r\n    width: 100%;\r\n  }\r\n}\r\n\r\n@keyframes revealingOut {\r\n\r\n  0% {\r\n    transform: translateX(0);\r\n  }\r\n\r\n  100% {\r\n    transform: translateX(100%);\r\n  }\r\n\r\n}\r\n\r\n.abs-site-link {\r\n  position: fixed;\r\n  bottom: 20px;\r\n  left: 20px;\r\n  color: hsla(0, 0%, 0%, .6);\r\n  font-size: 16px;\r\n}<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; The effect\u00a0first shows a decorative\u00a0block element drawn and when <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-tutorial-css-block-revealing-effect\/\" title=\"CSS Tutorial &#8211; CSS Block Revealing Effect\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3946,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[308,268,197,314,103,227],"newstopic":[],"class_list":{"0":"post-3291","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"tag-css-float","9":"tag-css-grid","10":"tag-css-tutorial","11":"tag-revealing-effect","12":"tag-web-design","13":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3291","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=3291"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3291\/revisions"}],"predecessor-version":[{"id":3293,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3291\/revisions\/3293"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3946"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3291"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}