Skip to main content

[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;}

撐滿空間(sticky footer)#

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

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

參考#