├── .gitattributes
├── .gitignore
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── languageFix.css
├── logo.png
├── 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
/.gitattributes:
--------------------------------------------------------------------------------
1 | src/docs/* linguist-documentation
2 | scripts/* linguist-documentation
3 | gatsby-browser.js linguist-documentation
4 | gatsby-config.js linguist-documentation
5 | gatsby-node.js linguist-documentation
6 | gatsby-ssr.js linguist-documentation
7 | .travis/* linguist-documentation
8 | config.js linguist-documentation
9 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # TypeScript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # Yarn
55 | yarn-error.log
56 | .pnp/
57 | .pnp.js
58 |
59 | # Yarn Integrity file
60 | .yarn-integrity
61 |
62 | # dotenv environment variables file
63 | .env
64 |
65 | # next.js build output
66 | .next
67 |
68 | # gatsby files
69 | .cache/
70 | public
71 |
72 | # Mac files
73 | .DS_Store
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | 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.
6 |
7 | ## Our Standards
8 |
9 | Examples of behavior that contributes to creating a positive environment include:
10 |
11 | - Using welcoming and inclusive language
12 | - Being respectful of differing viewpoints and experiences
13 | - Gracefully accepting constructive criticism
14 | - Focusing on what is best for the community
15 | - Showing empathy towards other community members
16 |
17 | Examples of unacceptable behavior by participants include:
18 |
19 | - The use of sexualized language or imagery and unwelcome sexual attention or advances
20 | - Trolling, insulting/derogatory comments, and personal or political attacks
21 | - Public or private harassment
22 | - Publishing others' private information, such as a physical or electronic address, without explicit permission
23 | - Other conduct which could reasonably be considered inappropriate in a professional setting
24 |
25 | ## Our Responsibilities
26 |
27 | 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.
28 |
29 | 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.
30 |
31 | ## Scope
32 |
33 | 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.
34 |
35 | ## Enforcement
36 |
37 | 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.
38 |
39 | 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.
40 |
41 | ## Attribution
42 |
43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
44 |
45 | [homepage]: http://contributor-covenant.org
46 | [version]: http://contributor-covenant.org/version/1/4/
47 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contribution Guidelines
2 |
3 | **30 seconds of code** is powered by the community, so feel free to contribute in any way you can to help us!
4 | ## How you can help
5 |
6 | - Submit pull requests with new snippets (see guidelines below) or snippet updates (tags, descriptions, explanations, typos, examples, code improvements).
7 | - Open issues for things you want to see added, modified, discuss ideas or help out with existing issues.
8 |
9 | ## Ground rules
10 |
11 | Breaking any of these rules will result in your pull request being closed. Please follow these guidelines above all else:
12 |
13 | - **Always be polite and respectful to others** and try to follow the advice of the moderators/collaborators/owners.
14 | - **Only modify snippet files**, never modify the generated files in the `snippet_data` directory.
15 | - **Use the snippet template** to create new snippets, ensure they have the correct name and are in the correct location.
16 | - **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).
17 | - **Snippets should solve real-world problems**, no matter how simple and should be abstract enough to be applied to different scenarios.
18 |
19 | ## Snippet creation
20 |
21 | In order to create a new snippet, you should follow the steps below:
22 |
23 | - Create a copy of the [snippet template](snippet-template.md) in the `snippets` directory.
24 | - Change the name of the newly created file to the name of your snippet.
25 | - Edit the file, adding your snippet based on the guidelines.
26 |
27 | ## Snippet guidelines
28 |
29 | - Snippet must follow [these general writing guidelines](https://github.com/30-seconds/brand-and-design/blob/master/writing-guidelines.md).
30 | - Snippets must have all their frontmatter sections (title, tags etc.) filled.
31 | - Snippet titles must correspond to the filename and follow the language and repository's naming conventions.
32 | - Snippet tags must be comma-separated, contain a primary tag as seen on the website as their first tag.
33 | - Snippets must have their `firstSeen` dates formatted using [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601).
34 | - 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.
35 | - 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.
36 | - 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.
37 | - If your snippet uses recursion, use the `recursion` tag and explain the base cases.
38 | - Try to strike a balance between readability, brevity, and performance.
39 | - Always use soft tabs (2 spaces), never hard tabs.
40 | - Leave a single space after a comma (`,`) character (both in the description and code).
41 | - 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.
42 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Attribution 4.0 International
2 |
3 | =======================================================================
4 |
5 | Creative Commons Corporation ("Creative Commons") is not a law firm and
6 | does not provide legal services or legal advice. Distribution of
7 | Creative Commons public licenses does not create a lawyer-client or
8 | other relationship. Creative Commons makes its licenses and related
9 | information available on an "as-is" basis. Creative Commons gives no
10 | warranties regarding its licenses, any material licensed under their
11 | terms and conditions, or any related information. Creative Commons
12 | disclaims all liability for damages resulting from their use to the
13 | fullest extent possible.
14 |
15 | Using Creative Commons Public Licenses
16 |
17 | Creative Commons public licenses provide a standard set of terms and
18 | conditions that creators and other rights holders may use to share
19 | original works of authorship and other material subject to copyright
20 | and certain other rights specified in the public license below. The
21 | following considerations are for informational purposes only, are not
22 | exhaustive, and do not form part of our licenses.
23 |
24 | Considerations for licensors: Our public licenses are
25 | intended for use by those authorized to give the public
26 | permission to use material in ways otherwise restricted by
27 | copyright and certain other rights. Our licenses are
28 | irrevocable. Licensors should read and understand the terms
29 | and conditions of the license they choose before applying it.
30 | Licensors should also secure all rights necessary before
31 | applying our licenses so that the public can reuse the
32 | material as expected. Licensors should clearly mark any
33 | material not subject to the license. This includes other CC-
34 | licensed material, or material used under an exception or
35 | limitation to copyright. More considerations for licensors:
36 | wiki.creativecommons.org/Considerations_for_licensors
37 |
38 | Considerations for the public: By using one of our public
39 | licenses, a licensor grants the public permission to use the
40 | licensed material under specified terms and conditions. If
41 | the licensor's permission is not necessary for any reason--for
42 | example, because of any applicable exception or limitation to
43 | copyright--then that use is not regulated by the license. Our
44 | licenses grant only permissions under copyright and certain
45 | other rights that a licensor has authority to grant. Use of
46 | the licensed material may still be restricted for other
47 | reasons, including because others have copyright or other
48 | rights in the material. A licensor may make special requests,
49 | such as asking that all changes be marked or described.
50 | Although not required by our licenses, you are encouraged to
51 | respect those requests where reasonable. More considerations
52 | for the public:
53 | wiki.creativecommons.org/Considerations_for_licensees
54 |
55 | =======================================================================
56 |
57 | Creative Commons Attribution 4.0 International Public License
58 |
59 | By exercising the Licensed Rights (defined below), You accept and agree
60 | to be bound by the terms and conditions of this Creative Commons
61 | Attribution 4.0 International Public License ("Public License"). To the
62 | extent this Public License may be interpreted as a contract, You are
63 | granted the Licensed Rights in consideration of Your acceptance of
64 | these terms and conditions, and the Licensor grants You such rights in
65 | consideration of benefits the Licensor receives from making the
66 | Licensed Material available under these terms and conditions.
67 |
68 |
69 | Section 1 -- Definitions.
70 |
71 | a. Adapted Material means material subject to Copyright and Similar
72 | Rights that is derived from or based upon the Licensed Material
73 | and in which the Licensed Material is translated, altered,
74 | arranged, transformed, or otherwise modified in a manner requiring
75 | permission under the Copyright and Similar Rights held by the
76 | Licensor. For purposes of this Public License, where the Licensed
77 | Material is a musical work, performance, or sound recording,
78 | Adapted Material is always produced where the Licensed Material is
79 | synched in timed relation with a moving image.
80 |
81 | b. Adapter's License means the license You apply to Your Copyright
82 | and Similar Rights in Your contributions to Adapted Material in
83 | accordance with the terms and conditions of this Public License.
84 |
85 | c. Copyright and Similar Rights means copyright and/or similar rights
86 | closely related to copyright including, without limitation,
87 | performance, broadcast, sound recording, and Sui Generis Database
88 | Rights, without regard to how the rights are labeled or
89 | categorized. For purposes of this Public License, the rights
90 | specified in Section 2(b)(1)-(2) are not Copyright and Similar
91 | Rights.
92 |
93 | d. Effective Technological Measures means those measures that, in the
94 | absence of proper authority, may not be circumvented under laws
95 | fulfilling obligations under Article 11 of the WIPO Copyright
96 | Treaty adopted on December 20, 1996, and/or similar international
97 | agreements.
98 |
99 | e. Exceptions and Limitations means fair use, fair dealing, and/or
100 | any other exception or limitation to Copyright and Similar Rights
101 | that applies to Your use of the Licensed Material.
102 |
103 | f. Licensed Material means the artistic or literary work, database,
104 | or other material to which the Licensor applied this Public
105 | License.
106 |
107 | g. Licensed Rights means the rights granted to You subject to the
108 | terms and conditions of this Public License, which are limited to
109 | all Copyright and Similar Rights that apply to Your use of the
110 | Licensed Material and that the Licensor has authority to license.
111 |
112 | h. Licensor means the individual(s) or entity(ies) granting rights
113 | under this Public License.
114 |
115 | i. Share means to provide material to the public by any means or
116 | process that requires permission under the Licensed Rights, such
117 | as reproduction, public display, public performance, distribution,
118 | dissemination, communication, or importation, and to make material
119 | available to the public including in ways that members of the
120 | public may access the material from a place and at a time
121 | individually chosen by them.
122 |
123 | j. Sui Generis Database Rights means rights other than copyright
124 | resulting from Directive 96/9/EC of the European Parliament and of
125 | the Council of 11 March 1996 on the legal protection of databases,
126 | as amended and/or succeeded, as well as other essentially
127 | equivalent rights anywhere in the world.
128 |
129 | k. You means the individual or entity exercising the Licensed Rights
130 | under this Public License. Your has a corresponding meaning.
131 |
132 |
133 | Section 2 -- Scope.
134 |
135 | a. License grant.
136 |
137 | 1. Subject to the terms and conditions of this Public License,
138 | the Licensor hereby grants You a worldwide, royalty-free,
139 | non-sublicensable, non-exclusive, irrevocable license to
140 | exercise the Licensed Rights in the Licensed Material to:
141 |
142 | a. reproduce and Share the Licensed Material, in whole or
143 | in part; and
144 |
145 | b. produce, reproduce, and Share Adapted Material.
146 |
147 | 2. Exceptions and Limitations. For the avoidance of doubt, where
148 | Exceptions and Limitations apply to Your use, this Public
149 | License does not apply, and You do not need to comply with
150 | its terms and conditions.
151 |
152 | 3. Term. The term of this Public License is specified in Section
153 | 6(a).
154 |
155 | 4. Media and formats; technical modifications allowed. The
156 | Licensor authorizes You to exercise the Licensed Rights in
157 | all media and formats whether now known or hereafter created,
158 | and to make technical modifications necessary to do so. The
159 | Licensor waives and/or agrees not to assert any right or
160 | authority to forbid You from making technical modifications
161 | necessary to exercise the Licensed Rights, including
162 | technical modifications necessary to circumvent Effective
163 | Technological Measures. For purposes of this Public License,
164 | simply making modifications authorized by this Section 2(a)
165 | (4) never produces Adapted Material.
166 |
167 | 5. Downstream recipients.
168 |
169 | a. Offer from the Licensor -- Licensed Material. Every
170 | recipient of the Licensed Material automatically
171 | receives an offer from the Licensor to exercise the
172 | Licensed Rights under the terms and conditions of this
173 | Public License.
174 |
175 | b. No downstream restrictions. You may not offer or impose
176 | any additional or different terms or conditions on, or
177 | apply any Effective Technological Measures to, the
178 | Licensed Material if doing so restricts exercise of the
179 | Licensed Rights by any recipient of the Licensed
180 | Material.
181 |
182 | 6. No endorsement. Nothing in this Public License constitutes or
183 | may be construed as permission to assert or imply that You
184 | are, or that Your use of the Licensed Material is, connected
185 | with, or sponsored, endorsed, or granted official status by,
186 | the Licensor or others designated to receive attribution as
187 | provided in Section 3(a)(1)(A)(i).
188 |
189 | b. Other rights.
190 |
191 | 1. Moral rights, such as the right of integrity, are not
192 | licensed under this Public License, nor are publicity,
193 | privacy, and/or other similar personality rights; however, to
194 | the extent possible, the Licensor waives and/or agrees not to
195 | assert any such rights held by the Licensor to the limited
196 | extent necessary to allow You to exercise the Licensed
197 | Rights, but not otherwise.
198 |
199 | 2. Patent and trademark rights are not licensed under this
200 | Public License.
201 |
202 | 3. To the extent possible, the Licensor waives any right to
203 | collect royalties from You for the exercise of the Licensed
204 | Rights, whether directly or through a collecting society
205 | under any voluntary or waivable statutory or compulsory
206 | licensing scheme. In all other cases the Licensor expressly
207 | reserves any right to collect such royalties.
208 |
209 |
210 | Section 3 -- License Conditions.
211 |
212 | Your exercise of the Licensed Rights is expressly made subject to the
213 | following conditions.
214 |
215 | a. Attribution.
216 |
217 | 1. If You Share the Licensed Material (including in modified
218 | form), You must:
219 |
220 | a. retain the following if it is supplied by the Licensor
221 | with the Licensed Material:
222 |
223 | i. identification of the creator(s) of the Licensed
224 | Material and any others designated to receive
225 | attribution, in any reasonable manner requested by
226 | the Licensor (including by pseudonym if
227 | designated);
228 |
229 | ii. a copyright notice;
230 |
231 | iii. a notice that refers to this Public License;
232 |
233 | iv. a notice that refers to the disclaimer of
234 | warranties;
235 |
236 | v. a URI or hyperlink to the Licensed Material to the
237 | extent reasonably practicable;
238 |
239 | b. indicate if You modified the Licensed Material and
240 | retain an indication of any previous modifications; and
241 |
242 | c. indicate the Licensed Material is licensed under this
243 | Public License, and include the text of, or the URI or
244 | hyperlink to, this Public License.
245 |
246 | 2. You may satisfy the conditions in Section 3(a)(1) in any
247 | reasonable manner based on the medium, means, and context in
248 | which You Share the Licensed Material. For example, it may be
249 | reasonable to satisfy the conditions by providing a URI or
250 | hyperlink to a resource that includes the required
251 | information.
252 |
253 | 3. If requested by the Licensor, You must remove any of the
254 | information required by Section 3(a)(1)(A) to the extent
255 | reasonably practicable.
256 |
257 | 4. If You Share Adapted Material You produce, the Adapter's
258 | License You apply must not prevent recipients of the Adapted
259 | Material from complying with this Public License.
260 |
261 |
262 | Section 4 -- Sui Generis Database Rights.
263 |
264 | Where the Licensed Rights include Sui Generis Database Rights that
265 | apply to Your use of the Licensed Material:
266 |
267 | a. for the avoidance of doubt, Section 2(a)(1) grants You the right
268 | to extract, reuse, reproduce, and Share all or a substantial
269 | portion of the contents of the database;
270 |
271 | b. if You include all or a substantial portion of the database
272 | contents in a database in which You have Sui Generis Database
273 | Rights, then the database in which You have Sui Generis Database
274 | Rights (but not its individual contents) is Adapted Material; and
275 |
276 | c. You must comply with the conditions in Section 3(a) if You Share
277 | all or a substantial portion of the contents of the database.
278 |
279 | For the avoidance of doubt, this Section 4 supplements and does not
280 | replace Your obligations under this Public License where the Licensed
281 | Rights include other Copyright and Similar Rights.
282 |
283 |
284 | Section 5 -- Disclaimer of Warranties and Limitation of Liability.
285 |
286 | a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
287 | EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
288 | AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
289 | ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
290 | IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
291 | WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
292 | PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
293 | ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
294 | KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
295 | ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
296 |
297 | b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
298 | TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
299 | NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
300 | INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
301 | COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
302 | USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
303 | ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
304 | DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
305 | IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
306 |
307 | c. The disclaimer of warranties and limitation of liability provided
308 | above shall be interpreted in a manner that, to the extent
309 | possible, most closely approximates an absolute disclaimer and
310 | waiver of all liability.
311 |
312 |
313 | Section 6 -- Term and Termination.
314 |
315 | a. This Public License applies for the term of the Copyright and
316 | Similar Rights licensed here. However, if You fail to comply with
317 | this Public License, then Your rights under this Public License
318 | terminate automatically.
319 |
320 | b. Where Your right to use the Licensed Material has terminated under
321 | Section 6(a), it reinstates:
322 |
323 | 1. automatically as of the date the violation is cured, provided
324 | it is cured within 30 days of Your discovery of the
325 | violation; or
326 |
327 | 2. upon express reinstatement by the Licensor.
328 |
329 | For the avoidance of doubt, this Section 6(b) does not affect any
330 | right the Licensor may have to seek remedies for Your violations
331 | of this Public License.
332 |
333 | c. For the avoidance of doubt, the Licensor may also offer the
334 | Licensed Material under separate terms or conditions or stop
335 | distributing the Licensed Material at any time; however, doing so
336 | will not terminate this Public License.
337 |
338 | d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
339 | License.
340 |
341 |
342 | Section 7 -- Other Terms and Conditions.
343 |
344 | a. The Licensor shall not be bound by any additional or different
345 | terms or conditions communicated by You unless expressly agreed.
346 |
347 | b. Any arrangements, understandings, or agreements regarding the
348 | Licensed Material not stated herein are separate from and
349 | independent of the terms and conditions of this Public License.
350 |
351 |
352 | Section 8 -- Interpretation.
353 |
354 | a. For the avoidance of doubt, this Public License does not, and
355 | shall not be interpreted to, reduce, limit, restrict, or impose
356 | conditions on any use of the Licensed Material that could lawfully
357 | be made without permission under this Public License.
358 |
359 | b. To the extent possible, if any provision of this Public License is
360 | deemed unenforceable, it shall be automatically reformed to the
361 | minimum extent necessary to make it enforceable. If the provision
362 | cannot be reformed, it shall be severed from this Public License
363 | without affecting the enforceability of the remaining terms and
364 | conditions.
365 |
366 | c. No term or condition of this Public License will be waived and no
367 | failure to comply consented to unless expressly agreed to by the
368 | Licensor.
369 |
370 | d. Nothing in this Public License constitutes or may be interpreted
371 | as a limitation upon, or waiver of, any privileges and immunities
372 | that apply to the Licensor or You, including from the legal
373 | processes of any jurisdiction or authority.
374 |
375 |
376 | =======================================================================
377 |
378 | Creative Commons is not a party to its public
379 | licenses. Notwithstanding, Creative Commons may elect to apply one of
380 | its public licenses to material it publishes and in those instances
381 | will be considered the “Licensor.” The text of the Creative Commons
382 | public licenses is dedicated to the public domain under the CC0 Public
383 | Domain Dedication. Except for the limited purpose of indicating that
384 | material is shared under a Creative Commons public license or as
385 | otherwise permitted by the Creative Commons policies published at
386 | creativecommons.org/policies, Creative Commons does not authorize the
387 | use of the trademark "Creative Commons" or any other trademark or logo
388 | of Creative Commons without its prior written consent including,
389 | without limitation, in connection with any unauthorized modifications
390 | to any of its public licenses or any other arrangements,
391 | understandings, or agreements concerning use of licensed material. For
392 | the avoidance of doubt, this paragraph does not form part of the
393 | public licenses.
394 |
395 | Creative Commons may be contacted at creativecommons.org.
396 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | > **IMPORTANT NOTICE:**
2 | >
3 | > 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).
4 | >
5 | > Please watch, star and follow relevant activity there.
6 |
7 | [](https://30secondsofcode.org/css/p/1)
8 |
9 | # 30 seconds of code
10 |
11 | > Short CSS code snippets for all your development needs
12 |
13 | * Visit [our website](https://30secondsofcode.org) to view our snippet collection.
14 | * 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.
15 | * 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.
16 | * Click on each snippet card to view the whole snippet, including code, explanation and examples.
17 | * You can use the button at the bottom of a snippet card to view the snippet in Codepen.
18 | * If you like the project, give it a star. It means a lot to the people maintaining it.
19 |
20 | ## Want to contribute?
21 |
22 | * If you want to help us improve, take a minute to read the [Contribution Guidelines](/CONTRIBUTING.md) first.
23 | * Use the [Snippet Template](/snippet-template.md) to add new snippets to the collection.
24 | * If you find a problem with a specific snippet, please [open an issue](https://github.com/30-seconds/30-seconds-of-css/issues/new).
25 | * 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).
26 |
27 | ## Credits
28 |
29 | * This repository is maintained by the [30 seconds of code organization on GitHub](https://github.com/30-seconds).
30 | * All snippets are licensed under the CC-BY-4.0 License, unless explicitly stated otherwise.
31 | * Logos, names and trademarks are not to be used without the explicit consent of the owners of the 30 seconds of code GitHub organization.
32 | * Our website is powered by [Netlify](https://www.netlify.com/), [Next.js](https://nextjs.org/) & [GitHub](https://github.com/).
33 |
--------------------------------------------------------------------------------
/languageFix.css:
--------------------------------------------------------------------------------
1 | /* This file is here only to tag the repository language. Do not delete, please! */
2 | html {
3 | margin: 0;
4 | }
5 |
--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chalarangelo/30-seconds-of-css/445f22efcc964bd0f2a0097cefcb12e1547c23af/logo.png
--------------------------------------------------------------------------------
/snippet-template.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Snippet Name
3 | type: snippet
4 | tags: [other]
5 | cover: image
6 | dateModified: 2021-06-13T05:00:00-04:00
7 | ---
8 |
9 | Explain briefly what the snippet does.
10 |
11 | - Explain briefly how the snippet works.
12 | - Use bullet points for your snippet's explanation.
13 | - Try to explain everything briefly but clearly.
14 |
15 | ```html
16 |
17 | ```
18 |
19 | ```css
20 | .my-snippet {
21 | background-color: #fff;
22 | border: 1px solid #000;
23 | border-radius: 4px;
24 | }
25 | ```
26 |
27 | ```js
28 | console.log(
29 | "This is optional, if your snippet doesn't require JavaScript, be sure to delete this block!"
30 | )
31 | ```
32 |
--------------------------------------------------------------------------------
/snippets/aspect-ratio.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Aspect ratio
3 | type: snippet
4 | tags: [layout]
5 | author: chalarangelo
6 | cover: digital-nomad-12
7 | dateModified: 2022-08-14T05:00:00-04:00
8 | ---
9 |
10 | Creates a responsive container with a specified aspect ratio.
11 |
12 | - Use a CSS custom property, `--aspect-ratio` to define the desired aspect ratio.
13 | - Set the container element to `position: relative` and `height: 0`, calculating its height using the `calc()` function and the `--aspect-ratio` custom property.
14 | - 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.
15 |
16 | ```html
17 |
18 |
19 |
20 | ```
21 |
22 | ```css
23 | .container {
24 | --aspect-ratio: 16/9;
25 | position: relative;
26 | height: 0;
27 | padding-bottom: calc(100% / (var(--aspect-ratio)));
28 | }
29 |
30 | .container > * {
31 | position: absolute;
32 | top: 0;
33 | left: 0;
34 | width: 100%;
35 | height: 100%;
36 | object-fit: cover;
37 | }
38 | ```
39 |
--------------------------------------------------------------------------------
/snippets/border-with-top-triangle.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Border with top triangle
3 | type: snippet
4 | tags: [visual]
5 | cover: greek-coffee
6 | dateModified: 2021-01-07T23:52:15+02:00
7 | ---
8 |
9 | Creates a content container with a triangle at the top.
10 |
11 | - Use the `::before` and `::after` pseudo-elements to create two triangles.
12 | - The colors of the two triangles should be the same as the container's `border-color` and the container's `background-color` respectively.
13 | - The `border-width` of the one triangle (`::before`) should be `1px` wider than the other one (`::after`), in order to act as the border.
14 | - The smaller triangle (`::after`) should be `1px` to the right of the larger triangle (`::before`) to allow for its left border to be shown.
15 |
16 | ```html
17 |
Border with top triangle
18 | ```
19 |
20 | ```css
21 | .container {
22 | position: relative;
23 | background: #ffffff;
24 | padding: 15px;
25 | border: 1px solid #dddddd;
26 | margin-top: 20px;
27 | }
28 |
29 | .container::before,
30 | .container::after {
31 | content: '';
32 | position: absolute;
33 | bottom: 100%;
34 | left: 19px;
35 | border: 11px solid transparent;
36 | border-bottom-color: #dddddd;
37 | }
38 |
39 | .container::after {
40 | left: 20px;
41 | border: 10px solid transparent;
42 | border-bottom-color: #ffffff;
43 | }
44 | ```
45 |
--------------------------------------------------------------------------------
/snippets/bouncing-loader.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Bouncing loader
3 | type: snippet
4 | tags: [animation]
5 | cover: digital-nomad-12
6 | dateModified: 2021-10-11T18:44:51+03:00
7 | ---
8 |
9 | Creates a bouncing loader animation.
10 |
11 | - 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.
12 | - Create a parent container, `.bouncing-loader`, for the bouncing circles. Use `display: flex` and `justify-content: center` to position them in the center.
13 | - Give the three bouncing circle `
` elements the same `width` and `height` and `border-radius: 50%` to make them circular.
14 | - Apply the `bouncing-loader` animation to each of the three bouncing circles.
15 | - Use a different `animation-delay` for each circle and `animation-direction: alternate` to create the appropriate effect.
16 |
17 | ```html
18 |
19 |
20 |
21 |
22 |
23 | ```
24 |
25 | ```css
26 | @keyframes bouncing-loader {
27 | to {
28 | opacity: 0.1;
29 | transform: translate3d(0, -16px, 0);
30 | }
31 | }
32 |
33 | .bouncing-loader {
34 | display: flex;
35 | justify-content: center;
36 | }
37 |
38 | .bouncing-loader > div {
39 | width: 16px;
40 | height: 16px;
41 | margin: 3rem 0.2rem;
42 | background: #8385aa;
43 | border-radius: 50%;
44 | animation: bouncing-loader 0.6s infinite alternate;
45 | }
46 |
47 | .bouncing-loader > div:nth-child(2) {
48 | animation-delay: 0.2s;
49 | }
50 |
51 | .bouncing-loader > div:nth-child(3) {
52 | animation-delay: 0.4s;
53 | }
54 | ```
55 |
--------------------------------------------------------------------------------
/snippets/box-sizing-reset.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Box-sizing reset
3 | type: snippet
4 | tags: [layout]
5 | cover: interior
6 | dateModified: 2020-12-30T15:37:37+02:00
7 | ---
8 |
9 | Resets the box-model so that `width` and `height` are not affected by `border` or `padding`.
10 |
11 | - Use `box-sizing: border-box` to include the width and height of `padding` and `border` when calculating the element's `width` and `height`.
12 | - Use `box-sizing: inherit` to pass down the `box-sizing` property from parent to child elements.
13 |
14 | ```html
15 |
border-box
16 |
content-box
17 | ```
18 |
19 | ```css
20 | div {
21 | box-sizing: border-box;
22 | }
23 |
24 | *,
25 | *::before,
26 | *::after {
27 | box-sizing: inherit;
28 | }
29 |
30 | .box {
31 | display: inline-block;
32 | width: 120px;
33 | height: 120px;
34 | padding: 8px;
35 | margin: 8px;
36 | background: #F24333;
37 | color: white;
38 | border: 1px solid #BA1B1D;
39 | border-radius: 4px;
40 | }
41 |
42 | .content-box {
43 | box-sizing: content-box;
44 | }
45 | ```
46 |
--------------------------------------------------------------------------------
/snippets/broken-image-fallback.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Fallback for images that fail to load
3 | type: snippet
4 | shortTitle: Broken image fallback
5 | tags: [visual]
6 | author: chalarangelo
7 | cover: building-facade
8 | dateModified: 2022-11-04T05:00:00-04:00
9 | ---
10 |
11 | Displays an error message when an image fails to load.
12 |
13 | - Apply styles to the `img` element as if it was a text container.
14 | - 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.
15 |
16 | ```html
17 |
18 | ```
19 |
20 | ```css
21 | img {
22 | display: block;
23 | font-family: sans-serif;
24 | font-weight: 300;
25 | height: auto;
26 | line-height: 2;
27 | position: relative;
28 | text-align: center;
29 | width: 100%;
30 | }
31 |
32 | img::before {
33 | content: "Sorry, this image is unavailable.";
34 | display: block;
35 | margin-bottom: 8px;
36 | }
37 |
38 | img::after {
39 | content: "(url: " attr(src) ")";
40 | display: block;
41 | font-size: 12px;
42 | }
43 | ```
44 |
--------------------------------------------------------------------------------
/snippets/button-border-animation.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Button border animation
3 | type: snippet
4 | tags: [animation]
5 | cover: highlands
6 | dateModified: 2021-05-24T15:28:52+03:00
7 | ---
8 |
9 | Creates a border animation on hover.
10 |
11 | - Use the `::before` and `::after` pseudo-elements to create two boxes `24px` wide opposite each other above and below the box.
12 | - Use the `:hover` pseudo-class to extend the `width` of those elements to `100%` on hover and animate the change using `transition`.
13 |
14 | ```html
15 |
16 | ```
17 |
18 | ```css
19 | .animated-border-button {
20 | background-color: #263059;
21 | border: none;
22 | color: #ffffff;
23 | outline: none;
24 | padding: 12px 40px 10px;
25 | position: relative;
26 | }
27 |
28 | .animated-border-button::before,
29 | .animated-border-button::after {
30 | border: 0 solid transparent;
31 | transition: all 0.3s;
32 | content: '';
33 | height: 0;
34 | position: absolute;
35 | width: 24px;
36 | }
37 |
38 | .animated-border-button::before {
39 | border-top: 2px solid #263059;
40 | right: 0;
41 | top: -4px;
42 | }
43 |
44 | .animated-border-button::after {
45 | border-bottom: 2px solid #263059;
46 | bottom: -4px;
47 | left: 0;
48 | }
49 |
50 | .animated-border-button:hover::before,
51 | .animated-border-button:hover::after {
52 | width: 100%;
53 | }
54 | ```
55 |
--------------------------------------------------------------------------------
/snippets/button-focus-swing-animation.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Button swing animation
3 | type: snippet
4 | tags: [animation]
5 | author: chalarangelo
6 | cover: painters-desk
7 | dateModified: 2021-05-24T15:28:52+03:00
8 | ---
9 |
10 | Creates a swing animation on focus.
11 |
12 | - Use an appropriate `transition` to animate changes to the element.
13 | - Use the `:focus` pseudo-class to apply an `animation` that uses `transform` to make the element swing.
14 | - Use `animation-iteration-count` to only play the animation once.
15 |
16 | ```html
17 |
18 | ```
19 |
20 | ```css
21 | .button-swing {
22 | color: #65b5f6;
23 | background-color: transparent;
24 | border: 1px solid #65b5f6;
25 | border-radius: 4px;
26 | padding: 0 16px;
27 | cursor: pointer;
28 | transition: all 0.2s ease-in-out;
29 | }
30 |
31 | .button-swing:focus {
32 | animation: swing 1s ease;
33 | animation-iteration-count: 1;
34 | }
35 |
36 | @keyframes swing {
37 | 15% {
38 | transform: translateX(5px);
39 | }
40 | 30% {
41 | transform: translateX(-5px);
42 | }
43 | 50% {
44 | transform: translateX(3px);
45 | }
46 | 65% {
47 | transform: translateX(-3px);
48 | }
49 | 80% {
50 | transform: translateX(2px);
51 | }
52 | 100% {
53 | transform: translateX(0);
54 | }
55 | }
56 | ```
57 |
--------------------------------------------------------------------------------
/snippets/button-hover-fill-animation.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Button fill animation
3 | type: snippet
4 | tags: [animation]
5 | cover: beach-pineapple
6 | dateModified: 2021-04-02T21:34:43+03:00
7 | ---
8 |
9 | Creates a fill animation on hover.
10 |
11 | - Set a `color` and `background` and use an appropriate `transition` to animate changes to the element.
12 | - Use the `:hover` pseudo-class to change the `background` and `color` of the element when the user hovers over it.
13 |
14 | ```html
15 |
16 | ```
17 |
18 | ```css
19 | .animated-fill-button {
20 | padding: 20px;
21 | background: #fff;
22 | color: #000;
23 | border: 1px solid #000;
24 | cursor: pointer;
25 | transition: 0.3s all ease-in-out;
26 | }
27 |
28 | .animated-fill-button:hover {
29 | background: #000;
30 | color: #fff;
31 | }
32 | ```
33 |
--------------------------------------------------------------------------------
/snippets/button-hover-grow-animation.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Button grow animation
3 | type: snippet
4 | tags: [animation]
5 | author: chalarangelo
6 | cover: white-laptop
7 | dateModified: 2021-05-24T15:28:52+03:00
8 | ---
9 |
10 | Creates a grow animation on hover.
11 |
12 | - Use an appropriate `transition` to animate changes to the element.
13 | - Use the `:hover` pseudo-class to change the `transform` to `scale(1.1)`, growing the element when the user hovers over it.
14 |
15 | ```html
16 |
17 | ```
18 |
19 | ```css
20 | .button-grow {
21 | color: #65b5f6;
22 | background-color: transparent;
23 | border: 1px solid #65b5f6;
24 | border-radius: 4px;
25 | padding: 0 16px;
26 | cursor: pointer;
27 | transition: all 0.3s ease-in-out;
28 | }
29 |
30 | .button-grow:hover {
31 | transform: scale(1.1);
32 | }
33 | ```
34 |
--------------------------------------------------------------------------------
/snippets/button-hover-shrink-animation.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Button shrink animation
3 | type: snippet
4 | tags: [animation]
5 | author: chalarangelo
6 | cover: clay-pot-horizon
7 | dateModified: 2021-05-24T15:28:52+03:00
8 | ---
9 |
10 | Creates a shrink animation on hover.
11 |
12 | - Use an appropriate `transition` to animate changes to the element.
13 | - Use the `:hover` pseudo-class to change the `transform` to `scale(0.8)`, shrinking the element when the user hovers over it.
14 |
15 | ```html
16 |
17 | ```
18 |
19 | ```css
20 | .button-shrink {
21 | color: #65b5f6;
22 | background-color: transparent;
23 | border: 1px solid #65b5f6;
24 | border-radius: 4px;
25 | padding: 0 16px;
26 | cursor: pointer;
27 | transition: all 0.3s ease-in-out;
28 | }
29 |
30 | .button-shrink:hover {
31 | transform: scale(0.8);
32 | }
33 | ```
34 |
--------------------------------------------------------------------------------
/snippets/card-image-cutout.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Card with image cutout
3 | type: snippet
4 | tags: [visual]
5 | author: chalarangelo
6 | cover: radio-monstera
7 | dateModified: 2022-12-11T05:00:00-04:00
8 | ---
9 |
10 | Creates a card with an image cutout.
11 |
12 | - Use `background` to add a colored background to a `.container` element.
13 | - Create a `.card` containing a `figure` with the appropriate image for the cutout and any other content you want.
14 | - 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`.
15 |
16 | ```html
17 |
18 |
19 |
20 |
21 |
22 |
Lorem ipsum dolor sit amet consectetur adipisicing elit.
23 |
24 |
25 | ```
26 |
27 | ```css
28 | .container {
29 | display: flex;
30 | padding: 96px 24px 48px;
31 | justify-content: center;
32 | align-items: center;
33 | background: #f3f1fe;
34 | }
35 |
36 | .card {
37 | width: 350px;
38 | display: flex;
39 | flex-direction: column;
40 | align-items: center;
41 | background: #fff;
42 | border-radius: 10px;
43 | margin: 8px;
44 | box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.1);
45 | }
46 |
47 | .card figure {
48 | width: 120px;
49 | height: 120px;
50 | border-radius: 50%;
51 | margin-top: -60px;
52 | position: relative;
53 | }
54 |
55 | .card figure::before {
56 | content: "";
57 | border-radius: inherit;
58 | position: absolute;
59 | top: 50%;
60 | left: 50%;
61 | width: 100%;
62 | height: 100%;
63 | transform: translate(-50%, -50%);
64 | border: 1rem solid #f3f1fe;
65 | box-shadow: 0 1px rgba(0, 0, 0, 0.1);
66 | }
67 |
68 | .card figure img {
69 | border-radius: inherit;
70 | width: 100%;
71 | height: 100%;
72 | object-fit: cover;
73 | }
74 |
75 | .card .content {
76 | text-align: center;
77 | margin: 2rem;
78 | line-height: 1.5;
79 | color: #101010;
80 | }
81 | ```
82 |
--------------------------------------------------------------------------------
/snippets/checkerboard-pattern.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Checkerboard background pattern
3 | type: snippet
4 | tags: [visual]
5 | cover: digital-nomad-2
6 | dateModified: 2021-10-13T19:29:39+02:00
7 | ---
8 |
9 | Creates a checkerboard background pattern.
10 |
11 | - Use `background-color` to set a white background.
12 | - Use `background-image` with two `linear-gradient()` values. Give each one a different angle to create the checkerboard pattern.
13 | - Use `background-size` to specify the pattern's size.
14 | - **Note:** The fixed `height` and `width` of the element is for demonstration purposes only.
15 |
16 | ```html
17 |
18 | ```
19 |
20 | ```css
21 | .checkerboard {
22 | width: 240px;
23 | height: 240px;
24 | background-color: #fff;
25 | background-image: linear-gradient(
26 | 45deg,
27 | #000 25%,
28 | transparent 25%,
29 | transparent 75%,
30 | #000 75%,
31 | #000
32 | ),
33 | linear-gradient(
34 | -45deg,
35 | #000 25%,
36 | transparent 25%,
37 | transparent 75%,
38 | #000 75%,
39 | #000
40 | );
41 | background-size: 60px 60px;
42 | background-repeat: repeat;
43 | }
44 | ```
45 |
--------------------------------------------------------------------------------
/snippets/circle.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Circle
3 | type: snippet
4 | tags: [visual]
5 | cover: oven-paddle
6 | dateModified: 2020-12-30T15:37:37+02:00
7 | ---
8 |
9 | Creates a circular shape with pure CSS.
10 |
11 | - Use `border-radius: 50%` to curve the borders of the element to create a circle.
12 | - 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.
13 |
14 | ```html
15 |
16 | ```
17 |
18 | ```css
19 | .circle {
20 | border-radius: 50%;
21 | width: 32px;
22 | height: 32px;
23 | background: #9C27B0;
24 | }
25 | ```
26 |
--------------------------------------------------------------------------------
/snippets/clearfix.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Clearfix
3 | type: snippet
4 | tags: [layout]
5 | cover: memories-of-pineapple-3
6 | dateModified: 2020-12-30T15:37:37+02:00
7 | ---
8 |
9 | Ensures that an element self-clears its children.
10 |
11 | - Use the `::after` pseudo-element and apply `content: ''` to allow it to affect layout.
12 | - Use `clear: both` to make the element clear past both left and right floats.
13 | - 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).
14 | - **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.
15 |
16 | ```html
17 |
18 |
float a
19 |
float b
20 |
float c
21 |
22 | ```
23 |
24 | ```css
25 | .clearfix::after {
26 | content: '';
27 | display: block;
28 | clear: both;
29 | }
30 |
31 | .floated {
32 | float: left;
33 | padding: 4px;
34 | }
35 | ```
36 |
--------------------------------------------------------------------------------
/snippets/constant-width-to-height-ratio.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Constant width to height ratio
3 | type: snippet
4 | tags: [layout]
5 | cover: clutter
6 | dateModified: 2020-12-30T15:37:37+02:00
7 | ---
8 |
9 | Ensures that an element with variable `width` will retain a proportionate `height` value.
10 |
11 | - Apply `padding-top` on the `::before` pseudo-element, making the `height` of the element equal to a percentage of its `width`.
12 | - 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).
13 |
14 | ```html
15 |
16 | ```
17 |
18 | ```css
19 | .constant-width-to-height-ratio {
20 | background: #9C27B0;
21 | width: 50%;
22 | }
23 |
24 | .constant-width-to-height-ratio::before {
25 | content: '';
26 | padding-top: 100%;
27 | float: left;
28 | }
29 |
30 | .constant-width-to-height-ratio::after {
31 | content: '';
32 | display: block;
33 | clear: both;
34 | }
35 | ```
36 |
--------------------------------------------------------------------------------
/snippets/counter.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Counter
3 | type: snippet
4 | tags: [visual]
5 | cover: laptop-plants
6 | dateModified: 2020-12-30T15:37:37+02:00
7 | ---
8 |
9 | Creates a custom list counter that accounts for nested list elements.
10 |
11 | - Use `counter-reset` to initialize a variable counter (default `0`), the name of which is the value of the attribute (i.e. `counter`).
12 | - Use `counter-increment` on the variable counter for each countable element (i.e. each `
`).
13 | - 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.
14 |
15 | ```html
16 |
18 | ```
19 |
20 | ```css
21 | img {
22 | display: block;
23 | font-family: sans-serif;
24 | font-weight: 300;
25 | height: auto;
26 | line-height: 2;
27 | position: relative;
28 | text-align: center;
29 | width: 100%;
30 | }
31 |
32 | img::before {
33 | content: "Sorry, this image is unavailable.";
34 | display: block;
35 | margin-bottom: 8px;
36 | }
37 |
38 | img::after {
39 | content: "(url: " attr(src) ")";
40 | display: block;
41 | font-size: 12px;
42 | }
43 | ```
44 |
--------------------------------------------------------------------------------
/snippets/button-border-animation.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Button border animation
3 | type: snippet
4 | tags: [animation]
5 | cover: highlands
6 | dateModified: 2021-05-24T15:28:52+03:00
7 | ---
8 |
9 | Creates a border animation on hover.
10 |
11 | - Use the `::before` and `::after` pseudo-elements to create two boxes `24px` wide opposite each other above and below the box.
12 | - Use the `:hover` pseudo-class to extend the `width` of those elements to `100%` on hover and animate the change using `transition`.
13 |
14 | ```html
15 |
16 | ```
17 |
18 | ```css
19 | .animated-border-button {
20 | background-color: #263059;
21 | border: none;
22 | color: #ffffff;
23 | outline: none;
24 | padding: 12px 40px 10px;
25 | position: relative;
26 | }
27 |
28 | .animated-border-button::before,
29 | .animated-border-button::after {
30 | border: 0 solid transparent;
31 | transition: all 0.3s;
32 | content: '';
33 | height: 0;
34 | position: absolute;
35 | width: 24px;
36 | }
37 |
38 | .animated-border-button::before {
39 | border-top: 2px solid #263059;
40 | right: 0;
41 | top: -4px;
42 | }
43 |
44 | .animated-border-button::after {
45 | border-bottom: 2px solid #263059;
46 | bottom: -4px;
47 | left: 0;
48 | }
49 |
50 | .animated-border-button:hover::before,
51 | .animated-border-button:hover::after {
52 | width: 100%;
53 | }
54 | ```
55 |
--------------------------------------------------------------------------------
/snippets/button-focus-swing-animation.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Button swing animation
3 | type: snippet
4 | tags: [animation]
5 | author: chalarangelo
6 | cover: painters-desk
7 | dateModified: 2021-05-24T15:28:52+03:00
8 | ---
9 |
10 | Creates a swing animation on focus.
11 |
12 | - Use an appropriate `transition` to animate changes to the element.
13 | - Use the `:focus` pseudo-class to apply an `animation` that uses `transform` to make the element swing.
14 | - Use `animation-iteration-count` to only play the animation once.
15 |
16 | ```html
17 |
18 | ```
19 |
20 | ```css
21 | .button-swing {
22 | color: #65b5f6;
23 | background-color: transparent;
24 | border: 1px solid #65b5f6;
25 | border-radius: 4px;
26 | padding: 0 16px;
27 | cursor: pointer;
28 | transition: all 0.2s ease-in-out;
29 | }
30 |
31 | .button-swing:focus {
32 | animation: swing 1s ease;
33 | animation-iteration-count: 1;
34 | }
35 |
36 | @keyframes swing {
37 | 15% {
38 | transform: translateX(5px);
39 | }
40 | 30% {
41 | transform: translateX(-5px);
42 | }
43 | 50% {
44 | transform: translateX(3px);
45 | }
46 | 65% {
47 | transform: translateX(-3px);
48 | }
49 | 80% {
50 | transform: translateX(2px);
51 | }
52 | 100% {
53 | transform: translateX(0);
54 | }
55 | }
56 | ```
57 |
--------------------------------------------------------------------------------
/snippets/button-hover-fill-animation.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Button fill animation
3 | type: snippet
4 | tags: [animation]
5 | cover: beach-pineapple
6 | dateModified: 2021-04-02T21:34:43+03:00
7 | ---
8 |
9 | Creates a fill animation on hover.
10 |
11 | - Set a `color` and `background` and use an appropriate `transition` to animate changes to the element.
12 | - Use the `:hover` pseudo-class to change the `background` and `color` of the element when the user hovers over it.
13 |
14 | ```html
15 |
16 | ```
17 |
18 | ```css
19 | .animated-fill-button {
20 | padding: 20px;
21 | background: #fff;
22 | color: #000;
23 | border: 1px solid #000;
24 | cursor: pointer;
25 | transition: 0.3s all ease-in-out;
26 | }
27 |
28 | .animated-fill-button:hover {
29 | background: #000;
30 | color: #fff;
31 | }
32 | ```
33 |
--------------------------------------------------------------------------------
/snippets/button-hover-grow-animation.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Button grow animation
3 | type: snippet
4 | tags: [animation]
5 | author: chalarangelo
6 | cover: white-laptop
7 | dateModified: 2021-05-24T15:28:52+03:00
8 | ---
9 |
10 | Creates a grow animation on hover.
11 |
12 | - Use an appropriate `transition` to animate changes to the element.
13 | - Use the `:hover` pseudo-class to change the `transform` to `scale(1.1)`, growing the element when the user hovers over it.
14 |
15 | ```html
16 |
17 | ```
18 |
19 | ```css
20 | .button-grow {
21 | color: #65b5f6;
22 | background-color: transparent;
23 | border: 1px solid #65b5f6;
24 | border-radius: 4px;
25 | padding: 0 16px;
26 | cursor: pointer;
27 | transition: all 0.3s ease-in-out;
28 | }
29 |
30 | .button-grow:hover {
31 | transform: scale(1.1);
32 | }
33 | ```
34 |
--------------------------------------------------------------------------------
/snippets/button-hover-shrink-animation.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Button shrink animation
3 | type: snippet
4 | tags: [animation]
5 | author: chalarangelo
6 | cover: clay-pot-horizon
7 | dateModified: 2021-05-24T15:28:52+03:00
8 | ---
9 |
10 | Creates a shrink animation on hover.
11 |
12 | - Use an appropriate `transition` to animate changes to the element.
13 | - Use the `:hover` pseudo-class to change the `transform` to `scale(0.8)`, shrinking the element when the user hovers over it.
14 |
15 | ```html
16 |
17 | ```
18 |
19 | ```css
20 | .button-shrink {
21 | color: #65b5f6;
22 | background-color: transparent;
23 | border: 1px solid #65b5f6;
24 | border-radius: 4px;
25 | padding: 0 16px;
26 | cursor: pointer;
27 | transition: all 0.3s ease-in-out;
28 | }
29 |
30 | .button-shrink:hover {
31 | transform: scale(0.8);
32 | }
33 | ```
34 |
--------------------------------------------------------------------------------
/snippets/card-image-cutout.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Card with image cutout
3 | type: snippet
4 | tags: [visual]
5 | author: chalarangelo
6 | cover: radio-monstera
7 | dateModified: 2022-12-11T05:00:00-04:00
8 | ---
9 |
10 | Creates a card with an image cutout.
11 |
12 | - Use `background` to add a colored background to a `.container` element.
13 | - Create a `.card` containing a `figure` with the appropriate image for the cutout and any other content you want.
14 | - 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`.
15 |
16 | ```html
17 |