7

soy nueva por aqui y aprendiendo de todo un poco quisiera lograr esta forma que ofrece Material Design.

introducir la descripción de la imagen aquí

Veo que en su documentacion https://material.io/develop/web/components/shape/ habla sobre la forma de aplicarse con SASS pero no conzco mucho su uso aún

<head>
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>


<div class="mdc-layout-grid">
  <div class="mdc-layout-grid__inner">
   <button class="mdc-fab" aria-label="Favorite">
  <span class="mdc-fab__icon material-icons">favorite</span>
</button>
  </div>
</div>

Quisiera saber si sol con CSS es posible, agradezco cualquier ayyda.

A la forma que me refiero es la barra inferior gris con el boton amarillo en medio

.footer-bar {
  width: 100%;
  background: #333;
  height: 60px;
}

.mdc-fab {
  margin-left: 50%;
  bottom: 10px;
}
<head>
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<div class="footer-bar">
  <button class="mdc-fab" aria-label="Favorite">
      <span class="mdc-fab__icon material-icons">favorite</span>
    </button>

</div>

2
  • Has intentado algo? Podrías usar otro framework o solo CSS?
    – EMCode
    Commented el 9 abr. 2019 a las 19:55
  • Añadí lo que tengo, lo siento que no sea igual, apenas estoy empezando :3 Commented el 9 abr. 2019 a las 20:06

2 respuestas 2

2

es posible con css ya que hasta la fecha todos los frameworks de estilos se basan en Cascading Style Sheets.

No soy muy bueno en los estilos pero una forma de hacerlo sería la siguiente (Es necesario adaptar en caso de requerirlo):

Tomando en cuenta tu HTML:

<head>
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<div class="footer-bar">
  <span class="back-icon">
    <button class="mdc-fab" aria-label="Favorite">
      <span class="mdc-fab__icon material-icons">favorite</span>
    </button>
  </span>
</div>

CSS

.footer-bar {
  background-color: gray;
  width: 100%;
  height: 60px;
}

.mdc-fab {
  bottom: -5px;
  margin-left: 10%;
}

.back-icon{
  position: fixed;
  background-color: white;
  display: inline-block;
  border-radius: 50%;
  margin-left: 50%;
  width:70px;
  height: 70px;
  margin-top: -40px;
}
-1

Esta aplicación para Android con los iconos de 'Material-icons' que te da el nombre y el código, incluso te genera el HTML y lo copia al portapapeles.

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.