Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal, Eu queria aplicar nos avatares do meu site, uma borda radial de cor gradiente exatamente como a usada no instagram (imagem). A imagem, a borda está devidamente pronta mas ja tentei VARIOS códigos css e não consegui colocar a cor da borda em degradê como na imagem. Alguém poderia me ajudar?
Olá Maujor. Pelo que eu intendi, este código seria um background inteiro gradiente com o background da imagem branco. O que eu preciso é realmente uma borda em degradê apenas por que como eu utilizo uma plataforma da rede em php, eu teria que fazer outras alterações que seriam mais complicadas. o código que eu tenho nela é o seguinte:
.panel-users .user-picture-wrapper {
padding: 2px;
border: 2px solid #661577;
border-radius: 50%;
}
.panel-users .user-picture {
position: relative;
display: block;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: #eee;
width: 100%;
height: 100%;
padding-top: 100%;
border-radius: 50%;
cursor: pointer;
}
E tenho o resultado abaixo :
[https://imgur.com/a/Dic2AGh](https://imgur.com/a/Dic2AGh)@Daniele Prada
Poste a marcação HTML para eu analisar.
>
12 horas atrás, Maujor disse:
@Daniele Prada
Poste a marcação HTML para eu analisar.
<!-- stories -->
{if $system['stories_enabled']}
<div class="panel panel-default panel-users">
<div class="panel-heading light no_border">
<strong class="text-muted">{__("Stories")}</strong>
<div class="x-muted text-clickable pull-right flip">
<i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title='{__("Histórias são fotos e vídeos das últimas 24hs")}'></i>
</div>
</div>
<div class="panel-body pt5">
<div class="row">
<!-- add new story -->
<div class="col-xs-2">
<div class="user-picture" data-toggle="modal" data-url="posts/story.php?do=create" style="background-image:url({$user->_data['user_picture']});">
<div class="add">
<i class="fa fa-plus-circle"></i>
</div>
</div>
</div>
<!-- add new story -->
<!-- users stories -->
{foreach $stories as $story}
<div class="col-xs-2">
<div class="user-picture-wrapper">
<div class="user-picture js_story" style="background-image:url({$story['user_picture']});" data-items='{$story["media"]}' data-toggle="tooltip" data-placement="top" title='{__("Veja a história de")} {$story["user_firstname"]} {$story["user_lastname"]}'>
</div>
</div>
</div>
{/foreach}
<!-- users stories -->Postar script que gera HTML não serve para nada.
Poste a marcação HTM que FOI GERADA pelo script.
Seria muito mais fácil você acessar o site e analisar.... envio um login e senha inbox
OK
Vamos por partes:
1-) Acrescente o seguinte no script:
<div class="col-xs-2">
<div class="borda"> <!-- <=================ACRESCENTE -->
<div class="user-picture" data-toggle="modal" data-url="posts/story.php?do=create" style="background-image:url({$user->_data['user_picture']});">
<div class="add">
<i class="fa fa-plus-circle"></i>
</div>
</div>
</div>
</div> <!-- <=================ACRESCENTE -->
Acrescente na CSS:.panel-users .user-picture {
/ declarações existentes permancem /
transform: scale(.9); / <==========ACRESCENTE /
}
/ ACRESCENTE A REGRA A SEGUIR /
.borda {
width: 100%;
height: 100%;
background: linear-gradient(45deg, #ff0, #f00, #90c) ;;
border-radius: 50%;
}
Deve resolver o avatar da GloboSex. Altere e informe para eu ver os demais avatares.O resultado ficou bem legal... mas a borda ficou diferente, por ter um background. ficou faltando uma pequena borda branca, entre a imagem e a borda gradiente. Nossa, eu não sabia que era tão difícil uma simples borda colorida haha que demanda
ficou assim --> https://imgur.com/a/20Jsi16
exemplo do insta --> https://imgur.com/a/kTodWz4
defina:
.panel-users .user-picture {
...
border: 2px solid white;
}>
7 minutos atrás, Maujor disse:
defina:
.panel-users .user-picture {
...
border: 2px solid white;
}
Eu ja havia tentado isto ... mas a imagem fica ovalada e não consegui corrigir
--> [https://imgur.com/a/dfIwFk2](https://imgur.com/a/dfIwFk2)
Outra questão, é que no desktop, não abre nada, as bordas só aparecem na dimenção para tablet ou smartphone.
--> [https://imgur.com/a/AyXxscK](https://imgur.com/a/AyXxscK)Corrigi o problema do tamanho...
padding-top: 95%;
E o efeito não aparecia no desktop por que havia colocado o css na área errada... que estava com a limitação ..@media (max-width: 767px) {
Agora sim ficou perfeito! só quero tentar deixar a borda um pouco mais fina
--> https://imgur.com/a/19vNsQC <--
A espessura das duas bordas são controladas conforme mostrado a seguir:
.panel-users .user-picture {
border: 3px solid white; / espessura da borda branca /
transform: scale(.9); / espessura da borda instagram, mais fina altere para .91,.92,.93 ... /
...
}
FINISH!!
Resultado incrível !!! Muito, muitíssimo obrigada @Maujor Pela ajuda e tempo gasto comigo! Espero poder contribuir muito no futuro aqui com as coisas que venho aprendendo!
>
7 horas atrás, Daniele Prada disse:
Espero poder contribuir muito no futuro aqui com as coisas que venho aprendendo!
@Daniele Prada
Esta vai ser a melhor forma de me agradecer pela ajuda que te dei.
Em tempo: Não se esqueça de estudar e revisar o que fizemos para entender o que foi feito. ;)
>
Em 09/05/2018 at 07:51, Maujor disse:
@Daniele Prada
Esta vai ser a melhor forma de me agradecer pela ajuda que te dei.
Em tempo: Não se esqueça de estudar e revisar o que fizemos para entender o que foi feito. ;)
Estou fazendo isso sim, é muito gratificante poder aprender com essas tarefas. mais uma vez mt obrigada
Veja um exemplo funcionandonessa Pen que eu criei
A seguir os códigos na Pen.
Adapte as dimensões para as suas necessidades.
HTML
div {
div:before{
img {