Está creado con HTML, CSS y JavaScript, y diseñado por Google. Material Design es un lenguaje de diseño que combina los principios clásicos del diseño exitoso junto con la innovación y la tecnología.
Color: aquí hay una paleta de colores basada en los colores base del diseño de materiales. Cada uno de estos colores se define con una clase de color base y una clase opcional para aclarar u oscurecer.
- Para aplicar el color de fondo, simplemente agregue el nombre del color y la luz/oscuridad como una clase al elemento
html
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content= "width=device-width,initial-scale=1.0" /> </head> <body> <div class="card-panel green"> GeeksforGeeks </div> <!-- Compiled and minified JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> </script> </body> </html>
- Producción:
- Para aplicar un color de texto, simplemente agregue -text a la clase de color como se hizo antes.
html
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> </head> <body> <div class="card-panel"> <span class="green-text text-darken-2"> GeeksforGeeks </span> </div> <!-- Compiled and minified JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> </script> </body> </html>
- Producción:
Aquí hay una lista de algunas paletas de colores:
| Nombre | MALEFICIO | Color |
|---|---|---|
| aligerar rojo-2 | #e57373 | |
| rojo oscurecer-4 | #b71c1c | |
| rosa claro-3 | #f48fb1 | |
| rosa oscuro-4 | #880e4f | |
| aligerar púrpura-3 | #ce93d8 | |
| acento morado-2 | #e040fb | |
| Morado oscuro | #673ab7 | |
| índigo | #3f51b5 | |
| acento azul-1 | #82b1ff | |
| verde azulado oscurecer-3 | #00695c | |
| verde | #4caf50 | |
| verde claro | #8bc34a | |
| verde claro oscuro-4 | #33691e | |
| amarillo oscurecer-4 | #f57f17 | |
| marrón oscuro-1 | #6d4c41 |
Puede consultar https://materializecss.com/color.html para diferentes paletas de colores.
Publicación traducida automáticamente
Artículo escrito por tanvi_gupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA