web-dev-qa-db-fra.com

Cercles CSS réactifs

Objectif:

Cercles CSS réactifs qui:

  1. Échelle de rayon égal.
  2. Le rayon peut être calculé en pourcentage.
  3. Le rayon peut être contrôlé par des requêtes de médias.

Si la solution est javascript, je dois encore émuler les déclencheurs de requête multimédia. Je n'ai pas besoin de requêtes multimédia, mais je veux pouvoir contrôler le rayon en pourcentage à certaines largeurs:

@media (max-width : 320px) 
{
    .x2{padding: 50%;}
}

@media (min-width : 321px) and (max-width : 800px)
{
    .x2{padding: 25%;}
}

@media (min-width: 801px)
{
    .x2{padding: 12.5%;}
}

Voici ce que j'ai jusqu'à présent:

http://jsfiddle.net/QmPhb/

<div class="x1">
    <div class="x2">
        lol dude      
    </div>
    <div class="x2"></div>
    <div class="x2"></div>
    <div class="x2"></div>
</div>

.x1
{
    float:left;
    width:100%;
}

.x2
{
    display:block;
    float:left;
    padding: 12.5%;          //Currently being used to control radius.
    width:auto;
    height:auto;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    -khtml-border-radius: 50%;
    background:#eee;
    text-align:center;
}

Problèmes:

Dans cette solution, lorsque du contenu est ajouté à un cercle:

  • La forme se déforme une fois mise à l'échelle après le remplissage disponible.
  • Augmente la taille du rayon.

Mettre à jour:

J'ai construit une solution de travail pour cela ici: Responsive CSS Cercles

htmlcssresponsive-designcss-shapes
23
Dan Kanze

Solution:

http://jsfiddle.net/WTWrB/

La structure DIV:

Nous utilisons overflow:hidden dans .x2 pour renverser les couleurs d'arrière-plan dans .x3 Des éléments enfants.

Notez que le contenu commence à l'intérieur de .x3

<div class="x0">
    <div class="x1">
        <div class="x2">
            <div class="x3">
                <!-- BEG Content -->
                <div class="x4">
                    dude
                </div>
                <div class="x6">
                    <div class="x7">
                        dude
                    </div>
                    <div class="x8">
                        dude
                    </div>
                </div>                
                <div class="x5">
                    dude
                </div>
                <!-- END Content -->
            </div>
        </div>
        <div class="x2"></div>
        <div class="x2"></div>
        <div class="x2"></div>
    </div>
</div>

Le CSS:

@media (max-width: 320px)
{
    .x2 {padding: 50%;}
}

@media (min-width: 321px) and (max-width: 800px)
{
    .x2 {padding: 25%;}
}

@media (min-width: 801px)
{
    .x1 {width:800px}
    .x2 {padding: 12.5%;}
}
.x0 {
    float:left;
    width:100%;
}
.x1 {
    margin:0px auto;
}
.x2 {
    overflow:hidden;
    display:block;
    float:left;
    width:auto;
    height:auto;
    position: relative;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    -khtml-border-radius: 50%;
    background:#eee;
}
.x3 {
    position: absolute;
    width: 100%;
    left: 0;
    top:0;
    font-size: 100%;
    float:left;
    height:100%;
    background-color:red;
}
/* BEG Content */
.x3 div{float:left;}
.x4,.x5,.x6 {
    width:100%;
}
.x7,.x8 {
    width:50%;
    float:left;
    height:100%;
}
.x4,.x5,.x7,.x8 {
    text-align:center;
}
.x4 {
    background-color:blue;
    height:20%;
}
.x5 {
    background-color:yellow;
    height:20%;
}
.x6 {
    height:60%;
}
.x7 {
    background-color:green;
}
.x8 {
    background-color:orange;
}
/* END Content */

Responsive CSS Circles

4
Dan Kanze

Vous n'avez pas besoin de requêtes @media pour cela. Ceci est mon essai, CSS pur:

.x1 {
    overflow:hidden;
}
.x1 .x2 {
    display:block;
    float:left;
    padding: 12.5%;
    width:auto;
    height:auto;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    -khtml-border-radius: 50%;
    background:#eee;
    text-align:center;
    position: relative;
}
.x1 .x2 span {
    position: absolute;
    width: 100%;
    left: 0;
    top: 48%;
    line-height: 1em;
    height: 1em;
    font-size: 100%;
    overflow: hidden;
}​

