Verwendung von CSS3 zum Erzielen von Materialdesign-Effekten-CSS-Tutorial-php.cn

Verwendung von CSS3 zum Erzielen von Materialdesign-Effekten

不言

Freigeben： 2018-06-25 17:43:18

Original

1766 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Realisierung des Materialdesign-Effekts mit reinem CSS3 vorgestellt. Es handelt sich um eine Verschönerung nativer Komponenten basierend auf Tag-Attributen, die einen gewissen Referenzwert haben. Interessierte können sich darüber informieren.

Vorschau

Dies ist eine CSS-Datei, die verbessert wird. Es handelt sich um eine Verschönerung nativer Komponenten basierend auf Tag-Attributen. kann nicht mit CSS verwendet werden. Die Implementierung wird in diesem Artikel vorerst nicht berücksichtigt.

Schaltfläche Schaltfläche

Anfangsschaltfläche

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

Nach dem Login kopieren

Strichtaste

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

Nach dem Login kopieren

Schaltfläche deaktivieren

<button disabled>disabled</button>

Nach dem Login kopieren

Schwebende Schaltfläche

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

Nach dem Login kopieren

Schaltfläche Gruppe

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

Nach dem Login kopieren

Formular

Texteingabe

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

Nach dem Login kopieren

Schalter

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

Nach dem Login kopieren

Einzelauswahl

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

Nach dem Login kopieren

Mehrfachauswahl

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

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Zwei gängige Funktionen von CSS3 mit abgerundeten Ecken und Farbverläufen

Verwenden Sie CSS3, um horizontale und vertikale Bildschirme anzupassen Bildschirmmethode

Das obige ist der detaillierte Inhalt vonVerwendung von CSS3 zum Erzielen von Materialdesign-Effekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!