Please enable JavaScript.

Coggle requires JavaScript to display documents.

: responsive design with html5 and css, Using SVG's, GRID, CSS…

: responsive design with html5 and css

:one:

<head>
    <title>IcoMoon - SVG Icons</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="demo-files/demo.css">
    <link rel="stylesheet" href="style.css">
</head>

- - - - The first two values, known technically as min-x and min-y, describe the top left corner, while the second two, known technically as width and height, describe the bottom right corner.
      - <svg width="198px" height="188px" viewBox="0 0 99 94" ... >
        → The shape will "zoom" to fill the size of the SVG width and height.
      - → https://www.sarasoueidan.com/blog/svg-coordinate-systems/
  - - - <title>Star 1</title> <desc>Created with Sketch.</desc>
- - - - .shape { display: block; --stroke1: #ddd; --fill1: #444; --stroke2: #f90; --fill2: #663d00; } .shape:hover { --stroke1: #333; --fill1: #444; --stroke2: #fff; --fill2: #ffc266; }
- - - - <animate xlink:href="#star_Path" attributeName="fill" attributeType="XML" begin="0s" dur="2s" fill="freeze" from="#F8E81C" to="#14805e" />
      - Synchronized Multimedia Integration Language and was developed as a method of defining animations inside an XML document (remember, SVG is XML-based).
    - - It's possible to style an SVG with CSS.
      - There are two syntaxes for linking to an external style sheet from an SVG
        
        <?xml-stylesheet href="styles.css" type="text/css"?> <svg width="198" height="188" viewBox="0 0 198 188" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ></svg>
        
        <link href="styles.css" type="text/css" rel="stylesheet"/>
      - styling an SVG with internal styles
        
        it's safest to include the Character
        Data marker (CDATA).
        
        The Character Data marker simply tells the browser that
        the information within the Character Data delimited section could possibly be interpreted as XML markup but should not be.
        
        You can place styles for an SVG within the SVG itself
      - svg properties and values within CSS
        
        https://www.w3.org/TR/SVG/styling.html
        
        There are quite a few specific SVG properties you can use in styles
  - - - @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .star_Wrapper { animation: spin 2s 1s; transform-origin: 50% 50%; } .wrapper { padding: 2rem; margin: 2rem; }
    - - when you want to add
        interactivity, or synchronize several events → JS
      - With an SVG inserted into the page via an object tag or inline, it's possible to manipulate the SVG directly or indirectly with JavaScript
      - options
        
        https://greensock.com/
        
        http://velocityjs.org/
        
        http://snapsvg.io/
        
        // Animate the drawing of the line and color change TweenLite.to(circlePath, 1.5, { "stroke-dashoffset": "-" + amount, stroke: strokeEndColour, }); // Set a counter to zero and animate to the input value var counter = { var: 0 }; TweenLite.to(counter, 1.5, { var: inputValue, onUpdate: function () { text.textContent = Math.ceil(counter.var) + "%"; }, ease: Circ.easeOut, });
        
        In essence, with the TweenLite.to() function, you pass in the thing you want to animate, the time over which the animation should occur, and then the values you want to change (and what you want them to change to).
  - - - .HRH { filter: url('filter.svg#myfilter'); }
      - can also use svg's img tag
- - - - https://jakearchibald.github.io/svgomg/
- - - - the first value is the number of times you want something repeated, and the second value is the width of each item
  - - - the grid-column property is being set to start at the second grid line and end at the -1 grid line.
      - The first number is the start point, which is separated from the endpoint with a forward slash.
        
        Positive numbers count from the start side
        
        while negative numbers start from the end side
    - - Start at grid row line 4 and end at grid row line 7.
- - - - grid-auto-rows: 100px 150px;
        grid-auto-columns: 100px 150px;
  - - - Use a value of column when you want the grid to add extra columns to accommodate extra items, and use a value of row when you want the grid to add extra rows.
- - - - the grid "auto-fits" columns that are at least 300px wide and no more than the size of its content plus a 1fr share of any remaining space
      - when using auto-fit, any extra columns left,
        having laid out the content, are collapsed, leaving that space free to be distributed evenly between the items in the row
    - - It's a CSS function that allows you to set up a range for the browser.
      - we are passing minmax() a minimum size
        of 300px and a maximum size of one fr
        
        the grid "auto-fits" columns that are at least 300px wide and no more than the size of its content plus a 1fr share of any remaining space
- - - - This allows you to set grid-template-rows, grid-template-columns, and grid-template-areas in one line.
      - grid-template: 200px 200px / 300px 300px 300px;
      - grid-template: repeat(2, 200px) / repeat(3, 300px);
    - - you can set the properties controlling the explicit portion of
        a grid, as well as the properties controlling the implicit part of a grid
      - An essential concept to hold onto when writing the grid shorthand is that a grid can only grow implicitly with either rows or columns, not both.
      - option 1
        
        grid: 100px 100px / 200px 200px 200px;
        
        here is a grid with two 100px rows and three 200px columns
        
        the same value that you would use if you were using grid-template.
      - option 2
        
        grid: 100px 100px / repeat(auto-fill, 75px);
        
        for a grid with two explicit 100px rows and any number of explicit columns that are 75px wide:
        
        A set of lengths for explicit grid rows, then, separated by the slash, a definition for how you want to handle implicit columns.
        
        grid: 100px / auto-flow;
        
        a grid that has only one row, 100px high, but any number of columns, potentially running off the side of the container:
      - option 3
        
        the opposite of option two.
        
        you set grid-auto-flow to handle implicit rows (with an optional dense) with an optional grid-auto-rows value for the size of the rows
        
        grid: auto-flow 100px / repeat(5, 1fr);
        
        How about a grid that creates as many 100px rows as needed and 5 columns that occupy 1fr each?
        
        grid: auto-flow 100px / auto;
        
        a grid that creates a single column with as many 100px rows as
        needed for the content?
- - - - grid-template-rows: [top-start] 200px [top-end middle-start] 200px [middle-end bottom-start] 200px [bottom-end];
        
        .grid-item-1 { grid-column: center-start / center-end; grid-row: middle-start / middle-end; } .grid-item-2 { grid-column: right-start / right-end; grid-row: bottom-start / bottom-end; } .grid-item-3 { grid-column: left-start / left-end; grid-row: top-start / middle-start; }
      - What we are doing inside the square brackets is giving a name to the grid line.
- - - - it might be useful to think of a pseudo-selector as
        one that selects a subpart of the original thing it is selecting.
    - - .thing::before { content: "Spooky"; }
      - The key thing to remember with pseudo-elements is that if you don't provide a value for content, nothing will show on the page
- - - - img[alt] { border: 3px dashed #e15f5f; }
      - can combine this with the :not negation selector
        
        img:not([alt]), img[alt=""] { border: 3px solid red; }
    - - This would select the img element in the preceding code, and any others on the page provided that they have an alt attribute.
    - - [data-sausage] { /* styles */ }
      - The key thing here is to use square brackets to specify the attribute you want to select.
    - - [data-activity-name="swimming"][data-location="indoor"] { ... }
      - more possibilities for selecting items by grouping attribute
        selectors.
  - - - Contains an instance of a certain substring
      - Ends with a certain substring
      - Begins with a certain substring
    - - <li data-type="todo-chore">Empty the bins</li> <li data-type="todo-exercise">Play football</li>
        
        The key character in all this is the ^ symbol, that symbol is called the "caret"
        
        [data-type^="todo"] { /* Styles */ }
      - Attribute selectors allow you to select IDs and classes that start
        with numbers.
    - - [attribute*="value"] { /*styles*/ }
      - <p data-ingredients="scones cream jam">Will I get selected?</p>
        
        [data-ingredients*="cream"] { → color:red }
        
        The key character in all this is the * symbol
    - - [attribute$="value"] { /*sytles*/ }
      - <p data-ingredients="scones cream jam">Will I get selected?</p>
        
        [data-ingredients$="jam"] { /*styles*/ }
        
        The key character in all this is the $ (dollar) symbol,
- - - - div:first-child { /* Styles */ }
    - - we want to have all but the last link over on the left
      - div:last-child { /* Styles */ }
      - .nav-Wrapper { display: flex; } .nav-Link:last-child { margin-left: auto; }
    - - every other list item
        
        .nav-Link:nth-child(odd) { /* Styles */ }
        
        .nav-Link:nth-child(even) { /* Styles */ }
      - selectors
        
        nth-child(n)
        
        nth-last-child(n)
        
        nth-of-type(n)
        
        nth-last-of-type(n)
      - n-parameter
        
        integer → :nth-child(2) would select the second item
        
        expression → :nth-child(3n+1) start from the first, select every third
        
        reverse direction → :nth-child(-2n+3) finds the third item again, but then goes in the opposite direction to select every two elements
        
        from the end → :nth-last-child(-n+3) starts at 3 from
        the end and then selects all the items after it
      - nth-of-type
        
        :nth-of-type and :nth-last-of-type let you be specific about the type of item you want to select → nth-of-type selectors work on each type of element they find (span, div)
        
        <span class="span-class"></span>
        <div class="span-class"></div>
        
        .span-class:nth-of-type(-2n+3) { ... }
        
        Even though all the elements have the same span-class class, they don't get seen as one group. The selector applies once to the span elements, and then to the div elements
      - nth-child selector targets all children at the same DOM level, regardless of classes
  - - - parent > .descendant { /*styles*/ }
      - the right angle bracket between the two class names in the selector; that's the child combinator symbol.
      - <div class="parent"> <div class="descendant child"> <div class="descendant grandchild"></div> </div> </div>
    - - .one + .item { border: 3px dashed #f90; }
      - The + symbol there means "next sibling,"
      - <<div class="item one">one</div> <div class="item">two</div> <div class="item">three</div> <div class="item">four</div> <div class="item">five</div> <div class="item">six</div>
    - - .item:nth-child(3) ~ .item { border: 3px dashed #f90; }
      - The ~ symbol, called "tilde," says "every subsequent sibling."
  - - - <div class="a-div"></div> <div class="a-div"></div> <div class="a-div"></div> <div class="a-div not-me"></div> <div class="a-div"></div>
      - div { display: inline-block; height: 2rem; width: 2rem; background-color: blue; } .a-div:not(.not-me) { background-color: orange; border-radius: 50%; }
    - - <div class="thing"></div>
      - .thing { padding: 1rem; background-color: violet; } .thing:empty { display: none; }
      - for dynamic content ... sometimes, it gets content inserted,
        while sometimes, it doesn't.
        
        The trouble is, when it doesn't include content, I still see
        the padding.
- - - - .modal { height: 90vh; }
    - - .Hero-text { font-size: 25vw; }
      - it's now trivially easy to create text that scales in size
- - - - :root { --MainFont: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
      - .Title { font-family: var(--MainFont); }
      - The :root pseudo-class always references the top-most parent
        element in a document structure
    - - body { background-color: var(--background); color: var(--foreground); }
      - specificity → if they are redeclared closer to the element in question, the more specific value will override the first.
  - - - simply provide your fallback value after the custom property
        name and a comma.
  - - - padding-top: env(safe-area-inset-top);
  - - - @supports (display: grid) { .Item { display: inline-grid; } } @supports not (display: grid) { .Item { display: inline-flex; } }
      - you're better off writing your default declarations first and then your supports specific one after
    - - @supports ((display: flex) and (pointer: coarse)) { .Item { display: inline-flex; } } @supports ((display: flex) and (pointer: coarse)) or (transform: translate3d(0, 0, 0)) { .Item { display: inline-flex; } }
      - we only wanted to apply some
        rules if both Flexbox and pointer: coarse were supported
      - we have used the and keyword but we could use or as well as well
- - - - there are a number of online font services → Google Fonts and Adobe Fonts are probably the two most popular.
      - e.g. inter → https://rsms.me/inter/
      - To make a web font available for use in our CSS, we use the font-face at-rule.
        
        @font-face { ... }
        
        @font-face { font-family: 'InterRegular'; src: url('Inter-Regular.woff2') format('woff2'), url('Inter-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: fallback; }
        
        hero-Image { → font-family: 'FlyingBanana', sans-serif; `}
        
        it's important to pay attention to the paths the fonts are stored in.
      - font-display
        
        The fallback value we have provided sets an extremely short "block" period and a short "swap" period.
        
        possible values → auto, block, swap, fallback, optional
  - - - <link rel="preload" href="fonts/inter.var.woff2" as="font" type="font/woff2" crossorigin />
  - - - registered axis
        
        Weight: How heavy the text appears
        
        Width: How narrow (condensed) or wide the text appears
        
        Italic: Whether the font is being displayed as italic or not
        
        Slant: Don't confuse this with italic. This simply alters the angle of the text;
        
        Optical-size: This is the only one of the registered axes that has required a new font property.
        
        font-variation-settings: 'wght' 300, 'slnt' -4;
      - Variable fonts can also include their own "features."
        
        font-feature-settings: 'zero';
        
        to switch on "slashed zeroes," we can do this:
        
        font-feature-settings: 'zero' 0;
- - - - yellow is at 60°, green is at 120°, cyan is at 180°, blue is at 240°, magenta is at 300°, and finally red is at 360
- - - - <a href="index.html"> <h2>The home page</h2> <p>This paragraph also links to the home page</p> <img src="home-image.png" alt="A rendering of the home page" /> </a>
  - - - Sectioning elements, for the broadest strokes in a HTML page. These are the kind of elements to use for header, footer, and sidebar areas.
      - Grouping elements, which are used to wrap associated elements. Think of paragraphs, blockquotes, and content of that nature.
      - Text-level semantics, which are the elements we use to designate particulars, like a section of bold or italic text or code.
    - - the <main> element
        
        a declarative way to group the main content
        
        The main content area of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms
        
        should not have more than one main on each page, should not be a descendent child element
      - the <section> element
        
        is used to define a generic section of a document or
        application
        
        isn't intended for styling purposes → use a div for style
        
        ~ use as the wrapping
        section element for visual components.
      - the <nav> element
        
        used to wrap major navigational links (or parts within the same page)
      - the <article> element
        
        used to wrap a self-contained piece of content
        
        eg. an RSS feed, blog post, news stories
      - the <aside> element
        
        used for content that is tangentially related to the content around it
        
        eg. sidebars, tip, pull quotes, advertising, nav elements → anything not directedly related to the main content
      - the <header> element
        
        can be used for the "masthead" area of a site's header, also an introduction to other content
        
        can have a header inside every <section>
      - the <footer> element
        
        should be used to contain the information about the section it sits within
        
        eg. copyright
        
        can be used multiple times
    - - the <div> element
        
        the most ubiquitous grouping element
        
        is so widely used because it is opinion-less. It conveys nothing → only implied meaning is that it groups something
        
        should only opt for a div as a last resort
      - the blockquote element
        
        used to markup text that is quoted from somewhere else
      - the <p> element
        
        used to markup a paragraph
        
        use it to mark up any text that cannot be better marked up with one of the other elements
      - the <figure> and <figcaption> elements
        
        can thus be used to annotate illustrations, diagrams, photos, code listings, etc.
        
        we use it as an element to call out visuals of any sort
        
        the accompanying <figcaption> provides the means to add some text supporting the visuals
      - the <details> and <summary> elements
        
        to create a simple open and close widget on your page
        
        A piece of summary text that when clicked, opens a panel with additional information
      - the <address> element
        
        to be used explicitly for marking up contact information
        for its nearest <article> or <body> ancestor
        
        isn't used for postal addresses
    - - before html5 → text-level semantic elements were referred to as inline elements
      - the <span> element
        
        the text-level equivalent of a div
        
        perfect element to reach for when you merely want to wrap text in an element for styling purposes.
      - the <b> element
        
        make this bold
        
        The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood,
      - the <strong> element
        
        to emphasize something for strength, urgency, or importance
        
        importance, seriousness, urgency
      - the <em> element
        
        The em element represents stress emphasis of its contents
      - the <i> element
        
        A span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text
- - - - character encoding → tells the browser how to parse the information within : utf-8
      - character encoding : <meta charset="utf-8" />
      - stylesheet → <link href="CSS/main.css" rel="stylesheet" type="text/css" />
- - - - <video src="myVideo.mp4" width="640" height="480">
      - <video src="myVideo.mp4"></video>
        
        very simple
      - we show the default playback controls → the controls attribute
      - add other attributes: preload, loop, poster
        
        <video src="myVideo.mp4" width="640" height="480" controls autoplay preload="auto" loop poster="myVideoPoster.png">
    - - The <source> tag enables us to provide alternate sources for media
        
        <source src="myVideo.mp4" type="video/mp4" />
        
        <source src="myVideo.sp8" type="video/super8" />
        
        → so if it doesn't support
        super8, it moves on to the next source, mp4 in this case.
      - <video width="640" height="480" controls preload="auto" loop poster="myVideoPoster.png"> <source src="myVideo.sp8" type="video/super8" /> <source src="myVideo.mp4" type="video/mp4" /> <p><b>Download Video:</b> MP4 Format: <a href="myVideo.mp4">"MP4"</a></p> </video>
    - - The <audio> tag works on the same principles as the video tag,
      - <audio> has no playback for visible content
  - - - video { max-width: 100%; height: auto;}
    - - css trick for correct aspect ratio
        
        http://alistapart.com/article/creatingintrinsic-ratios-for-video.
        
        <style> .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> <div class="embed-container"> <iframe src="http://www.youtube.com/embed/B1_N28DA3gY" frameborder="0" allowfullscreen> </iframe> </div>
      - <iframe width="960" height="720" src="https://www.youtube.com/ embed/B1_N28DA3gY" frameborder="0" allowfullscreen></iframe>
- - - - <meta name="viewport" content="width=device-width, maximum-scale=3, minimum-scale=0.5"/>
      - <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
- - - - modern browsers are smart enough to discern which style sheets, need to be analyzed immediately and which can
        be deferred until after the initial page rendering
        
        separating media queries
        
        render blocking
  - - - The pointer media feature is used to query about the presence and accuracy of a pointing device such as a mouse. If a device has multiple input mechanisms, the pointer media feature must reflect the characteristics of the "primary" input mechanism, as determined by the user agent
        
        @media (pointer: coarse) { ... }
        
        @media (pointer: fine) { ... }
        
        The safest bet is always to assume users are using touch-based
        input and to size user interface elements accordingly
        
        @media (any-pointer: coarse) { ... }
      - the hover media feature tests a device's ability to hover over
        elements on the screen
        
        @media (hover: none) { ... }
        
        @media (hover) { ... }
        
        @media (any-hover: hover) { ... }
    - - the option of a "dark mode"
      - @media (prefers-color-scheme: dark) { ... }
- - - - display: flex;
        flex-direction: column;
    - - flex-direction: row;
        justify-content: space-between;
        max-width: 1000px;
        margin: 0 auto;
  - - - main size → cross size
      - cross start → cross end
      - main axis → cross axis
      - main start → main end
      - flex container
        
        flex item, flex item
    - - to pull just one item into a different alignment → Individual
        flex items can use the align-self property to align themselves
    - - flex-start:
        
        Setting an element to flex-start would make it begin at the
        "starting" edge of its flex container
      - flex-end
        
        Setting to flex-end would align the element at the end of the flex
        container.
      - center
        
        This puts it in the middle of the flex container.
      - bassline
        
        This sets all the flex items in the container so that their baselines
        align.
      - stretch
        
        This makes the items stretch to the size of their flex container
        (in the cross axis).
    - - row → the main axis will be the horizontal axis, the cross axis will be the vertical axis
      - column → the main axis will be the vertical axis, the cross axis will be the horizontal axis
    - - The align-items property positions items in the cross axis
      - .FlexWrapper{ ... }
        
        .FlexWrapper { background-color: indigo; display: flex; height: 200px; width: 400px; align-items: center; }
  - - - flex: 1 1 100px ;
        
        flex: 1 1 auto means that the item will grow into one part of the available space. It will also shrink one part when space is lacking and the basis size for the flexing is the intrinsic width of the content
      - flex-grow → (the first value you can pass to flex) is the amount, in relation to the other flex items, the flex item can grow when free space is available
        
        default value of 0 → if there are extra space, they will not grow
        
        property can be applied to any child item
        
        values are relative → e.g. 2:1 - take the 400px of additional width, give two parts to item1, give 1 part to item2 → add to the items original flex basis value
      - flex-shrink → is the amount the flex item can shrink, in relation to the other flex items, when there is not enough space available.
        
        values relative
        
        default is 1 → all child items will 'shrink' equally e.g. if child containers width exceed container width
      - flex-basis → (the final value you can pass to flex) is the basis size the flex item is sized to.
    - - the child elements are mailable
      - we need a new property instead of width → flex basis (will override width properties)
        
        e.g. flex-basis: 200px
        
        will represent width → flex row
        
        will represent height → flex column
        
        flex-basis by default → auto (wrap content)
        
        will be constrained by min-width, max-width properties
  - - - space evenly
        
        This takes the available space and adds an equal amount to every gap.
      - space around
        
        space-around
        puts it around the items
      - space-between
        
        a value of space-between puts an equal amount of space between the items,
      - center
      - flex-end
      - flex-start:
- - - - lefthand area will only be viewable as an "off-canvas" area (menu)
      - main content sits below the header,
      - the right-hand section below that
- - - - issue → it renders space between HTML elements
      - no simple way to vertically center content within an inline-block
      - Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
    - - computed widths don't get rounded consistently across browsers
      - usually have to clear floats so that parent boxes / elements don't collapse
    - - using display: table with a display: table-cell child enabled consistent and robust vertical centering of elements
      - elements inside table-cell table elements space themselves perfectly
  - - - perfectly centered text
        
        .CenterMe { ... }
        
        display: flex;
        
        align-items: center;
        
        justify-content: center;
        
        .CenterMe { background-color: indigo; color: #ebebeb; font-family: "Oswald", sans-serif; font-size: 2rem; text-transform: uppercase; height: 200px; display: flex; align-items: center; justify-content: center; }
        
        display flex → This is the bread and butter of Flexbox. This merely sets the item to be a Flexbox, as opposed to a block or inline-block.
        
        align-items → This aligns the items within a Flexbox in the cross axis, vertically centering the text in our example.
        
        justify-content: This sets the main axis, centering the content
      - nav menu
        
        offest items
        
        wrapper
        
        display: flex;
        align-items: center;
        
        list items → margin-right: 1rem;
        
        last item → margin-left: auto;
        
        which makes that item use all of the available
        margin on that side.
        
        reverse order of items
        
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        
        list items → margin-right: 1rem;
        
        last item → margin-right: auto;
        
        vertical
        
        list items → no margin
        
        display: flex;
        flex-direction: column;
        align-items: center;
        
        can also stack in opposite direction → flex-direction: column-reverse;
- - - - <picture> <source type="image/webp" srcset="scones-baby-yeah.webp" /> <img src="scones-baby-yeah.jpg" alt="delicious cakes" /> </picture>
- - - - the first value is the amount of shadow to the right, the second is the amount down, the third value is the amount of blur, and the final value is the color
      - you can also set the shadow values in any other valid CSS length units such as em, rem, ch, rem,
      - omit blur when its not needed
        
        text-shadow: -4px -4px #dad7d7;
    - - text-shadow: 4px 4px 0px hsla(140, 3%, 26%, 0.4);
      - text-shadow: -4px -4px 0px #dad7d7;
      - multiple
        
        .element { text-shadow: 0px 1px #fff, 4px 4px 0px #dad7d7; }
  - - - The default box-shadow is set on the outside of the element
      - optional keyword, inset, allows the box shadow to be applied inside the element
      - horizontal offset, vertical offset, blur, spread, and color
- - - - the gradient heads to the top right. It starts red in the bottom left
        corner and fades to blue at the top right.
  - - - 5em would be a circle 5em in size. It's possible to omit the circle part if giving just a size.
      - circle would be a circle the full size of the container (the size of a radial gradient defaults to farthest-corner if omitted—)
      - 40px 30px would be an ellipse as if drawn inside a box 40px wide by 30px tall.
      - ellipse would create an ellipse shape that would fit within the element.
    - - at top right starts the radial gradient from the top right.
      - at right 100px top 20px starts the gradient 100px from the right edge and 20px from the top edge.
      - default position is center
      - at center left starts it halfway down the left side of the element.
  - - - prefix the linear-gradient or radial-gradient with repeating
      - .repeating-radial-gradient { background: repeating-radial-gradient(black 0px, orange 5px, red 10px); }
    - - background gradient patterns
        
        carbon fibre → see example
        
        clever folks out there have harnessed the power of gradients to create background gradient patterns.
        
        http://lea.verou.me/css3patterns/
      - multiple background images
        
        you can stack as many background images as you need on an element
        
        as long as your images have transparency, any partially transparent background images that sit on top of another will show through below
        
        .bg { background: url('../img/1.png'), url('../img/2.png'), url('../img/3.png'); }
        
        the image listed first is layered nearest to the top, or closer to the user, in the browser
        
        You can also add a general
        color for the background in the same declaration if you wish,
        
        { background: url('../img/1.png'), url('../img/2.png'), url('../img/3.png') left bottom, black;
        
        You can also add a general color for the background
        in the same declaration if you wish, like this:
        
        background: url('../img/1.png'), url('../img/2.png'), url('../img/3.png') left bottom, black;
        
        background size
        
        .bg { background-size: 100% 50%, 300px 400px, auto; }
        
        properties
        
        auto: This sets the element at its native size.
        
        cover: This expands the image, preserving its aspect ratio, to cover the area of the element.
        
        contain: This expands the image to fit its longest side within the element while preserving the aspect ratio.
        
        you can use percentage or pixel values
        
        background position
        
        Where no background-position is declared, the default position of top left is applied.
        
        .bg-multi { height: 100vh; width: 100vw; background: url("rosetta.png"), url("moon.png"), url("stars.jpg"); background-size: 75vmax, 50vw, cover; background-position: top 50px right 80px, 40px 40px, top center; background-repeat: no-repeat; }
        
        To set different sizes for each image, use the background-size property → The size values (first width, then height) for each image are declared, in the order they are listed in the background property
        
        used to be a fairly common design requirement to build a page with a different background image at the top of the page than at the bottom
      - high-res
        
        we have the ability to load in different background images, not just at different viewport sizes, but also different viewport resolutions.
        
        .bg { background-image: url("bg.jpg"); } @media (min-resolution: 1.5dppx) { .bg { background-image: url("bg@1_5x.jpg"); } }
        
        ppx → device pixels per CSS pixel
        
        could also use dpi (dots per inch) or dpcm (dots per centimeter) units if preferable
- - - - "Architecture is outside the braces, performance is inside."
      - one thing that really can grind a page to a halt, CSS-wise, is "expensive" properties (the parts inside the curly braces
      - https://developers.google.com/web/fundamentals/performance/rendering/?hl=en:
- - - - clip-path: circle(20%);
        
        clip an element down to a circle 20% of the element's height and width:
      - .clip-circle { clip-path: circle(35% at 60% 40%); }
        
        positioned 60% horizontally and 40% vertically:
      - the first argument you pass is the size, and the second,
        which is an optional argument, is the position of that shape
    - - the first argument is the x-axis radius (horizontal)
        and the second argument is the y-axis radius (vertical).
      - .clip-circle { clip-path: ellipse(100px 50px at 60% 40%); }
    - - You pass four lengths, and these are how much you want to inset the mask from the edges → the values go clockwise: top, right, bottom, and left
      - There is also an optional round keyword that can be used, followed by another length
      - .clip-inset { clip-path: inset(40px 20px 40px 20px round 0 30px 15px 40px); }
    - - allows us to describe a simple shape with a
        series of comma separated x and y coordinates
      - .clip-poly { clip-path: polygon(50% 60px, 100% calc(100% - 40px), 0% calc(100%- 40px)); }
      - Think of this as a way of describing where to start cutting (the first argument), where to go next (any subsequent arguments), and where the last point should be
      - Each argument is made up of an x coordinate described from the top left of the containing box (for example, 50% along), and then the y coordinate
    - - The URL needs to be an SVG clipPath somewhere in the document.
      - .clip-url { clip-path: url(#starSymbol); }
  - - - .mask-image-example { display: block; height: 1024px; width: 1024px; margin: 0 auto; mask-image: url("mars-text-mask.png"); }
- - - - starting with a functional and accessible website for the most basic browsers, which will be progressively enhanced with features for more capable browsers.
    - - if the cost of developing and supporting browser X is more than the revenue/benefit created by the users of browser X, don't develop specific solutions for browser X.
- - - - text is now rendering and flowing at a more "native size"
      - "make the content render at the width of the device"
  - - - All this based rule does is stipulate that all images should grow to be a max-width maximum of 100% of their size
  - - - defining a particular viewport width or height at which a responsive design should change significantly
    - - not a good decision
      - we want a responsive design - something that is agnostic of the screen size viewing it,
      - *There are no specific breakpoints—use a breakpoint if your design needs it, not for a specific device*
    - - @media screen and (min-width: 800px) { ... }
        
        media directive → we are starting a media query
        
        screen → tells the browser that these rules should be applied to all screen types
        
        the rules should be limited to all viewports at least 800px wide
      - the first rules we write outside of a media query should be our starter or "base" rules for the most basic devices
      - this approach also facilitates a "smallest screen first" mentality
- - - - * { transition: all 1s; }
  - - - ease, linear, ease-in, ease-out, ease-in-out, or cubic-bezier
    - - shorthand
        
        transition: background-color 2s;
        
        transition: all 1s ease 0s;
        
        default timing → ease
        
        One important point to note when writing the shorthand version is that the first time-related value provided is always parsed to be the-duration
        transition
  - - - .style { transition: border 2s, color 3s, text-shadow 8s; }
  - - - Each of them is actually a predefined cubic-bezier curve
      - https://cubic-bezier.com/
      - https://easings.net/
    - - → maximum of 1 second is my own
        preference.
- - - - scale: Scale an element (larger or smaller)
      - translate: Move an element on the screen (up, down, left and right)
      - rotate: Rotate the element by a specified amount
      - skew: Skew an element with its X and Y coordinates
      - matrix: Allows you to move and shape transformations in multiple ways
      - code
        
        scale
        
        .scale:hover { transform: scale(1.4); }
        
        scales entire object (positive or negative)
        
        translate
        
        .translate:hover { transform: translate(-20px, -20px); }
        
        one axis to translate an element, you can also use translateX(-20px)
        
        The translate property tells the browser to move an element by an amount, defined by a length
        
        use translate to center
        absolutely positioned elements
        
        .inner { position: absolute; width: 200px; background-color: #999; top: 50%; left: 50%; /* transition: transform 1s; */ transform: translate(-50%, -50%); }
        
        rotate
        
        .rotate:hover { transform: rotate(30deg); }
        
        The rotate transform allows you to rotate an element → the value in parentheses should always be an angle (degrees, gradians, radians, or turns)
        
        skew
        
        .skew:hover { transform: skew(40deg, 12deg); }
        
        It allows an element to be skewed on either or both of its axes
        
        Omitting the second value means any value will
        merely be applied to the x axis (horizontal)
        
        matrix
        
        .matrix:hover { transform: matrix(1.178, -0.256, 1.122, 1.333, -41.533, -1.989); }
        
        pretty cool
  - - - code
        
        .flipper-object { position: absolute; width: 100%; height: 100%; transition: transform 1s; transform-style: preserve-3d; }
        
        flipper { perspective: 400px; position: relative; width: 300px; height: 44px; }
        
        <div class="flipper"> <span class="flipper-object flipper-vertical"> <span class="panel front">The Front</span> <span class="panel back">The Back</span> </span> </div>
        
        .flipper-vertical .back { transform: rotateX(180deg); } .flipper:hover .flipper-vertical { transform: rotateX(180deg); }
      - we need to set some perspective for .flipper-object, whether
        horizontal or vertical, to flip within, for that, we use the perspective property.
        
        this takes a length value, attempting to simulate the distance from the viewer's
        screen to the edge of the elements 3D space
        
        The value you assign to perspective is arguably counter-intuitive—if you set a
        low number like 20px for the perspective value, the 3D space of the element will
        extend right out to only 20px from your screen; the result being a more pronounced
        3D effect.
      - We use position: relative on the outer flipper element to provide a positioning
        context for flipper-object to be absolutely positioned within:
      - we set the height and width to 100% so that it fills the same space as the outer container → We have also set a transition for the transform
      - The key thing here, 3D wise, is transform-style: preserve-3d. → This declaration tells the browser that when we transform this element, we want any child elements
        to preserve any 3D effect.
        
        set preserve-3d on .flipper-object, we would never get to see the back (the red part) of the flipping element.
        
        we use the backface-visibility property, set this to hidden so that the back face of the element is hidden:
        
        we want to make our back panel flipped by default → we apply a 'rotate' transform
    - - With this single function, it is possible to move an element in the x (left/right), y (up/down), and z (forward/ backward) axes.
      - .flipper:hover .flipper-vertical { transform: rotateX(180deg) translate3d(0, 0, -120px); animation: pulse 1s 1s infinite alternate both; }
      - .flipper:hover .flipper-horizontal { transform: rotateY(180deg) translate3d(0, 0, 120px); animation: pulse 1s 1s infinite alternate both; }
      - The syntax for the comma-separated "arguments"
        you can pass into translate3d are x axis movement, y axis movement, and z axis movement
      - progressive enhancement
        
        see menu example
- - - - @keyframes pulse { 100% { text-shadow: 0 0 5px #bbb; box-shadow: 0 0 3px 4px #bbb; } }
      - We have used a single "keyframe selector" here: 100%.
    - - best to use a name that represents what the animation does,
    - - is also the keyword from, which is equivalent to 0% and to, which is
        equivalent to 100%
      - @keyframes pulse { to { ... } }
      - If a 0% or from keyframe is not specified, then the user agent constructs a 0%
        keyframe using the computed values of the properties being animated. If a 100% or
        to keyframe is not specified, then the user agent constructs a 100% keyframe using
        the computed values of the properties being animated."
  - - - animation: pulse 1s 1s infinite alternate both;
  - - - This makes the item retain any values that have been applied by the animation end.
- - - - You can alter the step increments (granularity) for the spinner controls of various input types with the use of the step attribute.
  - - - <input id="month" type="month" name="month" />
      - The interface allows the user to select a single month and sets the value of the input to a year and month
    - - <input id="week" type="week" name="week" />
      - the picker allows the user to select a single week
        within a year
    - - <input id="time" type="time" name="time" />
      - The time input type allows a value in the 24-hour format;
- - - - input:placeholder-shown { color: #333; }
      - // the cursor → the insertion point .my-Input { caret-color: #f90; }
        
        Caret, in our context here, refers to the insertion point in an input area
  - - - <input type="text" value="" placeholder="hal@2001.com" required />
  - - - <div> <label for="tel">Telephone (so we can berate you if you're wrong)</label> <input id="tel" name="tel" type="tel" placeholder="1-234-546758" autocomplete="off" required /> </div>

@media (min-width: 1000px) {
    .rwd-Chapters_List {
        display: flex;
        flex-wrap: wrap;
    }
    .rwd-Chapter {
        flex: 0 0 33.33%;
        padding: 0 20px;
    }
    .rwd-Chapter::before {
        left: -20px;
    }
}