Borda Radial GRADIENTE

[Daniele Prada 0]

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?

[Maujor 144]

Veja um exemplo funcionando nessa Pen que eu criei

 

A seguir os códigos na Pen.
Adapte as dimensões para as suas necessidades.

 

HTML

<div><img src="caminho/imagem do avatar"></div>

CSS:

div {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: linear-gradient(45deg, #ff0, #f00, #90c)
}
div:before{
  content: '';
  display: block;
  width: 180px;
  height: 180px;
  position: absolute;
  top: 10px;
  left: 10px;
  background: white;
  border-radius: 50%;
  }
img {
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50px, -50px);
  border-radius: 20px;
}

 

[Daniele Prada 0]

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

[Maujor 144]

@Daniele Prada

Poste a marcação HTML para eu analisar.

[Daniele Prada 0]

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 -->

 

[Maujor 144]

Postar script que gera HTML não serve para nada.
Poste a marcação HTM que FOI GERADA pelo script.

[Daniele Prada 0]

Seria muito mais fácil você acessar o site e analisar.... envio um login e senha inbox

[Maujor 144]

OK

[Maujor 144]

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.

[Daniele Prada 0]

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

[Maujor 144]

defina:

.panel-users .user-picture {
  ...
  border: 2px solid white;
}

 

[Daniele Prada 0]

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

 

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

 

[Daniele Prada 0]

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  <--

[Maujor 144]

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 ... */
   ...
}

 

[Daniele Prada 0]

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! 

 

-->> https://imgur.com/a/kb4ydM7

[Maujor 144]

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. ;)  

[Daniele Prada 0]

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