Verwendung von CSS3 zum Erzielen von Materialdesign-Effekten

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>

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>

Schaltfläche deaktivieren

<button disabled>disabled</button>

Schwebende Schaltfläche

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

Schaltfläche Gruppe

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

Formular

Texteingabe

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

Schalter

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

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>

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>

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!