Zenn
🥶

CSS

に公開
CSS
tech

⬛︎ hoverすると、border-bottomが要素の真ん中から伸びてくる

.footer__right .footer__link .link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #00b41f;
  transition: all 0.3s;
  transform: scale(0, 1);
  transform-origin: center top;
}
.footer__right .footer__link .link:hover::after {
  transform: scale(1, 1);
}

⬛︎ いい感じのbox-shadow

box-shadow: 0px 10px 20px #b9b9b9;

⬛︎ 子要素の高さを親要素に合わせる方法

・親要素にdisplay:flex
親要素にdisplay:flexとalign-items:normalまたはstretchを指定する。

⬛︎ mvなどに使える画像の上に文字がある場合に、画像にマスクをかける

mv画像の擬似要素に

background-color: rgba(54, 46, 43, 0.4);

⬛︎ flexbox(space-betweenにてコンテンツ数に左右されない)

参考url

https://senoweb.jp/note/displayflex-tip/

⬛︎ 背景を斜めにする

参考url

https://bennettfeely.com/clippy/

⬛︎ お問い合わせフォーム（初期化スタイル）

input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
  font-size: calc(16px + 2 * (100vw - 320px) / 1046);
  line-height: 1.4;
  letter-spacing: 0;
}
@media screen and (min-width: 1366px) {
  input,
  button,
  select,
  textarea {
    font-size: 18px;
  }
}

textarea {
  resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
  display: none;
}

input[type="submit"],
input[type="button"],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

⬛︎ text-shadow（白文字に合う）

text-shadow: rgb(0 0 0 / 90%) 0 0 10px;

⬛︎ お問い合わせフォーム（同意ボタン基本スタイル）

お問い合わせフォームの同意ボタンの基本的なスタイル

/* 同意ボタン（チェックボックス） */
.doui {
  margin-top: 40px;
  display: flex;
  align-items: center;
}

.doui label.checkBox {
  align-items: center;
}

.doui label.checkBox input {
  min-width: 20px;
  min-height: 20px;
  border-radius: 5px;
  position: relative;
  margin-right: 10px;
  display: block;
  border: 1px solid #000000;
}

.doui label.checkBox input:checked:after {
  position: absolute;
  content: "";
  border-left: 2px solid #000000;
  border-bottom: 2px solid #000000;
  width: 10px;
  height: 5px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

Discussion