├── LICENSE ├── README.md ├── _config.yml ├── animate.css ├── animation.html ├── fixed-position-example.html ├── github.svg ├── html-css-cheat-sheet.html ├── style.css └── tools.html /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Andy Chou 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # html-css-cheat-sheet 2 | 3 | A simple, curated HTML5 and CSS cheat sheet. 4 | 5 | ## Viewing the cheat sheet 6 | 7 | Just open [html-css-cheat-sheet.html](https://acchou.github.io/html-css-cheat-sheet/html-css-cheat-sheet.html) in your browser. There are no external dependencies. 8 | 9 | ## Features 10 | 11 | - **Visual examples** show you exactly how specific values of properties will display. Less guesswork. 12 | - **Inline styles** are used for the specific style properties being demonstrated, but not for container elements or scaffolding. This makes it very easy to use the browser's inspector to see exactly how the style is applied and on which element to achieve the desired presentation. 13 | - **Property name headings** describe the CSS property, and the specific visual examples have property values underneath. 14 | - Coverage of the latest standards including **flexbox** and **native CSS grid layout**. 15 | - Coverage of **keyframe animations**, **transitions**, and use of the popular library **animate.css**. 16 | - Uses **responsive design** and should view well on mobile devices, tablets, and large screens. 17 | 18 | ## Not a tutorial 19 | 20 | There are plenty of great resources to learn [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) and [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS). This cheat sheet doesn't attempt to teach everything from scratch. It is a refresher and visual assist for those who already understand HTML/CSS. 21 | 22 | This cheat sheet doesn't cover JavaScript. Consider [this tutorial](https://developer.mozilla.org/en-US/docs/Web/JavaScript), or this [other one](http://javascript.info/). 23 | 24 | ## License 25 | 26 | MIT. 27 | 28 | ## Contributions 29 | 30 | Pull requests, bug reports, and suggestions are welcome. I'll generally try to respond to issues quickly, though this is a personal project and I can make no guarantees about responsiveness. 31 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /animate.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*! 4 | * animate.css -http://daneden.me/animate 5 | * Version - 3.5.2 6 | * Licensed under the MIT license - http://opensource.org/licenses/MIT 7 | * 8 | * Copyright (c) 2017 Daniel Eden 9 | */ 10 | 11 | .animated { 12 | animation-duration: 1s; 13 | animation-fill-mode: both; 14 | } 15 | 16 | .animated.infinite { 17 | animation-iteration-count: infinite; 18 | } 19 | 20 | .animated.hinge { 21 | animation-duration: 2s; 22 | } 23 | 24 | .animated.flipOutX, 25 | .animated.flipOutY, 26 | .animated.bounceIn, 27 | .animated.bounceOut { 28 | animation-duration: .75s; 29 | } 30 | 31 | @keyframes bounce { 32 | from, 20%, 53%, 80%, to { 33 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 34 | transform: translate3d(0,0,0); 35 | } 36 | 37 | 40%, 43% { 38 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 39 | transform: translate3d(0, -30px, 0); 40 | } 41 | 42 | 70% { 43 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 44 | transform: translate3d(0, -15px, 0); 45 | } 46 | 47 | 90% { 48 | transform: translate3d(0,-4px,0); 49 | } 50 | } 51 | 52 | .bounce { 53 | animation-name: bounce; 54 | transform-origin: center bottom; 55 | } 56 | 57 | @keyframes flash { 58 | from, 50%, to { 59 | opacity: 1; 60 | } 61 | 62 | 25%, 75% { 63 | opacity: 0; 64 | } 65 | } 66 | 67 | .flash { 68 | animation-name: flash; 69 | } 70 | 71 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 72 | 73 | @keyframes pulse { 74 | from { 75 | transform: scale3d(1, 1, 1); 76 | } 77 | 78 | 50% { 79 | transform: scale3d(1.05, 1.05, 1.05); 80 | } 81 | 82 | to { 83 | transform: scale3d(1, 1, 1); 84 | } 85 | } 86 | 87 | .pulse { 88 | animation-name: pulse; 89 | } 90 | 91 | @keyframes rubberBand { 92 | from { 93 | transform: scale3d(1, 1, 1); 94 | } 95 | 96 | 30% { 97 | transform: scale3d(1.25, 0.75, 1); 98 | } 99 | 100 | 40% { 101 | transform: scale3d(0.75, 1.25, 1); 102 | } 103 | 104 | 50% { 105 | transform: scale3d(1.15, 0.85, 1); 106 | } 107 | 108 | 65% { 109 | transform: scale3d(.95, 1.05, 1); 110 | } 111 | 112 | 75% { 113 | transform: scale3d(1.05, .95, 1); 114 | } 115 | 116 | to { 117 | transform: scale3d(1, 1, 1); 118 | } 119 | } 120 | 121 | .rubberBand { 122 | animation-name: rubberBand; 123 | } 124 | 125 | @keyframes shake { 126 | from, to { 127 | transform: translate3d(0, 0, 0); 128 | } 129 | 130 | 10%, 30%, 50%, 70%, 90% { 131 | transform: translate3d(-10px, 0, 0); 132 | } 133 | 134 | 20%, 40%, 60%, 80% { 135 | transform: translate3d(10px, 0, 0); 136 | } 137 | } 138 | 139 | .shake { 140 | animation-name: shake; 141 | } 142 | 143 | @keyframes headShake { 144 | 0% { 145 | transform: translateX(0); 146 | } 147 | 148 | 6.5% { 149 | transform: translateX(-6px) rotateY(-9deg); 150 | } 151 | 152 | 18.5% { 153 | transform: translateX(5px) rotateY(7deg); 154 | } 155 | 156 | 31.5% { 157 | transform: translateX(-3px) rotateY(-5deg); 158 | } 159 | 160 | 43.5% { 161 | transform: translateX(2px) rotateY(3deg); 162 | } 163 | 164 | 50% { 165 | transform: translateX(0); 166 | } 167 | } 168 | 169 | .headShake { 170 | animation-timing-function: ease-in-out; 171 | animation-name: headShake; 172 | } 173 | 174 | @keyframes swing { 175 | 20% { 176 | transform: rotate3d(0, 0, 1, 15deg); 177 | } 178 | 179 | 40% { 180 | transform: rotate3d(0, 0, 1, -10deg); 181 | } 182 | 183 | 60% { 184 | transform: rotate3d(0, 0, 1, 5deg); 185 | } 186 | 187 | 80% { 188 | transform: rotate3d(0, 0, 1, -5deg); 189 | } 190 | 191 | to { 192 | transform: rotate3d(0, 0, 1, 0deg); 193 | } 194 | } 195 | 196 | .swing { 197 | transform-origin: top center; 198 | animation-name: swing; 199 | } 200 | 201 | @keyframes tada { 202 | from { 203 | transform: scale3d(1, 1, 1); 204 | } 205 | 206 | 10%, 20% { 207 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 208 | } 209 | 210 | 30%, 50%, 70%, 90% { 211 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 212 | } 213 | 214 | 40%, 60%, 80% { 215 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 216 | } 217 | 218 | to { 219 | transform: scale3d(1, 1, 1); 220 | } 221 | } 222 | 223 | .tada { 224 | animation-name: tada; 225 | } 226 | 227 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 228 | 229 | @keyframes wobble { 230 | from { 231 | transform: none; 232 | } 233 | 234 | 15% { 235 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 236 | } 237 | 238 | 30% { 239 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 240 | } 241 | 242 | 45% { 243 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 244 | } 245 | 246 | 60% { 247 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 248 | } 249 | 250 | 75% { 251 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 252 | } 253 | 254 | to { 255 | transform: none; 256 | } 257 | } 258 | 259 | .wobble { 260 | animation-name: wobble; 261 | } 262 | 263 | @keyframes jello { 264 | from, 11.1%, to { 265 | transform: none; 266 | } 267 | 268 | 22.2% { 269 | transform: skewX(-12.5deg) skewY(-12.5deg); 270 | } 271 | 272 | 33.3% { 273 | transform: skewX(6.25deg) skewY(6.25deg); 274 | } 275 | 276 | 44.4% { 277 | transform: skewX(-3.125deg) skewY(-3.125deg); 278 | } 279 | 280 | 55.5% { 281 | transform: skewX(1.5625deg) skewY(1.5625deg); 282 | } 283 | 284 | 66.6% { 285 | transform: skewX(-0.78125deg) skewY(-0.78125deg); 286 | } 287 | 288 | 77.7% { 289 | transform: skewX(0.390625deg) skewY(0.390625deg); 290 | } 291 | 292 | 88.8% { 293 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 294 | } 295 | } 296 | 297 | .jello { 298 | animation-name: jello; 299 | transform-origin: center; 300 | } 301 | 302 | @keyframes bounceIn { 303 | from, 20%, 40%, 60%, 80%, to { 304 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 305 | } 306 | 307 | 0% { 308 | opacity: 0; 309 | transform: scale3d(.3, .3, .3); 310 | } 311 | 312 | 20% { 313 | transform: scale3d(1.1, 1.1, 1.1); 314 | } 315 | 316 | 40% { 317 | transform: scale3d(.9, .9, .9); 318 | } 319 | 320 | 60% { 321 | opacity: 1; 322 | transform: scale3d(1.03, 1.03, 1.03); 323 | } 324 | 325 | 80% { 326 | transform: scale3d(.97, .97, .97); 327 | } 328 | 329 | to { 330 | opacity: 1; 331 | transform: scale3d(1, 1, 1); 332 | } 333 | } 334 | 335 | .bounceIn { 336 | animation-name: bounceIn; 337 | } 338 | 339 | @keyframes bounceInDown { 340 | from, 60%, 75%, 90%, to { 341 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 342 | } 343 | 344 | 0% { 345 | opacity: 0; 346 | transform: translate3d(0, -3000px, 0); 347 | } 348 | 349 | 60% { 350 | opacity: 1; 351 | transform: translate3d(0, 25px, 0); 352 | } 353 | 354 | 75% { 355 | transform: translate3d(0, -10px, 0); 356 | } 357 | 358 | 90% { 359 | transform: translate3d(0, 5px, 0); 360 | } 361 | 362 | to { 363 | transform: none; 364 | } 365 | } 366 | 367 | .bounceInDown { 368 | animation-name: bounceInDown; 369 | } 370 | 371 | @keyframes bounceInLeft { 372 | from, 60%, 75%, 90%, to { 373 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 374 | } 375 | 376 | 0% { 377 | opacity: 0; 378 | transform: translate3d(-3000px, 0, 0); 379 | } 380 | 381 | 60% { 382 | opacity: 1; 383 | transform: translate3d(25px, 0, 0); 384 | } 385 | 386 | 75% { 387 | transform: translate3d(-10px, 0, 0); 388 | } 389 | 390 | 90% { 391 | transform: translate3d(5px, 0, 0); 392 | } 393 | 394 | to { 395 | transform: none; 396 | } 397 | } 398 | 399 | .bounceInLeft { 400 | animation-name: bounceInLeft; 401 | } 402 | 403 | @keyframes bounceInRight { 404 | from, 60%, 75%, 90%, to { 405 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 406 | } 407 | 408 | from { 409 | opacity: 0; 410 | transform: translate3d(3000px, 0, 0); 411 | } 412 | 413 | 60% { 414 | opacity: 1; 415 | transform: translate3d(-25px, 0, 0); 416 | } 417 | 418 | 75% { 419 | transform: translate3d(10px, 0, 0); 420 | } 421 | 422 | 90% { 423 | transform: translate3d(-5px, 0, 0); 424 | } 425 | 426 | to { 427 | transform: none; 428 | } 429 | } 430 | 431 | .bounceInRight { 432 | animation-name: bounceInRight; 433 | } 434 | 435 | @keyframes bounceInUp { 436 | from, 60%, 75%, 90%, to { 437 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 438 | } 439 | 440 | from { 441 | opacity: 0; 442 | transform: translate3d(0, 3000px, 0); 443 | } 444 | 445 | 60% { 446 | opacity: 1; 447 | transform: translate3d(0, -20px, 0); 448 | } 449 | 450 | 75% { 451 | transform: translate3d(0, 10px, 0); 452 | } 453 | 454 | 90% { 455 | transform: translate3d(0, -5px, 0); 456 | } 457 | 458 | to { 459 | transform: translate3d(0, 0, 0); 460 | } 461 | } 462 | 463 | .bounceInUp { 464 | animation-name: bounceInUp; 465 | } 466 | 467 | @keyframes bounceOut { 468 | 20% { 469 | transform: scale3d(.9, .9, .9); 470 | } 471 | 472 | 50%, 55% { 473 | opacity: 1; 474 | transform: scale3d(1.1, 1.1, 1.1); 475 | } 476 | 477 | to { 478 | opacity: 0; 479 | transform: scale3d(.3, .3, .3); 480 | } 481 | } 482 | 483 | .bounceOut { 484 | animation-name: bounceOut; 485 | } 486 | 487 | @keyframes bounceOutDown { 488 | 20% { 489 | transform: translate3d(0, 10px, 0); 490 | } 491 | 492 | 40%, 45% { 493 | opacity: 1; 494 | transform: translate3d(0, -20px, 0); 495 | } 496 | 497 | to { 498 | opacity: 0; 499 | transform: translate3d(0, 2000px, 0); 500 | } 501 | } 502 | 503 | .bounceOutDown { 504 | animation-name: bounceOutDown; 505 | } 506 | 507 | @keyframes bounceOutLeft { 508 | 20% { 509 | opacity: 1; 510 | transform: translate3d(20px, 0, 0); 511 | } 512 | 513 | to { 514 | opacity: 0; 515 | transform: translate3d(-2000px, 0, 0); 516 | } 517 | } 518 | 519 | .bounceOutLeft { 520 | animation-name: bounceOutLeft; 521 | } 522 | 523 | @keyframes bounceOutRight { 524 | 20% { 525 | opacity: 1; 526 | transform: translate3d(-20px, 0, 0); 527 | } 528 | 529 | to { 530 | opacity: 0; 531 | transform: translate3d(2000px, 0, 0); 532 | } 533 | } 534 | 535 | .bounceOutRight { 536 | animation-name: bounceOutRight; 537 | } 538 | 539 | @keyframes bounceOutUp { 540 | 20% { 541 | transform: translate3d(0, -10px, 0); 542 | } 543 | 544 | 40%, 45% { 545 | opacity: 1; 546 | transform: translate3d(0, 20px, 0); 547 | } 548 | 549 | to { 550 | opacity: 0; 551 | transform: translate3d(0, -2000px, 0); 552 | } 553 | } 554 | 555 | .bounceOutUp { 556 | animation-name: bounceOutUp; 557 | } 558 | 559 | @keyframes fadeIn { 560 | from { 561 | opacity: 0; 562 | } 563 | 564 | to { 565 | opacity: 1; 566 | } 567 | } 568 | 569 | .fadeIn { 570 | animation-name: fadeIn; 571 | } 572 | 573 | @keyframes fadeInDown { 574 | from { 575 | opacity: 0; 576 | transform: translate3d(0, -100%, 0); 577 | } 578 | 579 | to { 580 | opacity: 1; 581 | transform: none; 582 | } 583 | } 584 | 585 | .fadeInDown { 586 | animation-name: fadeInDown; 587 | } 588 | 589 | @keyframes fadeInDownBig { 590 | from { 591 | opacity: 0; 592 | transform: translate3d(0, -2000px, 0); 593 | } 594 | 595 | to { 596 | opacity: 1; 597 | transform: none; 598 | } 599 | } 600 | 601 | .fadeInDownBig { 602 | animation-name: fadeInDownBig; 603 | } 604 | 605 | @keyframes fadeInLeft { 606 | from { 607 | opacity: 0; 608 | transform: translate3d(-100%, 0, 0); 609 | } 610 | 611 | to { 612 | opacity: 1; 613 | transform: none; 614 | } 615 | } 616 | 617 | .fadeInLeft { 618 | animation-name: fadeInLeft; 619 | } 620 | 621 | @keyframes fadeInLeftBig { 622 | from { 623 | opacity: 0; 624 | transform: translate3d(-2000px, 0, 0); 625 | } 626 | 627 | to { 628 | opacity: 1; 629 | transform: none; 630 | } 631 | } 632 | 633 | .fadeInLeftBig { 634 | animation-name: fadeInLeftBig; 635 | } 636 | 637 | @keyframes fadeInRight { 638 | from { 639 | opacity: 0; 640 | transform: translate3d(100%, 0, 0); 641 | } 642 | 643 | to { 644 | opacity: 1; 645 | transform: none; 646 | } 647 | } 648 | 649 | .fadeInRight { 650 | animation-name: fadeInRight; 651 | } 652 | 653 | @keyframes fadeInRightBig { 654 | from { 655 | opacity: 0; 656 | transform: translate3d(2000px, 0, 0); 657 | } 658 | 659 | to { 660 | opacity: 1; 661 | transform: none; 662 | } 663 | } 664 | 665 | .fadeInRightBig { 666 | animation-name: fadeInRightBig; 667 | } 668 | 669 | @keyframes fadeInUp { 670 | from { 671 | opacity: 0; 672 | transform: translate3d(0, 100%, 0); 673 | } 674 | 675 | to { 676 | opacity: 1; 677 | transform: none; 678 | } 679 | } 680 | 681 | .fadeInUp { 682 | animation-name: fadeInUp; 683 | } 684 | 685 | @keyframes fadeInUpBig { 686 | from { 687 | opacity: 0; 688 | transform: translate3d(0, 2000px, 0); 689 | } 690 | 691 | to { 692 | opacity: 1; 693 | transform: none; 694 | } 695 | } 696 | 697 | .fadeInUpBig { 698 | animation-name: fadeInUpBig; 699 | } 700 | 701 | @keyframes fadeOut { 702 | from { 703 | opacity: 1; 704 | } 705 | 706 | to { 707 | opacity: 0; 708 | } 709 | } 710 | 711 | .fadeOut { 712 | animation-name: fadeOut; 713 | } 714 | 715 | @keyframes fadeOutDown { 716 | from { 717 | opacity: 1; 718 | } 719 | 720 | to { 721 | opacity: 0; 722 | transform: translate3d(0, 100%, 0); 723 | } 724 | } 725 | 726 | .fadeOutDown { 727 | animation-name: fadeOutDown; 728 | } 729 | 730 | @keyframes fadeOutDownBig { 731 | from { 732 | opacity: 1; 733 | } 734 | 735 | to { 736 | opacity: 0; 737 | transform: translate3d(0, 2000px, 0); 738 | } 739 | } 740 | 741 | .fadeOutDownBig { 742 | animation-name: fadeOutDownBig; 743 | } 744 | 745 | @keyframes fadeOutLeft { 746 | from { 747 | opacity: 1; 748 | } 749 | 750 | to { 751 | opacity: 0; 752 | transform: translate3d(-100%, 0, 0); 753 | } 754 | } 755 | 756 | .fadeOutLeft { 757 | animation-name: fadeOutLeft; 758 | } 759 | 760 | @keyframes fadeOutLeftBig { 761 | from { 762 | opacity: 1; 763 | } 764 | 765 | to { 766 | opacity: 0; 767 | transform: translate3d(-2000px, 0, 0); 768 | } 769 | } 770 | 771 | .fadeOutLeftBig { 772 | animation-name: fadeOutLeftBig; 773 | } 774 | 775 | @keyframes fadeOutRight { 776 | from { 777 | opacity: 1; 778 | } 779 | 780 | to { 781 | opacity: 0; 782 | transform: translate3d(100%, 0, 0); 783 | } 784 | } 785 | 786 | .fadeOutRight { 787 | animation-name: fadeOutRight; 788 | } 789 | 790 | @keyframes fadeOutRightBig { 791 | from { 792 | opacity: 1; 793 | } 794 | 795 | to { 796 | opacity: 0; 797 | transform: translate3d(2000px, 0, 0); 798 | } 799 | } 800 | 801 | .fadeOutRightBig { 802 | animation-name: fadeOutRightBig; 803 | } 804 | 805 | @keyframes fadeOutUp { 806 | from { 807 | opacity: 1; 808 | } 809 | 810 | to { 811 | opacity: 0; 812 | transform: translate3d(0, -100%, 0); 813 | } 814 | } 815 | 816 | .fadeOutUp { 817 | animation-name: fadeOutUp; 818 | } 819 | 820 | @keyframes fadeOutUpBig { 821 | from { 822 | opacity: 1; 823 | } 824 | 825 | to { 826 | opacity: 0; 827 | transform: translate3d(0, -2000px, 0); 828 | } 829 | } 830 | 831 | .fadeOutUpBig { 832 | animation-name: fadeOutUpBig; 833 | } 834 | 835 | @keyframes flip { 836 | from { 837 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 838 | animation-timing-function: ease-out; 839 | } 840 | 841 | 40% { 842 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 843 | animation-timing-function: ease-out; 844 | } 845 | 846 | 50% { 847 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 848 | animation-timing-function: ease-in; 849 | } 850 | 851 | 80% { 852 | transform: perspective(400px) scale3d(.95, .95, .95); 853 | animation-timing-function: ease-in; 854 | } 855 | 856 | to { 857 | transform: perspective(400px); 858 | animation-timing-function: ease-in; 859 | } 860 | } 861 | 862 | .animated.flip { 863 | -webkit-backface-visibility: visible; 864 | backface-visibility: visible; 865 | animation-name: flip; 866 | } 867 | 868 | @keyframes flipInX { 869 | from { 870 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 871 | animation-timing-function: ease-in; 872 | opacity: 0; 873 | } 874 | 875 | 40% { 876 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 877 | animation-timing-function: ease-in; 878 | } 879 | 880 | 60% { 881 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 882 | opacity: 1; 883 | } 884 | 885 | 80% { 886 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 887 | } 888 | 889 | to { 890 | transform: perspective(400px); 891 | } 892 | } 893 | 894 | .flipInX { 895 | -webkit-backface-visibility: visible !important; 896 | backface-visibility: visible !important; 897 | animation-name: flipInX; 898 | } 899 | 900 | @keyframes flipInY { 901 | from { 902 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 903 | animation-timing-function: ease-in; 904 | opacity: 0; 905 | } 906 | 907 | 40% { 908 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 909 | animation-timing-function: ease-in; 910 | } 911 | 912 | 60% { 913 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 914 | opacity: 1; 915 | } 916 | 917 | 80% { 918 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 919 | } 920 | 921 | to { 922 | transform: perspective(400px); 923 | } 924 | } 925 | 926 | .flipInY { 927 | -webkit-backface-visibility: visible !important; 928 | backface-visibility: visible !important; 929 | animation-name: flipInY; 930 | } 931 | 932 | @keyframes flipOutX { 933 | from { 934 | transform: perspective(400px); 935 | } 936 | 937 | 30% { 938 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 939 | opacity: 1; 940 | } 941 | 942 | to { 943 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 944 | opacity: 0; 945 | } 946 | } 947 | 948 | .flipOutX { 949 | animation-name: flipOutX; 950 | -webkit-backface-visibility: visible !important; 951 | backface-visibility: visible !important; 952 | } 953 | 954 | @keyframes flipOutY { 955 | from { 956 | transform: perspective(400px); 957 | } 958 | 959 | 30% { 960 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 961 | opacity: 1; 962 | } 963 | 964 | to { 965 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 966 | opacity: 0; 967 | } 968 | } 969 | 970 | .flipOutY { 971 | -webkit-backface-visibility: visible !important; 972 | backface-visibility: visible !important; 973 | animation-name: flipOutY; 974 | } 975 | 976 | @keyframes lightSpeedIn { 977 | from { 978 | transform: translate3d(100%, 0, 0) skewX(-30deg); 979 | opacity: 0; 980 | } 981 | 982 | 60% { 983 | transform: skewX(20deg); 984 | opacity: 1; 985 | } 986 | 987 | 80% { 988 | transform: skewX(-5deg); 989 | opacity: 1; 990 | } 991 | 992 | to { 993 | transform: none; 994 | opacity: 1; 995 | } 996 | } 997 | 998 | .lightSpeedIn { 999 | animation-name: lightSpeedIn; 1000 | animation-timing-function: ease-out; 1001 | } 1002 | 1003 | @keyframes lightSpeedOut { 1004 | from { 1005 | opacity: 1; 1006 | } 1007 | 1008 | to { 1009 | transform: translate3d(100%, 0, 0) skewX(30deg); 1010 | opacity: 0; 1011 | } 1012 | } 1013 | 1014 | .lightSpeedOut { 1015 | animation-name: lightSpeedOut; 1016 | animation-timing-function: ease-in; 1017 | } 1018 | 1019 | @keyframes rotateIn { 1020 | from { 1021 | transform-origin: center; 1022 | transform: rotate3d(0, 0, 1, -200deg); 1023 | opacity: 0; 1024 | } 1025 | 1026 | to { 1027 | transform-origin: center; 1028 | transform: none; 1029 | opacity: 1; 1030 | } 1031 | } 1032 | 1033 | .rotateIn { 1034 | animation-name: rotateIn; 1035 | } 1036 | 1037 | @keyframes rotateInDownLeft { 1038 | from { 1039 | transform-origin: left bottom; 1040 | transform: rotate3d(0, 0, 1, -45deg); 1041 | opacity: 0; 1042 | } 1043 | 1044 | to { 1045 | transform-origin: left bottom; 1046 | transform: none; 1047 | opacity: 1; 1048 | } 1049 | } 1050 | 1051 | .rotateInDownLeft { 1052 | animation-name: rotateInDownLeft; 1053 | } 1054 | 1055 | @keyframes rotateInDownRight { 1056 | from { 1057 | transform-origin: right bottom; 1058 | transform: rotate3d(0, 0, 1, 45deg); 1059 | opacity: 0; 1060 | } 1061 | 1062 | to { 1063 | transform-origin: right bottom; 1064 | transform: none; 1065 | opacity: 1; 1066 | } 1067 | } 1068 | 1069 | .rotateInDownRight { 1070 | animation-name: rotateInDownRight; 1071 | } 1072 | 1073 | @keyframes rotateInUpLeft { 1074 | from { 1075 | transform-origin: left bottom; 1076 | transform: rotate3d(0, 0, 1, 45deg); 1077 | opacity: 0; 1078 | } 1079 | 1080 | to { 1081 | transform-origin: left bottom; 1082 | transform: none; 1083 | opacity: 1; 1084 | } 1085 | } 1086 | 1087 | .rotateInUpLeft { 1088 | animation-name: rotateInUpLeft; 1089 | } 1090 | 1091 | @keyframes rotateInUpRight { 1092 | from { 1093 | transform-origin: right bottom; 1094 | transform: rotate3d(0, 0, 1, -90deg); 1095 | opacity: 0; 1096 | } 1097 | 1098 | to { 1099 | transform-origin: right bottom; 1100 | transform: none; 1101 | opacity: 1; 1102 | } 1103 | } 1104 | 1105 | .rotateInUpRight { 1106 | animation-name: rotateInUpRight; 1107 | } 1108 | 1109 | @keyframes rotateOut { 1110 | from { 1111 | transform-origin: center; 1112 | opacity: 1; 1113 | } 1114 | 1115 | to { 1116 | transform-origin: center; 1117 | transform: rotate3d(0, 0, 1, 200deg); 1118 | opacity: 0; 1119 | } 1120 | } 1121 | 1122 | .rotateOut { 1123 | animation-name: rotateOut; 1124 | } 1125 | 1126 | @keyframes rotateOutDownLeft { 1127 | from { 1128 | transform-origin: left bottom; 1129 | opacity: 1; 1130 | } 1131 | 1132 | to { 1133 | transform-origin: left bottom; 1134 | transform: rotate3d(0, 0, 1, 45deg); 1135 | opacity: 0; 1136 | } 1137 | } 1138 | 1139 | .rotateOutDownLeft { 1140 | animation-name: rotateOutDownLeft; 1141 | } 1142 | 1143 | @keyframes rotateOutDownRight { 1144 | from { 1145 | transform-origin: right bottom; 1146 | opacity: 1; 1147 | } 1148 | 1149 | to { 1150 | transform-origin: right bottom; 1151 | transform: rotate3d(0, 0, 1, -45deg); 1152 | opacity: 0; 1153 | } 1154 | } 1155 | 1156 | .rotateOutDownRight { 1157 | animation-name: rotateOutDownRight; 1158 | } 1159 | 1160 | @keyframes rotateOutUpLeft { 1161 | from { 1162 | transform-origin: left bottom; 1163 | opacity: 1; 1164 | } 1165 | 1166 | to { 1167 | transform-origin: left bottom; 1168 | transform: rotate3d(0, 0, 1, -45deg); 1169 | opacity: 0; 1170 | } 1171 | } 1172 | 1173 | .rotateOutUpLeft { 1174 | animation-name: rotateOutUpLeft; 1175 | } 1176 | 1177 | @keyframes rotateOutUpRight { 1178 | from { 1179 | transform-origin: right bottom; 1180 | opacity: 1; 1181 | } 1182 | 1183 | to { 1184 | transform-origin: right bottom; 1185 | transform: rotate3d(0, 0, 1, 90deg); 1186 | opacity: 0; 1187 | } 1188 | } 1189 | 1190 | .rotateOutUpRight { 1191 | animation-name: rotateOutUpRight; 1192 | } 1193 | 1194 | @keyframes hinge { 1195 | 0% { 1196 | transform-origin: top left; 1197 | animation-timing-function: ease-in-out; 1198 | } 1199 | 1200 | 20%, 60% { 1201 | transform: rotate3d(0, 0, 1, 80deg); 1202 | transform-origin: top left; 1203 | animation-timing-function: ease-in-out; 1204 | } 1205 | 1206 | 40%, 80% { 1207 | transform: rotate3d(0, 0, 1, 60deg); 1208 | transform-origin: top left; 1209 | animation-timing-function: ease-in-out; 1210 | opacity: 1; 1211 | } 1212 | 1213 | to { 1214 | transform: translate3d(0, 700px, 0); 1215 | opacity: 0; 1216 | } 1217 | } 1218 | 1219 | .hinge { 1220 | animation-name: hinge; 1221 | } 1222 | 1223 | @keyframes jackInTheBox { 1224 | from { 1225 | opacity: 0; 1226 | transform: scale(0.1) rotate(30deg); 1227 | transform-origin: center bottom; 1228 | } 1229 | 1230 | 50% { 1231 | transform: rotate(-10deg); 1232 | } 1233 | 1234 | 70% { 1235 | transform: rotate(3deg); 1236 | } 1237 | 1238 | to { 1239 | opacity: 1; 1240 | transform: scale(1); 1241 | } 1242 | } 1243 | 1244 | .jackInTheBox { 1245 | animation-name: jackInTheBox; 1246 | } 1247 | 1248 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 1249 | 1250 | @keyframes rollIn { 1251 | from { 1252 | opacity: 0; 1253 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 1254 | } 1255 | 1256 | to { 1257 | opacity: 1; 1258 | transform: none; 1259 | } 1260 | } 1261 | 1262 | .rollIn { 1263 | animation-name: rollIn; 1264 | } 1265 | 1266 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 1267 | 1268 | @keyframes rollOut { 1269 | from { 1270 | opacity: 1; 1271 | } 1272 | 1273 | to { 1274 | opacity: 0; 1275 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 1276 | } 1277 | } 1278 | 1279 | .rollOut { 1280 | animation-name: rollOut; 1281 | } 1282 | 1283 | @keyframes zoomIn { 1284 | from { 1285 | opacity: 0; 1286 | transform: scale3d(.3, .3, .3); 1287 | } 1288 | 1289 | 50% { 1290 | opacity: 1; 1291 | } 1292 | } 1293 | 1294 | .zoomIn { 1295 | animation-name: zoomIn; 1296 | } 1297 | 1298 | @keyframes zoomInDown { 1299 | from { 1300 | opacity: 0; 1301 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 1302 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1303 | } 1304 | 1305 | 60% { 1306 | opacity: 1; 1307 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 1308 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1309 | } 1310 | } 1311 | 1312 | .zoomInDown { 1313 | animation-name: zoomInDown; 1314 | } 1315 | 1316 | @keyframes zoomInLeft { 1317 | from { 1318 | opacity: 0; 1319 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 1320 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1321 | } 1322 | 1323 | 60% { 1324 | opacity: 1; 1325 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 1326 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1327 | } 1328 | } 1329 | 1330 | .zoomInLeft { 1331 | animation-name: zoomInLeft; 1332 | } 1333 | 1334 | @keyframes zoomInRight { 1335 | from { 1336 | opacity: 0; 1337 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 1338 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1339 | } 1340 | 1341 | 60% { 1342 | opacity: 1; 1343 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 1344 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1345 | } 1346 | } 1347 | 1348 | .zoomInRight { 1349 | animation-name: zoomInRight; 1350 | } 1351 | 1352 | @keyframes zoomInUp { 1353 | from { 1354 | opacity: 0; 1355 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 1356 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1357 | } 1358 | 1359 | 60% { 1360 | opacity: 1; 1361 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 1362 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1363 | } 1364 | } 1365 | 1366 | .zoomInUp { 1367 | animation-name: zoomInUp; 1368 | } 1369 | 1370 | @keyframes zoomOut { 1371 | from { 1372 | opacity: 1; 1373 | } 1374 | 1375 | 50% { 1376 | opacity: 0; 1377 | transform: scale3d(.3, .3, .3); 1378 | } 1379 | 1380 | to { 1381 | opacity: 0; 1382 | } 1383 | } 1384 | 1385 | .zoomOut { 1386 | animation-name: zoomOut; 1387 | } 1388 | 1389 | @keyframes zoomOutDown { 1390 | 40% { 1391 | opacity: 1; 1392 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 1393 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1394 | } 1395 | 1396 | to { 1397 | opacity: 0; 1398 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 1399 | transform-origin: center bottom; 1400 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1401 | } 1402 | } 1403 | 1404 | .zoomOutDown { 1405 | animation-name: zoomOutDown; 1406 | } 1407 | 1408 | @keyframes zoomOutLeft { 1409 | 40% { 1410 | opacity: 1; 1411 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 1412 | } 1413 | 1414 | to { 1415 | opacity: 0; 1416 | transform: scale(.1) translate3d(-2000px, 0, 0); 1417 | transform-origin: left center; 1418 | } 1419 | } 1420 | 1421 | .zoomOutLeft { 1422 | animation-name: zoomOutLeft; 1423 | } 1424 | 1425 | @keyframes zoomOutRight { 1426 | 40% { 1427 | opacity: 1; 1428 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 1429 | } 1430 | 1431 | to { 1432 | opacity: 0; 1433 | transform: scale(.1) translate3d(2000px, 0, 0); 1434 | transform-origin: right center; 1435 | } 1436 | } 1437 | 1438 | .zoomOutRight { 1439 | animation-name: zoomOutRight; 1440 | } 1441 | 1442 | @keyframes zoomOutUp { 1443 | 40% { 1444 | opacity: 1; 1445 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 1446 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1447 | } 1448 | 1449 | to { 1450 | opacity: 0; 1451 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 1452 | transform-origin: center bottom; 1453 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1454 | } 1455 | } 1456 | 1457 | .zoomOutUp { 1458 | animation-name: zoomOutUp; 1459 | } 1460 | 1461 | @keyframes slideInDown { 1462 | from { 1463 | transform: translate3d(0, -100%, 0); 1464 | visibility: visible; 1465 | } 1466 | 1467 | to { 1468 | transform: translate3d(0, 0, 0); 1469 | } 1470 | } 1471 | 1472 | .slideInDown { 1473 | animation-name: slideInDown; 1474 | } 1475 | 1476 | @keyframes slideInLeft { 1477 | from { 1478 | transform: translate3d(-100%, 0, 0); 1479 | visibility: visible; 1480 | } 1481 | 1482 | to { 1483 | transform: translate3d(0, 0, 0); 1484 | } 1485 | } 1486 | 1487 | .slideInLeft { 1488 | animation-name: slideInLeft; 1489 | } 1490 | 1491 | @keyframes slideInRight { 1492 | from { 1493 | transform: translate3d(100%, 0, 0); 1494 | visibility: visible; 1495 | } 1496 | 1497 | to { 1498 | transform: translate3d(0, 0, 0); 1499 | } 1500 | } 1501 | 1502 | .slideInRight { 1503 | animation-name: slideInRight; 1504 | } 1505 | 1506 | @keyframes slideInUp { 1507 | from { 1508 | transform: translate3d(0, 100%, 0); 1509 | visibility: visible; 1510 | } 1511 | 1512 | to { 1513 | transform: translate3d(0, 0, 0); 1514 | } 1515 | } 1516 | 1517 | .slideInUp { 1518 | animation-name: slideInUp; 1519 | } 1520 | 1521 | @keyframes slideOutDown { 1522 | from { 1523 | transform: translate3d(0, 0, 0); 1524 | } 1525 | 1526 | to { 1527 | visibility: hidden; 1528 | transform: translate3d(0, 100%, 0); 1529 | } 1530 | } 1531 | 1532 | .slideOutDown { 1533 | animation-name: slideOutDown; 1534 | } 1535 | 1536 | @keyframes slideOutLeft { 1537 | from { 1538 | transform: translate3d(0, 0, 0); 1539 | } 1540 | 1541 | to { 1542 | visibility: hidden; 1543 | transform: translate3d(-100%, 0, 0); 1544 | } 1545 | } 1546 | 1547 | .slideOutLeft { 1548 | animation-name: slideOutLeft; 1549 | } 1550 | 1551 | @keyframes slideOutRight { 1552 | from { 1553 | transform: translate3d(0, 0, 0); 1554 | } 1555 | 1556 | to { 1557 | visibility: hidden; 1558 | transform: translate3d(100%, 0, 0); 1559 | } 1560 | } 1561 | 1562 | .slideOutRight { 1563 | animation-name: slideOutRight; 1564 | } 1565 | 1566 | @keyframes slideOutUp { 1567 | from { 1568 | transform: translate3d(0, 0, 0); 1569 | } 1570 | 1571 | to { 1572 | visibility: hidden; 1573 | transform: translate3d(0, -100%, 0); 1574 | } 1575 | } 1576 | 1577 | .slideOutUp { 1578 | animation-name: slideOutUp; 1579 | } 1580 | -------------------------------------------------------------------------------- /animation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Animation and Transitions 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 38 |
39 |

