ブラウズ：529
導入
私たちの目的は何ですか?
セマンティック HTML5 を使用した構造の構築
最新の CSS を使用してスタイルを追加する
- CSSのリセット
- フレックスボックスでカードレイアウトをデザインする
- カード画像のスタイリング
- カードコンテンツのスタイリング
- カードボタンのスタイル設定
- ホバートランジションの追加
- CSS変数の使用
結論
Web 開発者として、カード コンポーネントを作成する必要に遭遇することがよくあります。製品やプロジェクトのショーケース、ユーザー プロフィール、ブログ投稿など、カードはどこにでもあります。
これまで、レスポンシブ レイアウトの作成は困難でした。最新の CSS 技術、特に CSS Flexbox の出現により、これらのデザインの作成は大幅にシンプルかつ直感的になりました。
Flexbox を使用すると、レスポンシブ レイアウトの作成プロセスが簡素化されます。複雑なメディア クエリを使用せずに、コンテナ内でアイテムを簡単に配置、整列、間隔をあけて配置できます。これは、正確なブレークポイントを指定しなくても、さまざまな画面サイズや方向に美しく適応するレイアウトを構築できることを意味します。
CSS Flexbox を使用して、ブレークポイントに依存せずに同じ高さのレスポンシブ カードを作成することが目的です。コンテンツの長さに関係なく各カードが同じ高さを維持し、さまざまな画面サイズにシームレスに適応できるようにします。
レイアウトの主要な CSS プロパティ:
それでは、カードを作成して CSS フレックスボックスの魅力を探ってみましょう!
Title one
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod, aliquid ex vel labore fugit dignissimos libero eos hic, fuga, vitae consequuntur quidem.
Title two
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam aperiam consequuntur, saepe at repellat nobis.
Title three
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum reprehenderit at cumque? Architecto numquam nam placeat suscipit!
/* Basic CSS Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Ensure that our layout is centred horizontally and vertically on the page */
body {
display: flex; /* using CSS flexbox to vertically and horizontally centre all cards */
justify-content: center;
align-items: center;
min-height: 100vh;
overflow-x: hidden; /* Prevent horizontal scrolling */
}
/* Cards */
.card-container {
display: flex; /* using CSS flexbox to display each card at the centre */
justify-content: center;
align-items: stretch; /* use stretch for equal height of all cards */
gap: 1.5625rem; /* add space between each card */
flex-wrap: wrap;
padding: 1rem;
max-width: 100%; /* Prevent container from exceeding viewport width */
}
.card {
display: flex;
flex-direction: column;
width: 20rem;
background-color: #fff;
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4);
text-align: center;
text-wrap: balance; /* ensures content is evenly distributed across multiple lines for better readability. */
overflow: hidden;
}
.card-image {
width: 100%;
height: auto;
object-fit: cover;
margin-bottom: 0.85rem;
}
.card-title {
font-size: 1.25rem;
padding: 1rem;
color: #3ca69f;
}
.card-description {
flex-grow: 1; /* allow the content to take available space, thus maintaining equal height no matter the length of the content */
padding: 0 1rem 1rem;
font-size: 0.975rem;
line-height: 1.5;
}
/* Cards button */
.card-button {
align-self: center; /* placing the button at the center */
margin: 1rem 0 3rem;
padding: 0.625rem 1rem;
font-size: 1rem;
color: #ffffff;
background-color: #3ca69f;
border: none;
border-radius: 0.3125rem;
cursor: pointer;
}
.card {
transition: 0.5s ease all;
}
.card-button {
transition: 0.5s ease all;
}
/* cards hover effect */
.card:hover {
background-color: #276662;
color: #ffffff;
}
.card:hover > .card-button {
background-color: #ffffff;
color: #276662;
font-weight: 700;
}
.card:hover > .card-title {
color: #ffffff;
}
/* Declare variables */
:root {
--primary-color: #3ca69f;
--secondary-color: #276662;
--text-color: #ffffff;
--shadow-color: rgba(0, 0, 0, 0.4);
--border-radius: 0.3125rem;
--spacing: 1rem;
--transition-duration: 0.5s;
}
上に行きます
免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。
Copyright© 2022 湘ICP备2022001581号-3
