Alpha Camp「3前 毛小孩星球」相關筆記

總結

一些過去沒有使用過的技巧:

新知:

成品:毛小孩星球 原始碼:ac_practice_3F_puppy-planet

筆記

scroll-behavior

scroll-behavior: auto;
scroll-behavior: smooth;

處理清單開合的<input type="checkbox"/>

/* AC版本 */
.navbar-toggle {
  position: absolute;
  visibility: hidden;
}

/* 個人處理方式,fixed後推到可視範圍外 */
.navbar-toggle {
  position: fixed;
  top: -100px;
  right: -100px;
}

position: absolute;與水平、垂直置中

.navbar-toggle-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

See the Pen transform: translate(-50%, -50%); by Charlie (@Charlie7779) on CodePen.

切換漢堡按鈕圖示

list demo 1

<!-- HTML結構 -->
<input type="checkbox" class="navbar-toggle" id="navbar-toggle" />
<label class="navbar-toggle-label" for="navbar-toggle">
  <span class="hamburger"></span>
</label>
/* CSS設定 */
.hamburger::before {
  display: inline-block;
  width: 36px;
  height: 36px;
  content: '';
  background-size: 36px 36px;
  background-image: url('./images/list.svg');
  background-repeat: no-repeat;
  transition: background-image 0.2s;
}

.navbar-toggle:checked ~ .navbar-toggle-label .hamburger::before {
  background-image: url('./images/cross.svg');
}

關於~選取器(CSS tilde selector)

清單縮放

.nav {
  transform: scale(1, 0);
  transform-origin: top;
  transition: 0.2s;
}

.navbar-toggle:checked ~ .nav {
  transform: scale(1, 1);
}

清單文字處理

.nav-item {
  opacity: 0;
}

.navbar-toggle:checked ~ .nav .nav-item {
  opacity: 1;
  transition: 0.2s ease-out 0.15s;
}

處理大螢幕導覽列

.nav,
.nav-list,
.nav-item {
  all: unset;
}

header {
  display: grid;
  grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
}

.navbar-brand {
  grid-column: 2 / 3;
}

.nav {
  grid-column: 3 / 4;
}

.nav-list {
  display: flex;
  height: 100%;
  justify-content: flex-end;
  align-items: center;
}

.nav-item + .nav-item {
  margin-left: 2rem;
}

相片框線動畫

.card::before,
.card::after {
  content: '';
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  transition: 0.25s ease-out 0.1s;
}

.card::before {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: scale(0, 1);
}

.card:hover::before {
  transform: scale(1.05, 1);
}

.card::after {
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: scale(1, 0);
}

.card:hover::after {
  transform: scale(1, 1.05);
}

設定<img>為display: block;

補充

box-shadow與filter: drop-shadow();的差異

See the Pen shadows by Charlie (@Charlie7779) on CodePen.

Why do browsers create vendor prefixes for CSS properties?

來源:https://stackoverflow.com/questions/8131846/why-do-browsers-create-vendor-prefixes-for-css-properties

參考文件