Animation and Transitions

40 |
41 |

Transition template

42 |
43 |

Transition all properties

44 |
45 | .element { 46 | transition: 1s all; 47 | 48 | /* Add other properties such as transform, margin, etc. */ 49 | } 50 |
51 |
52 |
53 |
54 |

Transitions

55 |

Different states may be defined using pseudo-classes like 56 | :hover or 57 | :active or dynamically set using JavaScript.

58 |
59 |

transition-duration:

60 |
61 |
62 |
63 |
64 | 0.7s; 65 |
66 |
67 |
68 |
69 |
70 | 1s; 71 |
72 |
73 |
74 |
75 |
76 | 2s; 77 |
78 |
79 |
80 |
81 |
82 | 3s; 83 |
84 |
85 |
86 |

transition-timing-function:

87 |
88 |
89 |
90 |
91 |
92 | linear; 93 |
94 |
95 |
96 |
97 |
98 | ease; 99 |
100 |
101 |
102 |
103 |
104 | ease-in; 105 |
106 |
107 |
108 |
109 |
110 | ease-out; 111 |
112 |
113 |
114 |
115 |
116 | ease-in-out; 117 |
118 |
119 |
120 |
121 |
122 | steps(4); 123 |
124 |
125 |
126 |
127 |
128 | steps(10); 129 |
130 |
131 |
132 |
133 |
134 | step-start; 135 |
136 |
137 |
138 |
139 |
140 | step-end; 141 |
142 |
143 |
144 |
145 |

