Como criar uma borda baseada na cor de fundo em um círculo div?
Pergunta
Tentei criar um círculo que border
deve ter a mesma cor da cor div e um espaço entre a borda e o div.O espaço intermediário deve mostrar a cor de fundo de qualquer div em que ele esteja.a cor de fundo pode ser alterada, portanto não devemos codificá-la.
Em vez disso, dei transparência usando rgba
modo.Tudo funcionou bem, estou tentando obter esse efeito ao passar o mouse sobre o círculo, mas não consegui passar o mouse porque estou tentando display:block
ao pairar e no estado normal é display:none;
Isto é para o seletor posterior, portanto, tentei esse efeito com o seletor posterior.
Código CSS
.main{
width:80px;
height:80px;
border-radius:100%;
background-color:#007eff;
text-align:center;
line-height:80px;
}
.main:hover + .main:after{
display:block;
}
.main:after{
width:86px;
height:86px;
border-radius:100%;
background:rgba(255,255,255,0.1);
border:2px solid #007eff;
position:absolute;
content:"";
z-index:-1;
top:3px;
left:3px;
display:none;
}
body{
background-color:#888;
}
HTML
<div class="main"><i class="fa fa-camera-retro fa-lg"></i>
</div>
ESTADO DO PROBLEMAON HOVER deve ficar como ESSE Com efeitos, se possível, se houver algum tutorial para fazer isso, ficarei feliz em aprender.Obrigado
Solução
definir position:relative;
para o .main
E definir left/right/top/bottom
do .main:after
para zero e adicione transition:all ease 0.3s
para animar.
no .main:hover:after
mudar left/right/top/bottom
para -5px
.
.main{
width:80px;
height:80px;
border-radius:100%;
background-color:#007eff;
text-align:center;
line-height:80px;
position:relative;
margin:6px;
}
.main:after{
border-radius:100%;
background:rgba(255,255,255,0.1);
border:2px solid #007eff;
position:absolute;
content:"";
z-index:-1;
top:0px;
left:0;
bottom:0;
right:0;
transition:all ease 0.3s;
}
.main:hover:after{
top:-5px;
bottom:-5px;
right:-5px;
left:-5px;
}
Outras dicas
Basta adicionar .main:hover:after
para exibi-lo como block
pairando VIOLINO DE TRABALHO
.main:hover:after{
display:block;
}
Tente algo assim
CSS:
.main{
width:80px;
height:80px;
border-radius:100%;
background-color:#007eff;
text-align:center;
line-height:80px;
}
.main:hover:after{
width:86px;
height:86px;
border-radius:100%;
background:rgba(255,255,255,0.1);
border:2px solid #007eff;
position:absolute;
content:"";
z-index:111;
top:3px;
left:3px;
}
body{
background-color:#888;
}
HTML:
<div class="main"><i class="fa fa-camera-retro fa-lg"></i>
</div>
você poderia usar box-shadow em vez de pseudo-element :http://jsfiddle.net/Ku6BQ/24/
.main {
width:80px;
height:80px;
border-radius:100%;
background-color:#007eff;
text-align:center;
line-height:80px;
}
.main:hover {
box-shadow: 0 0 0 4px #888888, 0 0 0 6px #007eff;
}
body {
background-color:#888;
} Se você é transparente e aparecer por trás de um gradiente ou de uma imagem, você ainda pode usar a sombra da caixa: http://jsfiddle.net/Ku6BQ/25/ http://jsfiddle.net/Ku6BQ/26/
.main {
width:80px;
height:80px;
border-radius:100%;
box-shadow:inset 0 0 0 100px #007eff;
text-align:center;
line-height:80px;
}
.main:hover {
border:4px transparent solid;
margin:-4px;
box-shadow: 0 0 0 2px #007eff,
inset 0 0 0 100px #007eff;;
}
html {
background :#888 url(http://lorempixel.com/200/200/nature) repeat;
height:100%;
}
Uma melhoria (apenas para registro) na ideia de uma sombra de caixa apresentada por GCyrillus
.main {
width:80px;
height:80px;
border-radius:100%;
background-color:#007eff;
text-align:center;
line-height:80px;
border: solid 4px transparent;
background-clip: padding-box;
box-shadow: 0 0 0 0px white;
-webkit-transition: all 1s;
transition: all 1s;
}
.main:hover {
box-shadow: 0 0 0 6px #007eff;
}
body {
background-color:#888;
}