CodemySite_Web development

GitHub here This page animated with CSS3 themed halloween. Step1: html The animated couple and a witch are in the head section. Step2: css The background of first section is fixed. Title of the page animated named pop which linear up. The woods and couple are both positioned absolute. The couple animates infinite positions. First witch is in first section. When the page loaded, she fly lined with position. The same as witch2 but in the body section.  Some stylish for body and footer words.

This demo learned from Kevin Powell youtube My demo Github  STEP1: html The card has two sides which contain some content. STEP2: CSS The Font is imported from Google Fonts. Transform style is preserved-3d which is fancy way of transitions. When hovering,the card will rotate 0.5 turn with  y axis. Each side of  the card is transformed preserve-3d. backface-visibility:hidden  The back side of the card will hide. Card_front:before is a border of the front and translate with Z axis,which will looks like different layers(same as z-index). And contents are all trasformed same way. This is a concise layout of flip card with transform. More demo related css 3d layered hover effects css button hover effects

Learn from youtube video Github here Step1: Link Fontawesome icon stylesheet Step2: HTML  Each five unordered list item which can hover contains five span tag.  <span> is the layer of the card.And the last one span is the icon showing upper the shadows. <span> class is according to the FontAwesome settings. Step3: css  All the items should be in the center with the flex display. Each list item transformed the shape with rotate and skew. When hovering the each item, there is a shadow under each layer which will show more layered. Each span is different position and opacity,which looks like in different z-index. Change the color of each span.

mouseenter VS mouseover When using mouseover/mouserout, if mouse moves to child element,even though it doesn't leave parent element, the mouseout event will occur. When using mouseenter/mouseleave,if mouse doesn't leave the parent element,and moving in the child element,the mouseleave event won't occur. There is a example explaination by Ben Nadel  video

Hover effects with CSS Github here STEP1: HTML <a>link for a button STEP2: CSS Link the AmaticSC Font from Google Fonts. All the content in the middle of the body. :before----the underline of the button.  Transition the width and height of the underline with delay. transform-style:flat(default)/preserve-3d. Similarly,:after is the background of button. Transition with scaleX() from right side.

Github here Step1: html Link css and font type from google Fonts Step2: CSS The background is an image covered. Make the words bolder for the background image showing. background-clip:text --------clip the text shape from the background image. And transparent it. How to make text-shadow: With pseudo class, it will be another text of the content. And it's normal to add text shadow.Be sure to transparent the content.