CodemySite_Web development

Enjoying the images gallery is a fancy thing. It's always shown on photograpy and  e-commercial websites.  The plugin called FancyBox is a amazing stuff which is easy to apply to your sites such as the animation above.  First, it's basic to link the jQuery and fancybox js file which are downloaded from the  https://github.com/fancyapps/fancyBox  and also you can check the documents.  Secondly,the HTML contained the five pictures with link you can click on.  Lastly,jQuery is about fancybox(), the helpers, buttons,thumbs,openEffect,closeEffect.  helper: button{} is the control button at the top of page. thumbs{}is the thumbs of pictures at the bottom of the page,which can be set the width and height. title{} is the descriptions of the pictures below it,which have four type:inside,outside,over,float. openEffect and closeEffect are elestic,none or fade.  preEffect :'none', nextEffect :'none' My demo free download...

When we tours the shopping websites, the products pictures sometimes show as normal size.  If we wanna look up the detail large pictures, the better convient way is to click. Here I monitor the gallary called Lightbox without JavaScript and the code is clear and simple. HTML contains the small picture with a link to the large picture. The large picture classed lightbox can be click.  CSS is clear for the main elements. Becauuse of the same picture, I set the max-width to resize the image,such as 20% of small picture and 80% of large picture.  The lightbox firstly should be hide with display:none.  z-index is larger than the small picture 0. The background is responsive with browser size for 100% fixed.   When users target the lightbox, the large picture show up and hide. Moreover, I notice there is a default blue outline in Chrome browser,so the outline sets to none.  Full code in my Codepen  Here

Scroll indicator is a better experience for users when surfing the article page. This styling could be with Javascript, and here also only css.  HTML is contained two parts: the fixed header with the title, and the main part with the article details.   The header should be fixed for good looking. And the main part move down more than the height of header using margin-top.  Setting padding to percenetage makes the content in the center of the page ,which is responsive website.  @supports   The  @supports   CSS   at-rule  associates a set of nested statements, in a CSS block, that is delimited by curly braces, with a condition consisting of testing of CSS declarations, that is property-value pairs, combined with arbitrary conjunctions, disjunctions, and negations of them. Such a condition is called a  supports condition . @supports ( prop : value ) { /* more styles */ } height:100vh means the height of displa...