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

不言
リリース: 2018-06-25 17:43:18
オリジナル
1733 人が閲覧しました

この記事では主にマテリアル デザイン効果を実現するための純粋な 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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!