CSS odd kinky tips: parallax image, sticky footer mixed-mode, etc.

CSS is a unique language. At first glance, it seems simple, but some seem simple in theory, in practice, the effect is often not so obvious.

In this article, I'll share some useful tips unlikely to find in most CSS tutorial.

1. Sticky Footer

This very common requirement, but for beginners it can be a challenge.

For most projects, regardless of the size of content, we want the footer to stay at the bottom of the screen - if the content of the page through the view port, the footer should be adjusted.

Before CSS3, if you do not know the exact height of the foot, it is difficult to achieve this effect. Although we call it sticky footer , but you can not simply use  position: sticky to solve this problem, because it will block content.

Today, most compatible solution is to use  flexbox . The main practice is the main content of the page that contains 
div the use of less well-known on the  flex-grow property, in the following example, I use the  main label.

flex-grow Item flex relative to other control elements flex its container filling quantity. When the value is  0 , it does not grow, so we need to set it  1or more. In the following example, I use the shorthand property  flex: auto, it will be  flex-grow the default setting  1.

In order to prevent any unwanted behavior, we can also at  footer add tags  flex-shrink: 0. flex-shrink Indeed the  flex-growthproperties contrast, the control shrunk to a size suitable flex element of its container, it is set to  0 just prevent  footer shrink the label to ensure that it retains its size.

// html
<div id="document">
  <main>
    <h1>Everything apart from the footer goes here</h1>
    <p>Add more text here, to see how the footer responds!</p>
  </main>
  <footer>
    <h1>The footer goes here</h1>
  </footer>
</div>

// css
#document { 
    height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
  flex: auto;
}

footer {
    flex-shrink: 0;
}

/* Other styling elements, that are not necessary for the example */

* {
  margin: 0;
  font-family: Candara;
}

h1, p {
  padding: 20px;
}

footer {
  color: white;
  background: url(https://images.unsplash.com/photo-1550795598-717619d32900?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80);
  background-position: center; 
  background-repeat: no-repeat;
  background-size: cover;
}

footer > h1 {
  text-shadow: 1px 1px 4px #00000080;
}
web前端开发学习Q-q-u-n： 784783012 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路

2. Zoom-on-Hover

zoom-on-hover  effect is a good way to draw attention to the clickable image. When the user hover above, the image is slightly enlarged, but its size remains unchanged.

To achieve this effect, you need a  div label wrapped  img label.

For this effect to take effect, you need to set the parent element  width and  height , and make sure  overflow to  hidden, then, you can convert any type of animation effect is applied to the internal images.

// html
<div class="img-wrapper">
    <img class="inner-img" src="https://source.unsplash.com/random/400x400" />
</div>

<!-- Additional examples -->

<div class="img-wrapper">
    <img class="inner-img" src="https://source.unsplash.com/random/401x401" width="400px" height="400px" />
</div>

<div class="img-wrapper">
    <img class="inner-img" src="https://source.unsplash.com/random/402x402" width="400px" height="400px" />
</div>

// css
.img-wrapper {  
  width: 400px;
  height: 400px;
  overflow: hidden; 
}

.inner-img {
  transition: 0.3s;
}

.inner-img:hover {
  transform: scale(1.1);
}

3. Instant night mode

If you are looking for a quick way to apply "night mode" skin to your site, you can use  invert and  hue-rotate filters.

filter: invert() It ranges from 0 to 1, wherein  1 from white to black.

filter: hue-rotate() Change the color content elements, so that they remained more or less the same level of separation, a value in the range  0deg to  360deg.

By a combination of these effects in  body night mode on the label, you can quickly try the site (note that in order to influence the background, you have to give it a color.)

Using these settings, we can transform an instant to Google's home page:

4. Custom point

To create a custom unordered list bullets as you can use  content attributes and  ::before pseudo-elements.

In the following CSS, I use  .complete and  .incomplete two classes to distinguish between two different types of bullets.

ul {
  list-style: none;
}
ul.complete li::before {
  content: '