Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde
Estou montando um site responsivo e liquido
E algumas da minhas caixas section quero que seja redondas igual uma bola, então estou usando o border-radius 100%, queria saber se posso deixar essa caixa 100% para que quando eu aumentar e diminuir o tamanho da tela, a caixa ainda se mantenha redonda, um exemplo disso é este código abaixo:
<!DOCTYPE html>
<html>
<head>
<title>Proporção</title>
<meta charset="UTF-8">
<style>
body {
background: #0f0;
}
section {
max-width: 700px;
margin: 0 auto;
margin-top: 30px;
}
img {
width: 100%;
background: radial-gradient(#f00, #00f);
border-radius: 100%;
float: left;
z-index: 1;
}
img:hover {
box-shadow: 0 0 50px 5px #000;
transition-duration: 0.3s;
}
figcaption {
position: relative;
z-index: 2;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<section>
<a href="">
<img src="transparent.png">
<figcaption>Texto</figcaption>
</a>
</section>
</body>
</html>
Só que para poder manter a proporção 1:1 (quadrado) tive que usar uma imagem transparente de 1px por 1px e dando cor nela, só que eu quero também é poder centralizar o texto bem no meio da caixa, tanto verticalmente como horizontalmente eo tamanho da fonte aumentar conforme o tamanho da bolinha sem vazar da caixa e sem ficar muito pequena , um exemplo disso é o meu site [http://marchi.esy.es](http://marchi.esy.es) em que fiz isso, mais a bolinhas não aumentam conforme o tamanho da tela e nem o texto, só depois de uma certa resolução que eu usei o @média. para adaptar para mobile
Eu quero fazer tudo isso com CSS, sem JavaScript, pois ainda vou aprender JavaScript no semestre que vem>
29 minutos atrás, Vinicius Cainelli disse:
Acho que é isso que você quer.
e como que eu faço para a fonte aumentar ou diminuir conforme o tamanho da caixa?
Ai você pode controlar usando media queries,
>
4 minutos atrás, Vinicius Cainelli disse:
Ai você pode controlar usando media queries,
Fiz o teste com este código que você passou em um html, não funcionou, o circulo não muda de tamanho conforme o tamanho da janela, teria que ser tipo o código que postei
>
23 minutos atrás, Vinicius Cainelli disse:
Ai você pode controlar usando media queries,
Teria que ser assim, mais não estou conseguindo centralizar o texto e nem fazer com ele aumente conforme o tamanho da caixa
Acho que isso ajuda..
>
2 minutos atrás, Vinicius Cainelli disse:
Acho que isso ajuda..
Falta pouco para o que eu quero, não teria como o fonte aumente continuamente com o tamanho da caixa, pois só esta mudando o tamanho com media queries
Ai é só você fazer as medias queries que precisa pra alterar isso
>
11 minutos atrás, Vinicius Cainelli disse:
Ai é só você fazer as medias queries que precisa pra alterar isso
E com porcentagem sera que não rola?, pois a fonte ira ocupar tantos por cento da caixa, ai se aumentar um 1px da caixa com janela do browser a letra tb aumenta, porque o tamanho dela corresponde a tantos porcento da caixa, sera que tem como fazer isso? por que no media queries só ira aumentar tamanhos fixos
>
2 minutos atrás, andjao disse:
E com porcentagem sera que não rola?, pois a fonde ira ocupar tantos por cento da caixa, ai se aumentar um 1px da caixa com janela do browser a letra tb aumenta, porque o tamanho dela corresponde a tantos porcento da caixa, sera que tem como fazer isso? por que no media queries só ira aumentar tamanhos fixos
Eu acho que porcentagem vai dar na mesma que a unidade "em" utilizada, mas tenta aí.
Quando você seta qualquer media em %, ele basea o % no pai, que no caso, também é %.
Então, sua fonte vai ser baseada no tamanho da fonte do body.
Se você quer que o texto acompanha o circulo, faça em SVG, é bem mais pratico
Vlw feras!!! vcs são demais
Vou editar meu site, depois posto o resultado aqui!!!
Forte abraço!!!
>
15 horas atrás, Vinicius Cainelli disse:
Quando você seta qualquer media em %, ele basea o % no pai, que no caso, também é %.
Então, sua fonte vai ser baseada no tamanho da fonte do body.
Se você quer que o texto acompanha o circulo, faça em SVG, é bem mais pratico
Mudando de assunto, você sabe mexer com isso?
>
15 horas atrás, rikaschmitt disse:
Eu acho que porcentagem vai dar na mesma que a unidade "em" utilizada, mas tenta aí.
Mudando de assunto, você sabe mexer com isso?
Mexer com "em" ?
É fácil... há outras unidades de medida além do pixel que você pode utilizar.
Dá uma lida sobre: https://tableless.com.br/unidade-pixels-em-rem/
Acho que é isso que você quer.