クラス 'social-button'
Coddyの「3Dカード | フロントエンドプロジェクト」コースのレッスン 23/31。
チャレンジ
簡単ターゲットクラス 'social-button':
- 幅を 30 ピクセルに設定します。
- アスペクト比(aspect-ratio)を 1 に設定します。
- パディング(padding)を 5px に設定します。
- 背景(background)を white に設定します。
- 境界線の半径(border-radius)を 50% に設定します。
- 境界線(border)を none に設定します。
- 表示(display)を grid に設定します。
- place-content を center に設定します。
以下の box-shadow プロパティを追加します:
box-shadow: rgba(5, 71, 17, 0.5) 0px 7px 5px -5px;
自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
<script src="script.js"></script>
</body>
</html>3Dカード | フロントエンドプロジェクトのすべてのレッスン
1はじめに
何を作るのか?4CSS - II
クラス 'view-more'