andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update snippets

Browse Source
This commit is contained in:
Angelos Chalaris
2020-04-20 13:05:10 +03:00
parent 2d1f637692
commit d35dab24c3
10 changed files with 43 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
snippets/display-table-centering.md
View File

@ -33,14 +33,11 @@ Vertically and horizontally centers a child element within its parent element us
#### Explanation #### Explanation
1. `display: table` on '.center' allows the element to behave like a `<table>` HTML element. - `display: table` on '.center' allows the element to behave like a `<table>` HTML element.
2. 100% height and width on '.center' allows the element to fill the available space within its parent element. - 100% height and width on '.center' allows the element to fill the available space within its parent element.
3. `display: table-cell` on '.center > span' allows the element to behave like an <td> HTML element. - `display: table-cell` on '.center > span' allows the element to behave like an <td> HTML element.
4. `text-align: center` on '.center > span' centers the child element horizontally. - `text-align: center` on '.center > span' centers the child element horizontally.
5. `vertical-align: middle` on '.center > span' centers the child element vertically. - `vertical-align: middle` on '.center > span' centers the child element vertically.
- The outer parent ('.container' in this case) must have a fixed height and width. - The outer parent ('.container' in this case) must have a fixed height and width.
#### Browser support #### Browser support
- https://caniuse.com/#search=display%3A%20table

3
snippets/donut-spinner.md
View File

@ -35,6 +35,3 @@ Creates a donut spinner that can be used to indicate the loading of content.
- Use a semi-transparent `border` for the whole element, except one side that will serve as the loading indicator for the donut. Use `animation` to rotate the element. - Use a semi-transparent `border` for the whole element, except one side that will serve as the loading indicator for the donut. Use `animation` to rotate the element.
#### Browser support #### Browser support
- https://caniuse.com/#feat=css-animation
- https://caniuse.com/#feat=transforms2d

2
snippets/drop-cap.md
View File

