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

Travis build: 95 [cron]

Browse Source
This commit is contained in:
30secondsofcode
2018-12-15 21:08:02 +00:00
parent 988e1dc7a3
commit df63df3afc
28 changed files with 715 additions and 1048 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
snippets/custom-scrollbar.md
View File

@ -7,9 +7,9 @@ Customizes the scrollbar style for the document and elements with scrollable ove
```html
<div class="custom-scrollbar">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.<br>
Iure id exercitationem nulla qui repellat laborum vitae, <br>
molestias tempora velit natus. Quas, assumenda nisi. <br>
Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
Iure id exercitationem nulla qui repellat laborum vitae, <br />
molestias tempora velit natus. Quas, assumenda nisi. <br />
Quisquam enim qui iure, consequatur velit sit?
</p>
</div>

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

@ -6,9 +6,7 @@ Vertically and horizontally centers a child element within its parent element us
```html
<div class="container">
<div class="center">
<span>Centered content</span>
</div>
<div class="center"><span>Centered content</span></div>
</div>
```

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

@ -5,8 +5,8 @@ Changes the fit and position of an image within its container while preserving i
#### HTML
```html
<img class="image image-contain" src="https://picsum.photos/600/200">
<img class="image image-cover" src="https://picsum.photos/600/200">
<img class="image image-contain" src="https://picsum.photos/600/200" />
<img class="image image-cover" src="https://picsum.photos/600/200" />
```
#### CSS

4
snippets/flexbox-centering.md
View File

@ -5,9 +5,7 @@ Horizontally and vertically centers a child element within a parent element usin
#### HTML
```html
<div class="flexbox-centering">
<div class="child">Centered content.</div>
</div>
<div class="flexbox-centering"><div class="child">Centered content.</div></div>
```
#### CSS

4
snippets/grid-centering.md
View File

@ -5,9 +5,7 @@ Horizontally and vertically centers a child element within a parent element usin
#### HTML
```html
<div class="grid-centering">
<div class="child">Centered content.</div>
</div>
<div class="grid-centering"><div class="child">Centered content.</div></div>
```
#### CSS

4
snippets/mouse-cursor-gradient-tracking.md
View File

@ -7,9 +7,7 @@ A hover effect where the gradient follows the mouse cursor.
#### HTML
```html
<button class="mouse-cursor-gradient-tracking">
<span>Hover me</span>
</button>
<button class="mouse-cursor-gradient-tracking"><span>Hover me</span></button>
```
#### CSS

3
snippets/offscreen.md
View File

@ -6,8 +6,7 @@ A bulletproof way to completely hide an element visually and positionally in the
```html
<a class="button" href="http://pantswebsite.com">
Learn More
<span class="offscreen"> about pants</span>
Learn More <span class="offscreen"> about pants</span>
</a>
```

14
snippets/overflow-scroll-gradient.md
View File

@ -7,13 +7,13 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
```html
<div class="overflow-scroll-gradient">
<div class="overflow-scroll-gradient__scroller">
Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>
Iure id exercitationem nulla qui repellat laborum vitae, <br>
molestias tempora velit natus. Quas, assumenda nisi. <br>
Quisquam enim qui iure, consequatur velit sit? <br>
Lorem ipsum dolor sit amet consectetur adipisicing elit.<br>
Iure id exercitationem nulla qui repellat laborum vitae, <br>
molestias tempora velit natus. Quas, assumenda nisi. <br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />
Iure id exercitationem nulla qui repellat laborum vitae, <br />
molestias tempora velit natus. Quas, assumenda nisi. <br />
Quisquam enim qui iure, consequatur velit sit? <br />
Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
Iure id exercitationem nulla qui repellat laborum vitae, <br />
molestias tempora velit natus. Quas, assumenda nisi. <br />
Quisquam enim qui iure, consequatur velit sit?
</div>
</div>

6
snippets/popout-menu.md
View File

@ -5,11 +5,7 @@ Reveals an interactive popout menu on hover and focus.
#### HTML
```html
<div class="reference" tabindex="0">
<div class="popout-menu">
Popout menu
</div>
</div>
<div class="reference" tabindex="0"><div class="popout-menu">Popout menu</div></div>
```
#### CSS

6
snippets/reset-all-styles.md
View File

@ -7,7 +7,11 @@ Resets all styles to default values with one property. This will not affect `dir
```html
<div class="reset-all-styles">
<h5>Title</h5>
<p>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?</p>
<p>
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?
</p>
</div>
```

8
snippets/sibling-fade.md
View File

@ -6,12 +6,8 @@ Fades out the siblings of a hovered item.
```html
<div class="sibling-fade">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
<span>Item 4</span>
<span>Item 5</span>
<span>Item 6</span>
<span>Item 1</span> <span>Item 2</span> <span>Item 3</span> <span>Item 4</span>
<span>Item 5</span> <span>Item 6</span>
</div>
```

3
snippets/toggle-switch.md
View File

@ -5,8 +5,7 @@ Creates a toggle switch with CSS only.
#### HTML
```html
<input type="checkbox" id="toggle" class="offscreen" />
<label for="toggle" class="switch"></label>
<input type="checkbox" id="toggle" class="offscreen" /> <label for="toggle" class="switch"></label>
```
#### CSS

4
snippets/transform-centering.md
View File

@ -5,9 +5,7 @@ Vertically and horizontally centers a child element within its parent element us
#### HTML
```html
<div class="parent">
<div class="child">Centered content</div>
</div>
<div class="parent"><div class="child">Centered content</div></div>
```
#### CSS