CSS3

From BC$ MobileTV Wiki
(Redirected from CSS Grid)
Jump to: navigation, search

CSS3 is the next generation of CSS.


Specifications



Language

Media Queries

See: Mobile Web Design


Variables

[2] [3] [4] [5] [6]


CSS3 Selectors

[7] [8] [9] [10] [11] Cite error: Invalid <ref> tag; refs with no name must have content


Elements with specific Attribute values


Child elements

[12]


Sibling elements

[13]


Box Model


Flex

[19] [20] [21] [22]

Grid

[23] [24] [25] [26] [27] [28] [29] [30] [31] [32] [33] [34] [35] [36]

Masonry

[37]

calc()


Rounded Corners

Image Borders

Fragmentations

[38]

Transforms

2D Transformations

Scale (grow/shrink width & height), Skew, Rotate (about X or Y-axis), Move, etc


3D Transformations

Grow/Shrink (depth), Spin, Rotate (about Z-axis), Motion Blurs/Trails, etc

Page Flip effect
3D Card Flip effect

[39] [40]

Transitions

[41] [42] [43] [44] [45]

Animations

[46] [47] [48] [49]

Parallax

Textures

Gradients

[50] [51] [52] [53] [54] [55] [56] [57]

RGBA

Reflections

Shadows

[58] [59] [60]


Blend Modes

[61] [62] [63] [64] [65] [66] [67] [68] [69]


Content

[70]

::before

::after

Web Fonts


[71] [72] [73]


CSS4 features

text-wrap




Tools

Resources

[80]

Frameworks

Tailwind

Utility-based CSS framework.

[81]

SemanticUI

Bootstrap

Bootstrap is a framework for web layouts and data-binding which was first created and open sourced by Twitter.

[86] [87] [88] [89] [90] [91] [92] [93] [94] [95] [96] [97] [98] [99] [100] [101] [102] [103] [104] [105] [106] [107]

Lazybones

  • Lazybones:

Backbone

Blueprint

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

Foundation


Tutorials


External Links

[114]

