CSS3 を使用してマテリアル デザイン効果を実現する

この記事では主にマテリアル デザイン効果を実現するための純粋な CSS3 を紹介します。タグの属性に基づいてネイティブコンポーネントを美化するものであり、一定の参考価値があります。興味のある方は学習してください。

プレビュー

これは改良中の CSS ファイルです。CSS で実装できない Datepicker や select などは考慮されていません。

ボタン
無効化ボタン

    <button>button</button>
    <button class="red">red</button>
    <button class="orange">orange</button>
    <button class="blue">blue</button>
    <button class="green">green</button>
    <button class="link">link</button>

フローティングボタン

    <button class="b-red bk-n">button</button>
    <button class="b-red">red</button>
    <button class="b-orange">orange</button>
    <button class="b-blue">blue</button>
    <button class="b-green">green</button>

ボタングループ

rreee

フォーム

テキスト入力

<button disabled>disabled</button>

スイッチ

    <button class="circle">+</button>
    <button class="circle teal">+</button>

単一選択

    <nav class="btn-group">
        <button>button</button>
        <button>button</button>
        <button>button</button>
    </nav>

多肢選択

<input type="text">
<input type="password" >

上記はこの記事の全内容が皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語ネットにご注目ください。

関連する推奨事項:

CSS3 の角丸とグラデーションの 2 つの一般的な機能

CSS3 を使用して水平画面と垂直画面を一致させる方法

以上がCSS3 を使用してマテリアル デザイン効果を実現するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。