How to put transparency on elements like header, footer, buttom, inputs?

Ionic Framework ionic-v3
1

Also, how do I put color in the texts?

2

You can do that with CSS. Try:

<style type="text/css">
.your-class {
   opacity: 0.5;
   color: red; 
}
</style>

After that, add your-class to your target element.
<div class="your-class"></div>

3

Pedro_Rocha

BR:
“opacity” não deixa transparente, ele vai “sumindo” com o objeto.
Veja essa imagem abaixo, com que tipo de background eu estou querendo tirar.

EN:
“Opacity” does not make it transparent, it goes “fading” with the object.
Look at this picture below, what kind of background I’m trying to get at.

image
eu-quemsomos.png1366×768 567 KB

4

Are you trying to change the login and password input boxes to transparent? Sorry, it’s not clear in the image.
VocĂȘ quer mudar o background da caixa onde tem os inputs de login e senha pra transparente? Desculpa, mas nĂŁo ficou claro com a foto.

But if that’s the case, you can try ‘background-color: transparent;’ overriding everything that is white. Maybe you’ll need to remove the borders too, using 'border: none;'
Mas se for isso, vocĂȘ coloca background-color: transparent; em tudo que tĂĄ branco. Talvez precise remover as bordas depois tambĂ©m, com border: none;

5

@Pedro_Rocha

Sim, Ă© isto sim.
Eu consegui retirar dos ion-item, porém o ion-toolbar do footer ele não funciona.

page-login {
  ion-content {
    background-image: url('/assets/img/bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

  ion-img, ion-item, ion-label, ion-toolbar, button, h1 {
    background-color: transparent !important;
    text-shadow: 1px 1px 1px rgb(0,0,0);
  }


  .formItem {
    margin-top: -13%;
  }

  #imgLogo {
    width: 40%;
    position: relative;
    margin-top: 15%;
    margin-left: 30%;
  }
}

image
rt.png1366×768 722 KB

6

I removed the white background of the items like this:
Eu removi o dos items com:

<ion-item class="bg-hidden">
  <ion-label color='primary' floating><ion-icon name='contact'></ion-icon>     UsuĂĄrio</ion-label>
  <ion-input type='text' clearInput></ion-input>
</ion-item>
<ion-item class="bg-hidden">
  <ion-label color='primary' floating><ion-icon name='key'></ion-icon>     Senha</ion-label>
  <ion-input type='text' clearInput></ion-input>
</ion-item>

  ion-item.bg-hidden {
    background-color: transparent;
  }

and then I changed the footer background adding:
e depois removi o do footer adicionando:

ion-footer ion-toolbar .toolbar-background {
	background-color: transparent;
}

in the src/app/app.scss file
em src/app/app.scss

the result is
o resultado Ă©

image
Untitled.png354×638 463 KB

Try it out
Testa ai no seu

2 Likes
7

@Pedro_Rocha

Eu consegui, muito obrigado
 PorĂ©m eu decidi colocar uma cor para ficar melhor o design, vocĂȘ poderia me explicar algumas coisas referentes ao assunto e outras nĂŁo referentes? Irei posta-las aqui abaixo:

Curiosidade sobre o Assunto do Post

1) O .toolbar-background Ă© alguma classe especial do ionic2? Pois eu nem a coloquei no footer ou toolbar como classe e funcionou e alĂ©m de tudo eu deixei sĂł como “.toolbar-background”. Como faço para ver na documentação esses tipos de “Classes especiais” ?

  1. O meu input está como “floating”, assim que clica nele ele aparece de outra cor, como mudar essa cor do “floating” e a cor que digitamos no input ?

3) No input ele tem uma “linha” embaixo para quando vocĂȘ clicar e for digitar algo os “dados” aparecem em cima desta linha, como eu faço para editar essa linha como por exemplo colocar um text-shadow?

DĂșvidas Gerais

1) Como Remover o Scroll que vem por padrĂŁo e fixar os elementos na tela para eles nĂŁo rolarem?

2) Como verificar se realmente o meu design estĂĄ responsivo nos demais smartphones e tablets?

3) Como testar o APP em tempo real e saber que estarĂĄ funcionando da mesma maneira para todos os dispositivos?

4) Como testar o app diretamente do meu celular enquanto eu programo?

image
image1366×768 420 KB

Desculpe as perguntas, sou novato e obrigado!

8

If you inspect the ‘ion-footer’ element, you’ll notice that it creates a toolbar and other elements inside with some default classes. The ‘toolbar-background’ class is one of them. It can be found in the ‘Sass Variables’ section of the toolbar documentation.
Se vocĂȘ inspecionar o elemento ‘ion-footer’, vai reparar que ele abre uma toolbar e mais alguns elementos dentro com umas classes padrĂŁo. A classe estĂĄ nos elementos de dentro, pode ser encontrada na seção ‘Sass Variables’ da documentação de toolbar.

Question #2, #3 and #4 should be another topic.
As questĂ”es nĂșmero 2,3 e 4 devem ser tratas em outro tĂłpico.

If you use chrome, press ‘ctrl + shift + c’ to open the Developer Tools, you can simulate devices sizes and test responsive designs. More information here.
Se vocĂȘ usa o chrome, aperte ‘ctrl + shift + c’ para abrir o Developer Tools, lĂĄ vocĂȘ pode simular vĂĄrios tamanhos de dispositivos e testar os designs responsivos. Mais informaçÔes aqui.

You can try using the ‘ionic run android’ or ‘ionic run ios’ command to install the app on your phone and test it while developing, keep in mind that it’s not a live-reload environment. More info here.
VocĂȘ pode usar o comando ‘ionic run android’ ou ‘ionic run ios’ para instalar o app no seu celular e testar enquanto programa, mas o ambiente nĂŁo Ă© live-reload. Mais informaçÔes aqui.

I think you should slow down and read documentations and watch tutorials, maybe start with a really basic app to get to know Ionic a little bit more. I’m always wandering around here if you need anything more, good luck!
Cara, acho que vocĂȘ deve ler mais das documentaçÔes e procurar uns tutoriais (no youtube tem vĂĄrios), comece com um app bem bĂĄsico sĂł para entender essas coisas de variĂĄveis Sass e como o Ionic funciona. Vou estar por ai caso vocĂȘ precise de algo mais, boa sorte!

1 Like