🐒
html/cssだけで、MacのDockを、できる限り再現してみた
といっても、CSSでMacのDockを完全に再現できるわけではないですが、新しめのCSSの機能を利用して、どこまで再現できるかテストした記録を残します。
結果
なにはともあれ、まずは結果を御覧ください。
主にマウスオーバーによる効果なので、タッチ端末ではテストできませんm(_ _)m
仕上がりとしては、そこそこ機能していると思っています。
(jsfiddleの初期表示をresultにする方法があったら知りたい！)
要所メモ
htmlはいたってシンプル
僕の哲学では、デザインのためだけの要素は極力つくらないように心がけてます。
liには通常付与されなalt属性をつけてますが、ここはカスタム属性でもなんでもよいです。
後のツールチップに利用します。
<ul>
<li alt="Adobe Illustrator 2022">Ai</li>
<li alt="Adobe Photoshop 2022">Ps</li>
<li alt="Adobe Indesign 2022">Id</li>
<li alt="Adobe XD 2022">Xd</li>
<li alt="Adobe After Effects 2022">Ae</li>
<li alt="Adobe Dimention 2022">Dn</li>
<li alt="Adobe Premiere Pro 2022">Pr</li>
<li alt="Adobe Lightroom 2022">Lr</li>
<li alt="Adobe Bridge 2022">Br</li>
<li alt="Adobe Animate 2022">An</li>
</ul>
ul
とくに難しいことはしてません。
- 自身を天地中央に配置
- 子要素を横並びにしてセンタリング
- 子要素のサイズにあわせて自身のサイズを調整
ul {
display: flex;
list-style: none;
width: max-content;
height: max-content;
margin: auto;
padding: 10px;
justify-content: center;
background-color: #666;
border-radius: 10px;
transition: width .3s 0s ease;
position: fixed;
inset: 0;
}
li
特筆することはないかな。
li {
display: grid;
place-items: center;
width: var(--size);
height: var(--size);
position: relative;
background: #ccc;
text-align: center;
line-height: var(--size);
cursor: default;
user-select: none;
color: #fff;
transition-property: transform, margin;
transition-duration: .3s;
font-family: arial;
font-size: 2.3vw;
font-weight: bold;
box-sizing: content-box;
margin-inline: var(--margin);
transform-origin: 50% 100%;
border-radius: .5vw;
}
li:before
普通に作ると、アイコンとアイコンのマージン間でマウスアウトが発生し、動作がカクカクしてしまう現象がありました。それを防止する(ロールアウトさせない)ために、マージンを覆う大きさの透明疑似要素をアイコンの上に配置しています。
li:before {
content: "";
display: block;
position: absolute;
width: calc(100% + 1.2vw);
height: 100%;
left: -0.6vw;
}
ツールチップ
li:after {
display: none;
content: attr(alt);
position: absolute;
white-space: nowrap;
text-align: center;
top: -25px;
color: #fff;
background-color: #626262;
line-height: 1;
border-radius: 3px;
padding: 5px 10px;
margin-inline: auto;
font-size: .2vw;
font-weight: normal;
box-shadow: 0 0 0 1px #000 inset, 0 0 0 2px #797979 inset;
}
li:hover:after {
display: block;
transform: scale(0.8);
}
拡大効果
この記事の肝の部分です。
やってる事自体はシンプルです。
- hoverでscaleとmarginを変更
- transitionでアニメーション
目新しい(2022年9月時点)のは、hoverしている要素の次の要素、更にその次の要素、前の要素、さらにその前の要素のスタイリングしていることです。そうです。:has疑似クラスを利用することで、hoverしている要素の前の兄弟要素を選択できるようになったのです。
li:hover {
transform: scale(1.8);
margin-inline: 3.5vw;
}
li:has(+li:hover),
li:hover +li {
transform: scale(1.4);
}
li:has(+li +li:hover),
li:hover +li +li{
transform: scale(1.3);
}
li:hover +li {
margin-inline: var(--margin) 2vw;
}
li:hover +li +li{
margin-inline: var(--margin) 1vw;
}
li:has(+li:hover) {
margin-inline: 2vw var(--margin);
}
li:has(+li +li:hover){
margin-inline: 1vw var(--margin);
}
まとめ
:has擬似クラスの登場によってできることが増えたというのが率直な感想です。
この記事の例では、実用性はほぼないですが、新しいアイディアが浮かんだら、また次の記事を書いてみようと思います。
補足
その他の:has疑似クラスの例は、他所でまとめてます。
よかったらどうぞ。
Discussion