@ -26,5 +26,3 @@ p:first-child::first-letter {
- Use the `::first-letter` pseudo-element to style the first element of the paragraph, 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, use the `:first-child` selector to select only the first paragraph.
#### Browser support #### Browser support
- https://caniuse.com/#feat=first-letter

24
snippets/dynamic-shadow.md
View File

@ -18,7 +18,7 @@ Creates a shadow similar to `box-shadow` but based on the colors of the element
z-index: 1; z-index: 1;
} }
.dynamic-shadow::after { .dynamic-shadow:after {
content: ''; content: '';
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -33,17 +33,15 @@ Creates a shadow similar to `box-shadow` but based on the colors of the element
#### Explanation #### Explanation
1. `position: relative` on the element establishes a Cartesian positioning context for psuedo-elements. - `position: relative` on the element establishes a Cartesian positioning context for psuedo-elements.
2. `z-index: 1` establishes a new stacking context. - `z-index: 1` establishes a new stacking context.
3. `::after` defines a pseudo-element. - `:after` defines a pseudo-element.
4. `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent. - `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.
5. `width: 100%` and `height: 100%` sizes the pseudo-element to fill its parent's dimensions, making it equal in size. - `width: 100%` and `height: 100%` sizes the pseudo-element to fill its parent's dimensions, making it equal in size.
6. `background: inherit` causes the pseudo-element to inherit the linear gradient specified on the element. - `background: inherit` causes the pseudo-element to inherit the linear gradient specified on the element.
7. `top: 0.5rem` offsets the pseudo-element down slightly from its parent. - `top: 0.5rem` offsets the pseudo-element down slightly from its parent.
8. `filter: blur(0.4rem)` will blur the pseudo-element to create the appearance of a shadow underneath. - `filter: blur(0.4rem)` will blur the pseudo-element to create the appearance of a shadow underneath.
9. `opacity: 0.7` makes the pseudo-element partially transparent. - `opacity: 0.7` makes the pseudo-element partially transparent.
10. `z-index: -1` positions the pseudo-element behind the parent but in front of the background. - `z-index: -1` positions the pseudo-element behind the parent but in front of the background.
#### Browser support #### Browser support
- https://caniuse.com/#feat=css-filters

2
snippets/etched-text.md
View File

@ -25,5 +25,3 @@ Creates an effect where text appears to be "etched" or engraved into the backgro
- The text color should be slightly faded to make it look like it's engraved/carved out of the background. - The text color should be slightly faded to make it look like it's engraved/carved out of the background.
#### Browser support #### Browser support
- https://caniuse.com/#feat=css-textshadow

2
snippets/evenly-distributed-children.md
View File

@ -28,5 +28,3 @@ Evenly distributes child elements within a parent element.
_Note: Alternatively, use `justify-content: space-around` to distribute the children with space around them, rather than between them._ _Note: Alternatively, use `justify-content: space-around` to distribute the children with space around them, rather than between them._
#### Browser support #### Browser support
- https://caniuse.com/#feat=flexbox

4
snippets/fit-image-in-container.md
View File

@ -1,6 +1,6 @@
--- ---
title: Fit image in container title: Fit image in container
tags: layout, visual tags: layout,visual,intermediate
--- ---
Changes the fit and position of an image within its container while preserving its aspect ratio. Previously only possible using a background image and the `background-size` property. Changes the fit and position of an image within its container while preserving its aspect ratio. Previously only possible using a background image and the `background-size` property.
@ -36,5 +36,3 @@ Changes the fit and position of an image within its container while preserving i
- `object-position: [x] [y]` positions the image within the container. - `object-position: [x] [y]` positions the image within the container.
#### Browser support #### Browser support
- https://caniuse.com/#feat=object-fit

12
snippets/flexbox-centering.md
View File

@ -6,7 +6,9 @@ tags: layout,beginner
Horizontally and vertically centers a child element within a parent element using `flexbox`. Horizontally and vertically centers a child element within a parent element using `flexbox`.
```html ```html
<div class="flexbox-centering"><div class="child">Centered content.</div></div> <div class="flexbox-centering">
<div>Centered content.</div>
</div>
``` ```
```css ```css
@ -20,10 +22,8 @@ Horizontally and vertically centers a child element within a parent element usin
#### Explanation #### Explanation
1. `display: flex` creates a flexbox layout. - `display: flex` creates a flexbox layout.
2. `justify-content: center` centers the child horizontally. - `justify-content: center` centers the child horizontally.
3. `align-items: center` centers the child vertically. - `align-items: center` centers the child vertically.
#### Browser support #### Browser support
- https://caniuse.com/#feat=flexbox

31
snippets/focus-within.md
View File

@ -6,24 +6,33 @@ tags: visual,interactivity,intermediate
Changes the appearance of a form if any of its children are focused. Changes the appearance of a form if any of its children are focused.
```html ```html
<div class="focus-within"> <form>
<form> <label for="username">Username:</label>
<label for="given_name">Given Name:</label> <input id="given_name" type="text" /> <br /> <input id="username" type="text" />
<label for="family_name">Family Name:</label> <input id="family_name" type="text" /> <br />
</form> <label for="password">Password:</label>
</div> <input id="password" type="text" />
</form>
``` ```
```css ```css
form { form {
border: 3px solid #2d98da; border: 2px solid #52B882;
color: #000000; padding: 8px;
padding: 4px; border-radius: 2px;
} }
form:focus-within { form:focus-within {
background: #f7b731; background: #7CF0BD;
color: #000000; }
label {
display: inline-block;
width: 72px;
}
input {
margin: 4px;
} }
``` ```

39
snippets/ghost-trick.md
View File

@ -1,39 +0,0 @@
---
title: Ghost trick
tags: layout,intermediate
---
Vertically centers an element in another.
```html
<div class="ghost-trick">
<div class="ghosting"><p>Vertically centered without changing the position property.</p></div>
</div>
```
```css
.ghosting {
height: 300px;
background: #0ff;
}
.ghosting:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
p {
display: inline-block;
vertical-align: middle;
}
```
#### Explanation
- Use the style of a `:before` pseudo-element to vertically align inline elements without changing their `position` property.
#### Browser support
- https://caniuse.com/#feat=inline-block