CSSの創造性と視覚的なプレゼンテーション

                      CSSの創造性と視覚的なプレゼンテーション

 

CSSコード：

.cover { 
    パディング：36％50％ 。
    背景：線形勾配（右、白50％、黒CALC（50％+ 1ピクセル）） 。
    位置：相対 ; 
    フォントサイズ：200％ ; 
} 
.cover ::前に、
.cover ::後 { 
    内容：'' 。
    位置：絶対 ; 
    幅：36％ 。高さ：50％ ; 
    境界半径：50％ 。
    左：50％ 。
    変換：移動X（-50％）を、
} 
.cover ::前 { 
    上部：0。
    背景：半径方向の勾配（円、白13％、黒CALC（13％+ 1ピクセル）） 。
} 
.cover ::後 { 
    底：0。
    背景：半径方向の勾配（丸、黒13％、白色の計算値（13％+ 1ピクセル）） 。
} 
.cover-H、
.cover-P { 
    位置：絶対。
    ミックスブレンドモード：違い; 
    左：0 ; 右：0 ; 
    テキスト整列：センター ; 
    色：#FFF ; 
    Zインデックス：1。
}

 

HTMLコード：

< のdiv クラス= "カバー" > 
    < h2のクラス= "カバー-H" > CSSの創造性とビジュアルプレゼンテーション</ H2 > 
</ DIV >