{"id":17876877,"url":"https://github.com/devsyedmohsin/css-tips-tricks","last_synced_at":"2025-03-17T15:12:18.906Z","repository":{"id":96687570,"uuid":"606000225","full_name":"devsyedmohsin/css-tips-tricks","owner":"devsyedmohsin","description":" Handmade collection of css tips tricks. Give it a star if you find it useful 🌟","archived":false,"fork":false,"pushed_at":"2023-06-15T20:26:04.000Z","size":31891,"stargazers_count":225,"open_issues_count":1,"forks_count":25,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-03-03T23:49:33.419Z","etag":null,"topics":["css","css-animations","css-tricks","css3","learning-resources","protip","tips","tips-and-tricks","tricks","useful","useful-utilities","webdevelopment"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devsyedmohsin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-24T11:21:47.000Z","updated_at":"2025-02-16T22:35:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"ec3eb411-587c-459e-a7ad-cf5fa1043663","html_url":"https://github.com/devsyedmohsin/css-tips-tricks","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devsyedmohsin%2Fcss-tips-tricks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devsyedmohsin%2Fcss-tips-tricks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devsyedmohsin%2Fcss-tips-tricks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devsyedmohsin%2Fcss-tips-tricks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devsyedmohsin","download_url":"https://codeload.github.com/devsyedmohsin/css-tips-tricks/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244056425,"owners_count":20390719,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-animations","css-tricks","css3","learning-resources","protip","tips","tips-and-tricks","tricks","useful","useful-utilities","webdevelopment"],"created_at":"2024-10-28T11:35:51.501Z","updated_at":"2025-03-17T15:12:18.881Z","avatar_url":"https://github.com/devsyedmohsin.png","language":null,"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg class=\"paintbrush\" src=\"./assets/images/paintbrush.png\" width=\"185\" alt=\"paintbrush drawing rainbow circle\"\u003e\n\u003c/p\u003e\n\n# CSS Tips Tricks\n\nA handmade collection of pro css tips tricks 🌟\n\n- [Contributing](#contributing)\n- [Support](#support)\n- [License](#license)\n\n## Useful Resources\n\nMake sure to subscribe to our [youtube channel](https://www.youtube.com/@nisarhassan12) channel and also don't forget to star 🌟 the open-source [portfolio-template](https://github.com/devsyedmohsin/portfolio-template) I created for anyone to use for free.\n\n## Table of Contents\n\n1. [Create Documentation Styled Layout](#create-documentation-styled-layout)\n1. [Make Webpages Scroll Smoothly](#smooth-scrolling)\n1. [Adding Stroke to Text](#adding-stroke-to-text)\n1. [Check If Selector Is Supported](#check-if-selector-is-supported)\n1. [Check If Property Is Supported](#check-if-property-is-supported)\n1. [Play and Pause Animations](#play-and-pause-animations)\n1. [Improve Media Defaults](#improve-media-defaults)\n1. [Make text readable on images](#make-text-readable-on-images)\n1. [Style Optional Form Elements](#style-optional-form-elements)\n1. [The Custom Cursors](#the-custom-cursor)\n1. [Move Table Caption to the bottom](#move-table-caption-to-bottom)\n1. [Create Text Columns](#create-text-columns)\n1. [Styling video states via :paused and :playing pseudo classes](#styling-video-states-via-paused-and-playing-pseudo-classes)\n1. [Change Writing Mode](#change-writing-mode)\n1. [Providing Fallback Values for Variables](#providing-fallback-values-for-variables)\n1. [Zooming Images on Hover](#zooming-images-on-hover)\n1. [Emphasizing Text Content](#emphasizing-text-content)\n1. [Create Gradient Shadows](#create-gradient-shadows)\n1. [Five Ways of Centering Divs](#five-ways-of-centering-divs)\n1. [Fill Text With Images](#fill-text-with-images)\n1. [Style Drop Caps](#style-drop-caps)\n1. [Add Leading Zeros to Ordered Lists](#add-leading-zeros-to-ordered-lists)\n1. [Using Emoji as List Style Type](#using-emoji-as-list-style-type)\n1. [Adding Indentation to Text](#adding-indentation-to-text)\n1. [Add Dark Mode Support on Your Website](#using-emoji-as-list-style-type)\n1. [Disable Textarea Resizing](#disable-textarea-resizing)\n1. [Rainbow Animation](#rainbow-animation)\n1. [Use clamp() for Responsive Typography](#disable-textarea-resizing)\n1. [Create A Sticky Footer](#create-a-sticky-footer)\n\n### Create Documentation Styled Layout\n\nYou can craft a responsive documentation-styled layout using CSS grid with only two lines of CSS.\n\n```html\n\u003cdiv class=\"parent\"\u003e\n    \u003caside\u003eSidebar\u003c/aside\u003e\n    \u003cmain\u003eDocumentation\u003c/main\u003e\n\u003c/div\u003e\n```\n\n```css\n.parent{\n  display: grid;\n  grid-template-columns: minmax(150px, 25%) 1fr;\n}\n```\n\n\u003cdetails\u003e\n\n\u003csummary\u003eSee result\u003c/summary\u003e\n\n\u003cimg src=\"assets/images/documentation-layout.png\" alt=\"documentation styled layout\"\u003e\n\n\n\u003c/details\u003e\n\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n\n### Smooth Scrolling\n\nFor implementing smooth scrolling for a page add `scroll-behavior: smooth` to the html element.\n\n```css\n html {\n  scroll-behavior: smooth;\n}\n```\n\n\u003cdetails\u003e\n\n\u003csummary\u003eSee result\u003c/summary\u003e\n\n\u003cimg src=\"assets/images/smooth-scroll.gif\" alt=\"smooth scrolling to different sections\"\u003e\n\u003c/details\u003e\n\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n\n### Adding Stroke to Text\n\nUse `text-stroke` property it adds a stroke or outline to the text elements.\n\n```css\n/* Width and color values */\nh1 {\n  -webkit-text-stroke: 5px crimson;\n  text-stroke: 5px crimson;\n}\n```\n\n\u003cdetails\u003e\n\n\u003csummary\u003eSee result\u003c/summary\u003e\n\n\u003cimg src=\"assets/images/stroke-text.png\" alt=\"Netlify\"\u003e\n\n\n\u003c/details\u003e\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n\n### Check If Selector Is Supported\n\nYou can check if a selector is supported by your browser or not using the `selector()` within the `@supports` rule.\n\n```css\n@supports (selector(div:has(pre))) {\n/* Code that will only run if the selector is supported */\n  p {\n    color: crimson;\n  }\n}\n```\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n### Check If Property Is Supported\n\n\nYou can also detect properties support using the CSS `@supports` rule.\n\n```css\n@supports (display: grid) {\n   main {\n    display: grid;\n  }\n}\n```\n\n Chris Coyier has done an exceptional job of providing valuable insights and information on the `@supports` rule, Also Known as Feature queries. Read [here](https://css-tricks.com/how-supports-works/).\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n### Play and Pause Animations\n\nUse the `animation-play-state` property to play and pause an animation.\nFor example: Playing an animation on hover.\n\n```css\n/* By default animation is paused */\n.box {\n  animation-name: rotate;\n  animation-duration: 0.7s;\n  animation-iteration-count: infinite;\n  animation-play-state: paused;\n}\n\n/* Play animation on hover */\n.box:hover {\n  animation-play-state: running;\n}\n\n@keyframes rotate {\n  0% {\n    transform: rotate(0);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n```\n\n\u003cdetails\u003e\n\n\u003csummary\u003eSee result\u003c/summary\u003e\n\n\u003cimg src=\"assets/images/animation-state.gif\" alt=\"custom cursor\"\u003e\n\n\u003c/details\u003e\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n\n### Improve Media Defaults\n\nImages are inline elements, and by setting the default value to `display:block;` we can avoid many potential issues. Setting `max-width:100%;` we prevent images from overflowing when they are in a container that is not wide enough to contain them.\n\n```css\nimg, picture, video, svg {\n  display: block;\n  max-width: 100%;\n  object-fit: contain;\n}\n```\n\nAdditionally, I have set `object-fit:contain;` to ensure that images preserve a nice aspect ratio.\n\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n### Make text readable on images\n\nAdd linear-gradient overlay on your images to make your text content readable and accessible for users.\n\n```css\n.header {\n  background-image: linear-gradient(#ffffffa2, #ffffffe6),url(\"images/hero-bg.jpg\");\n}\n```\n\u003cdetails\u003e\n\n\u003csummary\u003eSee result\u003c/summary\u003e\n\n\n#### Not using gradient\n\n\u003cimg src=\"assets/images/image-not-using-gradient.jpg\" alt=\"custom cursor\"\u003e  \n\n#### Uses gradient\n\n\u003cimg src=\"assets/images/image-using-gradient.jpg\" alt=\"custom cursor\"\u003e\n\n\u003c/details\u003e\n\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n### Style `:optional` Form Elements\n\nYou can style form fields like `input`, `select`, and `textarea` that do not have a required attribute on them using the `:optional` pseudo-class.\n\n```css\n/* Selects all optional form fields */\n*:optional{\n  background-color: green;\n}\n```\n\n**Note:** Use `:required` pseudo-class to select required form fields.\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n\n### The Custom Cursor\n\nYou can customize your `cursor` from an arrow pointer to a custom image.\n\n```css\nhtml{\n  cursor: url('images/no.jpg'), auto;\n}\n```\n\n**Note:** `auto` will be used as fallback value in case image does not load for some reason.\n\n\u003cdetails\u003e\n\n\u003csummary\u003eSee result\u003c/summary\u003e\n\n\u003cimg src=\"assets/images/custom-cursors.gif\" alt=\"custom cursor\"\u003e\n\n\n\u003c/details\u003e\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n\n### Move Table Caption to Bottom\n\nUse the `caption-side` property to place the table caption or table title on a specified side of the table.\n\n```css\ntable{\n  caption-side: bottom;\n}\n```\n\n\u003cdetails\u003e\n\n\u003csummary\u003eSee result\u003c/summary\u003e\n\n\u003cimg src=\"assets/images/table-caption.gif\" alt=\"changing table caption side from top to bottom\"\u003e\n\n\u003c/details\u003e\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n\n### Styling video states via `:paused` and `:playing` pseudo classes\n\nUse `:paused` selector to style media elements like audio, and  video when in paused state likewise paused we also have `:palying` pseudo-class selector.\n\n```css\nvideo:paused {\n  opacity: 0.6;\n}\n```\n\n**Note:** At the moment, this feature is only supported in Safari, but you can use this helpful [tool](https://caniuse.com/) to check for the latest support across different browsers.\n\n\u003cdetails\u003e\n\n\u003csummary\u003eSee result\u003c/summary\u003e\n\n\u003cimg src=\"assets/images/paused.gif\" alt=\"plam tree gif on a beach\"\u003e\n\n\u003c/details\u003e\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n\n### Create Text Columns\n\nCraft nice column layouts for text elements using column properties.\n\n```css\np{\n  column-count: 3;\n  column-gap: 4.45rem;          \n  column-rule: 2px dotted crimson;\n}\n```\n\n\u003cdetails\u003e\n\n\u003csummary\u003eSee result\u003c/summary\u003e\n\n\u003cimg src=\"assets/images/text-columns.png\" alt=\"3 text columns\"\u003e\n\n\n\u003c/details\u003e\n\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n\n### Change Writing Mode\n\nYou can use the `writing-mode` property to specify how text should be laid out on your website.\n\n```css\n/* Specifies the text layout direction to sideways-lr  */\nh1 {\n  writing-mode: sideways-lr;\n}\n\n/* Keyword values (Reference: MDN)  */\nwriting-mode: horizontal-tb;\nwriting-mode: vertical-rl;\nwriting-mode: vertical-lr;\n\n```\n\n\u003cdetails\u003e\n\n\u003csummary\u003eSee result\u003c/summary\u003e\n\n\u003cimg src=\"assets/images/writing-mode.png\" alt=\"text starting from sideways-lr\"\u003e\n\n\n\u003c/details\u003e\n\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n\n### Providing Fallback Values for Variables\n\nSpecify fallback values for custom properties. In case a variable is not defined or found for some reason the fallback value will be used.\n\n```css\n/* Purple color will be applied as var(--black) is not defined */\n:root {\n  --orange: orange;\n  --coral: coral;\n}\n\nh1 {\n  color: var(--black, purple);\n}\n```\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n\n### Zooming Images on Hover\n\n\nYou can create a zoom-in effect when hovering over an image, this is a technique commonly used on e-commerce websites.\n\n```css\n/* Define the height and width of the image container \u0026 hide overflow */\n.img-container {\n  height: 250px; width: 250px; overflow: hidden;\n }\n\n/* Make the image inside the container fill the container */\n.img-container img {\n  height: 100%;\n  width: 100%;\n  object-fit: cover; \n  transition: transform 200ms ease-in;\n }\n\n img:hover{\n  transform: scale(1.2);\n }\n```\n\n\u003cdetails\u003e\n\n\u003csummary\u003eSee result\u003c/summary\u003e\n\n\u003cimg src=\"assets/images/zoom-on-hover.gif\" alt=\"shoping bag on grey tiles\"\u003e\n\n\n\u003c/details\u003e\n\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n### Emphasizing Text Content\n\nUse `text-emphasis` property to apply emphasis marks to text elements.You can specify any string including emojis as its value.\n\n```css\nh1 {\n  text-emphasis: \"⏰\";\n}\n```\n**Note:** Please refer to [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis) docs to learn more about this property.\n\n\n\u003cdetails\u003e\n\n\u003csummary\u003eSee result\u003c/summary\u003e\n\n\u003cimg src=\"assets/images/emphasizing-text.jpg\" alt=\"Time is a healer\"\u003e\n\n\u003c/details\u003e\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n### Create Gradient Shadows\n\nThis is how you can create gradient shadows for an exclusive user experience.\n\n```css\n:root{\n  --gradient: linear-gradient(to bottom right, crimson, coral);\n}\n\ndiv {\n  height: 200px;\n  width: 200px;\n  background-image: var(--gradient);\n  border-radius: 1rem;\n  position: relative;\n}\n\ndiv::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background-image: var(--gradient);\n  border-radius: inherit;\n  filter: blur(25px) brightness(1.5);\n  transform: translateY(15%) scale(0.95);\n  z-index: -1;\n}\n```\n\n\u003cdetails\u003e\n\n\u003csummary\u003eSee result\u003c/summary\u003e\n\n\u003cimg src=\"assets/images/gradient-shadows.png\" alt=\"box with gradient shadow\"\u003e\n\n\n\u003c/details\u003e\n\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n\n### Five Ways of Centering Divs\n\nCenter a `div` both vertically and horizontally.\n\n```css\n/* 1.Centering with grid */\n.parent{\n  height: 100vh;\n  display: grid;\n  place-items: center;\n}\n\n/* 2.Centering with grid \u0026 margins */\n.parent{\n  display: grid;\n}\n.child{\n  margin: auto;\n}\n```\n\n```css\n/* 3.Centering with positioning */\ndiv{\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%,-50%);\n}\n```\n\n```css\n/* 4.Centering with flexbox  */\n.parent{\n  height: 100vh;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n/* 5.Centering with flexbox \u0026 margins */\n.parent{\n  display: flex;\n}\n.child{\n  margin: auto;\n}\n```\n\n\n**Note:** When using layout tools like `grid`, `flexbox` or positioning elements are centered relative to the height of the parent element which is `100vh` here in our case, Also check out this great [article](https://web.dev/viewport-units/) by [@bramus](https://github.com/bramus) on using new viewport units. \n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n\n### Fill Text With Images\n\nYou can fill your text content with a beautiful image with a few lines of CSS.\n\n```css\nh1{\n  background-image: url('images/flower.jpg');\n  background-clip: text;\n  color: transparent;\n  background-color: white;\n}\n```\n\n**Note:** Always specify `background-color` when using this technique as this will be used as a fallback value in case the image does not load for some reason.\n\n\u003cdetails\u003e\n\n\u003csummary\u003eSee result\u003c/summary\u003e\n\n\u003cimg src=\"assets/images/fill-text-with-img.png\" alt=\"text filled with flower image\"\u003e\n\n\n\u003c/details\u003e\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n\n### Style Drop Caps \n\nAvoid unnecessary spans and use pseudo elements instead to style your content likewise `first-letter` pseudo-element we also have `first-line` pseudo-element.\n\n```css\n h1::first-letter{\n  font-size: 2rem;\n  color:#ff8A00;\n}\n```\n\n\u003cdetails\u003e\n\n\u003csummary\u003eSee result\u003c/summary\u003e\n\n\u003cimg src=\"assets/images/dropcaps.png\" alt=\"first letter of text styled differently\"\u003e\n\n\u003c/details\u003e\n\n\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n\n### Add Leading Zeros to Ordered Lists\n\nEnhance visual consistency and readability by adding leading zeros to the numbers in your ordered list items.\n\n\n```css\nli{\n  list-style-type:decimal-leading-zero;\n}\n```\n\n\n\u003cdetails\u003e\n\n\u003csummary\u003eSee result\u003c/summary\u003e\n\n\u003cimg src=\"assets/images/decimal-leading-zero.png\" alt=\"decimal leading zero before list numbers\"\u003e\n\n\u003c/details\u003e\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n### Using Emoji as `list-style-type`\n\nYou can use emojis as list style types It's a fun way to add some personality to your lists.\n\n```css\nli{\n  list-style-type: '🐶';\n}\n```\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n### Adding Indentation to Text\n\nUse the `text-indent` property to indent the first line of a text block. Negative values are also allowed.\n\n```css\np{\n  text-indent:2.6rem;\n}\n```\n\n\u003cdetails\u003e\n\n\u003csummary\u003eSee result\u003c/summary\u003e\n\n\u003cimg src=\"assets/images/text-indent.png\" alt=\"first line of text block indented to the right side\"\u003e\n\n\u003c/details\u003e\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n\n### Add Dark Mode Support to Your Website\n\nYou can add dark mode support to your website using CSS variables and the `prefers-color-scheme` media query.\n\n\n```css\n:root {\n  --bg-color: white;\n  --text-color: black;\n}\n\nbody {\n  background-color: var(--bg-color);\n  color: var(--text-color);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --bg-color: black;\n    --text-color: white;\n  }\n}\n```\n### Disable Textarea Resizing\n\nPrevent textarea resizing by setting the `resize` property to `none`.\n\n```css\ntextarea{\n  resize:none;\n}\n```\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n### Rainbow Animation\n\nCreates a continuously looping color animation for elements.\n\n```css\nbutton{\n  animation: rainbow-animation 200ms linear infinite;\n}\n\n@keyframes rainbow-animation {\n  to{\n    filter: hue-rotate(0deg);\n  }\n from{\n    filter: hue-rotate(360deg);\n  }\n}\n```\n\n```css\n/* If the user prefers reduced motion, then don't use any animations on button */\n@media (prefers-reduced-motion: reduce) {\n  button {\n    animation: none;\n  }\n}\n```\n\n**Note:** When working with animations  make use of `prefers-reduced-motion` media feature to make sure that your website is accessible for the users who may have any vestibular disorders. Give this [gem](https://web.dev/prefers-reduced-motion/) a read written by [@tomayac](https://github.com/tomayac).\n\n\u003cdetails\u003e\n\n\u003csummary\u003eSee result\u003c/summary\u003e\n\n\u003cimg src=\"assets/images/rainbow-animation.gif\" alt=\"hue rotate filter on button\"\u003e\n\n\u003c/details\u003e\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n### Use `clamp()` for Responsive Typography\n\nInstead of using media queries for responsive and fluid typography use the `clamp()` function. \n\n```css\n/* Syntax: clamp(minimum, preferred, maximum) */\nh1{\n  font-size: clamp(2.25rem,6vw,4rem);\n}\n```\n\n\u003cdetails\u003e\n\n\u003csummary\u003eSee result\u003c/summary\u003e\n\n\u003cimg src=\"assets/images/clamp-function.gif\" alt=\"font-size changing based on screen size\"\u003e\n\n\u003c/details\u003e\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n### Create A Sticky Footer\n\nYou can create a `footer` that always stick to the bottom of the browser window with only a few lines of CSS.\n\n```html\n\u003cdiv class='layout'\u003e\n\n  \u003cmain\u003e\n     \u003c!-- your content here --\u003e\n  \u003c/main\u003e\n\n  \u003cfooter\u003e\n     \u003c!-- your footer content here --\u003e\n  \u003c/footer\u003e\n\n\u003c/div\u003e\n```\n\n```css\n.layout{\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n}\n\nfooter{\n  margin-top: auto;\n}\n```\n\n\u003cdetails\u003e\n\n\u003csummary\u003eSee result\u003c/summary\u003e\n\n\u003cimg src=\"assets/images/sticky-footer.png\" alt=\"sticky footer\"\u003e\n\n\u003c/details\u003e\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n\n## Contributing\n\nIf you have a CSS tip or trick that you'd like to share with the community, I'd love to hear from you!\n\nWhen submitting a pull request, please be sure to include a **detailed description** of the tip or trick, along with a **code snippet** and any relevant **images**.\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n## Support\n\nPlease consider supporting this project. Your support enables me to continue working on this project and creating more resources in the future.\n\nIf you encounter any issues or have questions about this project, please feel free to reach out to me for support. You can contact me via email at devsyedmohsin@gmail.com.\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n\n## License\n\nThis project is licensed under the [MIT License](https://github.com/git/git-scm.com/blob/main/MIT-LICENSE.txt).\n\n\u003csup\u003e[back to table of contents](#table-of-contents)\u003c/sup\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevsyedmohsin%2Fcss-tips-tricks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevsyedmohsin%2Fcss-tips-tricks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevsyedmohsin%2Fcss-tips-tricks/lists"}