CodemySite_Web development

When shopping online or browsing the galary,we'd like to zoom in the image which takes small space for neat view or loading speed related resons. And I found two plugin which is convient works well and sufficient,named intense-image.js and zooming.js.I will record below one by one. First one is intense.js. Github source DOWNLOAD Details: STEP1: link intense.js in the body. link dowload Github STEP2: An image derived from library with class name. data-title and data-caption are the caption of the image at absolute position. When the page is loaded,the image excutes the Intense() function. You can change cursor images and size in Css. Second is zooming.js: Github source DOWNLOAD Details: STEP1: link zooming.js in body link download Github  and more document STEP2: The image wrapped in the grid. After the content is loaded,the zoomimg function excutes with customized options. I changes fews ,such as background color,background opacity,resi...

Page here Github Download STEP1: HTML Three columns contain cover with title and logo image, and the content is the menu lists hidden first. STEP2: CSS Google Fonts imported. The container display flex. Each screen ocupied same space with flex-grow:1. The pink squre centered all the tag inside. Different background color for screen and content. When hovering, the screen expand to 5 times. The content can not see at first.When hovering the button and the content, the content show up with animation.

Slider without Javascript. Learned from Online Tutorial Page here Github Download Step1: html There are five slide section among div classed slider. The container is the paragrapy outside the silder. Each slide gets some words content and an image as background showing. Step2: CSS  Google font imported. The slider takes 100%width with position. Each slide should be hidden with infinite animation named slider. 0%-5% transform visibility from hidden to visible,meanwhile the opacity 0 to 1. 5%-25% stay visible  25%-30% transform visibility and opacity  The style of image and content which is upper layer of image. The animation delay every four seconds for each slide. More CSS slider  examples: View swither without js  CSS slider without js

Thirteen days left for Christmas,it 's good time to glow friends and family 's  hearts.  Page HERE Github DOWNLOAD STEP1: html  Each letter wrapped in tag span.   = space STEP2: css  Google Fonts import. The background is a centered image. And make sure everything inside is in the center with display flex. Outline is the inner border of container. Border is the out border of container. Each letter animates by order with animation-delay 0.25s. There are 18 spans,so the delaytime total is 3.75s which is the exact animation duration time.  The animate session: First and last time,the color is white , blur, text-shadow glowing. Other time, the text is normal without fancy glowing. Responsive format for different screen devices with @media.

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 ...

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.