wake-up-neo.com

Responsive CSS-Kreise

Tor:

Responsive CSS-Kreise:

  1. Skalieren Sie mit gleichem Radius.
  2. Der Radius kann in Prozent berechnet werden.
  3. Der Radius kann durch Medienabfragen gesteuert werden.

Wenn die Lösung javascript ist, muss ich noch Medienabfrage-Trigger emulieren. Ich brauche keine Medienanfragen, möchte aber die Möglichkeit haben, den Radius bei bestimmten Breiten prozentual zu steuern:

@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%;}
}

Folgendes habe ich bisher:

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

Probleme:

Wenn in dieser Lösung Inhalt zu einem Kreis hinzugefügt wird:

  • Die Form wird verzerrt, wenn sie über die verfügbare Auffüllung hinaus skaliert wird.
  • Vergrößert den Radius.

Aktualisieren:

Ich habe hier eine funktionierende Lösung gebaut: Responsive CSS Circles

23
Dan Kanze

Lösung:

http://jsfiddle.net/WTWrB/

Die DIV-Struktur:

Wir verwenden overflow:hidden in .x2, um Hintergrundfarben in .x3 Der untergeordneten Elemente auslaufen zu lassen.

Beachten Sie, dass der Inhalt in .x3 beginnt

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

Das 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

Sie brauchen dafür keine @media-Abfragen. Das ist mein Versuch, reines CSS:

.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

Vollbildschirm

Kürzere Code

Diese Lösung reduziert die Codegröße, behält jedoch die Funktionalität bei. Ich habe den ursprünglichen .x# beibehalten und die .x0, .x3 und .x6 beseitigt, die nicht benötigt wurden. In einer endgültigen Lösung würden Sie wahrscheinlich neu nummerieren (aber ich wollte, dass Sie sehen, was eliminiert wurde).

Jedes Ihrer Stücke, die den Kreis "aufteilen", für den eine andere top- oder left-Einstellung erforderlich ist, muss über einen Selektor verfügen, der den .x2 > div-Selektor überschreitet, um ihn zu überschreiben. Daher habe ich .x2 > .x7 usw. für einige meiner Selektoren.

(Wie in den Kommentaren unten erwähnt, hat Chrome Probleme mit dem Bug mit der ursprünglichen Technik, die das OP zum Zeitpunkt des Startens der Kopfgeldleistung gepostet hatte. Dies löst diese Probleme nicht, so dass Sie Folgendes in einem anderen Browser anzeigen können.)

Hier ist die modifizierte Geige.

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: Basierend auf Kommentaren scheint es, als wollte das OP etwas mehr wie das Steuerelement, das diese Geige bietet (nicht funktionsfähig in Chrome; das OP hat zum Zeitpunkt dieser Bearbeitung für mich nicht geantwortet zu wissen, ob dies die gewünschte Funktionalität ist oder nicht).

7
ScottS

Ich weiß, dass sich diese Lösung ein wenig von den hier vorgeschlagenen unterscheidet, aber ich dachte immer noch, dass es sich lohnt, sie aufzulegen.

Ich habe ein Bild als Maske verwendet, um den Kreis zu erstellen. Dabei habe ich die Tatsache ausgenutzt, dass das Auffüllen als Prozentsatz auf Basis der Breite des übergeordneten Elements und nicht der Höhe berechnet wird. Dadurch konnte ich ein perfektes Quadrat erstellen.

Demonstration der proportionalen Größenänderung von Kreisen hier

HTML Quelltext

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

CSS-Code

.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%; }
}

Demonstration der obigen Kreise, unterteilt in Abschnitte gemäß Ihrer Frage hier

0
Bruno