Repository: Chalarangelo/30-seconds-of-css Branch: master Commit: 445f22efcc96 Files: 99 Total size: 136.5 KB Directory structure: gitextract_4333311h/ ├── .gitattributes ├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── languageFix.css ├── snippet-template.md └── snippets/ ├── aspect-ratio.md ├── border-with-top-triangle.md ├── bouncing-loader.md ├── box-sizing-reset.md ├── broken-image-fallback.md ├── button-border-animation.md ├── button-focus-swing-animation.md ├── button-hover-fill-animation.md ├── button-hover-grow-animation.md ├── button-hover-shrink-animation.md ├── card-image-cutout.md ├── checkerboard-pattern.md ├── circle.md ├── clearfix.md ├── constant-width-to-height-ratio.md ├── counter.md ├── custom-checkbox.md ├── custom-radio.md ├── custom-scrollbar.md ├── custom-text-selection.md ├── disable-selection.md ├── display-empty-links.md ├── display-table-centering.md ├── donut-spinner.md ├── drop-cap.md ├── dynamic-shadow.md ├── etched-text.md ├── evenly-distributed-children.md ├── fit-image-in-container.md ├── flexbox-centering.md ├── floating-list-titles.md ├── fluid-typography.md ├── focus-within.md ├── full-width.md ├── fullscreen.md ├── gradient-text.md ├── grid-centering.md ├── hamburger-button.md ├── height-transition.md ├── hide-empty-elements.md ├── hide-scrollbars.md ├── horizontal-gallery.md ├── horizontal-scroll-snap.md ├── hover-additional-content.md ├── hover-perspective.md ├── hover-shadow-box-animation.md ├── hover-underline-animation.md ├── image-hover-menu.md ├── image-hover-rotate.md ├── image-mosaic.md ├── image-overlay-hover.md ├── image-text-overlay.md ├── input-with-prefix.md ├── isometric-card.md ├── line-clamp.md ├── masonry-layout.md ├── mouse-cursor-gradient-tracking.md ├── navigation-list-item-hover-and-focus-effect.md ├── offscreen.md ├── overflow-scroll-gradient.md ├── polka-dot-pattern.md ├── popout-menu.md ├── pretty-text-underline.md ├── pulse-loader.md ├── reset-all-styles.md ├── responsive-layout-sidebar.md ├── rotating-card.md ├── scroll-progress-bar.md ├── shake-invalid-input.md ├── shape-separator.md ├── shifting-card.md ├── sibling-fade.md ├── squiggle-link-hover-effect.md ├── staggered-animation.md ├── sticky-list-titles.md ├── stripes-pattern.md ├── stylized-quotation-marks.md ├── system-font-stack.md ├── text-backdrop-overlay.md ├── tile-layout-using-inline-block.md ├── toggle-switch.md ├── transform-centering.md ├── triangle.md ├── truncate-text-multiline.md ├── truncate-text.md ├── typewriter-effect.md ├── vertical-gallery.md ├── vertical-scroll-snap.md ├── zebra-striped-list.md ├── zig-zag-pattern.md └── zoomin-zoomout-animation.md ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitattributes ================================================ src/docs/* linguist-documentation scripts/* linguist-documentation gatsby-browser.js linguist-documentation gatsby-config.js linguist-documentation gatsby-node.js linguist-documentation gatsby-ssr.js linguist-documentation .travis/* linguist-documentation config.js linguist-documentation ================================================ FILE: .gitignore ================================================ # Logs logs *.log npm-debug.log* yarn-debug.log* yarn-error.log* # Runtime data pids *.pid *.seed *.pid.lock # Directory for instrumented libs generated by jscoverage/JSCover lib-cov # Coverage directory used by tools like istanbul coverage # nyc test coverage .nyc_output # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) .grunt # Bower dependency directory (https://bower.io/) bower_components # node-waf configuration .lock-wscript # Compiled binary addons (https://nodejs.org/api/addons.html) build/Release # Dependency directories node_modules/ jspm_packages/ # TypeScript v1 declaration files typings/ # Optional npm cache directory .npm # Optional eslint cache .eslintcache # Optional REPL history .node_repl_history # Output of 'npm pack' *.tgz # Yarn yarn-error.log .pnp/ .pnp.js # Yarn Integrity file .yarn-integrity # dotenv environment variables file .env # next.js build output .next # gatsby files .cache/ public # Mac files .DS_Store ================================================ FILE: CODE_OF_CONDUCT.md ================================================ # Contributor Covenant Code of Conduct ## Our Pledge In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. ## Our Standards Examples of behavior that contributes to creating a positive environment include: - Using welcoming and inclusive language - Being respectful of differing viewpoints and experiences - Gracefully accepting constructive criticism - Focusing on what is best for the community - Showing empathy towards other community members Examples of unacceptable behavior by participants include: - The use of sexualized language or imagery and unwelcome sexual attention or advances - Trolling, insulting/derogatory comments, and personal or political attacks - Public or private harassment - Publishing others' private information, such as a physical or electronic address, without explicit permission - Other conduct which could reasonably be considered inappropriate in a professional setting ## Our Responsibilities Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. ## Scope This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. ## Enforcement Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at cc.glows@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. ## Attribution This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] [homepage]: http://contributor-covenant.org [version]: http://contributor-covenant.org/version/1/4/ ================================================ FILE: CONTRIBUTING.md ================================================ # Contribution Guidelines **30 seconds of code** is powered by the community, so feel free to contribute in any way you can to help us! ## How you can help - Submit pull requests with new snippets (see guidelines below) or snippet updates (tags, descriptions, explanations, typos, examples, code improvements). - Open issues for things you want to see added, modified, discuss ideas or help out with existing issues. ## Ground rules Breaking any of these rules will result in your pull request being closed. Please follow these guidelines above all else: - **Always be polite and respectful to others** and try to follow the advice of the moderators/collaborators/owners. - **Only modify snippet files**, never modify the generated files in the `snippet_data` directory. - **Use the snippet template** to create new snippets, ensure they have the correct name and are in the correct location. - **Follow snippet format exactly**, otherwise your snippets will not be recognized correctly by the tools responsible for publishing them on the website. This includes such things as spacing and empty lines - if you accidentally make a mistake, consult the repository's [snippet template](snippet-template.md). - **Snippets should solve real-world problems**, no matter how simple and should be abstract enough to be applied to different scenarios. ## Snippet creation In order to create a new snippet, you should follow the steps below: - Create a copy of the [snippet template](snippet-template.md) in the `snippets` directory. - Change the name of the newly created file to the name of your snippet. - Edit the file, adding your snippet based on the guidelines. ## Snippet guidelines - Snippet must follow [these general writing guidelines](https://github.com/30-seconds/brand-and-design/blob/master/writing-guidelines.md). - Snippets must have all their frontmatter sections (title, tags etc.) filled. - Snippet titles must correspond to the filename and follow the language and repository's naming conventions. - Snippet tags must be comma-separated, contain a primary tag as seen on the website as their first tag. - Snippets must have their `firstSeen` dates formatted using [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601). - Snippet descriptions must be short and to the point. Explain *what* the snippet does and detail *how* the snippet works and the language features used in it. Snippet description should be written as lists of points (unordered for a few points, ordered otherwise), describing the implemented functionality. - Snippet code and examples must be enclosed in appropriate, language-tagged blocks as shown in the snippet template, be short and use modern techniques and features. Also make sure to test your code before submitting. - If your snippet contains arguments with default parameters, explain what happens if they are omitted when calling the function and what the default case is. Specify default parameters for arguments only if necessary. - If your snippet uses recursion, use the `recursion` tag and explain the base cases. - Try to strike a balance between readability, brevity, and performance. - Always use soft tabs (2 spaces), never hard tabs. - Leave a single space after a comma (`,`) character (both in the description and code). - Define multiple variables on the same line, if possible. Use meaningful names (e.g. `letter` instead of `lt`) and follow existing conventions as seen in other snippets. Do not use trailing or leading underscores in variable names. ================================================ FILE: LICENSE ================================================ Attribution 4.0 International ======================================================================= Creative Commons Corporation ("Creative Commons") is not a law firm and does not provide legal services or legal advice. Distribution of Creative Commons public licenses does not create a lawyer-client or other relationship. Creative Commons makes its licenses and related information available on an "as-is" basis. Creative Commons gives no warranties regarding its licenses, any material licensed under their terms and conditions, or any related information. Creative Commons disclaims all liability for damages resulting from their use to the fullest extent possible. Using Creative Commons Public Licenses Creative Commons public licenses provide a standard set of terms and conditions that creators and other rights holders may use to share original works of authorship and other material subject to copyright and certain other rights specified in the public license below. The following considerations are for informational purposes only, are not exhaustive, and do not form part of our licenses. Considerations for licensors: Our public licenses are intended for use by those authorized to give the public permission to use material in ways otherwise restricted by copyright and certain other rights. Our licenses are irrevocable. Licensors should read and understand the terms and conditions of the license they choose before applying it. Licensors should also secure all rights necessary before applying our licenses so that the public can reuse the material as expected. Licensors should clearly mark any material not subject to the license. This includes other CC- licensed material, or material used under an exception or limitation to copyright. More considerations for licensors: wiki.creativecommons.org/Considerations_for_licensors Considerations for the public: By using one of our public licenses, a licensor grants the public permission to use the licensed material under specified terms and conditions. If the licensor's permission is not necessary for any reason--for example, because of any applicable exception or limitation to copyright--then that use is not regulated by the license. Our licenses grant only permissions under copyright and certain other rights that a licensor has authority to grant. Use of the licensed material may still be restricted for other reasons, including because others have copyright or other rights in the material. A licensor may make special requests, such as asking that all changes be marked or described. Although not required by our licenses, you are encouraged to respect those requests where reasonable. More considerations for the public: wiki.creativecommons.org/Considerations_for_licensees ======================================================================= Creative Commons Attribution 4.0 International Public License By exercising the Licensed Rights (defined below), You accept and agree to be bound by the terms and conditions of this Creative Commons Attribution 4.0 International Public License ("Public License"). To the extent this Public License may be interpreted as a contract, You are granted the Licensed Rights in consideration of Your acceptance of these terms and conditions, and the Licensor grants You such rights in consideration of benefits the Licensor receives from making the Licensed Material available under these terms and conditions. Section 1 -- Definitions. a. Adapted Material means material subject to Copyright and Similar Rights that is derived from or based upon the Licensed Material and in which the Licensed Material is translated, altered, arranged, transformed, or otherwise modified in a manner requiring permission under the Copyright and Similar Rights held by the Licensor. For purposes of this Public License, where the Licensed Material is a musical work, performance, or sound recording, Adapted Material is always produced where the Licensed Material is synched in timed relation with a moving image. b. Adapter's License means the license You apply to Your Copyright and Similar Rights in Your contributions to Adapted Material in accordance with the terms and conditions of this Public License. c. Copyright and Similar Rights means copyright and/or similar rights closely related to copyright including, without limitation, performance, broadcast, sound recording, and Sui Generis Database Rights, without regard to how the rights are labeled or categorized. For purposes of this Public License, the rights specified in Section 2(b)(1)-(2) are not Copyright and Similar Rights. d. Effective Technological Measures means those measures that, in the absence of proper authority, may not be circumvented under laws fulfilling obligations under Article 11 of the WIPO Copyright Treaty adopted on December 20, 1996, and/or similar international agreements. e. Exceptions and Limitations means fair use, fair dealing, and/or any other exception or limitation to Copyright and Similar Rights that applies to Your use of the Licensed Material. f. Licensed Material means the artistic or literary work, database, or other material to which the Licensor applied this Public License. g. Licensed Rights means the rights granted to You subject to the terms and conditions of this Public License, which are limited to all Copyright and Similar Rights that apply to Your use of the Licensed Material and that the Licensor has authority to license. h. Licensor means the individual(s) or entity(ies) granting rights under this Public License. i. Share means to provide material to the public by any means or process that requires permission under the Licensed Rights, such as reproduction, public display, public performance, distribution, dissemination, communication, or importation, and to make material available to the public including in ways that members of the public may access the material from a place and at a time individually chosen by them. j. Sui Generis Database Rights means rights other than copyright resulting from Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, as amended and/or succeeded, as well as other essentially equivalent rights anywhere in the world. k. You means the individual or entity exercising the Licensed Rights under this Public License. Your has a corresponding meaning. Section 2 -- Scope. a. License grant. 1. Subject to the terms and conditions of this Public License, the Licensor hereby grants You a worldwide, royalty-free, non-sublicensable, non-exclusive, irrevocable license to exercise the Licensed Rights in the Licensed Material to: a. reproduce and Share the Licensed Material, in whole or in part; and b. produce, reproduce, and Share Adapted Material. 2. Exceptions and Limitations. For the avoidance of doubt, where Exceptions and Limitations apply to Your use, this Public License does not apply, and You do not need to comply with its terms and conditions. 3. Term. The term of this Public License is specified in Section 6(a). 4. Media and formats; technical modifications allowed. The Licensor authorizes You to exercise the Licensed Rights in all media and formats whether now known or hereafter created, and to make technical modifications necessary to do so. The Licensor waives and/or agrees not to assert any right or authority to forbid You from making technical modifications necessary to exercise the Licensed Rights, including technical modifications necessary to circumvent Effective Technological Measures. For purposes of this Public License, simply making modifications authorized by this Section 2(a) (4) never produces Adapted Material. 5. Downstream recipients. a. Offer from the Licensor -- Licensed Material. Every recipient of the Licensed Material automatically receives an offer from the Licensor to exercise the Licensed Rights under the terms and conditions of this Public License. b. No downstream restrictions. You may not offer or impose any additional or different terms or conditions on, or apply any Effective Technological Measures to, the Licensed Material if doing so restricts exercise of the Licensed Rights by any recipient of the Licensed Material. 6. No endorsement. Nothing in this Public License constitutes or may be construed as permission to assert or imply that You are, or that Your use of the Licensed Material is, connected with, or sponsored, endorsed, or granted official status by, the Licensor or others designated to receive attribution as provided in Section 3(a)(1)(A)(i). b. Other rights. 1. Moral rights, such as the right of integrity, are not licensed under this Public License, nor are publicity, privacy, and/or other similar personality rights; however, to the extent possible, the Licensor waives and/or agrees not to assert any such rights held by the Licensor to the limited extent necessary to allow You to exercise the Licensed Rights, but not otherwise. 2. Patent and trademark rights are not licensed under this Public License. 3. To the extent possible, the Licensor waives any right to collect royalties from You for the exercise of the Licensed Rights, whether directly or through a collecting society under any voluntary or waivable statutory or compulsory licensing scheme. In all other cases the Licensor expressly reserves any right to collect such royalties. Section 3 -- License Conditions. Your exercise of the Licensed Rights is expressly made subject to the following conditions. a. Attribution. 1. If You Share the Licensed Material (including in modified form), You must: a. retain the following if it is supplied by the Licensor with the Licensed Material: i. identification of the creator(s) of the Licensed Material and any others designated to receive attribution, in any reasonable manner requested by the Licensor (including by pseudonym if designated); ii. a copyright notice; iii. a notice that refers to this Public License; iv. a notice that refers to the disclaimer of warranties; v. a URI or hyperlink to the Licensed Material to the extent reasonably practicable; b. indicate if You modified the Licensed Material and retain an indication of any previous modifications; and c. indicate the Licensed Material is licensed under this Public License, and include the text of, or the URI or hyperlink to, this Public License. 2. You may satisfy the conditions in Section 3(a)(1) in any reasonable manner based on the medium, means, and context in which You Share the Licensed Material. For example, it may be reasonable to satisfy the conditions by providing a URI or hyperlink to a resource that includes the required information. 3. If requested by the Licensor, You must remove any of the information required by Section 3(a)(1)(A) to the extent reasonably practicable. 4. If You Share Adapted Material You produce, the Adapter's License You apply must not prevent recipients of the Adapted Material from complying with this Public License. Section 4 -- Sui Generis Database Rights. Where the Licensed Rights include Sui Generis Database Rights that apply to Your use of the Licensed Material: a. for the avoidance of doubt, Section 2(a)(1) grants You the right to extract, reuse, reproduce, and Share all or a substantial portion of the contents of the database; b. if You include all or a substantial portion of the database contents in a database in which You have Sui Generis Database Rights, then the database in which You have Sui Generis Database Rights (but not its individual contents) is Adapted Material; and c. You must comply with the conditions in Section 3(a) if You Share all or a substantial portion of the contents of the database. For the avoidance of doubt, this Section 4 supplements and does not replace Your obligations under this Public License where the Licensed Rights include other Copyright and Similar Rights. Section 5 -- Disclaimer of Warranties and Limitation of Liability. a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS, IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION, WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS, ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU. b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION, NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT, INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES, COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR IN PART, THIS LIMITATION MAY NOT APPLY TO YOU. c. The disclaimer of warranties and limitation of liability provided above shall be interpreted in a manner that, to the extent possible, most closely approximates an absolute disclaimer and waiver of all liability. Section 6 -- Term and Termination. a. This Public License applies for the term of the Copyright and Similar Rights licensed here. However, if You fail to comply with this Public License, then Your rights under this Public License terminate automatically. b. Where Your right to use the Licensed Material has terminated under Section 6(a), it reinstates: 1. automatically as of the date the violation is cured, provided it is cured within 30 days of Your discovery of the violation; or 2. upon express reinstatement by the Licensor. For the avoidance of doubt, this Section 6(b) does not affect any right the Licensor may have to seek remedies for Your violations of this Public License. c. For the avoidance of doubt, the Licensor may also offer the Licensed Material under separate terms or conditions or stop distributing the Licensed Material at any time; however, doing so will not terminate this Public License. d. Sections 1, 5, 6, 7, and 8 survive termination of this Public License. Section 7 -- Other Terms and Conditions. a. The Licensor shall not be bound by any additional or different terms or conditions communicated by You unless expressly agreed. b. Any arrangements, understandings, or agreements regarding the Licensed Material not stated herein are separate from and independent of the terms and conditions of this Public License. Section 8 -- Interpretation. a. For the avoidance of doubt, this Public License does not, and shall not be interpreted to, reduce, limit, restrict, or impose conditions on any use of the Licensed Material that could lawfully be made without permission under this Public License. b. To the extent possible, if any provision of this Public License is deemed unenforceable, it shall be automatically reformed to the minimum extent necessary to make it enforceable. If the provision cannot be reformed, it shall be severed from this Public License without affecting the enforceability of the remaining terms and conditions. c. No term or condition of this Public License will be waived and no failure to comply consented to unless expressly agreed to by the Licensor. d. Nothing in this Public License constitutes or may be interpreted as a limitation upon, or waiver of, any privileges and immunities that apply to the Licensor or You, including from the legal processes of any jurisdiction or authority. ======================================================================= Creative Commons is not a party to its public licenses. Notwithstanding, Creative Commons may elect to apply one of its public licenses to material it publishes and in those instances will be considered the “Licensor.” The text of the Creative Commons public licenses is dedicated to the public domain under the CC0 Public Domain Dedication. Except for the limited purpose of indicating that material is shared under a Creative Commons public license or as otherwise permitted by the Creative Commons policies published at creativecommons.org/policies, Creative Commons does not authorize the use of the trademark "Creative Commons" or any other trademark or logo of Creative Commons without its prior written consent including, without limitation, in connection with any unauthorized modifications to any of its public licenses or any other arrangements, understandings, or agreements concerning use of licensed material. For the avoidance of doubt, this paragraph does not form part of the public licenses. Creative Commons may be contacted at creativecommons.org. ================================================ FILE: README.md ================================================ > **IMPORTANT NOTICE:** > > As of May, 2023, all 30-seconds content repositories have been merged into [30-seconds-of-code](https://github.com/30-seconds/30-seconds-of-code). > > Please watch, star and follow relevant activity there. [![Logo](/logo.png)](https://30secondsofcode.org/css/p/1) # 30 seconds of code > Short CSS code snippets for all your development needs * Visit [our website](https://30secondsofcode.org) to view our snippet collection. * Use the [Search page](https://30secondsofcode.org/search) to find snippets that suit your needs. You can search by name, tag, language or using a snippet's description. Just start typing a term and see what comes up. * Browse the [CSS Snippet collection](https://30secondsofcode.org/css/p/1) to see all the snippets in this project or click individual tags at the top of the same page to narrow down your search to a specific tag. * Click on each snippet card to view the whole snippet, including code, explanation and examples. * You can use the button at the bottom of a snippet card to view the snippet in Codepen. * If you like the project, give it a star. It means a lot to the people maintaining it. ## Want to contribute? * If you want to help us improve, take a minute to read the [Contribution Guidelines](/CONTRIBUTING.md) first. * Use the [Snippet Template](/snippet-template.md) to add new snippets to the collection. * If you find a problem with a specific snippet, please [open an issue](https://github.com/30-seconds/30-seconds-of-css/issues/new). * If you find a problem with the website, please [report it in the web repository](https://github.com/30-seconds/30-seconds-web/issues/new). ## Credits * This repository is maintained by the [30 seconds of code organization on GitHub](https://github.com/30-seconds). * All snippets are licensed under the CC-BY-4.0 License, unless explicitly stated otherwise. * Logos, names and trademarks are not to be used without the explicit consent of the owners of the 30 seconds of code GitHub organization. * Our website is powered by [Netlify](https://www.netlify.com/), [Next.js](https://nextjs.org/) & [GitHub](https://github.com/). ================================================ FILE: languageFix.css ================================================ /* This file is here only to tag the repository language. Do not delete, please! */ html { margin: 0; } ================================================ FILE: snippet-template.md ================================================ --- title: Snippet Name type: snippet tags: [other] cover: image dateModified: 2021-06-13T05:00:00-04:00 --- Explain briefly what the snippet does. - Explain briefly how the snippet works. - Use bullet points for your snippet's explanation. - Try to explain everything briefly but clearly. ```html
``` ```css .my-snippet { background-color: #fff; border: 1px solid #000; border-radius: 4px; } ``` ```js console.log( "This is optional, if your snippet doesn't require JavaScript, be sure to delete this block!" ) ``` ================================================ FILE: snippets/aspect-ratio.md ================================================ --- title: Aspect ratio type: snippet tags: [layout] author: chalarangelo cover: digital-nomad-12 dateModified: 2022-08-14T05:00:00-04:00 --- Creates a responsive container with a specified aspect ratio. - Use a CSS custom property, `--aspect-ratio` to define the desired aspect ratio. - Set the container element to `position: relative` and `height: 0`, calculating its height using the `calc()` function and the `--aspect-ratio` custom property. - Set the direct child of the container element to `position: absolute` and filling it parent, while giving it `object-fit: cover` to maintain the aspect ratio. ```html
``` ```css .container { --aspect-ratio: 16/9; position: relative; height: 0; padding-bottom: calc(100% / (var(--aspect-ratio))); } .container > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } ``` ================================================ FILE: snippets/border-with-top-triangle.md ================================================ --- title: Border with top triangle type: snippet tags: [visual] cover: greek-coffee dateModified: 2021-01-07T23:52:15+02:00 --- Creates a content container with a triangle at the top. - Use the `::before` and `::after` pseudo-elements to create two triangles. - The colors of the two triangles should be the same as the container's `border-color` and the container's `background-color` respectively. - The `border-width` of the one triangle (`::before`) should be `1px` wider than the other one (`::after`), in order to act as the border. - The smaller triangle (`::after`) should be `1px` to the right of the larger triangle (`::before`) to allow for its left border to be shown. ```html
Border with top triangle
``` ```css .container { position: relative; background: #ffffff; padding: 15px; border: 1px solid #dddddd; margin-top: 20px; } .container::before, .container::after { content: ''; position: absolute; bottom: 100%; left: 19px; border: 11px solid transparent; border-bottom-color: #dddddd; } .container::after { left: 20px; border: 10px solid transparent; border-bottom-color: #ffffff; } ``` ================================================ FILE: snippets/bouncing-loader.md ================================================ --- title: Bouncing loader type: snippet tags: [animation] cover: digital-nomad-12 dateModified: 2021-10-11T18:44:51+03:00 --- Creates a bouncing loader animation. - Use `@keyframes` to define a bouncing animation, using the `opacity` and `transform` properties. Use a single axis translation on `transform: translate3d()` to achieve better animation performance. - Create a parent container, `.bouncing-loader`, for the bouncing circles. Use `display: flex` and `justify-content: center` to position them in the center. - Give the three bouncing circle `
` elements the same `width` and `height` and `border-radius: 50%` to make them circular. - Apply the `bouncing-loader` animation to each of the three bouncing circles. - Use a different `animation-delay` for each circle and `animation-direction: alternate` to create the appropriate effect. ```html
``` ```css @keyframes bouncing-loader { to { opacity: 0.1; transform: translate3d(0, -16px, 0); } } .bouncing-loader { display: flex; justify-content: center; } .bouncing-loader > div { width: 16px; height: 16px; margin: 3rem 0.2rem; background: #8385aa; border-radius: 50%; animation: bouncing-loader 0.6s infinite alternate; } .bouncing-loader > div:nth-child(2) { animation-delay: 0.2s; } .bouncing-loader > div:nth-child(3) { animation-delay: 0.4s; } ``` ================================================ FILE: snippets/box-sizing-reset.md ================================================ --- title: Box-sizing reset type: snippet tags: [layout] cover: interior dateModified: 2020-12-30T15:37:37+02:00 --- Resets the box-model so that `width` and `height` are not affected by `border` or `padding`. - Use `box-sizing: border-box` to include the width and height of `padding` and `border` when calculating the element's `width` and `height`. - Use `box-sizing: inherit` to pass down the `box-sizing` property from parent to child elements. ```html
border-box
content-box
``` ```css div { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } .box { display: inline-block; width: 120px; height: 120px; padding: 8px; margin: 8px; background: #F24333; color: white; border: 1px solid #BA1B1D; border-radius: 4px; } .content-box { box-sizing: content-box; } ``` ================================================ FILE: snippets/broken-image-fallback.md ================================================ --- title: Fallback for images that fail to load type: snippet shortTitle: Broken image fallback tags: [visual] author: chalarangelo cover: building-facade dateModified: 2022-11-04T05:00:00-04:00 --- Displays an error message when an image fails to load. - Apply styles to the `img` element as if it was a text container. - Use the `::before` and `::after` pseudo-elements to display an error message and the image URL. These elements will only be displayed if the image fails to load. ```html ``` ```css img { display: block; font-family: sans-serif; font-weight: 300; height: auto; line-height: 2; position: relative; text-align: center; width: 100%; } img::before { content: "Sorry, this image is unavailable."; display: block; margin-bottom: 8px; } img::after { content: "(url: " attr(src) ")"; display: block; font-size: 12px; } ``` ================================================ FILE: snippets/button-border-animation.md ================================================ --- title: Button border animation type: snippet tags: [animation] cover: highlands dateModified: 2021-05-24T15:28:52+03:00 --- Creates a border animation on hover. - Use the `::before` and `::after` pseudo-elements to create two boxes `24px` wide opposite each other above and below the box. - Use the `:hover` pseudo-class to extend the `width` of those elements to `100%` on hover and animate the change using `transition`. ```html ``` ```css .animated-border-button { background-color: #263059; border: none; color: #ffffff; outline: none; padding: 12px 40px 10px; position: relative; } .animated-border-button::before, .animated-border-button::after { border: 0 solid transparent; transition: all 0.3s; content: ''; height: 0; position: absolute; width: 24px; } .animated-border-button::before { border-top: 2px solid #263059; right: 0; top: -4px; } .animated-border-button::after { border-bottom: 2px solid #263059; bottom: -4px; left: 0; } .animated-border-button:hover::before, .animated-border-button:hover::after { width: 100%; } ``` ================================================ FILE: snippets/button-focus-swing-animation.md ================================================ --- title: Button swing animation type: snippet tags: [animation] author: chalarangelo cover: painters-desk dateModified: 2021-05-24T15:28:52+03:00 --- Creates a swing animation on focus. - Use an appropriate `transition` to animate changes to the element. - Use the `:focus` pseudo-class to apply an `animation` that uses `transform` to make the element swing. - Use `animation-iteration-count` to only play the animation once. ```html ``` ```css .button-swing { color: #65b5f6; background-color: transparent; border: 1px solid #65b5f6; border-radius: 4px; padding: 0 16px; cursor: pointer; transition: all 0.2s ease-in-out; } .button-swing:focus { animation: swing 1s ease; animation-iteration-count: 1; } @keyframes swing { 15% { transform: translateX(5px); } 30% { transform: translateX(-5px); } 50% { transform: translateX(3px); } 65% { transform: translateX(-3px); } 80% { transform: translateX(2px); } 100% { transform: translateX(0); } } ``` ================================================ FILE: snippets/button-hover-fill-animation.md ================================================ --- title: Button fill animation type: snippet tags: [animation] cover: beach-pineapple dateModified: 2021-04-02T21:34:43+03:00 --- Creates a fill animation on hover. - Set a `color` and `background` and use an appropriate `transition` to animate changes to the element. - Use the `:hover` pseudo-class to change the `background` and `color` of the element when the user hovers over it. ```html ``` ```css .animated-fill-button { padding: 20px; background: #fff; color: #000; border: 1px solid #000; cursor: pointer; transition: 0.3s all ease-in-out; } .animated-fill-button:hover { background: #000; color: #fff; } ``` ================================================ FILE: snippets/button-hover-grow-animation.md ================================================ --- title: Button grow animation type: snippet tags: [animation] author: chalarangelo cover: white-laptop dateModified: 2021-05-24T15:28:52+03:00 --- Creates a grow animation on hover. - Use an appropriate `transition` to animate changes to the element. - Use the `:hover` pseudo-class to change the `transform` to `scale(1.1)`, growing the element when the user hovers over it. ```html ``` ```css .button-grow { color: #65b5f6; background-color: transparent; border: 1px solid #65b5f6; border-radius: 4px; padding: 0 16px; cursor: pointer; transition: all 0.3s ease-in-out; } .button-grow:hover { transform: scale(1.1); } ``` ================================================ FILE: snippets/button-hover-shrink-animation.md ================================================ --- title: Button shrink animation type: snippet tags: [animation] author: chalarangelo cover: clay-pot-horizon dateModified: 2021-05-24T15:28:52+03:00 --- Creates a shrink animation on hover. - Use an appropriate `transition` to animate changes to the element. - Use the `:hover` pseudo-class to change the `transform` to `scale(0.8)`, shrinking the element when the user hovers over it. ```html ``` ```css .button-shrink { color: #65b5f6; background-color: transparent; border: 1px solid #65b5f6; border-radius: 4px; padding: 0 16px; cursor: pointer; transition: all 0.3s ease-in-out; } .button-shrink:hover { transform: scale(0.8); } ``` ================================================ FILE: snippets/card-image-cutout.md ================================================ --- title: Card with image cutout type: snippet tags: [visual] author: chalarangelo cover: radio-monstera dateModified: 2022-12-11T05:00:00-04:00 --- Creates a card with an image cutout. - Use `background` to add a colored background to a `.container` element. - Create a `.card` containing a `figure` with the appropriate image for the cutout and any other content you want. - Use the `::before` pseudo-element to add a `border` around the `figure` element, matching the `.container` element's `background` and creating the illusion of a cutout in the `.card`. ```html

Lorem ipsum dolor sit amet consectetur adipisicing elit.

``` ```css .container { display: flex; padding: 96px 24px 48px; justify-content: center; align-items: center; background: #f3f1fe; } .card { width: 350px; display: flex; flex-direction: column; align-items: center; background: #fff; border-radius: 10px; margin: 8px; box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.1); } .card figure { width: 120px; height: 120px; border-radius: 50%; margin-top: -60px; position: relative; } .card figure::before { content: ""; border-radius: inherit; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); border: 1rem solid #f3f1fe; box-shadow: 0 1px rgba(0, 0, 0, 0.1); } .card figure img { border-radius: inherit; width: 100%; height: 100%; object-fit: cover; } .card .content { text-align: center; margin: 2rem; line-height: 1.5; color: #101010; } ``` ================================================ FILE: snippets/checkerboard-pattern.md ================================================ --- title: Checkerboard background pattern type: snippet tags: [visual] cover: digital-nomad-2 dateModified: 2021-10-13T19:29:39+02:00 --- Creates a checkerboard background pattern. - 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. ```html
``` ```css .checkerboard { width: 240px; height: 240px; background-color: #fff; background-image: linear-gradient( 45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000 ), linear-gradient( -45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000 ); background-size: 60px 60px; background-repeat: repeat; } ``` ================================================ FILE: snippets/circle.md ================================================ --- title: Circle type: snippet tags: [visual] cover: oven-paddle dateModified: 2020-12-30T15:37:37+02:00 --- Creates a circular shape with pure CSS. - Use `border-radius: 50%` to curve the borders of the element to create a circle. - Since a circle has the same radius at any given point, the `width` and `height` must be the same. Differing values will create an ellipse. ```html
``` ```css .circle { border-radius: 50%; width: 32px; height: 32px; background: #9C27B0; } ``` ================================================ FILE: snippets/clearfix.md ================================================ --- title: Clearfix type: snippet tags: [layout] cover: memories-of-pineapple-3 dateModified: 2020-12-30T15:37:37+02:00 --- Ensures that an element self-clears its children. - Use the `::after` pseudo-element and apply `content: ''` to allow it to affect layout. - Use `clear: both` to make the element clear past both left and right floats. - For this technique to work properly, make sure there are no non-floating children in the container and that there are no tall floats before the clearfixed container but in the same formatting context (e.g. floated columns). - **Note:** This is only useful if you are using `float` to build layouts. Consider using a more modern approach, such as the flexbox or grid layout. ```html
float a
float b
float c
``` ```css .clearfix::after { content: ''; display: block; clear: both; } .floated { float: left; padding: 4px; } ``` ================================================ FILE: snippets/constant-width-to-height-ratio.md ================================================ --- title: Constant width to height ratio type: snippet tags: [layout] cover: clutter dateModified: 2020-12-30T15:37:37+02:00 --- Ensures that an element with variable `width` will retain a proportionate `height` value. - Apply `padding-top` on the `::before` pseudo-element, making the `height` of the element equal to a percentage of its `width`. - The proportion of `height` to `width` can be altered as necessary. For example a `padding-top` of `100%` will create a responsive square (1:1 ratio). ```html
``` ```css .constant-width-to-height-ratio { background: #9C27B0; width: 50%; } .constant-width-to-height-ratio::before { content: ''; padding-top: 100%; float: left; } .constant-width-to-height-ratio::after { content: ''; display: block; clear: both; } ``` ================================================ FILE: snippets/counter.md ================================================ --- title: Counter type: snippet tags: [visual] cover: laptop-plants dateModified: 2020-12-30T15:37:37+02:00 --- Creates a custom list counter that accounts for nested list elements. - Use `counter-reset` to initialize a variable counter (default `0`), the name of which is the value of the attribute (i.e. `counter`). - Use `counter-increment` on the variable counter for each countable element (i.e. each `
  • `). - Use `counters()` to display the value of each variable counter as part of the `content` of the `::before` pseudo-element for each countable element (i.e. each `
  • `). The second value passed to it (`'.'`) acts as the delimiter for nested counters. ```html ``` ```css ul { counter-reset: counter; list-style: none; } li::before { counter-increment: counter; content: counters(counter, '.') ' '; } ``` ================================================ FILE: snippets/custom-checkbox.md ================================================ --- title: Custom checkbox type: snippet tags: [visual,animation] author: chalarangelo cover: interior-8 dateModified: 2021-10-11T18:44:51+03:00 --- Creates a styled checkbox with animation on state change. - Use an `` element to create the check `` and insert it via the `` element to create a reusable SVG icon. - Create a `.checkbox-container` and use flexbox to create the appropriate layout for the checkboxes. - Hide the `
    ``` ```css .checkbox-symbol { position: absolute; width: 0; height: 0; pointer-events: none; user-select: none; } .checkbox-container { box-sizing: border-box; background: #ffffff; color: #222; height: 64px; display: flex; justify-content: center; align-items: center; flex-flow: row wrap; } .checkbox-container * { box-sizing: border-box; } .checkbox-input { position: absolute; visibility: hidden; } .checkbox { user-select: none; cursor: pointer; padding: 6px 8px; border-radius: 6px; overflow: hidden; transition: all 0.3s ease; display: flex; } .checkbox:not(:last-child) { margin-right: 6px; } .checkbox:hover { background: rgba(0, 119, 255, 0.06); } .checkbox span { vertical-align: middle; transform: translate3d(0, 0, 0); } .checkbox span:first-child { position: relative; flex: 0 0 18px; width: 18px; height: 18px; border-radius: 4px; transform: scale(1); border: 1px solid #cccfdb; transition: all 0.3s ease; } .checkbox span:first-child svg { position: absolute; top: 3px; left: 2px; fill: none; stroke: #fff; stroke-dasharray: 16px; stroke-dashoffset: 16px; transition: all 0.3s ease; transform: translate3d(0, 0, 0); } .checkbox span:last-child { padding-left: 8px; line-height: 18px; } .checkbox:hover span:first-child { border-color: #0077ff; } .checkbox-input:checked + .checkbox span:first-child { background: #0077ff; border-color: #0077ff; animation: zoom-in-out 0.3s ease; } .checkbox-input:checked + .checkbox span:first-child svg { stroke-dashoffset: 0; } @keyframes zoom-in-out { 50% { transform: scale(0.9); } } ``` ================================================ FILE: snippets/custom-radio.md ================================================ --- title: Custom radio button type: snippet tags: [visual,animation] author: chalarangelo cover: messy-computer dateModified: 2022-11-16T05:00:00-04:00 --- Creates a styled radio button with animation on state change. - Create a `.radio-container` and use flexbox to create the appropriate layout for the radio buttons. - Reset the styles on the `` and use it to create the outline and background of the radio button. - Use the `::before` element to create the inner circle of the radio button. - Use `transform: scale(1)` and a CSS transition to create an animation effect on state change. ```html
    ``` ```css .radio-container { box-sizing: border-box; background: #ffffff; color: #222; height: 64px; display: flex; justify-content: center; align-items: center; flex-flow: row wrap; } .radio-container * { box-sizing: border-box; } .radio-input { appearance: none; background-color: #ffffff; width: 16px; height: 16px; border: 1px solid #cccfdb; margin: 0; border-radius: 50%; display: grid; align-items: center; justify-content: center; transition: all 0.3s ease; } .radio-input::before { content: ""; width: 6px; height: 6px; border-radius: 50%; transform: scale(0); transition: 0.3s transform ease-in-out; box-shadow: inset 6px 6px #ffffff; } .radio-input:checked { background: #0077ff; border-color: #0077ff; } .radio-input:checked::before { transform: scale(1); } .radio { cursor: pointer; padding: 6px 8px; } .radio:not(:last-child) { margin-right: 6px; } ``` ================================================ FILE: snippets/custom-scrollbar.md ================================================ --- title: Custom scrollbar type: snippet tags: [visual] cover: sea-view dateModified: 2021-05-16T13:09:15+03:00 --- Customizes the scrollbar style for elements with scrollable overflow. - Use `::-webkit-scrollbar` to style the scrollbar element. - Use `::-webkit-scrollbar-track` to style the scrollbar track (the background of the scrollbar). - Use `::-webkit-scrollbar-thumb` to style the scrollbar thumb (the draggable element). - **Note:** Scrollbar styling doesn't appear to be on any standards track. This technique only works on WebKit-based browsers. ```html

    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Iure id exercitationem nulla qui repellat laborum vitae,
    molestias tempora velit natus. Quas, assumenda nisi.
    Quisquam enim qui iure, consequatur velit sit?

    ``` ```css .custom-scrollbar { height: 70px; overflow-y: scroll; } .custom-scrollbar::-webkit-scrollbar { width: 8px; } .custom-scrollbar::-webkit-scrollbar-track { background: #1E3F20; border-radius: 12px; } .custom-scrollbar::-webkit-scrollbar-thumb { background: #4A7856; border-radius: 12px; } ``` ================================================ FILE: snippets/custom-text-selection.md ================================================ --- title: Custom text selection type: snippet tags: [visual] cover: digital-nomad dateModified: 2020-12-30T15:37:37+02:00 --- Changes the styling of text selection. - Use the `::selection` pseudo-selector to style text within it when selected. ```html

    Select some of this text.

    ``` ```css ::selection { background: aquamarine; color: black; } .custom-text-selection::selection { background: deeppink; color: white; } ``` ================================================ FILE: snippets/disable-selection.md ================================================ --- title: Disable selection type: snippet tags: [interactivity] cover: interior-9 dateModified: 2020-12-30T15:37:37+02:00 --- Makes the content unselectable. - Use `user-select: none` to make the content of the element not selectable. - **Note:** This is not a secure method to prevent users from copying content. ```html

    You can select me.

    You can't select me!

    ``` ```css .unselectable { user-select: none; } ``` ================================================ FILE: snippets/display-empty-links.md ================================================ --- title: Style links with no text type: snippet tags: [visual] author: chalarangelo cover: metro-tunnel dateModified: 2022-11-11T05:00:00-04:00 --- Displays the link URL for links with no text. - Use the `:empty` pseudo-class to select links with no text. - Use the `:not` pseudo-class to exclude links with text. - Use the `content` property and the `attr()` function to display the link URL in the `::before` pseudo-element. ```html ``` ```css a[href^="http"]:empty::before { content: attr(href); } ``` ================================================ FILE: snippets/display-table-centering.md ================================================ --- title: Display table centering type: snippet tags: [layout] cover: malibu dateModified: 2020-12-30T15:37:37+02:00 --- Vertically and horizontally centers a child element within its parent element, using `display: table`. - Use `display: table` to make the `.center` element behave like a `` element. - Set `height` and `width` to `100%` to make the element fill the available space within its parent element. - Use `display: table-cell` on the child element to make it behave like a ``, `

    `, `

      `, etc. ```html
      • Item 01
      • Item 02
      • Item 03
      • Item 04
      • Item 05
      ``` ```css li:nth-child(odd) { background-color: #999; } ``` ================================================ FILE: snippets/zig-zag-pattern.md ================================================ --- title: Zig zag background pattern type: snippet tags: [visual] cover: blue-lake dateModified: 2021-10-13T19:29:39+02:00 --- Creates a zig zag background pattern. - Use `background-color` to set a white background. - Use `background-image` with four `linear-gradient()` values to create the parts of a zig zag pattern. - Use `background-size` to specify the pattern's size. Use `background-position` to place the parts of the pattern in the correct locations. - **Note:** The fixed `height` and `width` of the element is for demonstration purposes only. ```html
      ``` ```css .zig-zag { width: 240px; height: 240px; background-color: #fff; background-image: linear-gradient(135deg, #000 25%, transparent 25%), linear-gradient(225deg, #000 25%, transparent 25%), linear-gradient(315deg, #000 25%, transparent 25%), linear-gradient(45deg, #000 25%, transparent 25%); background-position: -30px 0, -30px 0, 0 0, 0 0; background-size: 60px 60px; background-repeat: repeat; } ``` ================================================ FILE: snippets/zoomin-zoomout-animation.md ================================================ --- title: Zoom in zoom out animation type: snippet tags: [animation] cover: travel-mug-2 dateModified: 2021-10-13T19:29:39+02:00 --- Creates a zoom in zoom out animation. - Use `@keyframes` to define a three-step animation. At the start (`0%`) and end (`100%`), the element is its original size (`scale(1 ,1)`). Halfway through (`50%`) it's scaled up to 1.5 times its original size (`scale(1.5, 1.5)`). - Use `width` and `height` to give the element a specific size. - Use `animation` to set the appropriate values for the element to make it animated. ```html
      ``` ```css .zoom-in-out-box { margin: 24px; width: 50px; height: 50px; background: #f50057; animation: zoom-in-zoom-out 1s ease infinite; } @keyframes zoom-in-zoom-out { 0% { transform: scale(1, 1); } 50% { transform: scale(1.5, 1.5); } 100% { transform: scale(1, 1); } } ```
    ` elements. - Use `text-align: center` and `vertical-align: middle` on the child element to center it horizontally and vertically. - The outer parent (`.container`) must have a fixed `width` and `height`. ```html
    Centered content
    ``` ```css .container { border: 1px solid #9C27B0; height: 250px; width: 250px; } .center { display: table; height: 100%; width: 100%; } .center > span { display: table-cell; text-align: center; vertical-align: middle; } ``` ================================================ FILE: snippets/donut-spinner.md ================================================ --- title: Donut spinner type: snippet tags: [animation] cover: digital-nomad-3 dateModified: 2021-10-13T19:29:39+02:00 --- Creates a donut spinner that can be used to indicate the loading of content. - Use a semi-transparent `border` for the whole element. Exclude one side that will serve as the loading indicator for the donut. - Define and use an appropriate animation, using `transform: rotate()` to rotate the element. ```html
    ``` ```css @keyframes donut-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .donut { display: inline-block; border: 4px solid rgba(0, 0, 0, 0.1); border-left-color: #7983ff; border-radius: 50%; width: 30px; height: 30px; animation: donut-spin 1.2s linear infinite; } ``` ================================================ FILE: snippets/drop-cap.md ================================================ --- title: Drop cap type: snippet tags: [visual] cover: bamboo-lamp dateModified: 2020-12-30T15:37:37+02:00 --- 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

    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.

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

    ``` ```css p:first-child::first-letter { color: #5f79ff; float: left; margin: 0 8px 0 4px; font-size: 3rem; font-weight: bold; line-height: 1; } ``` ================================================ FILE: snippets/dynamic-shadow.md ================================================ --- title: Dynamic shadow type: snippet tags: [visual] cover: couch-laptop dateModified: 2020-12-30T15:37:37+02:00 --- 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
    ``` ```css .dynamic-shadow { position: relative; width: 10rem; height: 10rem; background: linear-gradient(75deg, #6d78ff, #00ffb8); z-index: 1; } .dynamic-shadow::after { content: ''; width: 100%; height: 100%; position: absolute; background: inherit; top: 0.5rem; filter: blur(0.4rem); opacity: 0.7; z-index: -1; } ``` ================================================ FILE: snippets/etched-text.md ================================================ --- title: Etched text type: snippet tags: [visual] cover: memories-of-pineapple-2 dateModified: 2020-12-30T15:37:37+02:00 --- 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

    I appear etched into the background.

    ``` ```css .etched-text { text-shadow: 0 2px white; font-size: 1.5rem; font-weight: bold; color: #b8bec5; } ``` ================================================ FILE: snippets/evenly-distributed-children.md ================================================ --- title: Evenly distributed children type: snippet tags: [layout] cover: little-bird dateModified: 2021-10-13T19:29:39+02:00 --- Evenly distributes child elements within a parent element. - Use `display: flex` to use the flexbox layout. - Use `justify-content: space-between` to evenly distributes child elements horizontally. The first item is positioned at the left edge, while the last item is positioned at the right edge. - Alternatively, use `justify-content: space-around` to distribute the children with space around them, instead of between them. ```html

    Item1

    Item2

    Item3

    ``` ```css .evenly-distributed-children { display: flex; justify-content: space-between; } ``` ================================================ FILE: snippets/fit-image-in-container.md ================================================ --- title: Fit image in container type: snippet tags: [layout,visual] cover: succulent-3 dateModified: 2020-12-30T15:37:37+02:00 --- Fits an positions an image appropriately inside its container while preserving its aspect ratio. - Use `object-fit: contain` to fit the entire image within the container while preserving its aspect ratio. - Use `object-fit: cover` to fill the container with the image while preserving its aspect ratio. - Use `object-position: center` to position the image at the center of the container. ```html ``` ```css .image { background: #34495e; border: 1px solid #34495e; width: 200px; height: 200px; } .image-contain { object-fit: contain; object-position: center; } .image-cover { object-fit: cover; object-position: right top; } ``` ================================================ FILE: snippets/flexbox-centering.md ================================================ --- title: Flexbox centering type: snippet tags: [layout] cover: basket-paper dateModified: 2020-12-30T15:37:37+02:00 --- Horizontally and vertically centers a child element within a parent element using flexbox. - Use `display: flex` to create a flexbox layout. - Use `justify-content: center` to center the child horizontally. - Use `align-items: center` to center the child vertically. ```html
    Centered content.
    ``` ```css .flexbox-centering { display: flex; justify-content: center; align-items: center; height: 100px; } ``` ================================================ FILE: snippets/floating-list-titles.md ================================================ --- title: List with floating section headings type: snippet tags: [visual] author: chalarangelo cover: pop-of-green dateModified: 2021-10-11T18:44:51+03:00 --- Creates a list with floating headings for each section. - Use `overflow-y: auto` to allow the list container to overflow vertically. - Use `display: grid` on the inner container (`
    `) to create a layout with two columns. - Set headings (`
    `) to `grid-column: 1` and content (`
    `) to `grid-column: 2`. - Finally, apply `position: sticky` and `top: 0.5rem` to headings to create a floating effect. ```html
    A
    Algeria
    Angola
    B
    Benin
    Botswana
    Burkina Faso
    Burundi
    C
    Cabo Verde
    Cameroon
    Central African Republic
    Chad
    Comoros
    Congo, Democratic Republic of the
    Congo, Republic of the
    Cote d'Ivoire
    D
    Djibouti
    E
    Egypt
    Equatorial Guinea
    Eritrea
    Eswatini (formerly Swaziland)
    Ethiopia
    ``` ```css .container { display: grid; place-items: center; min-height: 400px; } .floating-stack { background: #455A64; color: #fff; height: 80vh; width: 320px; border-radius: 1rem; overflow-y: auto; } .floating-stack > dl { margin: 0 0 1rem; display: grid; grid-template-columns: 2.5rem 1fr; align-items: center; } .floating-stack dt { position: sticky; top: 0.5rem; left: 0.5rem; font-weight: bold; background: #263238; color: #cfd8dc; height: 2rem; width: 2rem; border-radius: 50%; padding: 0.25rem 1rem; grid-column: 1; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } .floating-stack dd { grid-column: 2; margin: 0; padding: 0.75rem; } .floating-stack > dl:first-of-type > dd:first-of-type { margin-top: 0.25rem; } ``` ================================================ FILE: snippets/fluid-typography.md ================================================ --- title: Fluid typography type: snippet tags: [visual] author: chalarangelo cover: shell-focus dateModified: 2021-05-16T11:23:05+03:00 --- Creates text that scales according to the viewport width. - Use the `clamp()` CSS function to clamp the value of `font-size` between `1rem` and `3rem`. - Use the formula `8vw - 2rem` to calculate a responsive value for `font-size` (`1rem` at `600px`, `3rem` at `1000px`). ```html

    Hello World!

    ``` ```css .fluid-type { font-size: clamp(1rem, 8vw - 2rem, 3rem); } ``` ================================================ FILE: snippets/focus-within.md ================================================ --- title: Focus Within type: snippet tags: [visual,interactivity] cover: boats dateModified: 2020-12-30T15:37:37+02:00 --- Changes the appearance of a form if any of its children are focused. - Use the pseudo-class `:focus-within` to apply styles to a parent element if any child element gets focused. ```html

    ``` ```css form { border: 2px solid #52B882; padding: 8px; border-radius: 2px; } form:focus-within { background: #7CF0BD; } label { display: inline-block; width: 72px; } input { margin: 4px 12px; } ``` ================================================ FILE: snippets/full-width.md ================================================ --- title: Full-width image type: snippet tags: [layout] author: chalarangelo cover: yellow-white-mug-2 dateModified: 2021-01-07T10:14:46+02:00 --- Creates a full-width image. - Use `left: 50%` and `right: 50%` to position the image in the middle of the parent element. - Use `margin-left: -50vw` and `margin-right: -50vw` to offset the image on both sides relative to the size of the viewport. - Use `width: 100vw` and `max-width: 100vw` to size the image relative to the viewport. ```html

    Lorem ipsum dolor sit amet

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris molestie lobortis sapien, sit amet iaculis est interdum tincidunt. Nunc egestas nibh ut metus elementum consequat. Integer elit orci, rhoncus efficitur lectus eu, faucibus interdum felis.

    Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam pretium lectus sed ex efficitur, ac varius sapien gravida. Sed facilisis elit quis sem sollicitudin, ut aliquam neque eleifend. Maecenas sagittis neque sapien, ac tempus nulla tempus nec. Curabitur tellus est, convallis id dolor ut, porta hendrerit quam.

    ``` ```css main { margin: 0 auto; max-width: 640px; } img { height: auto; max-width: 100%; } .full-width { position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; max-width: 100vw; width: 100vw; } ``` ================================================ FILE: snippets/fullscreen.md ================================================ --- title: Fullscreen type: snippet tags: [visual] cover: flower-portrait-3 dateModified: 2021-10-13T19:29:39+02:00 --- Applies styles to an element when in fullscreen mode. - Use the `:fullscreen` CSS pseudo-element selector to select and style an element that is displayed in fullscreen mode. - Use a ` ``` ```css .container { margin: 40px auto; max-width: 700px; } .element { padding: 20px; height: 300px; width: 100%; background-color: skyblue; box-sizing: border-box; } .element p { text-align: center; color: white; font-size: 3em; } .element:-ms-fullscreen p { visibility: visible; } .element:fullscreen { background-color: #e4708a; width: 100vw; height: 100vh; } ``` ================================================ FILE: snippets/gradient-text.md ================================================ --- title: Gradient text type: snippet tags: [visual] cover: red-berries dateModified: 2020-12-30T15:37:37+02:00 --- 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

    Gradient text

    ``` ```css .gradient-text { background: linear-gradient(#70D6FF, #00072D); -webkit-text-fill-color: transparent; -webkit-background-clip: text; font-size: 32px; } ``` ================================================ FILE: snippets/grid-centering.md ================================================ --- title: Grid centering type: snippet tags: [layout] cover: work-hard-computer dateModified: 2020-12-30T15:37:37+02:00 --- Horizontally and vertically centers a child element within a parent element using `grid`. - Use `display: grid` to create a grid layout. - Use `justify-content: center` to center the child horizontally. - Use `align-items: center` to center the child vertically. ```html
    Centered content.
    ``` ```css .grid-centering { display: grid; justify-content: center; align-items: center; height: 100px; } ``` ================================================ FILE: snippets/hamburger-button.md ================================================ --- title: Hamburger Button type: snippet tags: [interactivity] cover: volcano-sunset dateModified: 2020-12-30T15:37:37+02:00 --- 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
    ``` ```css .hamburger-menu { display: flex; flex-flow: column wrap; justify-content: space-between; height: 2.5rem; width: 2.5rem; cursor: pointer; } .hamburger-menu .bar { height: 5px; background: black; border-radius: 5px; margin: 3px 0px; transform-origin: left; transition: all 0.5s; } .hamburger-menu:hover .top { transform: rotate(45deg); } .hamburger-menu:hover .middle { opacity: 0; } .hamburger-menu:hover .bottom { transform: rotate(-45deg); } ``` ================================================ FILE: snippets/height-transition.md ================================================ --- title: Height transition type: snippet tags: [animation] cover: washed-ashore dateModified: 2020-12-30T15:37:37+02:00 --- 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
    Hover me to see a height transition.
    Additional content
    ``` ```css .el { transition: max-height 0.3s; overflow: hidden; max-height: 0; } .trigger:hover > .el { max-height: var(--max-height); } ``` ```js let el = document.querySelector('.el'); let height = el.scrollHeight; el.style.setProperty('--max-height', height + 'px'); ``` ================================================ FILE: snippets/hide-empty-elements.md ================================================ --- title: Hide empty elements type: snippet tags: [visual] author: chalarangelo cover: metro-arrival dateModified: 2022-11-18T05:00:00-04:00 --- Hides elements with no content. - Use the `:empty` pseudo-class to select elements with no content. ```html

    Lorem ipsum dolor sit amet.

    ``` ```css :empty { display: none; } ``` ================================================ FILE: snippets/hide-scrollbars.md ================================================ --- title: Hide scroll bars type: snippet tags: [visual] author: chalarangelo cover: by-the-lighthouse dateModified: 2022-05-13T05:00:00-04:00 --- Hides scrollbars on an element, while still allowing it to be scrollable. - Use `overflow: auto` to allow the element to be scrollable. - Use `scrollbar-width: none` to hide scrollbars on Firefox. - Use `display: none` on the `::-webkit-scrollbar` pseudo-element to hide scrollbars on WebKit browsers (Chrome, Edge, Safari). ```html

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum id leo a consectetur. Integer justo magna, ultricies vel enim vitae, egestas efficitur leo. Ut nulla orci, rutrum eu augue sed, tempus pellentesque quam.

    ``` ```css div { width: 200px; height: 100px; } .no-scrollbars { overflow: auto; scrollbar-width: none; } .no-scrollbars::-webkit-scrollbar { display: none; } ``` ================================================ FILE: snippets/horizontal-gallery.md ================================================ --- title: Image gallery with horizontal scroll type: snippet tags: [visual,interactivity] cover: flower-portrait-5 dateModified: 2022-05-01T05:00:00-04:00 --- Creates a horizontally scrollable image gallery. - Position the `.thumbnails` at the bottom of the container using `position: absolute`. - Use `scroll-snap-type: x mandatory` and `overscroll-behavior-x: contain` to create a snap effect on horizontal scroll. Snap elements to the start of the container using `scroll-snap-align: start`. - Hide scrollbars using `scrollbar-width: none` and styling the pseudo-element `::-webkit-scrollbar` to `display: none`. - Use `Element.scrollTo()` to define a `scrollToElement` function, that scrolls the gallery to the given item. - Use `Array.prototype.map()` and `Array.prototype.join()` to populate the `.thumbnails` element. Give each thumbnail a `data-id` attribute with the index of the image. - Use `Document.querySelectorAll()` to get all the thumbnail elements. Use `Array.prototype.forEach()` to register a handler for the `'click'` event on each thumbnail, using `EventTarget.addEventListener()` and the `scrollToElement` function. - Use `Document.querySelector()` and `EventTarget.addEventListener()` to register a handler for the `'scroll'` event. Update the `.thumbnails` element to match the current scroll position, using the `highlightThumbnail` function. ```html
    ``` ```css .gallery-container { position: relative; display: flex; justify-content: center; } .thumbnails { position: absolute; bottom: 8px; display: flex; flex-direction: row; gap: 6px; } .thumbnails div { width: 8px; height: 8px; cursor: pointer; background: #aaa; border-radius: 100%; } .thumbnails div.highlighted { background-color: #777; } .slides { margin: 0 16px; display: grid; grid-auto-flow: column; gap: 1rem; width: 540px; padding: 0 0.25rem; height: 720px; overflow-y: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; } .slides > div { scroll-snap-align: start; } .slides img { width: 540px; object-fit: contain; } .slides::-webkit-scrollbar { display: none; } ``` ```js const slideGallery = document.querySelector('.slides'); const slides = slideGallery.querySelectorAll('div'); const thumbnailContainer = document.querySelector('.thumbnails'); const slideCount = slides.length; const slideWidth = 540; const highlightThumbnail = () => { thumbnailContainer .querySelectorAll('div.highlighted') .forEach(el => el.classList.remove('highlighted')); const index = Math.floor(slideGallery.scrollLeft / slideWidth); thumbnailContainer .querySelector(`div[data-id="${index}"]`) .classList.add('highlighted'); }; const scrollToElement = el => { const index = parseInt(el.dataset.id, 10); slideGallery.scrollTo(index * slideWidth, 0); }; thumbnailContainer.innerHTML += [...slides] .map((slide, i) => `
    `) .join(''); thumbnailContainer.querySelectorAll('div').forEach(el => { el.addEventListener('click', () => scrollToElement(el)); }); slideGallery.addEventListener('scroll', e => highlightThumbnail()); highlightThumbnail(); ``` ================================================ FILE: snippets/horizontal-scroll-snap.md ================================================ --- title: Horizontal scroll snap type: snippet tags: [interactivity] cover: waves-from-above dateModified: 2021-10-11T18:44:51+03:00 --- Creates a horizontally scrollable container that will snap on elements when scrolling. - Use `display: grid` and `grid-auto-flow: column` to create a horizontal layout. - Use `scroll-snap-type: x mandatory` and `overscroll-behavior-x: contain` to create a snap effect on horizontal scroll. - Change `scroll-snap-align` to either `start`, `stop` or `center` to change the snap alignment. ```html
    ``` ```css .horizontal-snap { margin: 0 auto; display: grid; grid-auto-flow: column; gap: 1rem; height: calc(180px + 1rem); padding: 1rem; max-width: 480px; overflow-y: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; } .horizontal-snap > a { scroll-snap-align: center; } .horizontal-snap img { width: 180px; max-width: none; object-fit: contain; border-radius: 1rem; } ``` ================================================ FILE: snippets/hover-additional-content.md ================================================ --- title: Show additional content on hover type: snippet tags: [visual] cover: dark-leaves-5 dateModified: 2021-10-11T18:44:51+03:00 --- 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

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Link to source

    ``` ```css .card { width: 300px; height: 280px; padding: 0; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1); border-radius: 8px; box-sizing: border-box; overflow: hidden; } .card * { transition: 0.3s ease all; } .card img { margin: 0; width: 300px; height: 224px; object-fit: cover; display: block; } .card h3 { margin: 0; padding: 12px 12px 48px; line-height: 32px; font-weight: 500; font-size: 20px; } .card .focus-content { display: block; padding: 8px 12px; } .card p { margin: 0; line-height: 1.5; } .card:hover img, .card:focus-within img { margin-top: -80px; } .card:hover h3, .card:focus-within h3 { padding: 8px 12px 0; } ``` ================================================ FILE: snippets/hover-perspective.md ================================================ --- title: Perspective transform on hover type: snippet tags: [animation] author: chalarangelo cover: tropical-bike dateModified: 2021-05-17T13:58:04+03:00 --- 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
    ``` ```css .image-card { display: inline-block; box-sizing: border-box; margin: 1rem; width: 240px; height: 320px; padding: 8px; border-radius: 1rem; background: url("https://picsum.photos/id/1049/240/320"); box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; } .perspective-left { transform: perspective(1500px) rotateY(15deg); transition: transform 1s ease 0s; } .perspective-left:hover { transform: perspective(3000px) rotateY(5deg); } .perspective-right { transform: perspective(1500px) rotateY(-15deg); transition: transform 1s ease 0s; } .perspective-right:hover { transform: perspective(3000px) rotateY(-5deg); } ``` ================================================ FILE: snippets/hover-shadow-box-animation.md ================================================ --- title: Hover shadow box animation type: snippet tags: [animation] unlisted: true cover: dark-cloud dateModified: 2021-01-04T12:30:40+02:00 --- 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

    Box it!

    ``` ```css .hover-shadow-box-animation { display: inline-block; vertical-align: middle; transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; margin: 10px; transition-duration: 0.3s; transition-property: box-shadow, transform; } .hover-shadow-box-animation:hover, .hover-shadow-box-animation:focus, .hover-shadow-box-animation:active { box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5); transform: scale(1.2); } ``` ================================================ FILE: snippets/hover-underline-animation.md ================================================ --- title: Hover underline animation type: snippet tags: [animation] cover: coffee-phone-tray-2 dateModified: 2021-10-11T18:44:51+03:00 --- 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

    Hover this text to see the effect!

    ``` ```css .hover-underline-animation { display: inline-block; position: relative; color: #0087ca; } .hover-underline-animation::after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: 0; left: 0; background-color: #0087ca; transform-origin: bottom right; transition: transform 0.25s ease-out; } .hover-underline-animation:hover::after { transform: scaleX(1); transform-origin: bottom left; } ``` ================================================ FILE: snippets/image-hover-menu.md ================================================ --- title: Menu on image hover type: snippet tags: [layout,animation] cover: compass dateModified: 2021-10-11T18:44:51+03:00 --- Displays a menu overlay when the user hovers over the image. - Use a `
    ` to wrap the `` element and a `
    ` element that will contain the menu links. - Use the `opacity` and `right` attributes to animate the image on hover, creating a sliding effect. - Set the `left` attribute of the `
    ` to the negative of the element's `width`. Reset it to `0` when hovering over the parent element to slide in the menu. - Use `display: flex`, `flex-direction: column` and `justify-content: center` on the `
    ` to vertically center the menu items. ```html
    ``` ```css .hover-menu { position: relative; overflow: hidden; margin: 8px; min-width: 340px; max-width: 480px; max-height: 290px; width: 100%; background: #000; text-align: center; box-sizing: border-box; } .hover-menu * { box-sizing: border-box; } .hover-menu img { position: relative; max-width: 100%; top: 0; right: 0; opacity: 1; transition: 0.3s ease-in-out; } .hover-menu div { position: absolute; top: 0; left: -120px; width: 120px; height: 100%; padding: 8px 4px; background: #000; transition: 0.3s ease-in-out; display: flex; flex-direction: column; justify-content: center; } .hover-menu div a { display: block; line-height: 2; color: #fff; text-decoration: none; opacity: 0.8; padding: 5px 15px; position: relative; transition: 0.3s ease-in-out; } .hover-menu div a:hover { text-decoration: underline; } .hover-menu:hover img { opacity: 0.5; right: -120px; } .hover-menu:hover div { left: 0; opacity: 1; } ``` ================================================ FILE: snippets/image-hover-rotate.md ================================================ --- title: Image rotate on hover type: snippet tags: [animation,visual] cover: succulent-1 dateModified: 2021-10-11T18:44:51+03:00 --- Creates a rotate effect for the image on hover. - Use the `scale()`, `rotate()` and `transition` properties when hovering over the parent element (a `
    `) to animate the image. - Use `overflow: hidden` on the parent element to hide the excess from the image transformation. ```html
    ``` ```css .hover-rotate { overflow: hidden; margin: 8px; min-width: 240px; max-width: 320px; width: 100%; } .hover-rotate img { transition: all 0.3s; box-sizing: border-box; max-width: 100%; } .hover-rotate:hover img { transform: scale(1.3) rotate(5deg); } ``` ================================================ FILE: snippets/image-mosaic.md ================================================ --- title: Responsive image mosaic type: snippet tags: [layout] author: chalarangelo cover: beach-riders dateModified: 2020-12-30T15:37:37+02:00 --- Creates a responsive image mosaic. - Use `display: grid` to create an appropriate responsive grid layout. - Use `grid-row: span 2 / auto` and `grid-column: span 2 / auto` to create items that span two rows or two columns respectively. - Wrap the previous styles into a media query to avoid applying on small screen sizes. ```html
    ``` ```css .image-mosaic { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows: 240px; } .card { display: flex; flex-direction: column; justify-content: center; align-items: center; background: #353535; font-size: 3rem; color: #fff; box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem; height: 100%; width: 100%; border-radius: 4px; transition: all 500ms; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; padding: 0; margin: 0; } @media screen and (min-width: 600px) { .card-tall { grid-row: span 2 / auto; } .card-wide { grid-column: span 2 / auto; } } ``` ================================================ FILE: snippets/image-overlay-hover.md ================================================ --- title: Image overlay on hover type: snippet tags: [visual,animation] cover: architectural dateModified: 2021-10-11T18:44:51+03:00 --- Displays an image overlay effect on hover. - Use the `::before` and `::after` pseudo-elements for the top and bottom bars of the overlay respectively. Set their `opacity`, `transform` and `transition` to produce the desired effect. - Use the `
    ` for the text of the overlay. Set `display: flex`, `flex-direction: column` and `justify-content: center` to center the text into the image. - Use the `:hover` pseudo-selector to update the `opacity` and `transform` of all the elements and display the overlay. ```html

    Lorem
    Ipsum

    ``` ```css .hover-img { background-color: #000; color: #fff; display: inline-block; margin: 8px; max-width: 320px; min-width: 240px; overflow: hidden; position: relative; text-align: center; width: 100%; } .hover-img * { box-sizing: border-box; transition: all 0.45s ease; } .hover-img::before, .hover-img::after { background-color: rgba(0, 0, 0, 0.5); border-top: 32px solid rgba(0, 0, 0, 0.5); border-bottom: 32px solid rgba(0, 0, 0, 0.5); position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ''; transition: all 0.3s ease; z-index: 1; opacity: 0; transform: scaleY(2); } .hover-img img { vertical-align: top; max-width: 100%; backface-visibility: hidden; } .hover-img figcaption { position: absolute; top: 0; bottom: 0; left: 0; right: 0; align-items: center; z-index: 1; display: flex; flex-direction: column; justify-content: center; line-height: 1.1em; opacity: 0; z-index: 2; transition-delay: 0.1s; font-size: 24px; font-family: sans-serif; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; } .hover-img:hover::before, .hover-img:hover::after { transform: scale(1); opacity: 1; } .hover-img:hover > img { opacity: 0.7; } .hover-img:hover figcaption { opacity: 1; } ``` ================================================ FILE: snippets/image-text-overlay.md ================================================ --- title: Image with text overlay type: snippet tags: [visual] author: chalarangelo cover: icebreaker dateModified: 2023-01-29T05:00:00-04:00 --- Displays an image with a text overlay. - Use the `
    ` and `
    ` elements to display the image and the text overlay respectively. - Use a `linear-gradient` to create the overlay effect over the image. ```html

    Business
    Pricing

    ``` ```css .text-overlay-image { box-sizing: border-box; position: relative; margin: 8px; max-width: 400px; max-height: 400px; width: 100%; } .text-overlay-image figcaption { box-sizing: border-box; position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(0deg, #00000088 30%, #ffffff44 100%); color: #fff; padding: 16px; font-family: sans-serif; font-weight: 700; line-height: 1.2; font-size: 28px; } .text-overlay-image figcaption h3 { margin: 0; } ``` ================================================ FILE: snippets/input-with-prefix.md ================================================ --- title: Input with prefix type: snippet tags: [interactivity,visual] cover: flower-portrait-4 dateModified: 2021-10-13T19:29:39+02:00 --- Creates an input with a visual, non-editable prefix. - Use `display: flex` to create a container element. - Remove the border and outline from the `` field. Apply them to the parent element instead to make it look like an input box. - Use the `:focus-within` pseudo-class selector to style the parent element accordingly, when the user interacts with the `` field. ```html
    +30
    ``` ```css .input-box { display: flex; align-items: center; max-width: 300px; background: #fff; border: 1px solid #a0a0a0; border-radius: 4px; padding-left: 0.5rem; overflow: hidden; font-family: sans-serif; } .input-box .prefix { font-weight: 300; font-size: 14px; color: #999; } .input-box input { flex-grow: 1; font-size: 14px; background: #fff; border: none; outline: none; padding: 0.5rem; } .input-box:focus-within { border-color: #777; } ``` ================================================ FILE: snippets/isometric-card.md ================================================ --- title: Isometric card type: snippet tags: [visual] author: chalarangelo cover: guitar-living-room dateModified: 2021-05-17T14:04:52+03:00 --- Creates an isometric card. - Use `transform` with `rotateX()` and `rotateY()` as well as a `box-shadow` to create an isometric card. - Use `transition` to animate the card, creating a lift effect when the user hovers over it. ```html
    ``` ```css .isometric-card { margin: 0 auto; transform: rotateX(51deg) rotateZ(43deg); transform-style: preserve-3d; background-color: #fcfcfc; will-change: transform; width: 240px; height: 320px; border-radius: 2rem; box-shadow: 1px 1px 0 1px #f9f9fb, -1px 0 28px 0 rgba(34, 33, 81, 0.01), 28px 28px 28px 0 rgba(34, 33, 81, 0.25); transition: 0.4s ease-in-out transform, 0.3s ease-in-out box-shadow; } .isometric-card:hover { transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(43deg); box-shadow: 1px 1px 0 1px #f9f9fb, -1px 0 28px 0 rgba(34, 33, 81, 0.01), 54px 54px 28px -10px rgba(34, 33, 81, 0.15); } ``` ================================================ FILE: snippets/line-clamp.md ================================================ --- title: Trim multiline text type: snippet tags: [layout,visual] author: chalarangelo cover: pink-flower-tree dateModified: 2021-05-16T20:19:13+03:00 --- Limit multiline text to a given number of lines. - Use `-webkit-line-clamp` to set the maximum number of lines to be displayed. - Set `display` to `-webkit-box` and `-webkit-box-orient` to `vertical`, as they are required for `-webkit-line-clamp` to be applied. - Apply `overflow: hidden` to hide any overflow after the text is trimmed. ```html

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod enim eget ultricies sollicitudin. Nunc aliquam arcu arcu, non suscipit metus luctus id. Aliquam sodales turpis ipsum, in vehicula dui tempor sit amet. Nullam quis urna erat. Pellentesque mattis dolor purus. Aliquam nisl urna, tempor a euismod a, placerat in mauris. Phasellus neque quam, dapibus quis nunc at, feugiat suscipit tortor. Duis vel posuere dolor. Phasellus risus erat, lobortis et mi vel, viverra faucibus lectus. Etiam ut posuere sapien. Nulla ultrices dui turpis, interdum consectetur urna tempus at.

    ``` ```css .excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } ``` ================================================ FILE: snippets/masonry-layout.md ================================================ --- title: Masonry Layout type: snippet tags: [layout] cover: interior-2 dateModified: 2021-10-13T19:29:39+02:00 --- Creates a masonry-style layout that is especially useful when working with images. - Create a masonry-style layout that consists of "bricks" that fall into each other with either a fixed `width` (vertical layout) or a fixed `height` (horizontal layout), forming a perfect fit. Especially useful when working with images. - Define `.masonry-container` This is the container for the masonry layout and `.masonry-columns`, an inner container in which `.masonry-brick` elements will be placed. - Apply `display: block` to `.masonry-brick` elements to allow the layout to flow properly. - Use the `:first-child` pseudo-element selector to apply a different `margin` for the first element to account for its positioning. - Use CSS variables and media queries for greater flexibility and responsiveness. ```html
    An image Another image Another image One more image And another one Last one
    ``` ```css /* Container */ .masonry-container { --column-count-small: 1; --column-count-medium: 2; --column-count-large: 3; --column-gap: 0.125rem; padding: var(--column-gap); } /* Columns */ .masonry-columns { column-gap: var(--column-gap); column-count: var(--column-count-small); column-width: calc(1 / var(--column-count-small) * 100%); } @media only screen and (min-width: 640px) { .masonry-columns { column-count: var(--column-count-medium); column-width: calc(1 / var(--column-count-medium) * 100%); } } @media only screen and (min-width: 800px) { .masonry-columns { column-count: var(--column-count-large); column-width: calc(1 / var(--column-count-large) * 100%); } } /* Bricks */ .masonry-brick { width: 100%; height: auto; margin: var(--column-gap) 0; display: block; } .masonry-brick:first-child { margin: 0 0 var(--column-gap); } ``` ================================================ FILE: snippets/mouse-cursor-gradient-tracking.md ================================================ --- title: Mouse cursor gradient tracking type: snippet tags: [visual,interactivity] cover: tram-car dateModified: 2021-01-07T23:52:15+02:00 --- A hover effect where the gradient follows the mouse cursor. - Declare two CSS variables, `--x` and `--y`, used to track the position of the mouse on the button. - Declare a CSS variable, `--size`, used to modify the gradient's dimensions. - Use `background: radial-gradient(circle closest-side, pink, transparent)` to create the gradient at the correct position. - Use `Document.querySelector()` and `EventTarget.addEventListener()` to register a handler for the `'mousemove'` event. - Use `Element.getBoundingClientRect()` and `CSSStyleDeclaration.setProperty()` to update the values of the `--x` and `--y` CSS variables. ```html ``` ```css .mouse-cursor-gradient-tracking { position: relative; background: #7983ff; padding: 0.5rem 1rem; font-size: 1.2rem; border: none; color: white; cursor: pointer; outline: none; overflow: hidden; } .mouse-cursor-gradient-tracking span { position: relative; } .mouse-cursor-gradient-tracking::before { --size: 0; content: ''; position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); background: radial-gradient(circle closest-side, pink, transparent); transform: translate(-50%, -50%); transition: width 0.2s ease, height 0.2s ease; } .mouse-cursor-gradient-tracking:hover::before { --size: 200px; } ``` ```js let btn = document.querySelector('.mouse-cursor-gradient-tracking'); btn.addEventListener('mousemove', e => { let rect = e.target.getBoundingClientRect(); let x = e.clientX - rect.left; let y = e.clientY - rect.top; btn.style.setProperty('--x', x + 'px'); btn.style.setProperty('--y', y + 'px'); }); ``` ================================================ FILE: snippets/navigation-list-item-hover-and-focus-effect.md ================================================ --- title: Navigation list item hover and focus effect type: snippet tags: [visual] cover: cloudy-rock-formation dateModified: 2021-10-11T18:44:51+03:00 --- Creates a custom hover and focus effect for navigation items, using CSS transformations. - Use the `::before` pseudo-element at the list item anchor to create a hover effect. Hide it using `transform: scale(0)`. - Use the `:hover` and `:focus` pseudo-class selectors to transition the pseudo-element to `transform: scale(1)` and show its colored background. - Prevent the pseudo-element from covering the anchor element by using `z-index`. ```html ``` ```css .hover-nav ul { list-style: none; margin: 0; padding: 0; overflow: hidden; } .hover-nav li { float: left; } .hover-nav li a { position: relative; display: block; color: #fff; text-align: center; padding: 8px 12px; text-decoration: none; z-index: 0; } li a::before { position: absolute; content: ""; width: 100%; height: 100%; bottom: 0; left: 0; background-color: #2683f6; z-index: -1; transform: scale(0); transition: transform 0.5s ease-in-out; } li a:hover::before, li a:focus::before { transform: scale(1); } ``` ================================================ FILE: snippets/offscreen.md ================================================ --- title: Offscreen type: snippet tags: [layout,visual] cover: succulent-2 dateModified: 2021-10-11T18:44:51+03:00 --- Hides an element completely (visually and positionally) in the DOM while still allowing it to be accessible. - Remove all borders and padding and hide the element's overflow. - Use `clip` to define that no part of the element is shown. - Make the `height` and `width` of the element `1px` and negate them using `margin: -1px`. - Use `position: absolute` so that the element does not take up space in the DOM. - **Note:** This technique provides an accessible and layout-friendly alternative to `display: none` (not readable by screen readers) and `visibility: hidden` (takes up physical space in the DOM). ```html Learn More about pants ``` ```css .offscreen { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } ``` ================================================ FILE: snippets/overflow-scroll-gradient.md ================================================ --- title: Overflow scroll gradient type: snippet tags: [visual] cover: memories-of-pineapple-1 dateModified: 2021-10-13T19:29:39+02:00 --- Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled. - Use the `::after` pseudo-element to create a `linear-gradient()` that fades from `transparent` to `white` (top to bottom). - Use `position: absolute`, `width` and `height` to place and size the pseudo-element in its parent. - Use `pointer-events: none` to exclude the pseudo-element from mouse events, allowing text behind it to still be selectable/interactive. ```html
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Iure id exercitationem nulla qui repellat laborum vitae,
    molestias tempora velit natus. Quas, assumenda nisi.
    Quisquam enim qui iure, consequatur velit sit?
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Iure id exercitationem nulla qui repellat laborum vitae,
    molestias tempora velit natus. Quas, assumenda nisi.
    Quisquam enim qui iure, consequatur velit sit?
    ``` ```css .overflow-scroll-gradient { position: relative; } .overflow-scroll-gradient::after { content: ''; position: absolute; bottom: 0; width: 250px; height: 25px; background: linear-gradient(transparent, white); pointer-events: none; } .overflow-scroll-gradient-scroller { overflow-y: scroll; background: white; width: 240px; height: 200px; padding: 15px; line-height: 1.2; } ``` ================================================ FILE: snippets/polka-dot-pattern.md ================================================ --- title: Polka dot background pattern type: snippet tags: [visual] cover: bag-waiting dateModified: 2021-10-13T19:29:39+02:00 --- Creates a polka dot background pattern. - Use `background-color` to set a black background. - Use `background-image` with two `radial-gradient()` values to create two dots. - Use `background-size` to specify the pattern's size. Use `background-position` to appropriately place the two gradients. - **Note:** The fixed `height` and `width` of the element is for demonstration purposes only. ```html
    ``` ```css .polka-dot { width: 240px; height: 240px; background-color: #000; background-image: radial-gradient(#fff 10%, transparent 11%), radial-gradient(#fff 10%, transparent 11%); background-size: 60px 60px; background-position: 0 0, 30px 30px; background-repeat: repeat; } ``` ================================================ FILE: snippets/popout-menu.md ================================================ --- title: Popout menu type: snippet tags: [interactivity] cover: city-view dateModified: 2020-12-30T15:37:37+02:00 --- Reveals an interactive popout menu on hover/focus. - Use `left: 100%` to move the popout menu to the right of the parent. - Use `visibility: hidden` to hide the popout menu initially, allowing for transitions to be applied (unlike `display: none`). - Use the `:hover`, `:focus` and `:focus-within` pseudo-class selectors to apply `visibility: visible` to the popout menu, displaying it when the parent element is hovered/focused. ```html
    Popout menu
    ``` ```css .reference { position: relative; background: tomato; width: 100px; height: 80px; } .popout-menu { position: absolute; visibility: hidden; left: 100%; background: #9C27B0; color: white; padding: 16px; } .reference:hover > .popout-menu, .reference:focus > .popout-menu, .reference:focus-within > .popout-menu { visibility: visible; } ``` ================================================ FILE: snippets/pretty-text-underline.md ================================================ --- title: Pretty text underline type: snippet tags: [visual] cover: flower-portrait-6 dateModified: 2021-10-13T19:29:39+02:00 --- 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

    Pretty text underline without clipping descenders.

    ``` ```css .container { background: #f5f6f9; color: #333; padding: 8px 0; } .pretty-text-underline { display: inline; text-shadow: 1px 1px #f5f6f9, -1px 1px #f5f6f9, -1px -1px #f5f6f9, 1px -1px #f5f6f9; background-image: linear-gradient(90deg, currentColor 100%, transparent 100%); background-position: bottom; background-repeat: no-repeat; background-size: 100% 1px; } .pretty-text-underline::selection { background-color: rgba(0, 150, 255, 0.3); text-shadow: none; } ``` ================================================ FILE: snippets/pulse-loader.md ================================================ --- title: Pulse loader type: snippet tags: [animation] cover: digital-nomad-8 dateModified: 2021-10-13T19:29:39+02:00 --- Creates a pulse effect loader animation using the `animation-delay` property. - Use `@keyframes` to define an animation at two points in the cycle. At the start (`0%`), the two `
    ` elements have no `width` or `height` and are positioned at the center. At the end (`100%`), both `
    ` elements have increased `width` and `height`, but their `position` is reset to `0`. - Use `opacity` to transition from `1` to `0` when animating to give the `
    ` elements a disappearing effect as they expand. - Set a predefined `width` and `height` for the parent container, `.ripple-loader` and use `position: relative` to position its children. - Use `animation-delay` on the second `
    ` element, so that each element starts its animation at a different time. ```html
    ``` ```css .ripple-loader { position: relative; width: 64px; height: 64px; } .ripple-loader div { position: absolute; border: 4px solid #454ADE; border-radius: 50%; animation: ripple-loader 1s ease-out infinite; } .ripple-loader div:nth-child(2) { animation-delay: -0.5s; } @keyframes ripple-loader { 0% { top: 32px; left: 32px; width: 0; height: 0; opacity: 1; } 100% { top: 0; left: 0; width: 64px; height: 64px; opacity: 0; } } ``` ================================================ FILE: snippets/reset-all-styles.md ================================================ --- title: Reset all styles type: snippet tags: [visual] cover: rocky-beach-2 dateModified: 2020-12-30T15:37:37+02:00 --- Resets all styles to default values using only one property. - Use the `all` property to reset all styles (inherited or not) to their default values. - **Note:** This will not affect `direction` and `unicode-bidi` properties. ```html
    Title

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?

    ``` ```css .reset-all-styles { all: initial; } ``` ================================================ FILE: snippets/responsive-layout-sidebar.md ================================================ --- title: Responsive layout with sidebar type: snippet tags: [layout] author: chalarangelo cover: red-petals dateModified: 2020-09-16T18:54:56+03:00 --- Creates a responsive layout with a content area and a sidebar. - Use `display: grid` on the parent container, to create a grid layout. - Use `minmax()` for the second column (sidebar) to allow it to take up between `150px` and `20%`. - Use `1fr` for the first column (main content) to take up the rest of the remaining space. ```html
    This element is 1fr large.
    ``` ```css .container { display: grid; grid-template-columns: 1fr minmax(150px, 20%); height: 100px; } main, aside { padding: 12px; text-align: center; } main { background: #d4f2c4; } aside { background: #81cfd9; } ``` ================================================ FILE: snippets/rotating-card.md ================================================ --- title: Rotating Card type: snippet tags: [animation] cover: digital-nomad-11 dateModified: 2021-03-30T15:24:01+03:00 --- Creates a two sided card which rotates on hover. - Set the `backface-visibility` of the cards to none. - Initially, set `rotateY()` for the back side of the card to `-180deg` and the front side to `0deg`. - Upon hover, set `rotateY()` for the front side to `180deg` and backside to `0deg`. - Set the appropriate `perspective` value to create the rotate effect. ```html
    Front Side
    Back Side
    ``` ```css .card { perspective: 150rem; position: relative; height: 40rem; max-width: 400px; margin: 2rem; box-shadow: none; background: none; } .card-side { height: 35rem; border-radius: 15px; transition: all 0.8s ease; backface-visibility: hidden; position: absolute; top: 0; left: 0; width: 80%; padding: 2rem; color: white; } .card-side.back { transform: rotateY(-180deg); background-color: #4158D0; background-image: linear-gradient(43deg, #4158D0 0%,#C850C0 46%, #FFCC70 100%); } .card-side.front { background-color: #0093E9; background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%); } .card:hover .card-side.front { transform: rotateY(180deg); } .card:hover .card-side.back { transform: rotateY(0deg); } ``` ================================================ FILE: snippets/scroll-progress-bar.md ================================================ --- title: Scroll progress bar type: snippet tags: [animation,visual] author: chalarangelo cover: coworking-space dateModified: 2021-10-13T19:29:39+02:00 --- Creates a progress bar indicating the scroll percentage of the page. - Use `position: fixed` and a large `z-index` value to place the element at the top of the page and above any content. - Use `EventTarget.addEventListener()` and `Element.scrollTop` to determine the scroll percentage of the document and apply it to the `width` of the element. ```html
    ``` ```css body { min-height: 200vh; } #scroll-progress { position: fixed; top: 0; width: 0%; height: 4px; background: #7983ff; z-index: 10000; } ``` ```js const scrollProgress = document.getElementById('scroll-progress'); const height = document.documentElement.scrollHeight - document.documentElement.clientHeight; window.addEventListener('scroll', () => { const scrollTop = document.body.scrollTop || document.documentElement.scrollTop; scrollProgress.style.width = `${(scrollTop / height) * 100}%`; }); ``` ================================================ FILE: snippets/shake-invalid-input.md ================================================ --- title: Shake on invalid input type: snippet tags: [animation] cover: perfect-timing dateModified: 2022-07-31T18:30:11+03:00 --- Creates a shake animation on invalid input. - Use the `pattern` attribute to define the regular expression which the input's value must match. - Use `@keyframes` to define a shake animation, using the `margin-left` property. - Use the `:invalid` pseudo-class to apply an `animation` to make the element shake. ```html ``` ```css @keyframes shake { 0% { margin-left: 0rem; } 25% { margin-left: 0.5rem; } 75% { margin-left: -0.5rem; } 100% { margin-left: 0rem; } } input:invalid { animation: shake 0.2s ease-in-out 0s 2; box-shadow: 0 0 0.6rem #ff0000; } ``` ================================================ FILE: snippets/shape-separator.md ================================================ --- title: Shape separator type: snippet tags: [visual] unlisted: true cover: shapes dateModified: 2021-01-04T12:30:40+02:00 --- Uses an SVG shape to create a separator between two different blocks. - Use the `::after` pseudo-element to create the separator element. - Use `background-image` to add the SVG (a 24x12 triangle) shape via a data URI. The background image will repeat by default, covering the whole area of the pseudo-element. - Use the `background` of the parent element to set the desired color for the separator. ```html
    ``` ```css .shape-separator { position: relative; height: 48px; background: #9C27B0; } .shape-separator::after { content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='transparent'/%3E%3C/svg%3E"); position: absolute; width: 100%; height: 12px; bottom: 0; } ``` ================================================ FILE: snippets/shifting-card.md ================================================ --- title: Shifting Card type: snippet tags: [animation] author: chalarangelo cover: clouds-n-mountains dateModified: 2022-12-14T05:00:00-04:00 --- Creates a card that shifts on hover. - Set the appropriate `perspective` on the `.container` element to allow for the shifting effect. - Add a `transition` for the `transform` property of the `.card` element. - Use `Document.querySelector()` to select the `.card` element and add event listeners for the `mousemove` and `mouseout` events. - Use `Element.getBoundingClientRect()` to get the `x`, `y`, `width`, and `height` of the `.card` element. - Calculate the relative distance as a value between `-1` and `1` for the `x` and `y` axes and apply it through the `transform` property. ```html

    Card

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti repellat, consequuntur doloribus voluptate esse iure?

    ``` ```css .container { display: flex; padding: 24px; justify-content: center; align-items: center; background: #f3f1fe; } .shifting-card { width: 350px; display: flex; flex-direction: column; align-items: center; background: #fff; border-radius: 10px; margin: 0.5rem; transition: transform 0.2s ease-out; box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.1); } .shifting-card .content { text-align: center; margin: 2rem; line-height: 1.5; color: #101010; } ``` ```js const card = document.querySelector('.shifting-card'); const { x, y, width, height } = card.getBoundingClientRect(); const cx = x + width / 2; const cy = y + height / 2; const handleMove = e => { const { pageX, pageY } = e; const dx = (cx - pageX) / (width / 2); const dy = (cy - pageY) / (height / 2); e.target.style.transform = `rotateX(${10 * dy * -1}deg) rotateY(${10 * dx}deg)`; }; const handleOut = e => { e.target.style.transform = 'initial'; }; card.addEventListener('mousemove', handleMove); card.addEventListener('mouseout', handleOut); ``` ================================================ FILE: snippets/sibling-fade.md ================================================ --- title: Sibling fade type: snippet tags: [interactivity] cover: messy-papers dateModified: 2020-12-30T15:37:37+02:00 --- Fades out the siblings of a hovered item. - Use a `transition` to animate changes to `opacity`. - Use the `:hover` and `:not` pseudo-class selectors to change the `opacity` of all elements except for the one the mouse is over to `0.5`. ```html
    Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
    ``` ```css span { padding: 0 16px; transition: opacity 0.3s; } .sibling-fade:hover span:not(:hover) { opacity: 0.5; } ``` ================================================ FILE: snippets/squiggle-link-hover-effect.md ================================================ --- title: Squiggle link hover effect type: snippet tags: [animation,visual] author: chalarangelo cover: dreamy-flowers dateModified: 2023-01-10T05:00:00-04:00 --- Creates a squiggle effect when hovering over a link. - Create a repeating background for the link using a `linear-gradient`. - Create a `:hover` state for the link with a `background-image` of a data URL containing an SVG with a squiggly path and an animation. ```html

    The magnificent octopus swam along gracefully.

    ``` ```css a.squiggle { background: linear-gradient(to bottom, #0087ca 0%, #0087ca 100%); background-position: 0 100%; background-repeat: repeat-x; background-size: 2px 2px; color: inherit; text-decoration: none; } a.squiggle:hover { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-15px);}}%3C/style%3E%3Cpath fill='none' stroke='%230087ca' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E"); background-size: auto 4px; } ``` ================================================ FILE: snippets/staggered-animation.md ================================================ --- title: Staggered animation type: snippet tags: [animation] cover: aerial-view-port dateModified: 2021-10-11T18:44:51+03:00 --- Creates a staggered animation for the elements of a list. - Set `opacity: 0` and `transform: translateX(100%)` to make list elements transparent and move them all the way to the right. - Specify the same `transition` properties for list elements, except `transition-delay`. - Use inline styles to specify a value for `--i` for each list element. This will in turn be used for `transition-delay` to create the stagger effect. - Use the `:checked` pseudo-class selector for the checkbox to style list elements. Set `opacity` to `1` and `transform` to `translateX(0)` to make them appear and slide into view. ```html
    • Home
    • Pricing
    • Account
    • Support
    • About
    ``` ```css .container { overflow-x: hidden; width: 100%; } .menu-toggler { display: none; } .menu-toggler-label { cursor: pointer; font-size: 20px; font-weight: bold; } .stagger-menu { list-style-type: none; margin: 16px 0; padding: 0; } .stagger-menu li { margin-bottom: 8px; font-size: 18px; opacity: 0; transform: translateX(100%); transition-property: opacity, transform; transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.750, -0.015, 0.565, 1.055); } .menu-toggler:checked ~ .stagger-menu li { opacity: 1; transform: translateX(0); transition-delay: calc(0.055s * var(--i)); } ``` ================================================ FILE: snippets/sticky-list-titles.md ================================================ --- title: List with sticky section headings type: snippet tags: [visual] author: chalarangelo cover: interior-7 dateModified: 2020-12-30T15:37:37+02:00 --- Creates a list with sticky headings for each section. - Use `overflow-y: auto` to allow the list container (`
    `) to overflow vertically. - Set headings (`
    `) `position` to `sticky` and apply `top: 0` to stick to the top of the container. ```html
    A
    Algeria
    Angola
    B
    Benin
    Botswana
    Burkina Faso
    Burundi
    C
    Cabo Verde
    Cameroon
    Central African Republic
    Chad
    Comoros
    Congo, Democratic Republic of the
    Congo, Republic of the
    Cote d'Ivoire
    D
    Djibouti
    E
    Egypt
    Equatorial Guinea
    Eritrea
    Eswatini (formerly Swaziland)
    Ethiopia
    ``` ```css .container { display: grid; place-items: center; min-height: 400px; } .sticky-stack { background: #37474f; color: #fff; margin: 0; height: 320px; border-radius: 1rem; overflow-y: auto; } .sticky-stack dt { position: sticky; top: 0; font-weight: bold; background: #263238; color: #cfd8dc; padding: 0.25rem 1rem; } .sticky-stack dd { margin: 0; padding: 0.75rem 1rem; } .sticky-stack dd + dt { margin-top: 1rem; } ``` ================================================ FILE: snippets/stripes-pattern.md ================================================ --- title: Stripes background pattern type: snippet tags: [visual] cover: jars-on-shelf dateModified: 2021-01-11T09:51:43+02:00 --- Creates a stripes background pattern. - Use `background-color` to set a white background. - Use `background-image` with a `radial-gradient()` value to create a vertical stripe. - Use `background-size` to specify the pattern's size. - **Note:** The fixed `height` and `width` of the element is for demonstration purposes only. ```html
    ``` ```css .stripes { width: 240px; height: 240px; background-color: #fff; background-image: linear-gradient(90deg, transparent 50%, #000 50%); background-size: 60px 60px; background-repeat: repeat; } ``` ================================================ FILE: snippets/stylized-quotation-marks.md ================================================ --- title: Stylized quotation marks type: snippet tags: [visual] author: chalarangelo cover: coffee-phone-tray dateModified: 2021-05-16T19:53:02+03:00 --- Customizes the style of inline quotation marks. - Use the `quotes` property to customize the characters used for the opening and closing quotes of a `` element. ```html

    Do or do not, there is no try. – Yoda

    ``` ```css q { quotes: "“" "”"; } ``` ================================================ FILE: snippets/system-font-stack.md ================================================ --- title: System font stack type: snippet tags: [visual] cover: lavender-shelf dateModified: 2020-12-30T15:37:37+02:00 --- Uses the native font of the operating system to get close to a native app feel. - Define a list of fonts using `font-family`. - The browser looks for each successive font, preferring the first one if possible, and falls back to the next if it cannot find the font (on the system or defined in CSS). - `-apple-system` is San Francisco, used on iOS and macOS (not Chrome however). - `BlinkMacSystemFont` is San Francisco, used on macOS Chrome. - `'Segoe UI'` is used on Windows 10. - `Roboto` is used on Android. - `Oxygen-Sans` is used on Linux with KDE. - `Ubuntu` is used on Ubuntu (all variants). - `Cantarell` is used on Linux with GNOME Shell. - `'Helvetica Neue'` and `Helvetica` is used on macOS 10.10 and below. - `Arial` is a font widely supported by all operating systems. - `sans-serif` is the fallback sans serif font if none of the other fonts are supported. ```html

    This text uses the system font.

    ``` ```css .system-font-stack { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif; } ``` ================================================ FILE: snippets/text-backdrop-overlay.md ================================================ --- title: Image text overlay type: snippet tags: [visual] author: chalarangelo cover: mountain-lake-cottage dateModified: 2021-10-13T19:29:39+02:00 --- Displays a text on top of an image using an overlay. - Use `backdrop-filter` to apply a `blur(14px)` and `brightness(80%)` effect. This makes text readable regardless of background image and color. ```html

    Hello, World

    ``` ```css div { position: relative; } .text-overlay { position: absolute; top: 0; left: 0; padding: 1rem; font-size: 2rem; font-weight: 300; color: white; backdrop-filter: blur(14px) brightness(80%); } ``` ================================================ FILE: snippets/tile-layout-using-inline-block.md ================================================ --- title: 3-tile layout type: snippet tags: [layout] cover: godray-computer-mug dateModified: 2020-12-30T15:37:37+02:00 --- Aligns items horizontally using `display: inline-block` to create a 3-tile layout. - Use `display: inline-block` to create a tiled layout, without using `float`, `flex` or `grid`. - Use `width` in combination with `calc` to divide the width of the container evenly into 3 columns. - Set `font-size` for `.tiles` to `0` to avoid whitespace and to `20px` for `

    ` elements to display the text. - **Note:** If you use relative units (e.g. `em`), using `font-size: 0` to fight whitespace between blocks might cause side effects. ```html

    30 Seconds of CSS

    30 Seconds of CSS

    30 Seconds of CSS

    ``` ```css .tiles { width: 600px; font-size: 0; margin: 0 auto; } .tile { width: calc(600px / 3); display: inline-block; } .tile h2 { font-size: 20px; } ``` ================================================ FILE: snippets/toggle-switch.md ================================================ --- title: Toggle switch type: snippet tags: [visual,interactivity] cover: interior-5 dateModified: 2020-12-30T15:37:37+02:00 --- Creates a toggle switch with CSS only. - Use the `for` attribute to associate the `