Fiddle

Plein écran

14
Praveen Kumar Purushothaman

Code court

Cette solution réduit la taille de votre code mais maintient la fonctionnalité en place. J'ai conservé le .x# d'origine, en éliminant les .x0, .x3 et .x6 qui n'étaient pas nécessaires. Donc, dans une solution finale, vous renuméroteriez probablement (mais je voulais que vous voyiez ce qui avait été éliminé).

N'importe lequel de vos morceaux "divisant" le cercle qui nécessite un paramètre top ou left différent devra avoir un sélecteur qui respecte ou dépasse le sélecteur .x2 > div pour écraser, d'où la raison pour laquelle j'ai .x2 > .x7, etc., pour certains de mes sélecteurs.

(Comme indiqué dans les commentaires ci-dessous, Chrome a des problèmes de bogue avec la technique originale que l'OP avait publiée au moment du lancement de la prime. Cela ne résout pas le problème, consultez les informations suivantes dans un autre navigateur.)

Voici le violon modifié.

HTML

<div class="x1">
        <div class="x2">
                <!-- BEG Content -->
                <div class="x4">
                    dude
                </div>
                <div class="x7">
                    dude
                </div>
                <div class="x8">
                    dude
                </div>
                <div class="x5">
                    dude
                </div>
                <!-- END Content -->
        </div>
        <div class="x2"></div>
        <div class="x2"></div>
        <div class="x2"></div>
    </div>

CSS

.x1 {
    margin:0px auto;
}
.x2 {
    overflow:hidden;
    display:block;
    float:left;
    width:auto;
    height:auto;
    position: relative;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    -khtml-border-radius: 50%;
    background:#eee;
}

/* BEG Content */
.x2 > div {
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
}
.x4,.x5 {
    width:100%;
    height: 20%;
}
.x2 > .x7, .x2 > .x8 {
    width:50%;
    height: 60%;
    top: 20%;
}
.x4 {
    background-color:blue;
}
.x2 > .x5 {
    background-color:yellow;
    top: 80%;
}

.x7 {
    background-color:green;
}
.x2 > .x8 {
    background-color:orange;
    left: 50%;
}
/* END Content */
@media (max-width: 320px)
{
    .x2 {padding: 50%;}
}

@media (min-width: 321px) and (max-width: 800px)
{
    .x2 {padding: 25%;}
}

@media (min-width: 801px)
{
    .x1 {width:800px}
    .x2 {padding: 12.5%;}
}

EDIT: D'après les commentaires, il semble que l'OP souhaite quelque chose de plus semblable à le contrôle que ce violon offre (non fonctionnel dans Chrome; l'OP n'a pas encore répondu à cette requête pour moi savoir si c'est le type de fonctionnalité souhaité ou non).

7
ScottS

Je sais que cette solution diffère un peu de ce qui a été suggéré ici, mais je pensais toujours que cela valait la peine de la mettre en place.

J'ai utilisé une image en tant que masque pour créer le cercle et j'ai tiré parti du fait que lorsque le remplissage est spécifié en pourcentage, il est calculé en fonction de la largeur de l'élément parent plutôt que de la hauteur. Cela m'a permis de créer un carré parfait.

Démonstration de cercles redimensionnant proportionnellement ici

Code HTML

<div class="container">
    <img class="circle" src="circleImage.png">
</div>

Code CSS

.container {
    position: relative;
    float: left;
    width: 50%;
    height: 0;
    padding-bottom: 50%;
    background-color: #bbb;

}

.circle { 
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: auto;
    z-index: 1;
}

@media (max-width: 320px) {
    .container { width: 100%; padding-bottom: 100%; }
}

@media (min-width: 321px) and (max-width: 800px) {
    .container { width: 50%; padding-bottom: 50%; }
}

@media (min-width: 801px) {
    .container { width: 25%; padding-bottom: 25%; }
}

Démonstration des cercles ci-dessus divisés en sections selon votre question ici

0
Bruno