transition-delay:

146 |
147 |
148 |
149 |
150 | 0s; 151 |
152 |
153 |
154 |
155 |
156 | 0.3s; 157 |
158 |
159 |
160 |
161 |
162 | 0.7s; 163 |
164 |
165 |
166 |
167 |
168 | 1.5s; 169 |
170 |
171 |
172 |

transition-property:

173 |

Transition a specific property (other properties jump to final state).

174 |
175 |
176 |
A
177 |
178 | all; 179 |
180 |
181 |
182 |
A
183 |
184 | color; 185 |
186 |
187 |
188 |
A
189 |
190 | margin; 191 |
192 |
193 |
194 |
A
195 |
196 | background; 197 |
198 |
199 |
200 |
201 |

Transition examples

202 |
203 |

Card

204 |
205 |
206 |
207 |
A
208 |
B
209 |
210 |
211 |
212 | HTML 213 | <div class="ex-card"> 214 | <div class="card"> 215 | <div class="card-front">A</div> 216 | <div class="card-back">B</div> 217 | </div> 218 | </div> 219 |
220 |
221 | CSS 222 | .ex-card:hover .card { 223 | transform: rotateY(180deg) translateX(100%); 224 | } 225 | 226 | .ex-card { 227 | perspective: 300px; 228 | } 229 | 230 | .card { 231 | transition: 0.7s; 232 | transform-style: preserve-3d; 233 | transform-origin: right; 234 | position: relative; 235 | } 236 | 237 | .card-front, .card-back { 238 | backface-visibility: hidden; 239 | position: absolute; 240 | } 241 | 242 | .card-back { 243 | transform: rotateY(180deg) translateZ(1px); 244 | } 245 |
246 |
247 |
248 |
249 |

