跳至主要内容

[CSS] 常用 CSS snippets - mixin

Layout 相關

CSS Resets

/* 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

@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%

@mixin fill-full-space {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
/**
* For sticky footer
*/
.grow-height-parent {
display: flex;
flex-direction: column;

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

水平垂直置中(flexbox-centering)

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

@mixin flexbox-centering {
display: flex;
align-items: center;
justify-content: center;
}

清除浮動(clearfix)

.clearfix::after {
content: '';
display: block;
clear: both;
}

clearfix @ 30 seconds css

Web UI

客製化捲軸(Custom Scroll Bar)

/* 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)

::selection {
background: aquamarine;
color: black;
}
.custom-text-selection::selection {
background: deeppink;
color: white;
}

Custom text selection

禁止選取(Disable selection)

.unselectable {
user-select: none;
}

disable selection @ 30 Seconds of CSS

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

// 在有捲軸的地方下

html {
scroll-behavior: smooth;
}

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

Scroll Behavior @ CSS Tricks

Button Reset

.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)

// 建立變數
: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);
text-shadow: var(--some-complex-value);


// 可以在後面帶入 fallback value(如果沒有定義該 variable 的話,即會套用 fallback)
font-style: var(--some-keyword, normal);
font-size: var(--some-size, 16px);
}

custom variables @ 30 seconds of CSS

inline-element

隱藏文字(text hidden)

.text-hidden {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

超過字數則顯示為 ...

keywords: text-overflow, ellipsis, text-truncate
p {
width: 20em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

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

keywords: test-justify
p {
text-align: justify;
}

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

keywords: justify, text-justify, 左右對齊
.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
.img-responsive {
display: inline-block;
max-width: 100%;
height: auto;
}

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

keywords: background image responsive, background image auto height
.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

/* 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%;
}

不要選到最後一個

/* 除了最後一個 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

<!-- 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

/* 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

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);

參考