Scribd Logo
Upload

Welcome to Scribd!

  • 22

    Uploaded by

    Navdeep Kaur
    22 views6 pages
    The document contains examples of different CSS techniques including centering elements, creating a checkerboard pattern, drawing circles and paths, adding typographic effects like stripes and animation, creating pie charts, drawing polygons, and more with CSS and SVG. Each example is contained in its own <main> element with a class for targeting styles.

    Original Description:

    re

    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
    The document contains examples of different CSS techniques including centering elements, creating a checkerboard pattern, drawing circles and paths, adding typographic effects like stripes and animation, creating pie charts, drawing polygons, and more with CSS and SVG. Each example is contained in its own <main> element with a class for targeting styles.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    22 views6 pages

    22

    Uploaded by

    Navdeep Kaur
    The document contains examples of different CSS techniques including centering elements, creating a checkerboard pattern, drawing circles and paths, adding typographic effects like stripes and animation, creating pie charts, drawing polygons, and more with CSS and SVG. Each example is contained in its own <main> element with a class for targeting styles.

    Copyright:

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

    <!

    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>

    <main>

    <span>Center me, please!</span>

    </main>

    <!-- centre 2 -->

    <main class="main1">

    <div><span>Center me, please!</span></div>

    </main>

    <!-- checkerbaord -->

    <!--

    - Use `background-color` to set a white background.

    - Use `background-image` with two `linear-gradient()` values. Give each one a different angle to create
    the checkerboard pattern.

    - Use `background-size` to specify the pattern's size.

    - **Note:** The fixed `height` and `width` of the element is for demonstration purposes only. -->

    <div class="checkerboard"></div>

    <!-- circle -->


    <div class="circle"></div>

    <!-- cicle smooth -->

    <main class="main2">

    <div class="path">

    <img class="logo" src="1.jpg" />

    <div class="avatar">

    <span>Evan You</span>

    <img src="2.jpg"/>

    </div>

    <div class="avatar">

    <span>Damian Dulisz</span>

    <img src="2.jpg"/>

    </div>

    <div class="avatar">

    <span>defcc</span>

    <img src="2.jpg"/>

    </div>

    <div class="avatar">

    <span>Edd Yerburgh</span>

    <img src="2.jpg"/>

    </div>

    <div class="avatar">

    <span>Sarah Drasner</span>

    <img src="2.jpg"/>

    </div>

    </div>

    </main>
    <!-- circluat text -->

    <main class="main3">

    <svg viewBox="0 0 100 100">

    <path d="M 0,50 a 50,50 0 1,1 0,1 z" id="circle" />

    <text>

    <textPath xlink:href="#circle">

    You-need-to-know-css-tricks-You-need-to-know-css-tricks-You-

    </textPath>

    </text>

    </svg>

    </main>

    <!-- zebra stripes -->

    <main class="main4">

    <pre>

    <code class="language-js">

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Ipsam fugiat enim aspernatur itaque adipisci suscipit

    nesciunt recusandae quis expedita a aut optio ducimus,

    voluptatibus distinctio numquam maxime atque maiores iusto.

    </code>

    </pre>

    </main>

    <!-- typing -->

    <main class="main5">

    <span>You-need-to-know-css!</span>

    </main>

    <!-- transulent border -->


    <main class="main6">

    <input id="pb" type="checkbox" checked/>

    <label for="pb">padding-box(默认)</label>

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

    </main>

    <!-- ellicpse -->

    <main class="main7">

    <div class="ellipse"></div>

    <div class="ellipse"></div>

    <div class="ellipse"></div>

    <div class="ellipse"></div>

    <div class="ellipse"></div>

    <div class="ellipse"></div>

    </main>

    <!-- frosted glass -->

    <main class="main8">

    <div>

    "O God, I could be bounded in a nutshell and

    count myself a king of infinite space,

    were it not that I have bad dreams."<br>

    <footer>——

    <cite>William Shakespeare</cite>

    </footer>

    </div>

    </main>

    <!-- pie chart -->


    <main class="main9">

    <div class="chart">

    <p>① rotate()</p>

    <div class="pie"></div>

    </div>

    <div class="chart">

    <p>② css 动画</p>

    <div class="pie"></div>

    </div>

    <div class="chart">

    <p>④ 从指定位置开始动画</p>

    <div class="pie"></div>

    </div>

    <div class="chart">

    <p>⑤ SVG 将 dasharray 转化为百分比</p>

    <svg viewBox="0 0 32 32">

    <circle r="16" cx="16" cy="16"></circle>

    </svg>

    </div>

    <div class="chart">

    <p>⑥ SVG 添加多种颜色</p>

    <svg viewBox="0 0 32 32">

    <circle r="16" cx="16" cy="16"></circle>

    <circle r="16" cx="16" cy="16"></circle>

    <circle r="16" cx="16" cy="16"></circle>

    </svg>

    </div>

    </main>
    <!-- polygon -->

    <main class="main10">

    <div class="item"><div class="trapezoid"></div></div>

    <div class="item"><div class="star-5-points"></div></div>

    <div class="item"><div class="ribbon"></div></div>

    <div class="item"><div class="diamond"></div></div>

    <div class="item"><div class="heart"></div></div>

    <div class="item"><div class="army-chevron"></div></div>

    </main>

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

    </body>

    </html>

    You might also like