Tooltip

250 |
251 |
252 |
253 |

This is a tooltip message.

254 |
255 |
256 | HTML 257 | <div class="ex-tooltip"> 258 | <div class="box biggest"></div> 259 | <p class="tooltip">This is a tooltip message.</p> 260 | </div> 261 |
262 |
263 | CSS 264 | .tooltip { 265 | background-color: transparent; 266 | border-radius: 8px; 267 | color: transparent; 268 | font-size: 0.7em; 269 | position: absolute; 270 | transition: 0.5s; 271 | padding: 0.5em 1em; 272 | margin-top: 0; 273 | z-index: 1000; 274 | } 275 | 276 | .ex-tooltip:hover > .tooltip { 277 | background-color: yellow; 278 | color: black; 279 | font-size: 1.2em; 280 | } 281 |
282 |
283 |
284 |
285 |

Translation

286 |
287 |
288 |
289 |
290 |
291 | CSS 292 | .container .box { 293 | transition: 1s all; 294 | } 295 | 296 | .container:hover .box { 297 | transform: translateX(200px); 298 | } 299 |
300 |
301 |
302 |
303 |

Translation

304 | 305 |
306 |
307 |
308 |

CSS animation

309 |

See 310 | MDN on CSS animations. Also check out 311 | GreenSock.

312 |
313 |

animation-duration:

314 |
315 |
316 |
317 |
318 | 0.7s; 319 |
320 |
321 |
322 |
323 |
324 | 1s; 325 |
326 |
327 |
328 |
329 |
330 | 2s; 331 |
332 |
333 |
334 |
335 |
336 | 3s; 337 |
338 |
339 |
340 |

animation-direction:

341 |
342 |
343 |
344 |
345 | normal; 346 |
347 |
348 |
349 |
350 |
351 | alternate; 352 |
353 |
354 |
355 |
356 |
357 | reverse; 358 |
359 |
360 |
361 |
362 |
363 | alternate-reverse; 364 |
365 |
366 |
367 |

animation-iteration-count:

368 |
369 |
370 |
371 |
372 | 1; 373 |
374 |
375 |
376 |
377 |
378 | 2; 379 |
380 |
381 |
382 |
383 |
384 | infinite; 385 |
386 |
387 |
388 |

animation-timing-function:

389 |
390 |
391 |
392 |
393 |
394 | linear; 395 |
396 |
397 |
398 |
399 |
400 | ease; 401 |
402 |
403 |
404 |
405 |
406 | ease-in; 407 |
408 |
409 |
410 |
411 |
412 | ease-out; 413 |
414 |
415 |
416 |
417 |
418 | ease-in-out; 419 |
420 |
421 |
422 |
423 |
424 | steps(4); 425 |
426 |
427 |
428 |
429 |
430 | steps(10); 431 |
432 |
433 |
434 |
435 |
436 | step-start; 437 |
438 |
439 |
440 |
441 |
442 | step-end; 443 |
444 |
445 |
446 |
447 |

animation-fill-mode:

448 |

449 | Initial state 450 | Delay state 1s 451 | Animate 1s 452 | End state 453 |

454 |
455 |
456 |
A
457 |
458 | none; 459 |
460 |
461 |
462 |
A
463 |
464 | forwards; 465 |
466 |
467 |
468 |
A
469 |
470 | backwards; 471 |
472 |
473 |
474 |
A
475 |
476 | both; 477 |
478 |
479 |
480 | 481 | 482 |
483 |

Animation Keyframes

484 |
485 |

Slide right

486 |
487 |
488 |
489 |
490 | @keyframes slideright { 491 | from { 492 | margin-left: 0%; 493 | } 494 | to { 495 | margin-left: 80%; 496 | } 497 | } 498 |
499 |
500 |
501 |

Set background color

502 |
503 |
504 |
505 |
506 | @keyframes showbackground { 507 | from { 508 | background-color: blue; 509 | } 510 | to { 511 | background-color: red; 512 | } 513 | } 514 |
515 |
516 |
517 |

Grow size

518 |
519 |
520 |
521 |
522 | @keyframes growsize { 523 | from { 524 | height: 1em; 525 | width: 1em; 526 | } 527 | to { 528 | height: 4em; 529 | width: 4em; 530 | } 531 | } 532 |
533 |
534 |
535 |

Cursor

536 |
537 |
538 |
539 |
540 | @keyframes cursor { 541 | 50% { 542 | border-color: transparent; 543 | } 544 | } 545 |
546 |
547 |
548 | 549 |
550 |

Using animate.css

551 |
552 |

Attention

553 |
554 |
555 |
556 |

bounce

557 |
558 | class="animated bounce" 559 |
560 |
561 |
562 |

flash

563 |
564 | class="animated flash" 565 |
566 |
567 |
568 |

pulse

569 |
570 | class="animated pulse" 571 |
572 |
573 |
574 |

rubberBand

575 |
576 | class="animated rubberBand" 577 |
578 |
579 |
580 |

shake

581 |
582 | class="animated shake" 583 |
584 |
585 |
586 |

headShake

587 |
588 | class="animated headShake" 589 |
590 |
591 |
592 |

swing

593 |
594 | class="animated swing" 595 |
596 |
597 |
598 |

tada

599 |
600 | class="animated tada" 601 |
602 |
603 |
604 |

wobble

605 |
606 | class="animated wobble" 607 |
608 |
609 |
610 |

jello

611 |
612 | class="animated jello" 613 |
614 |
615 |
616 |
617 |

Bouncing entrances

618 |
619 |
620 |

bounceIn

621 |
622 | class="animated bounceIn" 623 |
624 |
625 |
626 |

bounceInDown

627 |
628 | class="animated bounceInDown" 629 |
630 |
631 |
632 |

bounceInLeft

633 |
634 | class="animated bounceInLeft" 635 |
636 |
637 |
638 |

bounceInRight

639 |
640 | class="animated bounceInRight" 641 |
642 |
643 |
644 |

bounceInUp

645 |
646 | class="animated bounceInUp" 647 |
648 |
649 |
650 |

Bouncing exits

651 |
652 |
653 |

bounceOut

654 |
655 | class="animated bounceOut" 656 |
657 |
658 |
659 |

bounceOutDown

660 |
661 | class="animated bounceOutDown" 662 |
663 |
664 |
665 |

bounceOutLeft

666 |
667 | class="animated bounceOutLeft" 668 |
669 |
670 |
671 |

bounceOutRight

672 |
673 | class="animated bounceOutRight" 674 |
675 |
676 |
677 |

bounceOutUp

678 |
679 | class="animated bounceOutUp" 680 |
681 |
682 |
683 |

Fading entrances

684 |
685 |
686 |
687 |

fadeIn

688 |
689 | class="animated fadeIn" 690 |
691 |
692 |
693 |

fadeInDown

694 |
695 | class="animated fadeInDown" 696 |
697 |
698 |
699 |

fadeInDownBig

700 |
701 | class="animated fadeInDownBig" 702 |
703 |
704 |
705 |

fadeInLeft

706 |
707 | class="animated fadeInLeft" 708 |
709 |
710 |
711 |

fadeInLeftBig

712 |
713 | class="animated fadeInLeftBig" 714 |
715 |
716 |
717 |

fadeInRight

718 |
719 | class="animated fadeInRight" 720 |
721 |
722 |
723 |

fadeInRightBig

724 |
725 | class="animated fadeInRightBig" 726 |
727 |
728 |
729 |

fadeInUp

730 |
731 | class="animated fadeInUp" 732 |
733 |
734 |
735 |

fadeInUpBig

736 |
737 | class="animated fadeInUpBig" 738 |
739 |
740 |
741 |
742 |

Fading exits

743 |
744 |
745 |
746 |

fadeOut

747 |
748 | class="animated fadeOut" 749 |
750 |
751 |
752 |

fadeOutDown

753 |
754 | class="animated fadeOutDown" 755 |
756 |
757 |
758 |

fadeOutDownBig

759 |
760 | class="animated fadeOutDownBig" 761 |
762 |
763 |
764 |

fadeOutLeft

765 |
766 | class="animated fadeOutLeft" 767 |
768 |
769 |
770 |

fadeOutLeftBig

771 |
772 | class="animated fadeOutLeftBig" 773 |
774 |
775 |
776 |

fadeOutRight

777 |
778 | class="animated fadeOutRight" 779 |
780 |
781 |
782 |

fadeOutRightBig

783 |
784 | class="animated fadeOutRightBig" 785 |
786 |
787 |
788 |

fadeOutUp

789 |
790 | class="animated fadeOutUp" 791 |
792 |
793 |
794 |

fadeOutUpBig

795 |
796 | class="animated fadeOutUpBig" 797 |
798 |
799 |
800 |
801 |

Flips

802 |
803 |
804 |

flipInX

805 |
806 | class="animated flipInX" 807 |
808 |
809 |
810 |

flipInY

811 |
812 | class="animated flipInY" 813 |
814 |
815 |
816 |

flipOutX

817 |
818 | class="animated flipOutX" 819 |
820 |
821 |
822 |

flipOutY

823 |
824 | class="animated flipOutY" 825 |
826 |
827 |
828 |

Lightspeed

829 |
830 |
831 |

lightSpeedIn

832 |
833 | class="animated lightSpeedIn" 834 |
835 |
836 |
837 |

lightSpeedOut

838 |
839 | class="animated lightSpeedOut" 840 |
841 |
842 |
843 |

Rotating entrances

844 |
845 |
846 |

rotateIn

847 |
848 | class="animated rotateIn" 849 |
850 |
851 |
852 |

rotateInDownLeft

853 |
854 | class="animated rotateInDownLeft" 855 |
856 |
857 |
858 |

rotateInDownRight

859 |
860 | class="animated rotateInDownRight" 861 |
862 |
863 |
864 |

rotateInUpLeft

865 |
866 | class="animated rotateInUpLeft" 867 |
868 |
869 |
870 |

rotateInUpRight

871 |
872 | class="animated rotateInUpRight" 873 |
874 |
875 |
876 |

Rotating exits

877 |
878 |
879 |

rotateOut

880 |
881 | class="animated rotateOut" 882 |
883 |
884 |
885 |

rotateOutDownLeft

886 |
887 | class="animated rotateOutDownLeft" 888 |
889 |
890 |
891 |

rotateOutDownRight

892 |
893 | class="animated rotateOutDownRight" 894 |
895 |
896 |
897 |

rotateOutUpLeft

898 |
899 | class="animated rotateOutUpLeft" 900 |
901 |
902 |
903 |

rotateOutUpRight

904 |
905 | class="animated rotateOutUpRight" 906 |
907 |
908 |
909 |

Zoom entrances

910 |
911 |
912 |

zoomIn

913 |
914 | class="animated zoomIn" 915 |
916 |
917 |
918 |

zoomInDown

919 |
920 | class="animated zoomInDown" 921 |
922 |
923 |
924 |

zoomInLeft

925 |
926 | class="animated zoomInLeft" 927 |
928 |
929 |
930 |

zoomInRight

931 |
932 | class="animated zoomInRight" 933 |
934 |
935 |
936 |

zoomInUp

937 |
938 | class="animated zoomInUp" 939 |
940 |
941 |
942 |

Zoom exits

943 |
944 |
945 |

zoomOut

946 |
947 | class="animated zoomOut" 948 |
949 |
950 |
951 |

