{"id":5369,"date":"2019-03-19T20:49:15","date_gmt":"2019-03-19T19:49:15","guid":{"rendered":"https:\/\/monodes.com\/predaelli\/?p=5369"},"modified":"2019-03-19T08:14:00","modified_gmt":"2019-03-19T07:14:00","slug":"8-useful-css-tricks-parallax-images-sticky-footers-and-more","status":"publish","type":"post","link":"https:\/\/monodes.com\/predaelli\/2019\/03\/19\/8-useful-css-tricks-parallax-images-sticky-footers-and-more\/","title":{"rendered":"8 useful CSS tricks: Parallax images, sticky footers and more"},"content":{"rendered":"

8 useful CSS tricks: Parallax images, sticky footers and more<\/a><\/em><\/p>\n

This article shares some of my most satisfying \u201cah-hah!\u201d moments learning CSS, and I hope it can prompt some \u201cah-hah!\u201d moments for you too.<\/p>\n

    \n
  1. Sticky Footer<\/em><\/a><\/li>\n
  2. Zoom-on-Hover Images<\/em><\/a><\/li>\n
  3. Instant Night Mode<\/em><\/a><\/li>\n
  4. Custom Bullet Points<\/em><\/a><\/li>\n
  5. Parallax Images<\/em><\/a><\/li>\n
  6. Animation with Cropped Images<\/em><\/a><\/li>\n
  7. Blend Modes<\/em><\/a><\/li>\n
  8. Pinterest-style Image Board<\/em><\/a><\/li>\n<\/ol>\n<\/blockquote>\n

    <\/p>\n

    \n

    8 useful CSS tricks: Parallax images, sticky footers and\u00a0more<\/h1>\n
    \n
    \"Go<\/a><\/div>\n
    \n
    Bret Cameron<\/a><\/div>\n<\/div>\n<\/div>\n
    \n
    \n
    <\/div>\n
    <\/div>\n<\/div>\n<\/figure>\n
    \n
    \n
    \n
    <\/div>\n<\/div>\n<\/figure>\n<\/div>\n
    \n

    This article shares some of my most satisfying \u201cah-hah!\u201d moments learning CSS, and I hope it can prompt some \u201cah-hah!\u201d moments for you too.<\/em><\/p>\n

    CSS is a unique language. At first glance, it can seem very simple. But certain effects that look simple in theory are often a little less obvious in practice.<\/p>\n

    In this article, I\u2019ll share several useful tips and tricks that represent key developments in my own journey learning CSS. This article isn\u2019t about demonstrating how complex CSS can get. Rather, it shares several useful tricks that you\u2019re unlikely to find in most CSS tutorials.<\/p>\n

    If you\u2019ve got any CSS tips of your own, I\u2019d love if you shared them in the comments!<\/p>\n

    Contents<\/h3>\n
      \n
    1. Sticky Footer<\/em><\/a><\/li>\n
    2. Zoom-on-Hover Images<\/em><\/a><\/li>\n
    3. Instant Night Mode<\/em><\/a><\/li>\n
    4. Custom Bullet Points<\/em><\/a><\/li>\n
    5. Parallax Images<\/em><\/a><\/li>\n
    6. Animation with Cropped Images<\/em><\/a><\/li>\n
    7. Blend Modes<\/em><\/a><\/li>\n
    8. Pinterest-style Image Board<\/em><\/a><\/li>\n<\/ol>\n

      + <\/em>Additional Resources<\/em><\/a><\/p>\n

      1. Sticky\u00a0Footer<\/h3>\n

      This very common requirement can be a puzzle for beginners.<\/p>\n

      For the most projects, you\u2019ll want a footer that stays at the bottom of the screen, regardless of the size of the content\u200a\u2014\u200aif the page\u2019s content goes past the view-port, the footer should adapt.<\/p>\n

      Before CSS3, it was very difficult to achieve this effect without knowing the exact height of your footer. And, although we call it a sticky footer, you can\u2019t simply solve this with position: sticky<\/code>\u00a0, because that can block content.<\/p>\n

      Today, the most compatible solution is to use Flexbox. The key is to use the less well-known flex-grow<\/code> property on the div<\/code> containing the main content of the page; in the example below, I\u2019m using the main<\/code> tag.<\/p>\n

      flex-grow<\/code> controls how much a flex item fills its container, relative to other flex elements. With a value of 0<\/code>, it won\u2019t grow at all, and so we need to set it to 1<\/code> or more. In the example below, I\u2019ve used the shorthand property flex: auto<\/code>\u00a0, which sets flex-grow<\/code> to 1<\/code> by default.<\/p>\n

      To prevent any unwanted behaviour, we can also add flex-shrink: 0<\/code> to the footer<\/code> tag. flex-shrink<\/code> is effectively the opposite of the flex-grow<\/code> property, controlling the amount a flex element shrinks to fit into its container, and setting it to 0<\/code> will prevent the footer from shrinking at all\u200a\u2014\u200aensuring that it retains its dimensions.<\/p>\n

      \n
      \n
      <\/div>\n
      <\/div>\n<\/div>\n<\/figure>\n<\/div>\n
      \n
      \n
      \n