CSS tricks

Cube with transform: rotateX() etc. and @keyframes

1

2

3

4

5

6

Custom border for element with clip-path

Line numbers using counter-*


                code.code {
                    display: block;
                    background-color: black;
                    color: white;
                    counter-reset: code-line 0;
                
                    /* Nested CSS should work nowadays in vanilla */
                    p::before {
                        content: counter(code-line) ": ";
                        counter-increment: code-line;
                        width: 2em;
                        display: inline-block;
                    }
                    p {
                        margin: 0 0 0 5px;
                        whitespace: pre;
                    }
                }

Container relative units


                    .left
                    width -> 30cqw = 60vw*0.3


                    .contain-container {
                            container-name: test;
                            container-type: size;
                            width: 60vw;
                            height: 20em;
                            display: flex;
                            justify-content:space-between;
                            background-color: beige;
                            padding: 10px;
                        
                            .left.code {
                                background-color: blue;
                                width: 30cqw;
                            }
                            .right.code {
                                width: 60cqw;
                                background-color: gray;
                            }
                        }