Création et positionnement de venn-diagram avec css

J'essaye de créer un effet avec css - Je veux trois cercles superposés ressemblant à un diagramme de Venn. Je veux appliquer des transformations css-animation sur les cercles pour qu'ils semblent pulser.Création et positionnement de venn-diagram avec css

J'essaie actuellement d'utiliser · ou · comme cercle de diagramme de venn. Cependant, comme vous pouvez (espérons-le) voir, la position de ce personnage n'est pas flush gauche ou droite ... et donc le positionnement de celui-ci est terriblement difficile. Notez comment dans l'image ci-dessous les points sont en dehors d'une boîte de délimitation de 100px x 100px.

enter image description here

Je veux positionner les cercles de Venn-diagramme dans leur élément parent donc il est facile de positionner l'élément Venn diagramme ailleurs. Y a-t-il une meilleure approche pour créer ce look? Police personnalisée? SVG?

<style> 

@-webkit-keyframes dot1 
{ 
    0% {color: rgba(255, 0, 0, .3);} 
    50% {color: rgba(255, 0, 0, .8);} 
    100% {color: rgba(255, 0, 0, .3);} 
} 


.dot 
{ 
    font-size: 200px; 
    position: absolute; 
} 

.dot1 
{ 
    -webkit-animation:dot1 2s infinite; 
    top: 0; 
} 

.dot2 
{ 
    -webkit-animation:dot1 2s infinite; 
    left: 20px; 
    top: 0; 
} 

.dot3 
{ 
    -webkit-animation:dot1 2s infinite; 
    top: 10px; 
    left: 15px; 
} 

.container 
{ 
    border-style: solid; 
    border-color: pink; 
    border-width: 1px; 
    width: 100px; 
    height: 100px; 
} 

</style> 
</head> 
<body> 

    <div class='container'> 
    <span class='dot dot1'>&#183;</span> 
    <span class='dot dot2'>&#183;</span> 
    <span class='dot dot3'>&#183;</span> 
    </div> 

</body>

http://jsbin.com/ozeham/1/edit

Source

2013-04-17 jedierikb

Différents navigateurs peuvent rendre le texte de différentes façons . L'utilisation d'une image est probablement la méthode la plus précise au pixel près. Cependant, essayez de jouer avec la propriété 'line-height' de' .dot'. http://jsbin.com/oparic/1/edit – showdev

au lieu d'utiliser le point caractères que vous pouvez simplement créer un cercle à l'aide CCS3 (border-radius). ces cercles sont beaucoup plus faciles à contrôler: http://jsbin.com/ozeham/3/

Source

2013-04-17 18:00:54 oezi

SVG fonctionnerait très bien - mais si vous voulez coller avec CSS essayez d'utiliser un plus petit conteneur pour que le diagramme de Venn, puis positionner le récipient pour se déplacer ensemble l'ensemble du diagramme.

E.g.

<div class="venn"> 
    <div class="dot dot1"></div> 
    <div class="dot dot2"></div> 
    <div class="dot dot3"></div> 
</div>

Ensuite, utilisez position: absolute pour les points (et top et left propriétés à la position tweak). Pour le conteneur, utilisez position: absoluteouposition: relative pour le placer dans la boîte:

.venn { 
    position: relative; 
    top: 50%; 
    left: 50%; 
} 
.dot { 
    position: absolute; 
}

http://jsbin.com/ozeham/6/edit

Source

2013-04-17 17:55:55

Nombre de façons dont vous pourriez aborder cela. Je ne suis pas tout à fait clair ce que vous essayez d'accomplir par ceci. J'utiliserais border-radius pour créer les cercles.

http://jsbin.com/ozeham/10/edit

Source

2013-04-17 18:08:37 JMWhittaker

Pourquoi pris la peine d'utiliser des caractères comme des cercles, lorsque vous pouvez utiliser la syntaxe comme ceci:

.circle { 
    width:whatever; 
    height:whatever; 
    border-radius:50%; 
    opacity:33%; 
} 

#foo { 
    background-color:#FF0000; 
} 


#bar { 
    background-color:#00FF00; 
} 


#qux { 
    background-color:#0000FF; 
} 

.container { 
    position:relative; 
    right:whatever; 
    top:whatever; 
}

Avec le HTML:

<div class="container"> 
    <div class="circle" id="foo"></div> 
    <div class="circle" id="bar"></div> 
    <div class="circle" id="qux"></div> 
</div>

Source

2013-04-17 18:09:14 Jules

Création et positionnement de venn-diagram avec css

Répondre

Questions connexes