Partage

Cercle en css

aaaa

8 novembre 2014 à 14:55:57

Bonjour, je dois réaliser un cercle en CSS pour une maquette mais je ne sais pas comment m'y prendre.

Je dois réaliser un cercle un peu comme celui-ci mais en beaucoup plus petit !!

Merci à vous =)

8 novembre 2014 à 15:00:18

Utilise un border-radius, comme ceci

border-radius: 50%;



-
Edité par Auditek 8 novembre 2014 à 15:00:48

8 novembre 2014 à 15:04:42

D'accord mais au fait je souhaite que les bords du rond enfin je veux qu'au milieu de mon cercle on voit mon image de fond car sur ma maquette c'est censé représenté un déroulement de photos comme on peut voir sur certain site.
8 novembre 2014 à 15:43:43

tu peux mettre un screen de ce que tu veux s'il te plait
! La connaissance est un trésor !
8 novembre 2014 à 15:53:50

Slt,

Voici un lien qui peut te donner des idées pour créer des <div> de différentes formes en css.

-> http://css-tricks.com/examples/ShapesOfCSS/

ensuite essais d'ajouter un background-image à ton conteneur <div>

Je t'ai fais un exemple ->  http://cssdeck.com/labs/6fsqvofx

-
Edité par Lucky13 8 novembre 2014 à 16:03:32

9 novembre 2014 à 13:18:18

Je dois reproduire les petits cercles comme sous l'image ci dessous:

Je n'ai toujours pas réussi à mettre les cercles en petites opacité (j'ai reussi cependant à faire le cercle blanc)

Merci par avance

9 novembre 2014 à 13:52:17

hello c est des cercle de slideshow non ?
Aucun rêve n'est trop grand, aucun rêveur n'est trop petit :)
9 novembre 2014 à 13:56:55

Utilise un border, et pas de background.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
9 novembre 2014 à 13:57:01

slt, 

ceci forme des cercles de plusieurs types : 

div {
	position: relative;
	display: inline-block;
	height: 100px;
	width: 100px;
	border-radius: 100%;
	border: 2px solid black;
	margin-left: 5px;
	margin-top: 5px;
	text-align: center;
}

div p {
	position: relative;
	margin-top: 40px;
	font-size: 12px;
}

.friend {
	border: 2px dashed green;
}

.family {
	border: 2px dashed blue;
}

.enemy {
	border: 2px dashed red;
}

#best_friend {
	border: 4px solid #00C957;
}

#archnemesis {
	border: 4px solid #cc0000;
}
"la connaissance ne vaut que si elle et partagée de tous."
9 novembre 2014 à 14:03:26

Tanguy: Oui exactement

Rheo: c'est ce que j'ai fais ^^

9 novembre 2014 à 14:15:52

Probleme résolu. Merci à vous tous :)
9 novembre 2014 à 14:18:05

super bonne continuation
Aucun rêve n'est trop grand, aucun rêveur n'est trop petit :)

Cercle en css

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown