LabEx
ログイン登録

視覚的に魅力的な Web レイアウトの作成

Beginner

This tutorial is from open-source community. Access the source code

はじめに

この実験では、CSS プログラミングの基本を学び、視覚的に魅力的な Web ページを作成する方法を学びます。一連の演習とチャレンジを通じて、CSS セレクター、プロパティ、値に関する実践的な経験を得て、HTML 要素のスタイリングに精通します。実験が終了するとき、美しく応答性のある Web レイアウトを作成するスキルと知識を身につけています。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この 初級 レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

等角投影カード

VM には既に index.html と style.css が用意されています。

等角投影カードを作成するには、rotateX() と rotateZ() を使った transform と box-shadow を組み合わせます。また、transition を追加してカードをアニメーションさせ、ユーザーがカードの上にマウスオーバーしたときにリフトエフェクトを作成することもできます。

以下はコードの例です。

<div class="isometric-card"></div>

.isometric-card {
  margin: 0 auto;
  transform: rotateX(51deg) rotateZ(43deg);
  transform-style: preserve-3d;
  background-color: #fcfcfc;
  will-change: transform;
  width: 240px;
  height: 320px;
  border-radius: 2rem;
  box-shadow:
    1px 1px 0 1px #f9f9fb,
    -1px 0 28px 0 rgba(34, 33, 81, 0.01),
    28px 28px 28px 0 rgba(34, 33, 81, 0.25);
  transition:
    transform 0.4s ease-in-out,
    box-shadow 0.3s ease-in-out;
}

.isometric-card:hover {
  transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(43deg);
  box-shadow:
    1px 1px 0 1px #f9f9fb,
    -1px 0 28px 0 rgba(34, 33, 81, 0.01),
    54px 54px 28px -10px rgba(34, 33, 81, 0.15);
}

右下隅の「Go Live」をクリックして、ポート 8080 で Web サービスを実行してください。その後、Web 8080 タブを更新して Web ページをプレビューできます。

まとめ

おめでとうございます！あなたは等角投影カードの実験を完了しました。あなたのスキルを向上させるために、LabEx でさらに多くの実験を行って練習することができます。