CSS マスタリー: Web 開発ゲームをレベルアップするための未踏のハック

1. Aspect Ratio with Padding Hack

• Hack: Create a responsive element with a fixed aspect ratio using padding.
• How it works: Use the padding-top or padding-bottom set to a percentage value. This percentage is relative to the width of the element, making it perfect for maintaining aspect ratios.
• Example: .aspect-ratio-box {
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    position: relative;
  }
  .content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  

2. Centering Elements with max-content

• Hack: Center block elements with unknown widths using max-content.
• How it works: Set the width to max-content and use margin: auto to automatically center the element.
• Example: .centered {
    width: max-content;
    margin: auto;
  }
  

3. Single Div Loader Animation

• Hack: Create complex loaders using only one div and pseudo-elements.
• How it works: Use ::before and ::after for multiple parts of the loader, applying animation without needing extra HTML.
• Example: .loader {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(45deg, transparent, #000);
    animation: rotate 1s infinite linear;
    position: relative;
  }
  .loader::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(45deg, transparent, #000);
    transform: rotate(90deg);
  }
  @keyframes rotate {
    to { transform: rotate(360deg); }
  }
  

4. Creating Trapezoids with Borders

• Hack: Use borders to create trapezoid shapes without any complex SVG or image.
• How it works: Apply thick borders with transparent sides and different widths to form a trapezoid shape.
• Example: .trapezoid {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #3498db;
  }
  

5. CSS-Only Accordion

• Hack: Build a fully functional accordion without JavaScript using CSS :checked and :hover.
• How it works: Use input checkboxes and labels along with :checked and :nth-child selectors to toggle visibility of content.
• Example:
  Toggle Section
  
  Accordion Content
  
  
  

6. セクションをスムーズにスクロールするためのスクロールスナップ

• ハック: スクロール スナップ プロパティを使用してスムーズ スクロール セクションを実装します。
• 仕組み: スクロールスナップタイプとスクロールスナップアラインは、スクロール中に要素を所定の位置にロックできます。
• 例: .scroll-container {
  scroll-snap-type: y 必須;
  overflow-y:scroll;
  height: 100vh;
  }
  .scroll-item {
  scroll- snap-align: start;
  height: 100vh;
  }
  

7. 暗い背景のテキストの色を反転します

• ハック: ミックスブレンドモードを使用して、背景の明るさに基づいてテキストの色を動的に調整します。
• 仕組み: mix-blend-mode と CSS 変数を組み合わせて、テキストの色を動的に調整します。
• 例: .dynamic-text {
  color:white;
  mix-blend-mode:Difference;
  }
  .dark-background {
  background-color: black;
  }
  

8. コンテナが傾いた斜めのレイアウト

• ハック: transform: skew() を使用して、複雑な計算を行わずにレイアウトに斜めのセクションを作成します。
• 仕組み: コンテナを傾け、中身が正しく揃うように調整します。
• 例: .diagonal {
  transform: skew(-20deg);
  overflow: hidden;
  padding: 50px;
  background-color: #f0f0f0;
  }
  .diagonal-content {
  変換: skew(20deg);
  }
  

9. 影付きのテキスト ストローク

• ハック: -webkit-text-ストロークを使用せずに、テキストシャドウ効果を重ねてテキストストロークをシミュレートします。
• 仕組み: 複数のシャドウを適用して、テキスト ストローク効果を模倣します。
• 例: .text-ストローク {
  color:white;
  text-shadow:
  -1px -1px 0 #000,
  1px -1px 0 #000,
  -1px 1px 0 #000,
  1px 1px 0 #000;
  }
  

10. クリップパスによる要素のクリッピング

• ハック: クリップパスを使用して複雑な形状を作成し、要素の領域をクリップします。
• 仕組み: さまざまなクリッピング関数を使用して、内容を変更せずに要素の一部を非表示にします。

• 例: .cliped {
  クリップパス: ポリゴン(50% 0%, 0% 100%, 100% 100%);
  背景色: #3498db;
  高さ: 200px;
  幅: 200px;
  }
  

以上がCSS マスタリー: Web 開発ゲームをレベルアップするための未踏のハックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。