CSS Visual Dictionary

Description

CSS Is Hard... But It Doesn't Have To Be With CSS grid and Flex added to CSS specification, indeed CSS has earned its place as a serious design tool among other coding languages such as JavaScript and HTML. With this completely visual approach to education, CSS Visual Dictionary is not only a passage that can be read from start to finish, but also used a reference that will serve you in your career as a graphic and web designer for years to come. Over 250 visual diagrams explaining all CSS properties and values currently supported by all major browsers in common use. Contents 1 CSS Properties and Values 1.1 External Placement 1.2 Internal Placement 1.3 Inline Placement 1.4 CSS Grammar – Selector Syntax 1.5 Relationship Between Properties & Values 1.6 CSS Comments 1.7 Assignment Patterns 1.8 CSS Variables 1.8.1 Local Variables 1.9 Syntactically Awesome Stylesheets 1.10 The Idea Behind Cascading Style Sheets 1.11 CSS Selectors 1.12 Forgiving Nature 1.13 Common 1.14 Shorthand Properties 2 Pseudo Elements 2.1 ::after 2.2 ::before 2.3 ::first-letter 2.4 ::first-line 2.5 ::selection 2.6 ::slotted(*) 3 Pseudo Selectors 3.1 :link 3.2 :visited 3.3 :hover 3.4 :active 3.5 :focus 3.6 :enabled 3.7 :disabled 3.8 :default 3.9 :indeterminate 3.10 :required 3.11 :optional 3.12 :read-only 3.13 :root 3.14 :only-of-type 3.15 :first-of-type 3.16 :nth-of-type() 3.17 :last-of-type 3.18 :nth-child() 3.19 :nth-last-child() 3.20 :nth-child(odd) 3.21 :nth-child(even) 3.22 :not() 3.23 :empty 3.24 :Nesting pseudo-selectors 3.25 :dir(rtl) and :dir(ltr) 3.26 :only-child 4 CSS Box Model 5 Position 5.1 Test Element 5.2 static & relative 5.3 absolute & fixed 5.4 fixed 5.5 sticky 6 Working With Text 6.1 Text Align 6.2 Text Align Last 6.3 Overflow 6.4 Skip Ink 6.5 Text Rendering 6.6 Text Indent 6.7 Text Orientation 6.8 Text Shadow 7 Margin, Rounded Corners, Box Shadow and Z-Index 7.1 Border Radius 8 Nike Logo 9 Display 10 Element Visibility 11 Floating Elements 12 Color Gradients 12.1 Overview 12.2 Gradient Types 13 Filters 13.1 blur() 13.2 brightness() 13.3 contrast() 13.4 grayscale() 13.5 hue-rotate() 13.6 invert() 13.7 opacity() 13.8 saturate() 13.9 sepia() 13.10 drop-shadow() 14 Background Images 14.1 Specifying Multiple Values 14.2 background-position 14.3 Multiple Backgrounds 14.4 Image Transparency 14.5 Multiple Backgrounds 14.6 background-attachment 14.7 background-origin 15 object-fit 16 Borders 16.1 Elliptical Border Radius 17 2D Transforms 17.1 translate 17.2 rotate 17.3 transform-origin 18 3D Transforms 18.1 rotateX 18.2 rotateY and rotateZ 18.3 scale 18.4 translate 18.5 Creating A 3D Cube 19 Flex 19.1 display:flex 19.2 Main-axis and Cross-axis 19.3 Direction 19.4 Wrap 19.5 Flow 19.6 justify-content: value 19.7 align-items 19.8 flex-basis 19.9 flex-grow 19.10 flex-shrink 19.11 order 19.12 justify-items 19.13 Interactive Flex Editor 20 CSS Grid 20.1 CSS Grid Model 21 CSS Grid – Using Template Areas 21.1 CSS Grid & Media Queries 21.1.1 Media Queries 21.1.2 Changing content based on browser size 21.2 Creating Your First CSS Grid 21.3 Implicit Rows and Columns 21.4 grid-auto-rows 21.5 Automatic Column Cell Width 21.6 Gaps 21.7 fr – Fractional Unit – for efficiently sizing the remaining space. 21.8 Working With Fractional Units 22 Fractional Units & Gaps 22.1 Repeating Values 22.2 Spans 22.3 Start and End 22.4 Start and End's Shorthand 22.5 Content Align Within CSS Grid Items 22.6 align-self 22.7 justify-self 22.8 Template Areas 22.9 Naming Grid Lines 23 Animation 23.1 animation 23.2 animation-name 23.3 animation-duration 23.4 animation-delay 23.5 animation-direction 23.6 animation-iteration-count 23.7 animation-timing-function 23.8 animation-fill-mode 23.9 animation-play-state 24 Forward & Inverse Kinematics 25 Sassy CSS / SCSS Manual 25.1 New Syntax 25.2 Prerequisites 25.3 Superset 25.4 Variables 25.5 Nested Rules 25.6 The & character 25.7 Mixins 25.8 Multiple Browsers Example 25.9 Arithmetic Operators 25.9.1 Addition 25.9.2 Subtraction 25.9.3 Multiplication 25.9.4 Division 25.9.5 Remainder 25.9.6 Comparison Operators 25.9.7 Logical Operators 25.9.8 Strings 25.10 Control-Flow Statements 25.10.1 if() 25.10.2 @if 25.10.3 @for 25.10.4 @each 25.10.5 @while 25.11 Sass Functions 25.12 Sass Trigonometry 25.13 Writing your own functions in Sass 25.14 Oscillator Animation 26 Tesla CSS Art