├── .DS_Store ├── .gitignore ├── README.md └── assets ├── .DS_Store └── images ├── .DS_Store ├── animation-state.gif ├── clamp-function.gif ├── custom-cursors.gif ├── decimal-leading-zero.png ├── documentation-layout.png ├── dropcaps.png ├── emphasizing-text.jpg ├── fill-text-with-img.png ├── gradient-shadows.png ├── image-not-using-gradient.jpg ├── image-using-gradient.jpg ├── paintbrush.png ├── paused.gif ├── rainbow-animation.gif ├── smooth-scroll.gif ├── sticky-footer.png ├── stroke-text.png ├── table-caption.gif ├── text-columns.png ├── text-indent.png ├── writing-mode.png └── zoom-on-hover.gif /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsyedmohsin/css-tips-tricks/ec3b146d533a571b990ee06c8e72a8fd6ef63979/.DS_Store -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | paintbrush drawing rainbow circle 3 |

4 | 5 | # CSS Tips Tricks 6 | 7 | A handmade collection of pro css tips tricks 🌟 8 | 9 | - [Contributing](#contributing) 10 | - [Support](#support) 11 | - [License](#license) 12 | 13 | ## Useful Resources 14 | 15 | Make 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. 16 | 17 | ## Table of Contents 18 | 19 | 1. [Create Documentation Styled Layout](#create-documentation-styled-layout) 20 | 1. [Make Webpages Scroll Smoothly](#smooth-scrolling) 21 | 1. [Adding Stroke to Text](#adding-stroke-to-text) 22 | 1. [Check If Selector Is Supported](#check-if-selector-is-supported) 23 | 1. [Check If Property Is Supported](#check-if-property-is-supported) 24 | 1. [Play and Pause Animations](#play-and-pause-animations) 25 | 1. [Improve Media Defaults](#improve-media-defaults) 26 | 1. [Make text readable on images](#make-text-readable-on-images) 27 | 1. [Style Optional Form Elements](#style-optional-form-elements) 28 | 1. [The Custom Cursors](#the-custom-cursor) 29 | 1. [Move Table Caption to the bottom](#move-table-caption-to-bottom) 30 | 1. [Create Text Columns](#create-text-columns) 31 | 1. [Styling video states via :paused and :playing pseudo classes](#styling-video-states-via-paused-and-playing-pseudo-classes) 32 | 1. [Change Writing Mode](#change-writing-mode) 33 | 1. [Providing Fallback Values for Variables](#providing-fallback-values-for-variables) 34 | 1. [Zooming Images on Hover](#zooming-images-on-hover) 35 | 1. [Emphasizing Text Content](#emphasizing-text-content) 36 | 1. [Create Gradient Shadows](#create-gradient-shadows) 37 | 1. [Five Ways of Centering Divs](#five-ways-of-centering-divs) 38 | 1. [Fill Text With Images](#fill-text-with-images) 39 | 1. [Style Drop Caps](#style-drop-caps) 40 | 1. [Add Leading Zeros to Ordered Lists](#add-leading-zeros-to-ordered-lists) 41 | 1. [Using Emoji as List Style Type](#using-emoji-as-list-style-type) 42 | 1. [Adding Indentation to Text](#adding-indentation-to-text) 43 | 1. [Add Dark Mode Support on Your Website](#using-emoji-as-list-style-type) 44 | 1. [Disable Textarea Resizing](#disable-textarea-resizing) 45 | 1. [Rainbow Animation](#rainbow-animation) 46 | 1. [Use clamp() for Responsive Typography](#disable-textarea-resizing) 47 | 1. [Create A Sticky Footer](#create-a-sticky-footer) 48 | 49 | ### Create Documentation Styled Layout 50 | 51 | You can craft a responsive documentation-styled layout using CSS grid with only two lines of CSS. 52 | 53 | ```html 54 |
55 | 56 |
Documentation
57 |
58 | ``` 59 | 60 | ```css 61 | .parent{ 62 | display: grid; 63 | grid-template-columns: minmax(150px, 25%) 1fr; 64 | } 65 | ``` 66 | 67 |
68 | 69 | See result 70 | 71 | documentation styled layout 72 | 73 | 74 |
75 | 76 | 77 | [back to table of contents](#table-of-contents) 78 | 79 | 80 | ### Smooth Scrolling 81 | 82 | For implementing smooth scrolling for a page add `scroll-behavior: smooth` to the html element. 83 | 84 | ```css 85 | html { 86 | scroll-behavior: smooth; 87 | } 88 | ``` 89 | 90 |
91 | 92 | See result 93 | 94 | smooth scrolling to different sections 95 |
96 | 97 | 98 | [back to table of contents](#table-of-contents) 99 | 100 | 101 | ### Adding Stroke to Text 102 | 103 | Use `text-stroke` property it adds a stroke or outline to the text elements. 104 | 105 | ```css 106 | /* Width and color values */ 107 | h1 { 108 | -webkit-text-stroke: 5px crimson; 109 | text-stroke: 5px crimson; 110 | } 111 | ``` 112 | 113 |
114 | 115 | See result 116 | 117 | Netlify 118 | 119 | 120 |
121 | 122 | [back to table of contents](#table-of-contents) 123 | 124 | 125 | ### Check If Selector Is Supported 126 | 127 | You can check if a selector is supported by your browser or not using the `selector()` within the `@supports` rule. 128 | 129 | ```css 130 | @supports (selector(div:has(pre))) { 131 | /* Code that will only run if the selector is supported */ 132 | p { 133 | color: crimson; 134 | } 135 | } 136 | ``` 137 | 138 | [back to table of contents](#table-of-contents) 139 | 140 | ### Check If Property Is Supported 141 | 142 | 143 | You can also detect properties support using the CSS `@supports` rule. 144 | 145 | ```css 146 | @supports (display: grid) { 147 | main { 148 | display: grid; 149 | } 150 | } 151 | ``` 152 | 153 | 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/). 154 | 155 | [back to table of contents](#table-of-contents) 156 | 157 | ### Play and Pause Animations 158 | 159 | Use the `animation-play-state` property to play and pause an animation. 160 | For example: Playing an animation on hover. 161 | 162 | ```css 163 | /* By default animation is paused */ 164 | .box { 165 | animation-name: rotate; 166 | animation-duration: 0.7s; 167 | animation-iteration-count: infinite; 168 | animation-play-state: paused; 169 | } 170 | 171 | /* Play animation on hover */ 172 | .box:hover { 173 | animation-play-state: running; 174 | } 175 | 176 | @keyframes rotate { 177 | 0% { 178 | transform: rotate(0); 179 | } 180 | 100% { 181 | transform: rotate(360deg); 182 | } 183 | } 184 | 185 | ``` 186 | 187 |
188 | 189 | See result 190 | 191 | custom cursor 192 | 193 |
194 | 195 | [back to table of contents](#table-of-contents) 196 | 197 | 198 | ### Improve Media Defaults 199 | 200 | Images 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. 201 | 202 | ```css 203 | img, picture, video, svg { 204 | display: block; 205 | max-width: 100%; 206 | object-fit: contain; 207 | } 208 | ``` 209 | 210 | Additionally, I have set `object-fit:contain;` to ensure that images preserve a nice aspect ratio. 211 | 212 | 213 | [back to table of contents](#table-of-contents) 214 | 215 | ### Make text readable on images 216 | 217 | Add linear-gradient overlay on your images to make your text content readable and accessible for users. 218 | 219 | ```css 220 | .header { 221 | background-image: linear-gradient(#ffffffa2, #ffffffe6),url("images/hero-bg.jpg"); 222 | } 223 | ``` 224 |
225 | 226 | See result 227 | 228 | 229 | #### Not using gradient 230 | 231 | custom cursor 232 | 233 | #### Uses gradient 234 | 235 | custom cursor 236 | 237 |
238 | 239 | 240 | [back to table of contents](#table-of-contents) 241 | 242 | ### Style `:optional` Form Elements 243 | 244 | You can style form fields like `input`, `select`, and `textarea` that do not have a required attribute on them using the `:optional` pseudo-class. 245 | 246 | ```css 247 | /* Selects all optional form fields */ 248 | *:optional{ 249 | background-color: green; 250 | } 251 | ``` 252 | 253 | **Note:** Use `:required` pseudo-class to select required form fields. 254 | 255 | [back to table of contents](#table-of-contents) 256 | 257 | 258 | ### The Custom Cursor 259 | 260 | You can customize your `cursor` from an arrow pointer to a custom image. 261 | 262 | ```css 263 | html{ 264 | cursor: url('images/no.jpg'), auto; 265 | } 266 | ``` 267 | 268 | **Note:** `auto` will be used as fallback value in case image does not load for some reason. 269 | 270 |
271 | 272 | See result 273 | 274 | custom cursor 275 | 276 | 277 |
278 | 279 | [back to table of contents](#table-of-contents) 280 | 281 | 282 | ### Move Table Caption to Bottom 283 | 284 | Use the `caption-side` property to place the table caption or table title on a specified side of the table. 285 | 286 | ```css 287 | table{ 288 | caption-side: bottom; 289 | } 290 | ``` 291 | 292 |
293 | 294 | See result 295 | 296 | changing table caption side from top to bottom 297 | 298 |
299 | 300 | [back to table of contents](#table-of-contents) 301 | 302 | 303 | ### Styling video states via `:paused` and `:playing` pseudo classes 304 | 305 | Use `:paused` selector to style media elements like audio, and video when in paused state likewise paused we also have `:palying` pseudo-class selector. 306 | 307 | ```css 308 | video:paused { 309 | opacity: 0.6; 310 | } 311 | ``` 312 | 313 | **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. 314 | 315 |
316 | 317 | See result 318 | 319 | plam tree gif on a beach 320 | 321 |
322 | 323 | [back to table of contents](#table-of-contents) 324 | 325 | 326 | ### Create Text Columns 327 | 328 | Craft nice column layouts for text elements using column properties. 329 | 330 | ```css 331 | p{ 332 | column-count: 3; 333 | column-gap: 4.45rem; 334 | column-rule: 2px dotted crimson; 335 | } 336 | ``` 337 | 338 |
339 | 340 | See result 341 | 342 | 3 text columns 343 | 344 | 345 |
346 | 347 | 348 | [back to table of contents](#table-of-contents) 349 | 350 | 351 | ### Change Writing Mode 352 | 353 | You can use the `writing-mode` property to specify how text should be laid out on your website. 354 | 355 | ```css 356 | /* Specifies the text layout direction to sideways-lr */ 357 | h1 { 358 | writing-mode: sideways-lr; 359 | } 360 | 361 | /* Keyword values (Reference: MDN) */ 362 | writing-mode: horizontal-tb; 363 | writing-mode: vertical-rl; 364 | writing-mode: vertical-lr; 365 | 366 | ``` 367 | 368 |
369 | 370 | See result 371 | 372 | text starting from sideways-lr 373 | 374 | 375 |
376 | 377 | 378 | [back to table of contents](#table-of-contents) 379 | 380 | 381 | ### Providing Fallback Values for Variables 382 | 383 | Specify fallback values for custom properties. In case a variable is not defined or found for some reason the fallback value will be used. 384 | 385 | ```css 386 | /* Purple color will be applied as var(--black) is not defined */ 387 | :root { 388 | --orange: orange; 389 | --coral: coral; 390 | } 391 | 392 | h1 { 393 | color: var(--black, purple); 394 | } 395 | ``` 396 | 397 | [back to table of contents](#table-of-contents) 398 | 399 | 400 | ### Zooming Images on Hover 401 | 402 | 403 | You can create a zoom-in effect when hovering over an image, this is a technique commonly used on e-commerce websites. 404 | 405 | ```css 406 | /* Define the height and width of the image container & hide overflow */ 407 | .img-container { 408 | height: 250px; width: 250px; overflow: hidden; 409 | } 410 | 411 | /* Make the image inside the container fill the container */ 412 | .img-container img { 413 | height: 100%; 414 | width: 100%; 415 | object-fit: cover; 416 | transition: transform 200ms ease-in; 417 | } 418 | 419 | img:hover{ 420 | transform: scale(1.2); 421 | } 422 | ``` 423 | 424 |
425 | 426 | See result 427 | 428 | shoping bag on grey tiles 429 | 430 | 431 |
432 | 433 | 434 | [back to table of contents](#table-of-contents) 435 | 436 | ### Emphasizing Text Content 437 | 438 | Use `text-emphasis` property to apply emphasis marks to text elements.You can specify any string including emojis as its value. 439 | 440 | ```css 441 | h1 { 442 | text-emphasis: "⏰"; 443 | } 444 | ``` 445 | **Note:** Please refer to [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis) docs to learn more about this property. 446 | 447 | 448 |
449 | 450 | See result 451 | 452 | Time is a healer 453 | 454 |
455 | 456 | [back to table of contents](#table-of-contents) 457 | 458 | ### Create Gradient Shadows 459 | 460 | This is how you can create gradient shadows for an exclusive user experience. 461 | 462 | ```css 463 | :root{ 464 | --gradient: linear-gradient(to bottom right, crimson, coral); 465 | } 466 | 467 | div { 468 | height: 200px; 469 | width: 200px; 470 | background-image: var(--gradient); 471 | border-radius: 1rem; 472 | position: relative; 473 | } 474 | 475 | div::after { 476 | content: ""; 477 | position: absolute; 478 | inset: 0; 479 | background-image: var(--gradient); 480 | border-radius: inherit; 481 | filter: blur(25px) brightness(1.5); 482 | transform: translateY(15%) scale(0.95); 483 | z-index: -1; 484 | } 485 | ``` 486 | 487 |
488 | 489 | See result 490 | 491 | box with gradient shadow 492 | 493 | 494 |
495 | 496 | 497 | [back to table of contents](#table-of-contents) 498 | 499 | 500 | ### Five Ways of Centering Divs 501 | 502 | Center a `div` both vertically and horizontally. 503 | 504 | ```css 505 | /* 1.Centering with grid */ 506 | .parent{ 507 | height: 100vh; 508 | display: grid; 509 | place-items: center; 510 | } 511 | 512 | /* 2.Centering with grid & margins */ 513 | .parent{ 514 | display: grid; 515 | } 516 | .child{ 517 | margin: auto; 518 | } 519 | ``` 520 | 521 | ```css 522 | /* 3.Centering with positioning */ 523 | div{ 524 | position: absolute; 525 | top: 50%; 526 | left: 50%; 527 | transform: translate(-50%,-50%); 528 | } 529 | ``` 530 | 531 | ```css 532 | /* 4.Centering with flexbox */ 533 | .parent{ 534 | height: 100vh; 535 | display: flex; 536 | justify-content: center; 537 | align-items: center; 538 | } 539 | 540 | /* 5.Centering with flexbox & margins */ 541 | .parent{ 542 | display: flex; 543 | } 544 | .child{ 545 | margin: auto; 546 | } 547 | ``` 548 | 549 | 550 | **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. 551 | 552 | [back to table of contents](#table-of-contents) 553 | 554 | 555 | ### Fill Text With Images 556 | 557 | You can fill your text content with a beautiful image with a few lines of CSS. 558 | 559 | ```css 560 | h1{ 561 | background-image: url('images/flower.jpg'); 562 | background-clip: text; 563 | color: transparent; 564 | background-color: white; 565 | } 566 | ``` 567 | 568 | **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. 569 | 570 |
571 | 572 | See result 573 | 574 | text filled with flower image 575 | 576 | 577 |
578 | 579 | [back to table of contents](#table-of-contents) 580 | 581 | 582 | ### Style Drop Caps 583 | 584 | Avoid unnecessary spans and use pseudo elements instead to style your content likewise `first-letter` pseudo-element we also have `first-line` pseudo-element. 585 | 586 | ```css 587 | h1::first-letter{ 588 | font-size: 2rem; 589 | color:#ff8A00; 590 | } 591 | ``` 592 | 593 |
594 | 595 | See result 596 | 597 | first letter of text styled differently 598 | 599 |
600 | 601 | 602 | 603 | [back to table of contents](#table-of-contents) 604 | 605 | 606 | ### Add Leading Zeros to Ordered Lists 607 | 608 | Enhance visual consistency and readability by adding leading zeros to the numbers in your ordered list items. 609 | 610 | 611 | ```css 612 | li{ 613 | list-style-type:decimal-leading-zero; 614 | } 615 | ``` 616 | 617 | 618 |
619 | 620 | See result 621 | 622 | decimal leading zero before list numbers 623 | 624 |
625 | 626 | [back to table of contents](#table-of-contents) 627 | 628 | ### Using Emoji as `list-style-type` 629 | 630 | You can use emojis as list style types It's a fun way to add some personality to your lists. 631 | 632 | ```css 633 | li{ 634 | list-style-type: '🐶'; 635 | } 636 | ``` 637 | 638 | [back to table of contents](#table-of-contents) 639 | 640 | ### Adding Indentation to Text 641 | 642 | Use the `text-indent` property to indent the first line of a text block. Negative values are also allowed. 643 | 644 | ```css 645 | p{ 646 | text-indent:2.6rem; 647 | } 648 | ``` 649 | 650 |
651 | 652 | See result 653 | 654 | first line of text block indented to the right side 655 | 656 |
657 | 658 | [back to table of contents](#table-of-contents) 659 | 660 | 661 | ### Add Dark Mode Support to Your Website 662 | 663 | You can add dark mode support to your website using CSS variables and the `prefers-color-scheme` media query. 664 | 665 | 666 | ```css 667 | :root { 668 | --bg-color: white; 669 | --text-color: black; 670 | } 671 | 672 | body { 673 | background-color: var(--bg-color); 674 | color: var(--text-color); 675 | } 676 | 677 | @media (prefers-color-scheme: dark) { 678 | :root { 679 | --bg-color: black; 680 | --text-color: white; 681 | } 682 | } 683 | ``` 684 | ### Disable Textarea Resizing 685 | 686 | Prevent textarea resizing by setting the `resize` property to `none`. 687 | 688 | ```css 689 | textarea{ 690 | resize:none; 691 | } 692 | ``` 693 | 694 | [back to table of contents](#table-of-contents) 695 | 696 | ### Rainbow Animation 697 | 698 | Creates a continuously looping color animation for elements. 699 | 700 | ```css 701 | button{ 702 | animation: rainbow-animation 200ms linear infinite; 703 | } 704 | 705 | @keyframes rainbow-animation { 706 | to{ 707 | filter: hue-rotate(0deg); 708 | } 709 | from{ 710 | filter: hue-rotate(360deg); 711 | } 712 | } 713 | ``` 714 | 715 | ```css 716 | /* If the user prefers reduced motion, then don't use any animations on button */ 717 | @media (prefers-reduced-motion: reduce) { 718 | button { 719 | animation: none; 720 | } 721 | } 722 | ``` 723 | 724 | **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). 725 | 726 |
727 | 728 | See result 729 | 730 | hue rotate filter on button 731 | 732 |
733 | 734 | [back to table of contents](#table-of-contents) 735 | 736 | ### Use `clamp()` for Responsive Typography 737 | 738 | Instead of using media queries for responsive and fluid typography use the `clamp()` function. 739 | 740 | ```css 741 | /* Syntax: clamp(minimum, preferred, maximum) */ 742 | h1{ 743 | font-size: clamp(2.25rem,6vw,4rem); 744 | } 745 | ``` 746 | 747 |
748 | 749 | See result 750 | 751 | font-size changing based on screen size 752 | 753 |
754 | 755 | [back to table of contents](#table-of-contents) 756 | 757 | ### Create A Sticky Footer 758 | 759 | You can create a `footer` that always stick to the bottom of the browser window with only a few lines of CSS. 760 | 761 | ```html 762 |
763 | 764 |
765 | 766 |
767 | 768 | 771 | 772 |
773 | ``` 774 | 775 | ```css 776 | .layout{ 777 | height: 100vh; 778 | display: flex; 779 | flex-direction: column; 780 | } 781 | 782 | footer{ 783 | margin-top: auto; 784 | } 785 | ``` 786 | 787 |
788 | 789 | See result 790 | 791 | sticky footer 792 | 793 |
794 | 795 | [back to table of contents](#table-of-contents) 796 | 797 | 798 | ## Contributing 799 | 800 | If you have a CSS tip or trick that you'd like to share with the community, I'd love to hear from you! 801 | 802 | When 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**. 803 | 804 | [back to table of contents](#table-of-contents) 805 | 806 | ## Support 807 | 808 | Please consider supporting this project. Your support enables me to continue working on this project and creating more resources in the future. 809 | 810 | If 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. 811 | 812 | [back to table of contents](#table-of-contents) 813 | 814 | ## License 815 | 816 | This project is licensed under the [MIT License](https://github.com/git/git-scm.com/blob/main/MIT-LICENSE.txt). 817 | 818 | [back to table of contents](#table-of-contents) 819 | -------------------------------------------------------------------------------- /assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsyedmohsin/css-tips-tricks/ec3b146d533a571b990ee06c8e72a8fd6ef63979/assets/.DS_Store -------------------------------------------------------------------------------- /assets/images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsyedmohsin/css-tips-tricks/ec3b146d533a571b990ee06c8e72a8fd6ef63979/assets/images/.DS_Store -------------------------------------------------------------------------------- /assets/images/animation-state.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsyedmohsin/css-tips-tricks/ec3b146d533a571b990ee06c8e72a8fd6ef63979/assets/images/animation-state.gif -------------------------------------------------------------------------------- /assets/images/clamp-function.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsyedmohsin/css-tips-tricks/ec3b146d533a571b990ee06c8e72a8fd6ef63979/assets/images/clamp-function.gif -------------------------------------------------------------------------------- /assets/images/custom-cursors.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsyedmohsin/css-tips-tricks/ec3b146d533a571b990ee06c8e72a8fd6ef63979/assets/images/custom-cursors.gif -------------------------------------------------------------------------------- /assets/images/decimal-leading-zero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsyedmohsin/css-tips-tricks/ec3b146d533a571b990ee06c8e72a8fd6ef63979/assets/images/decimal-leading-zero.png -------------------------------------------------------------------------------- /assets/images/documentation-layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsyedmohsin/css-tips-tricks/ec3b146d533a571b990ee06c8e72a8fd6ef63979/assets/images/documentation-layout.png -------------------------------------------------------------------------------- /assets/images/dropcaps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsyedmohsin/css-tips-tricks/ec3b146d533a571b990ee06c8e72a8fd6ef63979/assets/images/dropcaps.png -------------------------------------------------------------------------------- /assets/images/emphasizing-text.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsyedmohsin/css-tips-tricks/ec3b146d533a571b990ee06c8e72a8fd6ef63979/assets/images/emphasizing-text.jpg -------------------------------------------------------------------------------- /assets/images/fill-text-with-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsyedmohsin/css-tips-tricks/ec3b146d533a571b990ee06c8e72a8fd6ef63979/assets/images/fill-text-with-img.png -------------------------------------------------------------------------------- /assets/images/gradient-shadows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsyedmohsin/css-tips-tricks/ec3b146d533a571b990ee06c8e72a8fd6ef63979/assets/images/gradient-shadows.png -------------------------------------------------------------------------------- /assets/images/image-not-using-gradient.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsyedmohsin/css-tips-tricks/ec3b146d533a571b990ee06c8e72a8fd6ef63979/assets/images/image-not-using-gradient.jpg -------------------------------------------------------------------------------- /assets/images/image-using-gradient.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsyedmohsin/css-tips-tricks/ec3b146d533a571b990ee06c8e72a8fd6ef63979/assets/images/image-using-gradient.jpg -------------------------------------------------------------------------------- /assets/images/paintbrush.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsyedmohsin/css-tips-tricks/ec3b146d533a571b990ee06c8e72a8fd6ef63979/assets/images/paintbrush.png -------------------------------------------------------------------------------- /assets/images/paused.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsyedmohsin/css-tips-tricks/ec3b146d533a571b990ee06c8e72a8fd6ef63979/assets/images/paused.gif -------------------------------------------------------------------------------- /assets/images/rainbow-animation.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsyedmohsin/css-tips-tricks/ec3b146d533a571b990ee06c8e72a8fd6ef63979/assets/images/rainbow-animation.gif -------------------------------------------------------------------------------- /assets/images/smooth-scroll.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsyedmohsin/css-tips-tricks/ec3b146d533a571b990ee06c8e72a8fd6ef63979/assets/images/smooth-scroll.gif -------------------------------------------------------------------------------- /assets/images/sticky-footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsyedmohsin/css-tips-tricks/ec3b146d533a571b990ee06c8e72a8fd6ef63979/assets/images/sticky-footer.png -------------------------------------------------------------------------------- /assets/images/stroke-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsyedmohsin/css-tips-tricks/ec3b146d533a571b990ee06c8e72a8fd6ef63979/assets/images/stroke-text.png -------------------------------------------------------------------------------- /assets/images/table-caption.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsyedmohsin/css-tips-tricks/ec3b146d533a571b990ee06c8e72a8fd6ef63979/assets/images/table-caption.gif -------------------------------------------------------------------------------- /assets/images/text-columns.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsyedmohsin/css-tips-tricks/ec3b146d533a571b990ee06c8e72a8fd6ef63979/assets/images/text-columns.png -------------------------------------------------------------------------------- /assets/images/text-indent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsyedmohsin/css-tips-tricks/ec3b146d533a571b990ee06c8e72a8fd6ef63979/assets/images/text-indent.png -------------------------------------------------------------------------------- /assets/images/writing-mode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsyedmohsin/css-tips-tricks/ec3b146d533a571b990ee06c8e72a8fd6ef63979/assets/images/writing-mode.png -------------------------------------------------------------------------------- /assets/images/zoom-on-hover.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsyedmohsin/css-tips-tricks/ec3b146d533a571b990ee06c8e72a8fd6ef63979/assets/images/zoom-on-hover.gif --------------------------------------------------------------------------------