Created
January 7, 2024 02:34
-
-
Save LintangWisesa/0d1e7e8720f1f3f7af301e9c06b34a00 to your computer and use it in GitHub Desktop.
CSS.gg Tutorial
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CSS.gg Tutorial</title> | |
| <!-- CDN CSS.gg --> | |
| <link href="https://css.gg/css" rel="stylesheet" /> | |
| <!-- local CSS.gg --> | |
| <link type="text/css" rel="stylesheet" href="css.gg/icons/icons.css"/> | |
| </head> | |
| <body> | |
| <h1>CSS.gg Tutorial</h1> | |
| <!-- webfont --> | |
| <h3>1. Webfont</h3> | |
| <i class="gg-adidas"></i> | |
| <i class="gg-adidas" style="transform: scale(var(--ggs,0.5));"></i> | |
| <i class="gg-adidas" style="transform: scale(var(--ggs,2));"></i> | |
| <i class="gg-adidas" style="color: red;"></i> | |
| <i class="gg-adidas"style="color: #ffff00;"></i> | |
| <i class="gg-adidas"style="color: rgb(0,255,0)"></i> | |
| <!-- SVG Images --> | |
| <h3>2. SVG Images</h3> | |
| <img src="img/adidas.svg"/> | |
| <img height="50px" width="50px" src="img/adidas.svg"/> | |
| <img src="img/adidas.svg" | |
| style="filter: invert(39%) sepia(99%) saturate(1224%) hue-rotate(164deg) brightness(98%) contrast(101%);" | |
| /> | |
| <img src="css.gg/icons/svg/play-button.svg"/> | |
| <!-- SVG Code --> | |
| <h3>3. SVG Code</h3> | |
| <svg | |
| width="24" | |
| height="24" | |
| viewBox="0 0 24 24" | |
| fill="none" | |
| xmlns="http://www.w3.org/2000/svg" | |
| > | |
| <path | |
| d="M1.3294 19L0.731323 17.9641L5.06145 15.4641L7.1029 19H1.3294Z" | |
| fill="currentColor" | |
| /> | |
| <path | |
| d="M15.1858 19H9.4123L5.7935 12.7321L10.1236 10.2321L15.1858 19Z" | |
| fill="currentColor" | |
| /> | |
| <path | |
| d="M23.2687 19H17.4952L10.8557 7.5L15.1858 5L23.2687 19Z" | |
| fill="currentColor" | |
| /> | |
| </svg> | |
| <svg | |
| width="15" | |
| height="15" | |
| viewBox="0 0 24 24" | |
| fill="none" | |
| xmlns="http://www.w3.org/2000/svg" | |
| > | |
| <path | |
| d="M1.3294 19L0.731323 17.9641L5.06145 15.4641L7.1029 19H1.3294Z" | |
| fill="currentColor" | |
| /> | |
| <path | |
| d="M15.1858 19H9.4123L5.7935 12.7321L10.1236 10.2321L15.1858 19Z" | |
| fill="currentColor" | |
| /> | |
| <path | |
| d="M23.2687 19H17.4952L10.8557 7.5L15.1858 5L23.2687 19Z" | |
| fill="currentColor" | |
| /> | |
| </svg> | |
| <svg | |
| width="15" | |
| height="15" | |
| viewBox="0 0 24 24" | |
| fill="red" | |
| xmlns="http://www.w3.org/2000/svg" | |
| > | |
| <path | |
| d="M1.3294 19L0.731323 17.9641L5.06145 15.4641L7.1029 19H1.3294Z" | |
| /> | |
| <path | |
| d="M15.1858 19H9.4123L5.7935 12.7321L10.1236 10.2321L15.1858 19Z" | |
| /> | |
| <path | |
| d="M23.2687 19H17.4952L10.8557 7.5L15.1858 5L23.2687 19Z" | |
| /> | |
| </svg> | |
| <svg | |
| width="15" | |
| height="15" | |
| viewBox="0 0 24 24" | |
| xmlns="http://www.w3.org/2000/svg" | |
| > | |
| <path | |
| d="M1.3294 19L0.731323 17.9641L5.06145 15.4641L7.1029 19H1.3294Z" | |
| fill="red" | |
| /> | |
| <path | |
| d="M15.1858 19H9.4123L5.7935 12.7321L10.1236 10.2321L15.1858 19Z" | |
| fill="yellow" | |
| /> | |
| <path | |
| d="M23.2687 19H17.4952L10.8557 7.5L15.1858 5L23.2687 19Z" | |
| fill="green" | |
| /> | |
| </svg> | |
| <!-- PNG Images --> | |
| <h3>4. PNG Images</h3> | |
| <img src="css.gg/icons/png/black/adidas.png"/> | |
| <img src="css.gg/icons/png/white/adidas.png"/> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment