CodemySite_Web development

The animated ornaments background themed Christmas with CSS. Github DOWNLOAD Step1: html The class named move saved the ornaments elements. Step2: css It's point to place the ornaments at absolute position. First layer is .move with animation named animate. And the second layer is .move:before named animate-reverse which animated reverse based on the @keyframes animated position. The third layer is .move:after named animate,but with the animation-delay .

The text background is filled by an image with animations. Github DOWNLOAD Step1: HTML <h1>tag  Step2: CSS The yellow frame can center everything inside. And background is the smoke image. The main point is the way with background-clip which filling the text with it. More about background-clip: /* Keyword values */ background-clip : border-box ; background-clip : padding-box ; background-clip : content-box ; background-clip : text ; /* Global values */ background-clip : inherit ; background-clip : initial ; background-clip : unset ; border-box The background extends to the outside edge of the border (but underneath the border in z-ordering). padding-box The background extends to the outside edge of the padding. No background is drawn beneath the border. content-box The background is painted within (clipped to) the content box. text   The background is painted within (clipped to) the foreground text. More explaination ...