zoomOutDown

952 |
953 | class="animated zoomOutDown" 954 |
955 |
956 |
957 |

zoomOutLeft

958 |
959 | class="animated zoomOutLeft" 960 |
961 |
962 |
963 |

zoomOutRight

964 |
965 | class="animated zoomOutRight" 966 |
967 |
968 |
969 |

zoomOutUp

970 |
971 | class="animated zoomOutUp" 972 |
973 |
974 |
975 |

Slide entrances

976 |
977 |
978 |

slideInDown

979 |
980 | class="animated slideInDown" 981 |
982 |
983 |
984 |

slideInLeft

985 |
986 | class="animated slideInLeft" 987 |
988 |
989 |
990 |

slideInRight

991 |
992 | class="animated slideInRight" 993 |
994 |
995 |
996 |

slideInUp

997 |
998 | class="animated slideInUp" 999 |
1000 |
1001 |
1002 |

Slide exits

1003 |
1004 |
1005 |

slideOutDown

1006 |
1007 | class="animated slideOutDown" 1008 |
1009 |
1010 |
1011 |

slideOutLeft

1012 |
1013 | class="animated slideOutLeft" 1014 |
1015 |
1016 |
1017 |

slideOutRight

1018 |
1019 | class="animated slideOutRight" 1020 |
1021 |
1022 |
1023 |

slideOutUp

1024 |
1025 | class="animated slideOutUp" 1026 |
1027 |
1028 |
1029 |

Specials

1030 |
1031 |
1032 |

hinge

1033 |
1034 | class="animated hinge" 1035 |
1036 |
1037 |
1038 |

jackInTheBox

1039 |
1040 | class="animated jackInTheBox" 1041 |
1042 |
1043 |
1044 |

rollIn

1045 |
1046 | class="animated rollIn" 1047 |
1048 |
1049 |
1050 |

rollOut

