Scribd Logo
Upload

Welcome to Scribd!

  • 45

    Uploaded by

    Navdeep Kaur
    8 views9 pages
    dg

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    dg

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    8 views9 pages

    45

    Uploaded by

    Navdeep Kaur
    dg

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 9

    <!

    DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="style.css">

    </head>

    <body>

    <!-- ---

    title: Drop cap -->

    <!-- Makes the first letter of the first paragraph bigger than the rest of the text.

    - Use the `:first-child` selector to select only the first paragraph.

    - Use the `::first-letter` pseudo-element to style the first element of the paragraph.

    ```html -->

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo ligula quis tincidunt
    cursus. Integer consectetur tempor ex eget hendrerit. Cras facilisis sodales odio nec maximus.
    Pellentesque lacinia convallis libero, rhoncus tincidunt ante dictum at. Nullam facilisis lectus tellus, sit
    amet congue erat sodales commodo.</p>

    <p>Donec magna erat, imperdiet non odio sed, sodales tempus magna. Integer vitae orci lectus. Nullam
    consectetur orci at pellentesque efficitur.</p>

    <!-- Creates a shadow similar to `box-shadow` but based on the colors of the element itself.

    - Use the `::after` pseudo-element with `position: absolute` and `width` and `height` equal to `100%` to
    fill the available space in the parent element.

    - Use `background: inherit` to inherit the `background` of the parent element.


    - Use `top` to slightly offset the pseudo-element, `filter: blur()` to create a shadow and `opacity` to make
    it semi-transparent.

    - Use `z-index: 1` on the parent and `z-index: -1` on the pseudo-element to position it behind its parent.

    ```html -->

    <div class="dynamic-shadow"></div>

    /* ---

    <!-- title: Hover shadow box animation */

    /* Creates a shadow box around the text when it is hovered.

    - Set `transform: perspective(1px)` to give element a 3D space by affecting the distance between the Z
    plane and the user and `translate(0)` to reposition the `p` element along z-axis in 3D space.

    - Use `box-shadow` to make the box transparent.

    - Use `transition-property` to enable transitions for both `box-shadow` and `transform`.

    - Use the `:hover`, `:active` and `:focus` pseudo-class selectors to apply a new `box-shadow` and
    `transform: scale(1.2)` to change the scale of the text.

    ```html */ -->

    <p class="hover-shadow-box-animation"> Box it!</p>

    <!-- -->

    <!-- Creates an animated underline effect when the user hovers over the text.

    - Use `display: inline-block` to make the underline span just the width of the text content.

    - Use the `::after` pseudo-element with `width: 100%` and `position: absolute` to place it below the
    content.
    - Use `transform: scaleX(0)` to initially hide the pseudo-element.

    - Use the `:hover` pseudo-class selector to apply `transform: scaleX(1)` and display the pseudo-element
    on hover.

    - Animate `transform` using `transform-origin: left` and an appropriate `transition`.

    - Remove the `transform-origin` property to make the transform originate from the center of the
    element.

    ```html -->

    <p class="hover-underline-animation">Hover this text to see the effect!</p>

    <!-- Applies a perspective transform with a hover animation to an element.

    - Use `transform` with the `perspective()` and `rotateY()` functions to create a perspective for the
    element.

    - Use a `transition` to update the `transform` attribute's value on hover.

    - Change the `rotateY()` value to negative to mirror the perspective effect from left to right.

    ```html -->

    <div class="card-container">

    <div class="image-card perspective-left"></div>

    <div class="image-card perspective-right"></div>

    </div>

    <!-- -->

    <!-- Transitions an element's height from `0` to `auto` when its height is unknown.

    - Use `transition` to specify that changes to `max-height` should be transitioned over.

    - Use `overflow: hidden` to prevent the contents of the hidden element from overflowing its container.

    - Use `max-height` to specify an initial height of `0`.


    - Use the `:hover` pseudo-class to change the `max-height` to the value of the `--max-height` variable set
    by JavaScript.

    - Use `Element.scrollHeight` and `CSSStyleDeclaration.setProperty()` to set the value of `--max-height` to


    the current height of the element.

    - **Note:** Causes reflow on each animation frame, which will be laggy if there are a large number of
    elements beneath the element that is transitioning in height.

    ```html -->

    <div class="trigger">

    Hover me to see a height transition.

    <div class="el">Additional content</div>

    </div>

    <!-- -->

    <!-- Provides a nicer alternative to `text-decoration: underline` where descenders do not clip the
    underline.

    - Use `text-shadow` to apply 4 values with offsets covering a 4x4 `px` area. This ensures the underline has
    a thick shadow that covers the line where descenders clip it. For best results, use a color that matches
    the `background` and adjust the `px` values for larger fonts.

    - Use `background-image` with `linear-gradient()` and `currentColor` to create a gradient that will act as
    the actual underline.

    - Set `background-position`, `background-repeat` and `background-size` to place the gradient in the


    correct position.

    - Use the `::selection` pseudo-class selector to ensure the text shadow does not interfere with text
    selection.

    - **Note:** This is natively implemented as `text-decoration-skip-ink: auto` but it has less control over
    the underline.

    ```html -->

    <div class="container">

    <p class="pretty-text-underline">Pretty text underline without clipping descenders.</p>


    </div>

    <main class="main">

    <div>

    <h5>1️⃣ 浅色底深色字</h5>

    <p>You-need-to-know-css-tricks</p>

    </div>

    <div>

    <h5>2️⃣ 深色底浅色字</h5>

    <p>You-need-to-know-css-tricks</p>

    </div>

    <div>

    <h5>3️⃣ 空心字:text-shadow</h5>

    <p>You-need-to-know-css-tricks</p>

    </div>

    <div>

    <h5>4️⃣ 空心字-SVG</h5>

    <p>

    <svg width="300px" height="1em">

    <use xlink:href="#css" />

    <text id="css" y="1em">You-need-to-know-css-tricks</text>

    </svg>

    </p>

    </div>

    <div>

    <h5>5️⃣ 外发光文字:text-shadow</h5>

    <p><a>You-need-to-know-css-tricks</a></p>

    </div>

    <div>
    <h5>6️⃣ 模糊文字:text-shadow</h5>

    <p><a>You-need-to-know-css-tricks</a></p>

    </div>

    <div>

    <h5>7️⃣ 模糊文字:filter</h5>

    <p><a>You-need-to-know-css-tricks</a></p>

    </div>

    <div>

    <h5>8️⃣ 文字凸起</h5>

    <p>You-need-to-know-css-tricks</p>

    </div>

    <div>

    <h5>9️⃣ 文字凸起</h5>

    <p>You-need-to-know-css-tricks</p>

    </div>

    <div>

    <h5>⬇️文字渐变</h5>

    <p>You-need-to-know-css-tricks</p>

    </div>

    </main>

    <!-- -->

    <!--

    Displays a hamburger menu which transitions to a cross button on hover.

    - Use a `.hamburger-menu` container `div` which contains the top, bottom, and middle bars.

    - Set the container to `display: flex` with `flex-flow: column wrap`.

    - Add distance between the bars using `justify-content: space-between`.


    - Use `transform: rotate()` to rotate the top and bottom bars by 45 degrees and `opacity: 0` to fade the
    middle bar on hover.

    - Use `transform-origin: left` so that the bars rotate around the left point.

    ```html -->

    <div class="hamburger-menu">

    <div class="bar top"></div>

    <div class="bar middle"></div>

    <div class="bar bottom"></div>

    </div>

    <!-- Creates a card that displays additional content on hover.

    - Use `overflow: hidden` on the card to hide elements that overflow vertically.

    - Use the `:hover` and `:focus-within` pseudo-class selectors to change the card's styling if the element is
    hovered, focused or any of its descendants are focused.

    - Set `transition: 0.3s ease all` to create a transition effect on hover/focus.

    ```html -->

    <div class="card">

    <img src="2.jpg"/>

    <h3>Lorem ipsum</h3>

    <div class="focus-content">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/> <a href="#">Link to source</a>

    </p>

    </div>

    </div>
    <!-- Gives text a gradient color.

    - Use `background` with a `linear-gradient()` value to give the text element a gradient background.

    - Use `webkit-text-fill-color: transparent` to fill the text with a transparent color.

    - Use `webkit-background-clip: text` to clip the background with the text, filling the text with the gradient
    background as the color.

    ```html -->

    <p class="gradient-text">Gradient text</p>

    <!-- Creates an effect where text appears to be "etched" or engraved into the background. -->

    <!-- - Use `text-shadow` to create a white shadow offset `0px` horizontally and `2px` vertically from the
    origin position.

    - The background must be darker than the shadow for the effect to work.

    - The text color should be slightly faded to make it look like it's engraved/carved out of the background.

    ```html -->

    <p class="etched-text">I appear etched into the background.</p>

    <!-- Changes the styling of text selection.

    - Use the `::selection` pseudo-selector to style text within it when selected.

    ```html -->

    <p class="custom-text-selection">Select some of this text.</p>

    <main>
    <p>A paragraph of filler text. La la la de dah de dah de dah de la.</p>

    <p>A paragraph of filler text. La la la de dah de dah de dah de la la la de dah de dah de dah de lala la
    de dah de dah de dah de lala la de dah de dah de dah de lala la de dah de dah de dah de lala la de dah
    de dah de dah de lala la de dah de dah de dah de lala la de dah de dah de dah de la.</p>

    </main>

    <script src="script.js"></script>

    </body>

    </html>

    You might also like