css cheatsheet

Table of Contents

here store some simple snippet of css. In time some of them may be too large and should be made their own node.

1. Simple Horizontal Scroll   ATTACH

_20240116_170901screenshot.png 

<div class="scroll-container">
  <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
  <img src="img_forest.jpg" alt="Forest" width="600" height="400">
  <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
  <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</div>

div.scroll-container {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
}
  • white-space:nowrap; make images go all the way to right(where it is not seen)
  • overflow:auto; or overflow:scroll; make the div fix size, and scrollable to left/right to view overflowed content
  • w3schools

2. Position Absolute Middle

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
  • top: 50% fix the div 50% to top of its parent
  • left:50% same

3. fit parent

.card-img{
width: 100%;
height: 100%;
}
  • fit 100 of parent

4. gradient background animation

This is done by creating a very large background with 4 gradients regions, and moving the large background gradient image. 

body {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 100vh;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

The merit of it is that it is very simple and works out of box basically anywhere.

Open a website, and add this into head with a stylesheet tag, and enjoy yourself

A similar interactive CSS constructor is here here

Backlinks

css

Cascading Style Sheets is a markup language with

  • basically all label:value pairs
  • a large set of builtin properties, including colours/patterns, position styles, common functionalitis like scroll, image auto resize… Sometimes stuff that should be done with actually functions, but very common so css include them and browsers render them.
  • a few syntax tweaks like classes/inheritance, class in css - class in html…

Author: Linfeng He

Created: 2024-04-05 Fri 02:23