Utiliser CSS3 pour obtenir des effets de conception matérielle-tutoriel CSS-php.cn

Utiliser CSS3 pour obtenir des effets de conception matérielle

不言

Libérer： 2018-06-25 17:43:18

original

1765 Les gens l'ont consulté

Cet article présente principalement la réalisation de l'effet Material Design en utilisant du CSS3 pur. Il s'agit d'une embellissement des composants natifs basée sur les attributs des balises, qui a une certaine valeur de référence. Ceux qui sont intéressés peuvent en prendre connaissance.

Aperçu

Il s'agit d'un fichier CSS en cours d'amélioration. Il s'agit d'une embellissement des composants natifs basés sur les attributs de balise Datepicker, select, etc. ne peut pas être utilisé avec CSS. L'implémentation n'est pas prise en compte dans cet article pour le moment.

Bouton Bouton

Bouton initial

    <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>

Copier après la connexion

Bouton de course

    <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>

Copier après la connexion

Bouton Désactiver

<button disabled>disabled</button>

Copier après la connexion

Bouton flottant

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

Copier après la connexion

Groupe de boutons

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

Copier après la connexion

Formulaire

Saisie de texte

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

Copier après la connexion

Commutateur

<input type="checkbox" id="switch1" class="switch"><label for="switch1"></label>

Copier après la connexion

Choix unique

<input type="radio" id="test_radio1" name="ra"><label for="test_radio1">radio1</label>
<input type="radio" disabled id="test_radio3" name="ra"><label for="test_radio3">radio3</label>
<input type="radio" checked disabled id="test_radio4" name="ras"><label for="test_radio4">radio4</label>

Copier après la connexion

Choix multiples

<input id="test_checkbox1" type="checkbox"><label for="test_checkbox1">check1</label>
<input id="test_checkbox3" disabled type="checkbox"><label for="test_checkbox3">check3</label>
<input id="test_checkbox4" checked disabled type="checkbox"><label for="test_checkbox4">check4</label>

Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à tout le monde étude. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Deux fonctions courantes des coins arrondis et des dégradés CSS3

Utilisez CSS3 pour faire correspondre les écrans horizontaux et verticaux Méthode d'écran

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!