8+ CSS Tips and Tricks to Make You a Better Developer

Solve the problem of image 5px spacing

[{"selector":"#anim-d6d55175-b2cb-48ee-b5e8-a34da1230ebf","keyframes":{"opacity":[1,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-a3c780de-4e22-42ef-a7d3-fadc7ea08ec7","keyframes":{"transform":["scale(3)","scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}]

The element height is the same as the window

[{"selector":"#anim-1de0af44-f272-4737-b805-13de27a8e458","keyframes":{"transform":["translate3d(-100%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2e19e50d-90cb-4231-a05d-95b89de80394","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cb2a317a-bcd2-47c2-9c6d-f2c797cd0a3b","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}]

Modify the input placeholder style

[{"selector":"#anim-451a82ba-7a41-401b-9160-6dda9791beea","keyframes":{"transform":["translate3d(93.42404%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e55aead9-6dec-4871-9957-3c16885aa82f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-07b69d50-db71-42dd-afc8-d9c31f768cab","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}]

Use the “:not” selector

[{"selector":"#anim-9d77dfcd-f6de-498c-a5d0-8dc6192cd77a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5bf669ea-8477-4263-b584-f118e9afdd64","keyframes":{"transform":["translate3d(-100%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Use flex layout to fix an element intelligently at the bottom

[{"selector":"#anim-6355ab7a-bf73-4fce-b489-475bdbe60272","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-883cdbb4-1ca9-445c-abfb-cddcee5d5d3d","keyframes":{"transform":["translate3d(93.42404%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Use “caret-color” to modify the cursor color

[{"selector":"#anim-07658626-a04b-47fd-abcb-39162596d7e5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}]

Remove the arrow at the end of type=”number”

[{"selector":"#anim-b5b9102f-dcd4-4a2d-b984-4ff20faefa28","keyframes":{"transform":["translate3d(-100%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-962aaffd-885b-46a5-8156-39464e35b6a7","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c9df2168-d056-4249-a96c-5f282a4e42f5","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}]

“outline:none“ removes the input status line

[{"selector":"#anim-d828285c-8db0-4f65-b8f0-853b84126e46","keyframes":{"transform":["translate3d(93.42404%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d9de9b77-d66d-4c83-b92c-a66b84a798fc","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-74ad03db-7905-4c3b-a46f-a80b1d00fccd","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}]

Check Out More Stories

[{"selector":"#anim-6a46368a-4e5b-4c84-945d-0654fa4480a2","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-ef5034d9-dd41-4679-a446-526ce657aae6","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] Learn more