1051 |
1052 | class="animated rollOut" 1053 |
1054 |
1055 |
1056 |
1057 | 1058 | 1059 | -------------------------------------------------------------------------------- /fixed-position-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam leo fringilla hendrerit efficitur. Maecenas bibendum 15 | iaculis purus eget placerat. Nunc aliquet tristique mauris, elementum suscipit ante congue sit amet. Mauris tempus 16 | tellus vitae felis volutpat sodales. Vestibulum a luctus neque. Ut malesuada lectus accumsan nibh laoreet, sit 17 | amet hendrerit nisl commodo. Nullam vel ultrices mauris. Vivamus malesuada auctor mollis. Nulla ultricies nisl 18 | rutrum sagittis condimentum. Aliquam sit amet tempus libero. Aenean iaculis arcu vel sapien pulvinar rhoncus. 19 | Etiam pellentesque eu risus vel euismod. Nullam efficitur euismod arcu, varius rhoncus sem elementum quis. Nunc 20 | in placerat orci, sit amet porttitor ex. Nunc varius tempor mattis. Aenean nunc nibh, bibendum vel facilisis 21 | vel, pellentesque sit amet mi. Phasellus venenatis venenatis turpis non pretium. Nulla malesuada justo eu elit 22 | sagittis, egestas aliquam nibh consequat. Vestibulum volutpat magna enim, ut eleifend eros vehicula vitae. Integer 23 | accumsan dui ex, at accumsan nulla faucibus sed. Donec feugiat scelerisque imperdiet. Nunc vitae tempor turpis, 24 | vel faucibus felis. Nam dignissim interdum turpis, vel pretium ipsum iaculis non. Duis laoreet dictum massa, 25 | in finibus sem malesuada vitae. 26 |
27 |
28 | left:0;
top:0; 29 |
30 |
31 | left:0;
bottom:0; 32 |
33 |
34 | right:0;
top:0; 35 |
36 |
37 | right:0;
bottom:0; 38 |
39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg-color-active: red; 3 | --bg-color-box: #aaa; 4 | --bg-color-header: cornflowerblue; 5 | --bg-color-highlight: #bbb; 6 | --bg-color-hover: green; 7 | --bg-color-light: white; 8 | --bg-color-link: yellow; 9 | --bg-color-nav: hsla(0, 0%, 30%, 1); 10 | --bg-color-semitransparent: hsla(0, 0%, 40%, 0.8); 11 | --bg-color-visited: #ccc; 12 | --bg-color: #eee; 13 | --border-baseline: 2px solid gray; 14 | --border-bounds: 1px solid gray; 15 | --border-container: 2px solid #ccc; 16 | --border-flex: 1px dashed #777; 17 | --border-guides: 1px dashed black; 18 | --border-header: 2px solid gray; 19 | --border-separator: 1px dashed #aaa; 20 | --border-subtle: 1px solid #999; 21 | --border-table: 2px solid black; 22 | --font-color-added: green; 23 | --font-color-dark: black; 24 | --font-color-light: white; 25 | --font-color-medium: #777; 26 | --font-family-code: "Source Code Pro", monospace; 27 | --font-family-main: "Source Sans Pro", sans-serif; 28 | --height-size-box: 100px; 29 | } 30 | 31 | nav { 32 | position: fixed; 33 | display: flex; 34 | justify-content: space-between; 35 | z-index: 1000; 36 | background-color: var(--bg-color-nav); 37 | min-width: 100px; 38 | min-height: 40px; 39 | width: 100%; 40 | } 41 | 42 | nav > ul { 43 | list-style: none; 44 | display: flex; 45 | } 46 | 47 | nav > ul.left { 48 | padding-left: 10px; 49 | } 50 | 51 | nav > ul > li { 52 | margin: 0px 20px; 53 | color: var(--font-color-light); 54 | display: flex; 55 | flex-direction: column; 56 | justify-content: center; 57 | } 58 | 59 | nav a:link, 60 | nav a:visited { 61 | color: var(--font-color-light); 62 | text-decoration: none; 63 | } 64 | 65 | nav .social-logo { 66 | display: block; 67 | width: 28px; 68 | height: 28px; 69 | } 70 | 71 | ul, 72 | ol { 73 | padding: 0; 74 | margin: 0; 75 | } 76 | 77 | body { 78 | font-family: var(--font-family-main); 79 | padding: 0; 80 | margin: 0; 81 | font-size: 14px; 82 | width: 100%; 83 | max-width: 2400px; 84 | } 85 | 86 | @media (min-width: 800px) { 87 | body { 88 | font-size: 16px; 89 | } 90 | nav { 91 | min-height: 60px; 92 | } 93 | nav .social-logo { 94 | width: 32px; 95 | height: 32px; 96 | } 97 | nav > ul.left { 98 | padding-left: 20px; 99 | } 100 | } 101 | 102 | .size-boxes { 103 | display: none; 104 | } 105 | 106 | #html, 107 | #animation-transitions { 108 | padding-top: 60px; 109 | } 110 | 111 | .size-box { 112 | z-index: 1000; 113 | position: fixed; 114 | height: var(--height-size-box); 115 | width: var(--height-size-box); 116 | top: 52px; 117 | color: var(--font-color-light); 118 | text-align: center; 119 | line-height: var(--height-size-box); 120 | } 121 | 122 | .size-box.box-1 { 123 | left: calc(0 * var(--height-size-box)); 124 | background-color: rgba(0%, 0%, 100%, 0.7); 125 | } 126 | .size-box.box-2 { 127 | left: calc(1 * var(--height-size-box)); 128 | background-color: rgba(20%, 0%, 80%, 0.7); 129 | } 130 | .size-box.box-3 { 131 | left: calc(2 * var(--height-size-box)); 132 | background-color: rgba(40%, 0%, 60%, 0.7); 133 | } 134 | .size-box.box-4 { 135 | left: calc(3 * var(--height-size-box)); 136 | background-color: rgba(60%, 0%, 40%, 0.7); 137 | } 138 | .size-box.box-5 { 139 | left: calc(4 * var(--height-size-box)); 140 | background-color: rgba(80%, 0%, 20%, 0.7); 141 | } 142 | .size-box.box-6 { 143 | left: calc(5 * var(--height-size-box)); 144 | background-color: rgba(0%, 0%, 100%, 0.7); 145 | } 146 | .size-box.box-7 { 147 | left: calc(6 * var(--height-size-box)); 148 | background-color: rgba(20%, 0%, 80%, 0.7); 149 | } 150 | .size-box.box-8 { 151 | left: calc(7 * var(--height-size-box)); 152 | background-color: rgba(40%, 0%, 60%, 0.7); 153 | } 154 | .size-box.box-9 { 155 | left: calc(8 * var(--height-size-box)); 156 | background-color: rgba(60%, 0%, 40%, 0.7); 157 | } 158 | .size-box.box-10 { 159 | left: calc(9 * var(--height-size-box)); 160 | background-color: rgba(80%, 0%, 20%, 0.7); 161 | } 162 | .size-box.box-11 { 163 | left: calc(10 * var(--height-size-box)); 164 | background-color: rgba(0%, 0%, 100%, 0.7); 165 | } 166 | .size-box.box-12 { 167 | left: calc(11 * var(--height-size-box)); 168 | background-color: rgba(20%, 0%, 80%, 0.7); 169 | } 170 | .size-box.box-13 { 171 | left: calc(12 * var(--height-size-box)); 172 | background-color: rgba(40%, 0%, 60%, 0.7); 173 | } 174 | .size-box.box-14 { 175 | left: calc(13 * var(--height-size-box)); 176 | background-color: rgba(60%, 0%, 40%, 0.7); 177 | } 178 | .size-box.box-15 { 179 | left: calc(14 * var(--height-size-box)); 180 | background-color: rgba(80%, 0%, 20%, 0.7); 181 | } 182 | .size-box.box-16 { 183 | left: calc(15 * var(--height-size-box)); 184 | background-color: rgba(0%, 0%, 100%, 0.7); 185 | } 186 | .size-box.box-17 { 187 | left: calc(16 * var(--height-size-box)); 188 | background-color: rgba(20%, 0%, 80%, 0.7); 189 | } 190 | .size-box.box-18 { 191 | left: calc(17 * var(--height-size-box)); 192 | background-color: rgba(40%, 0%, 60%, 0.7); 193 | } 194 | .size-box.box-19 { 195 | left: calc(18 * var(--height-size-box)); 196 | background-color: rgba(60%, 0%, 40%, 0.7); 197 | } 198 | .size-box.box-20 { 199 | left: calc(19 * var(--height-size-box)); 200 | background-color: rgba(80%, 0%, 20%, 0.7); 201 | } 202 | .size-box.box-21 { 203 | left: calc(20 * var(--height-size-box)); 204 | background-color: rgba(0%, 0%, 100%, 0.7); 205 | } 206 | .size-box.box-22 { 207 | left: calc(21 * var(--height-size-box)); 208 | background-color: rgba(20%, 0%, 80%, 0.7); 209 | } 210 | .size-box.box-23 { 211 | left: calc(22 * var(--height-size-box)); 212 | background-color: rgba(40%, 0%, 60%, 0.7); 213 | } 214 | .size-box.box-24 { 215 | left: calc(23 * var(--height-size-box)); 216 | background-color: rgba(60%, 0%, 40%, 0.7); 217 | } 218 | /* Snippets explain a CSS property, HTML element, 219 | or a single concept. */ 220 | .snippet { 221 | vertical-align: top; 222 | margin: 1vmin; 223 | background-color: var(--bg-color); 224 | border-radius: 6px; 225 | overflow: hidden; 226 | box-sizing: border-box; 227 | } 228 | 229 | @media (min-width: 800px) { 230 | .snippet { 231 | margin: 8px; 232 | } 233 | } 234 | 235 | .container { 236 | margin: 0; 237 | background-color: var(--bg-color-light); 238 | border: var(--border-container); 239 | border-top: none; 240 | border-top-left-radius: 0; 241 | border-top-right-radius: 0; 242 | } 243 | 244 | h1, 245 | h2, 246 | h3, 247 | h4, 248 | h5, 249 | h6 { 250 | margin: 0; 251 | padding: 6px 12px; 252 | } 253 | 254 | .snippet > h2 { 255 | background-color: var(--bg-color-header); 256 | color: var(--font-color-light); 257 | font-size: 1em; 258 | font-weight: normal; 259 | } 260 | 261 | section > h1 { 262 | grid-column: 1/-1; 263 | } 264 | 265 | section > h2 { 266 | border-radius: 8px; 267 | border: var(--border-header); 268 | color: var(--font-color-dark); 269 | display: block; 270 | font-size: 1.4em; 271 | font-weight: normal; 272 | grid-column: 1/-1; 273 | margin-top: 1em; 274 | padding: 0.5em 0.75em; 275 | } 276 | 277 | @media (min-width: 900px) { 278 | section > h2 { 279 | font-size: 1.5em; 280 | } 281 | } 282 | 283 | section > h3, 284 | .snippet > h3, 285 | .callout > h3, 286 | .container > h3 { 287 | font-size: 0.9em; 288 | font-weight: normal; 289 | color: var(--font-color-medium); 290 | background-color: initial; 291 | } 292 | 293 | section > h3 { 294 | grid-column: 1/-1; 295 | } 296 | 297 | code, 298 | .code, 299 | span.code { 300 | font-family: var(--font-family-code); 301 | white-space: pre; 302 | } 303 | 304 | code, 305 | span.code { 306 | color: var(--font-color-dark); 307 | } 308 | 309 | code { 310 | display: block; 311 | font-size: 0.85em; 312 | } 313 | 314 | .callout { 315 | display: flex; 316 | flex-direction: column; 317 | align-items: left; 318 | margin: 16px 24px; 319 | } 320 | 321 | @media (min-width: 600px) { 322 | .callout { 323 | align-items: center; 324 | margin: 16px 0; 325 | } 326 | } 327 | 328 | #css-positioning-fixed { 329 | border: 4px double black; 330 | } 331 | 332 | .codeblock { 333 | padding: 16px 24px; 334 | overflow: scroll; 335 | } 336 | 337 | .codeblock.ex-header { 338 | margin: 8px; 339 | padding: 0; 340 | } 341 | 342 | .ex-header h1 { 343 | font-size: 2em; 344 | } 345 | 346 | .codeblock > hr { 347 | border-top: var(--border-subtle); 348 | } 349 | 350 | /* Formatting code in headers. Default header padding 351 | makes code look too loose. */ 352 | .code.top { 353 | padding-bottom: 0; 354 | } 355 | 356 | .code.mid { 357 | padding-top: 0; 358 | padding-bottom: 0; 359 | } 360 | 361 | .code.bot { 362 | padding-top: 0; 363 | } 364 | 365 | code.subtle { 366 | color: var(--font-color-medium); 367 | font-size: 0.5em; 368 | padding: 4px; 369 | } 370 | 371 | .tooltip { 372 | background-color: transparent; 373 | border: 1px solid transparent; 374 | border-radius: 8px; 375 | color: transparent; 376 | font-size: 0.7em; 377 | position: absolute; 378 | transition: 0.5s; 379 | padding: 0.5em 1em; 380 | margin-top: 0; 381 | z-index: 1000; 382 | } 383 | 384 | .ex-tooltip:hover > .tooltip, 385 | .codeblock:hover > .tooltip { 386 | background-color: yellow; 387 | border-color: black; 388 | color: black; 389 | font-size: 1.2em; 390 | } 391 | 392 | .ex-transition-translate .box { 393 | transition: 1s all; 394 | } 395 | 396 | .ex-transition-translate:hover .box { 397 | transform: translateX(200px); 398 | } 399 | 400 | section { 401 | padding: 0 0; 402 | margin: 0 0.5em; 403 | } 404 | 405 | @media (min-width: 600px) { 406 | section { 407 | margin: 0 1em; 408 | } 409 | } 410 | 411 | .box, 412 | .bar, 413 | .content-box { 414 | background-color: var(--bg-color-box); 415 | color: var(--font-color-light); 416 | } 417 | 418 | .box.transform { 419 | line-height: 1.5em; 420 | } 421 | 422 | .box, 423 | .bar { 424 | font-family: var(--font-family-code); 425 | display: inline-block; 426 | border-radius: 4px; 427 | min-height: 1.5em; 428 | text-align: center; 429 | vertical-align: middle; 430 | } 431 | 432 | .box.to-clear { 433 | padding: 8px; 434 | } 435 | 436 | .bar.vertical { 437 | min-height: 0; 438 | min-width: 1.5em; 439 | } 440 | 441 | .box { 442 | min-width: 1.5em; 443 | margin: 4px; 444 | } 445 | 446 | .box.absolute { 447 | position: absolute; 448 | left: auto; 449 | margin: 0; 450 | } 451 | 452 | .box.placeholder { 453 | background-color: var(--bg-color-light); 454 | color: var(--font-color-medium); 455 | } 456 | 457 | .box.invisible { 458 | visibility: hidden; 459 | margin: 16px; 460 | } 461 | 462 | .box.bigger { 463 | font-size: 1.5em; 464 | } 465 | 466 | .box.biggest { 467 | font-size: 2em; 468 | } 469 | 470 | .box.flatter { 471 | min-height: 8px; 472 | margin: 2px; 473 | } 474 | 475 | .box.wider { 476 | min-width: 3em; 477 | } 478 | 479 | .fullwidth { 480 | width: 100%; 481 | } 482 | 483 | .box.nomargin { 484 | margin: 0; 485 | } 486 | 487 | .box.square { 488 | border-radius: 0; 489 | } 490 | 491 | /* Styles for creating figures related to the Box model */ 492 | 493 | .margin-box, 494 | .border-box, 495 | .padding-box, 496 | .content-box { 497 | padding: 1em; 498 | padding-top: 0em; 499 | } 500 | 501 | .ex-box-sizing { 502 | max-width: 11em; 503 | } 504 | 505 | .border-box { 506 | background-color: lightgrey; 507 | } 508 | 509 | .ex-margin { 510 | display: inline-block; 511 | border: var(--border-subtle); 512 | } 513 | 514 | .flex-row { 515 | display: flex; 516 | justify-content: center; 517 | align-items: center; 518 | } 519 | 520 | .flex-column { 521 | display: flex; 522 | align-items: center; 523 | flex-direction: column; 524 | } 525 | 526 | .ex-padding { 527 | border: var(--border-subtle); 528 | margin: 0; 529 | position: relative; 530 | border-radius: 0; 531 | } 532 | 533 | .ex-padding, 534 | .padding-box { 535 | background-color: hsl(120, 20%, 75%); 536 | } 537 | 538 | .padding-color { 539 | margin: 0; 540 | } 541 | 542 | .content-box { 543 | padding: 0.5em; 544 | text-indent: 0; 545 | } 546 | 547 | .margin-box, 548 | .ex-margin { 549 | background-color: hsla(50, 100%, 50%, 0.2); 550 | } 551 | 552 | .margin-box { 553 | text-indent: -0.75em; 554 | } 555 | 556 | .inline { 557 | display: inline; 558 | padding: 0; 559 | margin: 0; 560 | } 561 | 562 | .block { 563 | display: block; 564 | } 565 | 566 | .none { 567 | display: none; 568 | } 569 | 570 | .inline-block { 571 | display: inline-block; 572 | padding: 0; 573 | margin: 0; 574 | } 575 | 576 | .ex-positioned { 577 | position: relative; 578 | border: 4px double black; 579 | border-radius: 4px; 580 | } 581 | 582 | .flex { 583 | border: var(--border-flex); 584 | border-radius: 4px; 585 | display: flex; 586 | --taller-height: 5em; 587 | } 588 | 589 | .flex.inline { 590 | display: inline-flex; 591 | vertical-align: middle; 592 | } 593 | 594 | .flex.ex-wrap { 595 | width: 10em; 596 | } 597 | 598 | .flex.ex-align-items { 599 | height: var(--taller-height); 600 | } 601 | 602 | .flex.ex-align-content { 603 | height: var(--taller-height); 604 | flex-wrap: wrap; 605 | } 606 | 607 | .flex.ex-align-self { 608 | height: var(--taller-height); 609 | } 610 | 611 | .flex.ex-flow { 612 | border: none; 613 | } 614 | 615 | .ex-css-height { 616 | display: flex; 617 | align-items: flex-end; 618 | } 619 | 620 | div.line:after, 621 | div.line-short:after { 622 | position: absolute; 623 | content: ""; 624 | display: inline-block; 625 | border-top: var(--border-baseline); 626 | width: 7em; 627 | margin-left: 8px; 628 | } 629 | 630 | div.line-short:after { 631 | width: 3.5em; 632 | /* margin-left: 12px; */ 633 | } 634 | 635 | div.columns { 636 | display: flex; 637 | flex-wrap: wrap; 638 | flex-direction: row; 639 | justify-content: flex-start; 640 | } 641 | 642 | div.column { 643 | display: flex; 644 | flex-direction: column; 645 | } 646 | 647 | /* For the flexbox 'order' property snippet. */ 648 | .first, 649 | .second { 650 | order: 1; 651 | } 652 | 653 | .font-example { 654 | display: inline-block; 655 | font-size: 32px; 656 | } 657 | 658 | a:link, 659 | a:visited { 660 | color: darkblue; 661 | text-decoration: none; 662 | } 663 | 664 | .nudge-top { 665 | padding-top: 10px; 666 | } 667 | 668 | .float-left { 669 | float: left; 670 | } 671 | 672 | .float-right { 673 | float: right; 674 | } 675 | 676 | .ex-overflow-box { 677 | display: inline-block; 678 | border: var(--border-subtle); 679 | width: 250px; 680 | height: 80px; 681 | } 682 | 683 | .ex-overflow-box.hidden { 684 | overflow: hidden; 685 | } 686 | 687 | .ex-overflow-box.scroll { 688 | overflow: scroll; 689 | } 690 | 691 | .ex-overflow-box.visible { 692 | overflow: visible; 693 | } 694 | 695 | .text-example { 696 | border-bottom: var(--border-separator); 697 | } 698 | 699 | .text-example.align { 700 | max-width: 8em; 701 | } 702 | 703 | .ex-border-width { 704 | border-color: black; 705 | border-style: solid; 706 | } 707 | 708 | .ex-float, 709 | .ex-clear { 710 | width: 14em; 711 | border: var(--border-subtle); 712 | padding: 4px; 713 | display: inline-block; 714 | margin: 4px; 715 | } 716 | 717 | .ex-clear-row { 718 | display: flex; 719 | align-items: stretch; 720 | } 721 | 722 | .ex-border.dark, 723 | .ex-border.light { 724 | width: 1.5em; 725 | height: 1.5em; 726 | border-radius: 4px; 727 | background-color: white; 728 | border: 3px solid black; 729 | } 730 | 731 | .ex-border.light { 732 | background-color: transparent; 733 | } 734 | 735 | .ex-border-side { 736 | border: 3px solid black; 737 | border-radius: 0; 738 | } 739 | 740 | .ex-border-side.single { 741 | border-width: 0; 742 | } 743 | 744 | .ex-fixed { 745 | position: fixed; 746 | background-color: var(--bg-color-semitransparent); 747 | min-width: 30%; 748 | min-height: 30%; 749 | display: flex; 750 | justify-content: center; 751 | align-items: center; 752 | } 753 | 754 | .ex-fixed > code { 755 | color: var(--font-color-light); 756 | font-size: 1em; 757 | } 758 | 759 | .table { 760 | display: table; 761 | } 762 | 763 | table { 764 | border-collapse: collapse; 765 | border-spacing: 0; 766 | } 767 | 768 | .ex-table, 769 | .ex-element, 770 | .ex-form, 771 | .ex-list, 772 | .ex-keyframe { 773 | border-bottom: var(--border-separator); 774 | padding-left: 8px; 775 | padding-bottom: 8px; 776 | } 777 | 778 | .ex-full-table { 779 | background-color: initial; 780 | } 781 | 782 | .ex-full-table td { 783 | border: var(--border-table); 784 | } 785 | 786 | .ex-full-table th { 787 | width: 40%; 788 | } 789 | 790 | .row { 791 | display: table-row; 792 | } 793 | 794 | .center { 795 | text-align: center; 796 | } 797 | 798 | td { 799 | padding: 8px; 800 | height: 1em; 801 | width: 1em; 802 | text-align: center; 803 | } 804 | 805 | .row > .codeblock { 806 | display: table-cell; 807 | } 808 | 809 | table.border, 810 | tr.border, 811 | td.border { 812 | border: var(--border-table); 813 | } 814 | 815 | table.column-borders td + td { 816 | border-left: var(--border-table); 817 | } 818 | 819 | table.row-borders tr + tr { 820 | border-top: var(--border-table); 821 | } 822 | 823 | table.all-borders td { 824 | border: var(--border-table); 825 | } 826 | 827 | .ex-caption { 828 | /* padding: 12px 36px; */ 829 | padding: 8px; 830 | border-bottom: var(--border-separator); 831 | } 832 | 833 | .highlight-border { 834 | border: 2px solid red; 835 | } 836 | 837 | .highlight { 838 | background-color: var(--bg-color-highlight); 839 | color: var(--font-color-light); 840 | } 841 | 842 | .ex-vertical-align { 843 | display: flex; 844 | } 845 | 846 | .ex-vertical-align-cell { 847 | border: var(--border-table); 848 | width: 4em; 849 | height: 5em; 850 | text-align: center; 851 | } 852 | 853 | .cell > .codeblock { 854 | padding: 0 0 8px 0; 855 | } 856 | 857 | .ex-vertical-align-text { 858 | display: inline-block; 859 | border-bottom: var(--border-separator); 860 | white-space: nowrap; 861 | } 862 | 863 | .ex-align-box { 864 | display: inline-flex; 865 | align-items: center; 866 | min-width: 3em; 867 | min-height: 3em; 868 | background-color: var(--bg-color-box); 869 | border-radius: 4px; 870 | margin: 4px; 871 | justify-content: center; 872 | text-align: center; 873 | color: var(--font-color-light); 874 | } 875 | 876 | .ex-zindex { 877 | position: relative; 878 | height: 6em; 879 | border-bottom: var(--border-separator); 880 | } 881 | 882 | .box-zindex { 883 | align-items: flex-end; 884 | background-color: var(--bg-color-box); 885 | bottom: 30px; 886 | color: var(--font-color-light); 887 | display: flex; 888 | height: 3em; 889 | justify-content: flex-end; 890 | left: 30px; 891 | padding: 4px; 892 | position: relative; 893 | width: 3em; 894 | } 895 | 896 | .box-zindex.placeholder { 897 | align-items: flex-start; 898 | font-size: 1em; 899 | left: 0; 900 | justify-content: flex-start; 901 | top: 0; 902 | } 903 | 904 | .stack { 905 | grid-column: 1/-1; 906 | display: inline-flex; 907 | flex-direction: column; 908 | align-items: stretch; 909 | } 910 | 911 | .ex-full-table-elements { 912 | display: flex; 913 | flex-direction: column; 914 | } 915 | 916 | @media (min-width: 500px) { 917 | .ex-full-table-elements { 918 | flex-direction: row; 919 | } 920 | } 921 | 922 | .ex-full-table-elements > code { 923 | padding-right: 36px; 924 | } 925 | 926 | .ex-full-table-elements th { 927 | border: 2px solid black; 928 | } 929 | 930 | .ex-css-element > code { 931 | font-family: var(--font-family-code); 932 | font-weight: bold; 933 | font-size: 1em; 934 | } 935 | 936 | .ex-css-element { 937 | border-bottom: var(--border-separator); 938 | padding: 0 0 8px 8px; 939 | } 940 | 941 | .ex-css { 942 | display: block; 943 | flex-wrap: wrap; 944 | max-width: 500px; 945 | justify-content: space-between; 946 | } 947 | 948 | .ps-link:link { 949 | background-color: var(--bg-color-link); 950 | } 951 | 952 | .ps-link:visited { 953 | background-color: var(--bg-color-visited); 954 | } 955 | 956 | .ps-link:hover { 957 | background-color: var(--bg-color-hover); 958 | } 959 | 960 | .ps-link:active { 961 | background-color: var(--bg-color-active); 962 | } 963 | 964 | .ps-active:active { 965 | background-color: var(--bg-color-active); 966 | } 967 | 968 | .ps-hover:hover { 969 | background-color: var(--bg-color-hover); 970 | } 971 | 972 | .ps-target, 973 | .ps-active, 974 | .ps-hover, 975 | .ps-plain { 976 | background-color: var(--bg-color-visited); 977 | } 978 | 979 | .ps-target:target { 980 | background-color: var(--bg-color-active); 981 | } 982 | 983 | .ex-pseudo { 984 | border-bottom: var(--border-separator); 985 | padding-bottom: 8px; 986 | } 987 | 988 | .ex-pseudo > a { 989 | display: block; 990 | padding: 8px; 991 | } 992 | 993 | .ps-after::after { 994 | content: " The added content."; 995 | color: var(--font-color-added); 996 | } 997 | 998 | .ps-before::before { 999 | content: " The added content."; 1000 | color: var(--font-color-added); 1001 | } 1002 | 1003 | .underline { 1004 | position: relative; 1005 | } 1006 | 1007 | .underline::after { 1008 | position: absolute; 1009 | content: ""; 1010 | display: block; 1011 | border-top: var(--border-subtle); 1012 | width: 70%; 1013 | } 1014 | 1015 | .overline { 1016 | position: relative; 1017 | } 1018 | 1019 | .overline::before { 1020 | position: absolute; 1021 | content: ""; 1022 | display: block; 1023 | border-bottom: var(--border-subtle); 1024 | width: 70%; 1025 | } 1026 | 1027 | .transition .box { 1028 | margin-left: 0%; 1029 | transition: 1s; 1030 | } 1031 | 1032 | .transition:hover .box { 1033 | margin-left: 80%; 1034 | } 1035 | 1036 | .ex-transition.property .box { 1037 | transition: 2s; 1038 | color: var(--font-color-dark); 1039 | } 1040 | 1041 | .ex-transition.property { 1042 | transition: 2s; 1043 | --bg-transition: red; 1044 | --font-color-transition: white; 1045 | --margin-transition: 80%; 1046 | } 1047 | 1048 | .ex-transition:hover.property.all .box { 1049 | background-color: var(--bg-transition); 1050 | color: var(--font-color-transition); 1051 | margin-left: var(--margin-transition); 1052 | } 1053 | 1054 | .ex-transition:hover.property.color .box { 1055 | color: var(--font-color-transition); 1056 | } 1057 | 1058 | .ex-transition:hover.property.margin .box { 1059 | margin-left: var(--margin-transition); 1060 | } 1061 | 1062 | .ex-transition:hover.property.background .box { 1063 | background-color: var(--bg-transition); 1064 | } 1065 | 1066 | .ex-transition-timing-function, 1067 | .ex-animation-timing-function { 1068 | display: grid; 1069 | grid-template-columns: 1fr 1fr; 1070 | grid-template-rows: repeat(5, 1fr); 1071 | grid-auto-flow: column; 1072 | } 1073 | 1074 | .animation:hover .box { 1075 | animation: slideright 1s infinite linear; 1076 | } 1077 | 1078 | .animation.alternate .box { 1079 | animation-direction: alternate; 1080 | } 1081 | 1082 | .animation.ex-animation-fill-mode:hover .box { 1083 | animation: slideright 1s 1 1s, colorshift 1s 1 1s; 1084 | } 1085 | 1086 | .animation:hover .fillmode-delay { 1087 | animation: showblue 1s step-start; 1088 | } 1089 | 1090 | .animation:hover .fillmode-animate { 1091 | animation: showred 1s step-start 1s; 1092 | } 1093 | 1094 | .animation:hover .fillmode-end { 1095 | animation: showblack 0.1s step-start 2s forwards; 1096 | } 1097 | 1098 | .animation .fillmode-delay, 1099 | .animation .fillmode-animate, 1100 | .animation .fillmode-end { 1101 | color: transparent; 1102 | } 1103 | 1104 | .animation:hover .fillmode-initial { 1105 | color: transparent; 1106 | } 1107 | 1108 | .animation:hover .box.backgroundcolor { 1109 | animation: showbackground 2s forwards; 1110 | } 1111 | 1112 | .animation:hover .box.size { 1113 | animation: growsize 2s forwards; 1114 | } 1115 | 1116 | @keyframes slideright { 1117 | from { 1118 | margin-left: 0%; 1119 | } 1120 | to { 1121 | margin-left: 80%; 1122 | } 1123 | } 1124 | 1125 | @keyframes colorshift { 1126 | from { 1127 | color: blue; 1128 | } 1129 | to { 1130 | color: red; 1131 | } 1132 | } 1133 | 1134 | @keyframes showblue { 1135 | to { 1136 | color: blue; 1137 | } 1138 | } 1139 | @keyframes showred { 1140 | to { 1141 | color: red; 1142 | } 1143 | } 1144 | 1145 | @keyframes showblack { 1146 | to { 1147 | color: black; 1148 | } 1149 | } 1150 | 1151 | @keyframes showbackground { 1152 | from { 1153 | background-color: blue; 1154 | } 1155 | to { 1156 | background-color: red; 1157 | } 1158 | } 1159 | 1160 | @keyframes growsize { 1161 | from { 1162 | height: 1em; 1163 | width: 1em; 1164 | } 1165 | to { 1166 | height: 4em; 1167 | width: 4em; 1168 | } 1169 | } 1170 | 1171 | /* This adds space before the target of a link, to put the target below the navbar. */ 1172 | /* XXX Broken by grid layout? */ 1173 | :target:before { 1174 | content: ""; 1175 | display: block; 1176 | height: 60px; 1177 | margin: -60px 0 0; 1178 | } 1179 | 1180 | /* Example cursor animation */ 1181 | .animation:hover .cursor { 1182 | animation: cursor 0.8s infinite step-end; 1183 | } 1184 | 1185 | .cursor { 1186 | height: 80px; 1187 | border-left: 8px solid black; 1188 | } 1189 | 1190 | @keyframes cursor { 1191 | 50% { 1192 | border-color: transparent; 1193 | } 1194 | } 1195 | 1196 | .animation:hover .animated { 1197 | animation-iteration-count: infinite; 1198 | animation-duration: 1.5s; 1199 | } 1200 | 1201 | .ex-transform { 1202 | display: inline-block; 1203 | position: relative; 1204 | perspective: 100px; 1205 | } 1206 | 1207 | .ex-transform.lr-border { 1208 | border: var(--border-guides); 1209 | border-width: 0 1px; 1210 | border-radius: 0; 1211 | } 1212 | 1213 | .ex-transform.tb-border { 1214 | border: var(--border-guides); 1215 | border-width: 1px 0; 1216 | border-radius: 0; 1217 | } 1218 | 1219 | .ex-translate { 1220 | width: 60px; 1221 | height: 60px; 1222 | border: var(--border-bounds); 1223 | perspective: 60px; 1224 | perspective-origin: top left; 1225 | } 1226 | 1227 | .ex-perspective { 1228 | height: 80px; 1229 | width: 50px; 1230 | position: relative; 1231 | } 1232 | 1233 | .ex-perspective { 1234 | margin: 10px 0 -25px 10px; 1235 | } 1236 | 1237 | .ex-perspective.right-bottom { 1238 | perspective-origin: 300% 200%; 1239 | } 1240 | 1241 | .ex-perspective.left-bottom { 1242 | perspective-origin: -300% 200%; 1243 | } 1244 | 1245 | .ex-perspective.center { 1246 | perspective-origin: 50% 50%; 1247 | margin: 0 0 -30px 0; 1248 | } 1249 | 1250 | .ex-perspective.right-top { 1251 | perspective-origin: 300% -200%; 1252 | } 1253 | 1254 | .ex-perspective.left-top { 1255 | perspective-origin: -300% -200%; 1256 | /* margin: 20px; */ 1257 | /* margin-bottom: 0; */ 1258 | } 1259 | 1260 | .cube { 1261 | perspective: 400px; 1262 | transform-style: preserve-3d; 1263 | backface-visibility: visible; 1264 | } 1265 | 1266 | .face { 1267 | position: absolute; 1268 | width: 40px; 1269 | height: 40px; 1270 | color: white; 1271 | line-height: 40px; 1272 | font-size: 2em; 1273 | text-align: center; 1274 | } 1275 | 1276 | .face.front { 1277 | transform: translateZ(20px); 1278 | background-color: rgba(30%, 30%, 30%, 0.7); 1279 | } 1280 | 1281 | .face.top { 1282 | transform: rotateX(90deg) translateZ(20px); 1283 | background-color: rgba(0%, 100%, 0%, 0.7); 1284 | } 1285 | 1286 | .face.right { 1287 | transform: rotateY(90deg) translateZ(20px); 1288 | background-color: rgba(0%, 0%, 100%, 0.7); 1289 | } 1290 | 1291 | .face.left { 1292 | transform: rotateY(-90deg) translateZ(20px); 1293 | background-color: rgba(100%, 0%, 0%, 0.7); 1294 | } 1295 | 1296 | .face.bottom { 1297 | transform: rotateX(-90deg) translateZ(20px); 1298 | background-color: rgba(100%, 0%, 100%, 0.7); 1299 | } 1300 | 1301 | .face.back { 1302 | transform: rotateY(180deg) translateZ(20px); 1303 | background-color: rgba(25%, 50%, 75%, 0.7); 1304 | } 1305 | 1306 | table.transform-origin { 1307 | margin: 16px 0 16px 16px; 1308 | } 1309 | 1310 | .perspective { 1311 | display: grid; 1312 | grid-template-columns: repeat(2, 1fr); 1313 | } 1314 | 1315 | .perspective > .codeblock { 1316 | overflow: hidden; 1317 | padding: 8px 16px; 1318 | display: flex; 1319 | align-items: center; 1320 | flex-direction: column; 1321 | } 1322 | 1323 | .ex-transform-origin { 1324 | border: var(--border-bounds); 1325 | display: inline-block; 1326 | perspective: 100px; 1327 | margin-bottom: 10px; 1328 | } 1329 | 1330 | .transform-origin .codeblock { 1331 | padding: 16px 16px 0 12px; 1332 | } 1333 | 1334 | table.transform-origin > caption { 1335 | margin-left: 15%; 1336 | } 1337 | 1338 | .door { 1339 | height: 40px; 1340 | width: 40px; 1341 | background-color: var(--bg-color-box); 1342 | color: var(--font-color-light); 1343 | line-height: 40px; 1344 | text-align: center; 1345 | font-size: 2em; 1346 | } 1347 | 1348 | .door.rotate-y { 1349 | transform: rotateY(60deg); 1350 | } 1351 | .door.rotate-y2 { 1352 | transform: rotateY(-60deg); 1353 | } 1354 | .door.rotate-x { 1355 | transform: rotateX(60deg); 1356 | } 1357 | .door.rotate-x2 { 1358 | transform: rotateX(-60deg); 1359 | } 1360 | .door.rotate-z { 1361 | transform: rotateZ(45deg); 1362 | } 1363 | 1364 | .transform-origin td { 1365 | text-align: left; 1366 | } 1367 | 1368 | /* Card transition */ 1369 | .ex-card:hover .card { 1370 | transform: rotateY(180deg) translateX(100%); 1371 | } 1372 | 1373 | .ex-card { 1374 | perspective: 300px; 1375 | } 1376 | 1377 | .card { 1378 | transition: 0.7s; 1379 | transform-style: preserve-3d; 1380 | transform-origin: right; 1381 | position: relative; 1382 | } 1383 | 1384 | .card-front, 1385 | .card-back { 1386 | backface-visibility: hidden; 1387 | position: absolute; 1388 | } 1389 | 1390 | .card-back { 1391 | transform: rotateY(180deg) translateZ(1px); 1392 | } 1393 | 1394 | /* Card styling */ 1395 | .card { 1396 | width: 100px; 1397 | height: 100px; 1398 | line-height: 100px; 1399 | color: var(--font-color-light); 1400 | } 1401 | 1402 | .card-front, 1403 | .card-back { 1404 | width: 100%; 1405 | height: 100%; 1406 | text-align: center; 1407 | font-size: 2em; 1408 | } 1409 | 1410 | .card-front { 1411 | background-color: var(--bg-color-box); 1412 | } 1413 | 1414 | .card-back { 1415 | background-color: purple; 1416 | } 1417 | 1418 | #transform-rotate .codeblock { 1419 | padding: 8px; 1420 | } 1421 | 1422 | iframe { 1423 | background-color: var(--bg-color-light); 1424 | margin: 20px; 1425 | margin-top: 0; 1426 | } 1427 | 1428 | .ex-grid { 1429 | display: grid; 1430 | grid-gap: 4px; 1431 | } 1432 | 1433 | .ex-grid.inline { 1434 | display: inline-grid; 1435 | } 1436 | 1437 | .ex-grid.template-rows { 1438 | grid-template-columns: 1fr; 1439 | } 1440 | 1441 | .grid-template-rows-container { 1442 | display: grid; 1443 | grid-template-columns: auto auto; 1444 | align-items: flex-end; 1445 | } 1446 | 1447 | .grid-column-container, 1448 | .grid-row-container { 1449 | display: grid; 1450 | grid-template-columns: 1fr 1fr 1fr; 1451 | } 1452 | 1453 | .ex-grid > .box { 1454 | padding: 0; 1455 | margin: 0; 1456 | border-radius: 0; 1457 | } 1458 | 1459 | .ex-box-shadow { 1460 | margin-bottom: 20px; 1461 | } 1462 | 1463 | .ex-grid.grid-column { 1464 | display: inline-grid; 1465 | grid-template-columns: 1fr 1fr 1fr; 1466 | } 1467 | 1468 | .ex-grid.grid-row { 1469 | display: inline-grid; 1470 | grid-template-rows: 1fr 1fr 1fr; 1471 | grid-template-columns: 1fr 1fr; 1472 | } 1473 | 1474 | .ex-grid.grid-area { 1475 | display: inline-grid; 1476 | grid-template-rows: 1fr 1fr 1fr; 1477 | grid-template-columns: 1fr 1fr 1fr; 1478 | } 1479 | 1480 | .ex-grid.grid-template-area { 1481 | display: grid; 1482 | } 1483 | 1484 | .grid-area-container { 1485 | display: grid; 1486 | grid-template-columns: repeat(2, auto); 1487 | } 1488 | 1489 | .ex-grid.grid-auto-flow { 1490 | display: inline-grid; 1491 | grid-template-columns: repeat(3, 1fr); 1492 | grid-template-rows: repeat(3, 1fr); 1493 | } 1494 | 1495 | .grid-auto-flow-container { 1496 | display: grid; 1497 | grid-template-columns: auto auto auto; 1498 | align-items: flex-end; 1499 | grid-gap: 8px; 1500 | } 1501 | 1502 | .grid-heading { 1503 | padding-left: 20px; 1504 | padding-top: 20px; 1505 | } 1506 | 1507 | .ex-grid.grid-gap { 1508 | display: inline-grid; 1509 | grid-template-columns: 1fr 1fr; 1510 | } 1511 | 1512 | .grid-gap-container { 1513 | display: grid; 1514 | grid-template-columns: repeat(3, 1fr); 1515 | } 1516 | 1517 | /* Grids for laying out the cheat sheet itself */ 1518 | 1519 | .grid { 1520 | display: grid; 1521 | } 1522 | 1523 | .grid.col-5 { 1524 | grid-template-columns: 1fr; 1525 | } 1526 | .grid.col-4 { 1527 | grid-template-columns: 1fr; 1528 | } 1529 | .grid.col-3 { 1530 | grid-template-columns: 1fr; 1531 | } 1532 | .grid.col-2 { 1533 | grid-template-columns: 1fr; 1534 | } 1535 | 1536 | .grid.center { 1537 | align-items: center; 1538 | } 1539 | 1540 | @media (min-width: 400px) { 1541 | .grid.col-5 { 1542 | grid-template-columns: repeat(2, 1fr); 1543 | } 1544 | .grid.col-4 { 1545 | grid-template-columns: repeat(2, 1fr); 1546 | } 1547 | .grid.col-3 { 1548 | grid-template-columns: repeat(1, 1fr); 1549 | } 1550 | .grid.col-2 { 1551 | grid-template-columns: repeat(1, 1fr); 1552 | } 1553 | } 1554 | 1555 | @media (min-width: 500px) { 1556 | .grid.col-5 { 1557 | grid-template-columns: repeat(2, 1fr); 1558 | } 1559 | .grid.col-4 { 1560 | grid-template-columns: repeat(2, 1fr); 1561 | } 1562 | .grid.col-3 { 1563 | grid-template-columns: repeat(2, 1fr); 1564 | } 1565 | .grid.col-2 { 1566 | grid-template-columns: repeat(1, 1fr); 1567 | } 1568 | } 1569 | 1570 | @media (min-width: 600px) { 1571 | .grid.col-5 { 1572 | grid-template-columns: repeat(4, 1fr); 1573 | } 1574 | .grid.col-4 { 1575 | grid-template-columns: repeat(3, 1fr); 1576 | } 1577 | .grid.col-3 { 1578 | grid-template-columns: repeat(3, 1fr); 1579 | } 1580 | .grid.col-2 { 1581 | grid-template-columns: repeat(2, 1fr); 1582 | } 1583 | } 1584 | 1585 | @media (min-width: 1200px) { 1586 | .grid.col-5 { 1587 | grid-template-columns: repeat(5, 1fr); 1588 | } 1589 | .grid.col-4 { 1590 | grid-template-columns: repeat(4, 1fr); 1591 | } 1592 | .grid.col-3 { 1593 | grid-template-columns: repeat(3, 1fr); 1594 | } 1595 | .grid.col-2 { 1596 | grid-template-columns: repeat(2, 1fr); 1597 | } 1598 | } 1599 | 1600 | section { 1601 | display: grid; 1602 | grid-column: 1/-1; /* Sections are nested. */ 1603 | } 1604 | 1605 | /* We choose sizes of 100px large column format because it has many divisors: 1606 | 1607 | Similarly the other breakpoints have the most divisors of smaller numbers: 1608 | 4 -- 1,2,4 1609 | 6 -- 1,2,3,6 1610 | 12 -- 1,2,3,4,6,12 1611 | 18 -- 1,2,3,6,9,18 1612 | 24 -- 1,2,3,4,6,8,12,24 1613 | */ 1614 | @media (max-width: 400px) { 1615 | section { 1616 | grid-template-columns: repeat(1, 1fr); 1617 | } 1618 | } 1619 | @media (min-width: 400px) { 1620 | section { 1621 | grid-template-columns: repeat(4, 1fr); 1622 | } 1623 | } 1624 | @media (min-width: 600px) { 1625 | section { 1626 | grid-template-columns: repeat(6, 1fr); 1627 | } 1628 | } 1629 | @media (min-width: 1200px) { 1630 | section { 1631 | grid-template-columns: repeat(12, 1fr); 1632 | } 1633 | } 1634 | @media (min-width: 1800px) { 1635 | section { 1636 | grid-template-columns: repeat(18, 1fr); 1637 | } 1638 | } 1639 | @media (min-width: 2400px) { 1640 | section { 1641 | grid-template-columns: repeat(24, 1fr); 1642 | } 1643 | } 1644 | 1645 | /* Grid layout - columns */ 1646 | @media (max-width: 400px) { 1647 | .snippet { 1648 | grid-column: span 1; 1649 | } 1650 | .span-1 { 1651 | grid-column: span 1; 1652 | } 1653 | .span-2 { 1654 | grid-column: span 1; 1655 | } 1656 | .span-3 { 1657 | grid-column: span 1; 1658 | } 1659 | .span-4 { 1660 | grid-column: span 1; 1661 | } 1662 | .span-5 { 1663 | grid-column: span 1; 1664 | } 1665 | .span-6 { 1666 | grid-column: span 1; 1667 | } 1668 | .span-7 { 1669 | grid-column: span 1; 1670 | } 1671 | .span-8 { 1672 | grid-column: span 1; 1673 | } 1674 | .span-9 { 1675 | grid-column: span 1; 1676 | } 1677 | .span-10 { 1678 | grid-column: span 1; 1679 | } 1680 | .span-11 { 1681 | grid-column: span 1; 1682 | } 1683 | .span-12 { 1684 | grid-column: span 1; 1685 | } 1686 | } 1687 | 1688 | @media (min-width: 400px) { 1689 | .snippet { 1690 | grid-column: span 2; 1691 | } 1692 | .span-1 { 1693 | grid-column: span 1; 1694 | } 1695 | .span-2 { 1696 | grid-column: span 2; 1697 | } 1698 | .span-3 { 1699 | grid-column: span 3; 1700 | } 1701 | .span-4 { 1702 | grid-column: span 4; 1703 | } 1704 | .span-5 { 1705 | grid-column: span 4; 1706 | } 1707 | .span-6 { 1708 | grid-column: span 4; 1709 | } 1710 | .span-7 { 1711 | grid-column: span 4; 1712 | } 1713 | .span-8 { 1714 | grid-column: span 4; 1715 | } 1716 | .span-9 { 1717 | grid-column: span 4; 1718 | } 1719 | .span-10 { 1720 | grid-column: span 4; 1721 | } 1722 | .span-11 { 1723 | grid-column: span 4; 1724 | } 1725 | .span-12 { 1726 | grid-column: span 4; 1727 | } 1728 | } 1729 | 1730 | @media (min-width: 600px) { 1731 | .snippet { 1732 | grid-column: span 3; 1733 | } 1734 | .span-1 { 1735 | grid-column: span 1; 1736 | } 1737 | .span-2 { 1738 | grid-column: span 2; 1739 | } 1740 | .span-3 { 1741 | grid-column: span 3; 1742 | } 1743 | .span-4 { 1744 | grid-column: span 4; 1745 | } 1746 | .span-5 { 1747 | grid-column: span 5; 1748 | } 1749 | .span-6 { 1750 | grid-column: span 6; 1751 | } 1752 | .span-7 { 1753 | grid-column: span 6; 1754 | } 1755 | .span-8 { 1756 | grid-column: span 6; 1757 | } 1758 | .span-9 { 1759 | grid-column: span 6; 1760 | } 1761 | .span-10 { 1762 | grid-column: span 6; 1763 | } 1764 | .span-11 { 1765 | grid-column: span 6; 1766 | } 1767 | .span-12 { 1768 | grid-column: span 6; 1769 | } 1770 | } 1771 | 1772 | @media (min-width: 1200px) { 1773 | .snippet { 1774 | grid-column: span 3; 1775 | } 1776 | .span-1 { 1777 | grid-column: span 1; 1778 | } 1779 | .span-2 { 1780 | grid-column: span 2; 1781 | } 1782 | .span-3 { 1783 | grid-column: span 3; 1784 | } 1785 | .span-4 { 1786 | grid-column: span 4; 1787 | } 1788 | .span-5 { 1789 | grid-column: span 5; 1790 | } 1791 | .span-6 { 1792 | grid-column: span 6; 1793 | } 1794 | .span-7 { 1795 | grid-column: span 7; 1796 | } 1797 | .span-8 { 1798 | grid-column: span 8; 1799 | } 1800 | .span-9 { 1801 | grid-column: span 9; 1802 | } 1803 | .span-10 { 1804 | grid-column: span 10; 1805 | } 1806 | .span-11 { 1807 | grid-column: span 11; 1808 | } 1809 | .span-12 { 1810 | grid-column: span 12; 1811 | } 1812 | } 1813 | 1814 | /* Grid layout - rows */ 1815 | .span-rows-1 { 1816 | grid-row: span 1; 1817 | } 1818 | .span-rows-2 { 1819 | grid-row: span 2; 1820 | } 1821 | .span-rows-3 { 1822 | grid-row: span 3; 1823 | } 1824 | .span-rows-4 { 1825 | grid-row: span 4; 1826 | } 1827 | .span-rows-5 { 1828 | grid-row: span 5; 1829 | } 1830 | .span-rows-6 { 1831 | grid-row: span 6; 1832 | } 1833 | 1834 | #css-padding, 1835 | #css-margin { 1836 | grid-column: 1/span 4; 1837 | } 1838 | 1839 | #css-width { 1840 | grid-column: 1/span 6; 1841 | } 1842 | -------------------------------------------------------------------------------- /tools.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML5 and CSS cheat sheet 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 75 | 76 | 99 | 100 | 101 |
102 |

Tools

103 |
104 |

Transforms

105 |
106 |

Matrix transforms

107 |
108 |
109 | ( 110 | 111 | ) x ( 112 | ) = ( 113 | 114 | ) 115 |
116 | 117 |
118 | ( 119 | ) x ( 120 | ) = ( 121 | 122 | ) 123 |
124 | 125 |
126 |
127 | 128 |
129 |
130 | 131 | 132 | --------------------------------------------------------------------------------