Using CSS3 to achieve Material Design effects-CSS Tutorial-php.cn

Using CSS3 to achieve Material Design effects

不言

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

Original

1796 people have browsed it

This article mainly introduces pure CSS3 to achieve Material Design effect. It is a beautification of native components based on tag attributes, which has certain reference value. Those who are interested can learn about it.

Preview

This is a css file that is being improved. It beautifies the native components based on label attributes. CSS cannot be used for datepicker, select, etc. The implementation is not considered in this article for the time being.

ButtonButton

##Initial button

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

Copy after login

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

Copy after login

Disable button

<button disabled>disabled</button>

Copy after login

##Floating button

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

Copy after login

Button Group

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

Copy after login

Form

Text input

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

Copy after login

Switch

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

Copy after login

Single choice

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

Copy after login

Multiple choice

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

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Two commonly used functions of CSS3 rounded corners and gradients

Use CSS3 to match horizontal and vertical screens Screen method

The above is the detailed content of Using CSS3 to achieve Material Design effects. For more information, please follow other related articles on the PHP Chinese website!