PJCHENder 未整理筆記

[CSS] 常用 CSS snippets - mixin

2018-05-08

[CSS] 常用 CSS snippets - mixin

@(CSS)[snippet, css, sass, scss, mixin]

Layout 相關

CSS Resets

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

meyerweb

Box-sizing reset

1
2
3
4
5
6
7
8
9
@mixin box-sizing-reset {
html {
box-sizing: border-box;
}

*, *::before, *::after {
box-sizing: inherit;
}
}

填滿空間(fill full space)

fill-full-space 中將 top, bottom, left, right 都設為 0 的意思就等同於 height: 100%, width: 100%

1
2
3
4
5
6
7
@mixin fill-full-space {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

撐滿空間(sticky footer)

1
2
3
4
5
6
7
8
9
10
11
/**
* For sticky footer
*/
.grow-height-parent {
display: flex;
flex-direction: column;

> .grow-height-child {
flex: 1;
}
}

See the Pen Sticky Footer The Right Way(grow-height) by PJCHEN (@PJCHENder) on CodePen.

水平垂直置中(flexbox-centering)

有時會搭配 fill-full-space 使用:

1
2
3
4
5
@mixin flexbox-centering {
display: flex;
align-items: center;
justify-content: center;
}

清除浮動(clearfix)

1
2
3
4
5
.clearfix::after {
content: '';
display: block;
clear: both;
}

clearfix @ 30 seconds css

Web UI

客製化捲軸(Custom Scroll Bar)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* Document scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
/* Scrollable element */
.some-element::webkit-scrollbar {
}

Custom Scrollbar @ 30 seconds of CSS

客製化選取文字(Custom Text Selection)

1
2
3
4
5
6
7
8
::selection {
background: aquamarine;
color: black;
}
.custom-text-selection::selection {
background: deeppink;
color: white;
}

Custom text selection

禁止選取(Disable selection)

1
2
3
.unselectable {
user-select: none;
}

disable selection @ 30 Seconds of CSS

滑順捲到某個位置(Smooth Scroll)

1
2
3
4
5
// 在有捲軸的地方下

html {
scroll-behavior: smooth;
}

這個方法可以搭配 window.location = #foobar 使用,一樣會有效果。

Scroll Behavior @ CSS Tricks

Button Reset

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.btn-reset {
border-radius: 0;
margin: 0; // Remove the margin in Firefox and Safari
font-family: inherit;
font-size: inherit;
line-height: inherit;
text-transform: none; // Remove the inheritance of text transform in Firefox
padding: 0;
border-style: none;
-webkit-appearance: button;
&:focus {
outline: 0;
}
}

HTML Element Reset @ PJCHENder Codepen

CSS 變數(CSS Variables)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 建立變數
:root {
--some-color: #da7800;
--some-keyword: italic;
--some-size: 1.25em;
--some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray;
}

// 使用變數
.custom-variables {
color: var(--some-color);
font-size: var(--some-size);
font-style: var(--some-keyword);
text-shadow: var(--some-complex-value);
}

custom variables @ 30 seconds of CSS

inline-element

隱藏文字(text hidden)

1
2
3
4
5
.text-hidden {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

超過字數則顯示為 ...

keywords: text-overflow, ellipsis, text-truncate
1
2
3
4
5
6
p {
width: 20em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

文字左右對齊(需多行時有效)

keywords: test-justify
1
2
3
p {
text-align: justify;
}

標題左右對齊(單行亦有效)

keywords: justify, text-justify, 左右對齊
1
2
3
4
5
6
7
8
9
10
11
12
.justify {
height: 1.5em; /* 設定希望的列高 */
line-height: 1.5em; /* 設定希望的列高 */
text-align: justify;
text-justify: inter-character; /* 若用 inter-ideograph 則只會在 chrome 有效 */
}

.justify:after {
content: "";
display: inline-block;
width: 100%;
}

See the Pen Text Justify by PJCHEN (@PJCHENder) on CodePen.

圖片 RWD 設定

keywords: image responsive
1
2
3
4
5
.img-responsive {
display: inline-block;
max-width: 100%;
height: auto;
}

背景圖片 RWD 設定(自動調整高度)

keywords: background image responsive, background image auto height
1
2
3
4
5
6
7
8
9
.foo {
height: 0;
padding: 0; /* remove any pre-existing padding, just in case */
padding-bottom: 75%; /* 這裡要利用背景圖片的 高 / 寬 自己設定百分比,*/
background-image: url(foo.png);
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
}

100 width background image with an auto height @ StackOverflow

其他

Responsive Video Container

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* Responsive Video (RWD) */

.responsive-video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.responsive-video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

不要選到最後一個

1
2
3
4
/* 除了最後一個 li 其他都套用 */
ul li:not(:last-child) {
border-right: 1px solid #666;
}

Progress bar 進度條

See the Pen Radius Progress Indicator by PJCHEN (@PJCHENder) on CodePen.

HTML

1
2
3
4
5
6
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress -->

<div>
<progress value="1" max="100">70 %</progress>
<span id="percent">32 %</span>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/* test on chrome only */
html {
height: 100%;
width: 100%;
}

body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #fafafa;
}

div {
display: flex;
justify-content: center;
align-items: center;
}

span {

font-size: 14px;
line-height: 16px;
color: #333333;
width: 36px;
}

progress {
width: 164px;
height: 16px;
border-radius: 100px;
overflow: hidden;
margin-right: 10px;
}

progress::-webkit-progress-bar {
border-radius: 100px;
background-color: #e7e7e7;
}

progress::-webkit-progress-value {
border-radius: 100px;
background-color: #00d252;
}

JS

1
2
3
4
5
6
7
8
9
10
11
12
const progress = document.querySelector('progress');
const percent = document.querySelector('#percent');
let value = 0

window.setInterval(() => {
value += 7
progress.value = value
percent.innerText = `${value} %`
if (value >= 100) {
value = -20
}
}, 300)

參考

掃描二維條碼,分享此文章