References

  1. ↑ MDN - CSS Animations guide: https://developer.mozilla.org/en/css/css_animations
  2. ↑ Can I Use -- CSS variables: https://caniuse.com/#feat=css-variables
  3. ↑ Using CSS custom properties (variables): https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
  4. ↑ CSS3 Variables: https://scrimba.com/p/ppYrcJ/ (inspired by LESS & SASS variables)
  5. ↑ Everything you need to know about CSS Variables: https://medium.freecodecamp.org/everything-you-need-to-know-about-css-variables-c74d922ea855
  6. ↑ Easy Theming w/ CSS Vars: https://codepen.io/bloqhead/pen/QQdZWp
  7. ↑ The 30 CSS Selectors You Must Memorize: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
  8. ↑ What tool can I use to test the :contains() CSS3 pseudo-class in a browser?: https://stackoverflow.com/questions/9007060/what-tool-can-i-use-to-test-the-contains-css3-pseudo-class-in-a-browser/9008184#9008184
  9. ↑ CSS Previous sibling selectors and how to fake them: https://medium.com/free-code-camp/how-to-make-the-impossible-possible-in-css-with-a-little-creativity-bd96bb42b29d
  10. ↑ Guide to Advanced CSS Selectors - part 1: https://moderncss.dev/guide-to-advanced-css-selectors-part-one/
  11. ↑ Guide to Advanced CSS Selectors - part 2: https://moderncss.dev/guide-to-advanced-css-selectors-part-two/
  12. ↑ CSS Child vs Descendant selectors: https://www.geeksforgeeks.org/css-child-vs-descendant-selectors/
  13. ↑ Child and Sibling Selectors: https://css-tricks.com/child-and-sibling-selectors/
  14. ↑ Introduction to the CSS box model: http://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
  15. ↑ w3schools - CSS Box Model: http://www.w3schools.com/css/css_boxmodel.asp
  16. ↑ CSS Flexible Box Layout: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
  17. ↑ CSS3 Flexbox -- display:box vs. flexbox vs. flex: https://stackoverflow.com/questions/16280040/css3-flexbox-display-box-vs-flexbox-vs-flex
  18. ↑ Almost complete guide to flexbox (without flexbox): https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox
  19. ↑ Scrimba -- CSS3 Flex box (E-LEARNING COURSE): https://scrimba.com/g/gflexbox
  20. ↑ Designing the (FireFox Dev Tools') Flexbox Inspector: https://hacks.mozilla.org/2019/01/designing-the-flexbox-inspector/
  21. ↑ Designing the Flexbox Inspector: https://hacks.mozilla.org/2019/01/designing-the-flexbox-inspector/
  22. ↑ FlexBox zombies: https://mastery.games/p/flexbox-zombies
  23. ↑ A complete guide to CSS Grids: https://css-tricks.com/snippets/css/complete-guide-grid/
  24. ↑ CSS Grid -- Visual Guide (CHEATSHEET): http://grid.malven.co (with "click-to-copy")
  25. ↑ Scrimba -- CSS3 Grid Layouts (E-LEARNING COURSE): https://scrimba.com/g/gR8PTE
  26. ↑ CSS Grids (E-LEARNING COURSE)https://cssgrid.io/
  27. ↑ CSS Grid based advent calendar: https://codepen.io/jonhickman/pen/zPyOgp (with an interesting set of links and tongue-in-cheek dialog about evolution of CSS layouts)
  28. ↑ CSS Grid layout — crossed sections: https://medium.com/deemaze-software/css-grid-layout-crossed-sections-fca9e956e725
  29. ↑ CSS Grid + Flexbox Solving Real-world Problems: https://medium.com/@petermouland/css-grid-flexbox-solving-real-world-problems-1cce3ecb2b51
  30. ↑ New things CSS grid brings to the </table>: https://medium.com/@js_tut/new-things-css-grid-brings-to-the-table-e465cb5d2841
  31. ↑ Grid by Example: https://gridbyexample.com/examples/
  32. ↑ CSS Grid for UI Layouts: https://hacks.mozilla.org/2018/02/css-grid-for-ui-layouts/
  33. ↑ CSS Grid -- Subgrid: https://tympanus.net/codrops/css_reference/subgrid/ (subgrid is an additional feature to CSS Grid introduced in Level 2 of the specification which allows nested grids to participate in the sizing of their parent grids)
  34. ↑ Editorial Design Patterns With CSS Grid And Named Columns https://www.smashingmagazine.com/2019/10/editorial-design-patterns-css-grid-subgrid-naming/
  35. ↑ Grid Tile Layouts with auto-fit and minmax: https://mastery.games/post/tile-layouts/
  36. ↑ Controlling the size of an image within a CSS Grid layout: https://stackoverflow.com/questions/46090760/controlling-the-size-of-an-image-within-a-css-grid-layout
  37. ↑ Creating a masonry layout with CSS Grid: https://adam-collier.medium.com/creating-a-masonry-layout-with-css-grid-4ae8985b8e53
  38. ↑ Breaking Boxes With CSS Fragmentation: https://www.smashingmagazine.com/2019/02/css-fragmentation/
  39. ↑ CSS Flip Effect On Hover | 3D Flip Effect With HTML & CSS: https://webdevtrick.com/css-flip-effect-on-hover/
  40. ↑ Simple CSS Only Flip Effect for a Div: https://jwcooney.com/2018/10/08/simple-css-only-flip-effect-for-a-div/
  41. ↑ CSS3 Transitions: http://css3.bradshawenterprises.com/transitions/
  42. ↑ CSS Transitions: https://www.w3schools.com/css/css3_transitions.asp
  43. ↑ CSS3 Transition: https://www.coderepublics.com/CSS/css3-transitions.php
  44. ↑ CSS Transitions: Tutorial and Examples: https://catswhocode.com/css-transition/
  45. ↑ 8 Simple CSS3 Transitions That Will Wow Your Users: https://www.webdesignerdepot.com/2014/05/8-simple-css3-transitions-that-will-wow-your-users/
  46. ↑ CSS3 Animation Repeat: https://stackoverflow.com/questions/13994825/css3-animation-repeat
  47. ↑ MozDev docs -- CSS3 Animations - animation-play-state: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state
  48. ↑ CSS animation-play-state Property: https://www.w3schools.com/CSSref/css3_pr_animation-play-state.asp
  49. ↑ Restart CSS Animation: https://css-tricks.com/restart-css-animation/
  50. ↑ Use CSS3 transitions with gradient backgrounds: https://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds
  51. ↑ How can I apply a gradient over a background with CSS?: https://stackoverflow.com/questions/17833536/how-can-i-apply-a-gradient-over-a-background-with-css
  52. ↑ GRADIENT ANIMATION TRICK: https://codersblock.com/blog/gradient-animation-trick/
  53. ↑ Smooth CSS Gradient Transitions: https://dzone.com/articles/smooth-cs-gradient-transitions
  54. ↑ Inheriting the inverse gradient of the elements background: https://stackoverflow.com/questions/19318534/inheriting-the-inverse-gradient-of-the-elements-background
  55. ↑ CSS List Style colors: https://www.w3schools.com/CSS/tryit.asp?filename=trycss_list-style_colors | SRC (paste that into W3schools)
  56. ↑ Gradient in IE9 - using “filter: none” doesn't work: https://stackoverflow.com/questions/9193830/gradient-in-ie9-using-filter-none-doesnt-work
  57. ↑ A Farewell To CSS3 Gradients: https://www.sitepoint.com/a-farewell-to-css3-gradients/
  58. ↑ MozDev -- (webkit) Text Stroke: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke (for putting an "outline" around text, property itself experimental and only works in Safari/Chrome in differing ways, as of 2018-06-10 better to use text-shadow by itself to recreate the effect)
  59. ↑ Recreating "text-stroke" effect with text-shadow: http://jsfiddle.net/Kyle_/ZnfED/1/
  60. ↑ Outline effect to text: https://stackoverflow.com/questions/4919076/outline-effect-to-text
  61. ↑ wikipedia: Blend modes
  62. ↑ CSS Blend Mode: https://dzone.com/articles/css-blend-mode
  63. ↑ Close-up CSS "mix-blend-mode" property https://www.sitepoint.com/close-up-css-mix-blend-mode-property/
  64. ↑ MozDev -- CSS - Mix Blend Mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
  65. ↑ Mix Blend Mode reference: https://cssreference.io/property/mix-blend-mode/
  66. ↑ CSS background-blend-mode Property: https://www.w3schools.com/cssref/pr_background-blend-mode.asp
  67. ↑ List of "mix-blend-mode" values: https://css-tricks.com/almanac/properties/m/mix-blend-mode/
  68. ↑ Basics of CSS Blend Modes: https://css-tricks.com/basics-css-blend-modes/
  69. ↑ Having text color always be the opposite of the background image color?: https://stackoverflow.com/questions/40136895/having-text-color-always-be-the-opposite-of-the-background-image-color
  70. ↑ CSS Before and CSS After – How to Use the Content Property: https://www.freecodecamp.org/news/css-before-and-after-how-to-use-the-content-property/
  71. ↑ Top 10 New Features in CSS 3: http://www.webreference.com/authoring/css3/index.html
  72. ↑ 12 Awesome CSS3 Features That You Can Finally Start Using: http://tutorialzine.com/2013/10/12-awesome-css3-features-you-can-finally-use/
  73. ↑ CSS3 Introduction: http://www.w3schools.com/css/css3_intro.asp
  74. ↑ CSS3 Border-radius reference: http://www.css3.info/preview/rounded-border/
  75. ↑ IE7.js (makes IE7 and up behave like standards-compliant browsers supporting full CSS): http://dean.edwards.name/IE7/
  76. ↑ IE CSS3: http://fetchak.com/ie-css3/ (IE 5/6/7/8)
  77. ↑ curved-corner (.htc file): http://code.google.com/p/curved-corner/
  78. ↑ Cross-browser CSS3 border-radius rounded corners (.htc file): http://dimox.net/cross-browser-border-radius-rounded-corners/
  79. ↑ The Power of CSS presentation: https://codepen.io/una/full/Wjvdqm/
  80. ↑ 25 Cool CSS Card UI Examples: https://bashooka.com/coding/cool-css-card-ui-examples/
  81. ↑ Design with Tailwind CSS Masterclass: https://egghead.io/courses/design-with-tailwind-css-masterclass-f0db
  82. ↑ Bootstrap Documentation archives: http://bootstrapdocs.com/
  83. ↑ Bootstrap Grid system: http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
  84. ↑ Bootstrap Tutorial – The Ultimate Guide: http://www.webcodegeeks.com/css/bootstrap/bootstrap-tutorial/
  85. ↑ Specifying which column goes on top: http://scotch.io/tutorials/reorder-css-columns-using-bootstrap (the best short guide on how to choose which column gets “top billing” position in the event of screen being too small to display the columns, it doesn’t have to always be the left-most on top which is default behavior of Bootstrap)
  86. ↑ Boostrap -- Components - Glyphicons: https://getbootstrap.com/docs/3.3/components/#glyphicons
  87. ↑ Bootstrap Glyphicons (CHEAT SHEET): https://glyphicons.bootstrapcheatsheets.com/
  88. ↑ w3Schools -- Bootstrap: https://www.w3schools.com/bootstrap/default.asp
  89. ↑ w3Schools -- Bootstrap - all classes: https://www.w3schools.com/bootstrap/bootstrap_ref_all_classes.asp
  90. ↑ w3Schools -- Bootstrap - CSS helpers: https://www.w3schools.com/bootstrap/bootstrap_ref_css_helpers.asp
  91. ↑ How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?: http://stackoverflow.com/questions/8740779/how-to-build-a-2-column-fixed-fluid-layout-with-twitter-bootstrap
  92. ↑ Bootstrap Scaffolding layouts: http://getbootstrap.com/2.3.2/scaffolding.html#layouts
  93. ↑ Learn Bootstrap 4 in 5 minutes: https://medium.freecodecamp.org/learn-bootstrap-4-in-5-minutes-da94728efe41
  94. ↑ Bootstrap Scrollspy Plugin (Advanced): https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp
  95. ↑ Mootools Scrollspy: https://davidwalsh.name/js/scrollspy
  96. ↑ BootStrap -- Container-fluid vs .container: https://stackoverflow.com/questions/22262311/container-fluid-vs-container#22263969
  97. ↑ Reset Bootstrap Padding/Margins for Theming: https://parkhurstdesign.com/reset-bootstrap-padding-margins-for-theming/
  98. ↑ Bootstrap 3 Gutter Size: https://stackoverflow.com/questions/19041733/bootstrap-3-gutter-size
  99. ↑ Bootstrap 3 Tips and Tricks You Still Might Not Know: https://scotch.io/bar-talk/bootstrap-3-tips-and-tricks-you-still-might-not-know
  100. ↑ Optionally Remove the Gutter Padding from Bootstrap Columns: https://codepen.io/ncerminara/pen/hfvix/
  101. ↑ No Gutter Column Trick for Bootstrap: https://julienmelissas.com/no-gutter-column-trick-for-bootstrap/
  102. ↑ Bootstrap visible and hidden classes not working properly: https://stackoverflow.com/questions/20354908/bootstrap-visible-and-hidden-classes-not-working-properly
  103. ↑ Bootstrap3 .visible-* .hidden-* display inline: https://stackoverflow.com/questions/19098376/bootstrap3-visible-hidden-display-inline
  104. ↑ Bootstrap 4 Hidden & Visible: https://medium.com/wdstack/bootstrap-4-hidden-visible-dd969a4c5854
  105. ↑ Bootstrap Grid System: https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php
  106. ↑ Remove padding from columns in Bootstrap 3: https://stackoverflow.com/questions/19562903/remove-padding-from-columns-in-bootstrap-3
  107. ↑ Top 10 Front-End Frameworks of 2016: https://www.keycdn.com/blog/front-end-frameworks/
  108. ↑ How to cook a complete Windows 8 application with HTML5, CSS3 and JavaScript in a week: http://blogs.msdn.com/b/eternalcoding/archive/2012/04/16/how-to-cook-a-complete-windows-8-application-with-html5-css3-and-javascript-in-a-week-day-0.aspx
  109. ↑ The Definitive Guide to Using Negative Margins: http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
  110. ↑ How can I get rid of the space at the bottom of this document?: http://doctype.com/get-rid-space-bottom-document
  111. ↑ Hamburger vs Menu - The Final AB Test: http://exisweb.net/menu-eats-hamburger
  112. ↑ CSS3 Information: http://www.cssneuse.net/
  113. ↑ iOS 7.1: new minimal UI mode and old bugs on Safari: http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs
  114. ↑ Safari Developer Guides for IOS -- Configuring Web Applications: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

See Also

CSS | Web Design | Mobile Web Design | HTML5 | WebApp

Retrieved from "http://wiki.bcmoney-mobiletv.com/index.php?title=CSS3&oldid=59980#Grid"