Nwlapcug.com


Come rendere Mac Style Radio pulsanti con i CSS

Alcuni prodotti Apple, compresi il sistema operativo Mac e sistemi operativi iOS, hanno distinti pulsanti arrotondati. Utilizzando il codice CSS e HTML, è possibile ricreare questi bottoni tondi stile Mac su una pagina Web, dando il vostro sito una sensazione di Apple. Si può imparare a creare i pulsanti di opzione Mac con i CSS in pochi passi.

Istruzioni

1

Aprire il file CSS del tuo sito Web nell'applicazione blocco note di Windows che viene fornito in bundle con il sistema operativo.

2

Copiare e incollare il codice seguente nel file CSS:

{.yui3-macprefradio
Altezza: 1.75em;
}

.YUI3-macprefradio .yui3-macprefradio-button {
border: 1px solid #999;
float: left;
Imbottitura: 0.1em 0.5;
-webkit-border-radius: 6px; / kit di web browser /
-khtml-border-radius: 6px; / konquerer, funziona anche in safari /
-moz-border-radius: 6px; / browser gecko /
-o-border-radius: 6px; / forse per opera /
raggio bordo: 6px;
text-align: center;
Larghezza: 50px;
}

.YUI3-macprefradio avremmo {
colore di sfondo: #DAF4DC;
border-color: #7DC67D;
}

{.yui3-macprefradio-centro .yui3-macprefradio
bordo sinistro: nessuno;
-webkit-border-radius: 0;
-khtml-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
raggio bordo: 0;
}

.YUI3-macprefradio .yui3-macprefradio-sinistra {
-webkit-border-bottom-right-radius: 0;
-webkit-border-top-right-radius: 0;
-khtml-border-bottom-right-radius: 0;
-khtml-border-bottom-right-radius: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
-o-border-bottom-right-radius: 0;
-o-border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}

.YUI3-macprefradio .yui3-macprefradio-destra {
bordo sinistro: nessuno;
-webkit-border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 0;
-khtml-border-bottom-left-radius: 0;
-khtml-border-bottom-left-radius: 0;
-moz-border-radius-topleft: 0;
-moz-border-radius-bottomleft: 0;
-o-border-bottom-left-radius: 0;
-o-border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}

3

Salvare il tuo file CSS e quindi chiuderlo.

4

Aprire il file HTML della tua pagina Web nel blocco note.

5

Copia e incolla il seguente blocco di codice nel tuo file HTML nella posizione che desiderate un Mac-style ON/OFF pulsante di opzione:

< div class = "yui3-macprefradio" id = "renderFromExactMarkup" >
< div class = "yui3-macprefradio-pulsante yui3-macprefradio-sinistra" title = "yes" > il < / div >
< div class = "yui3-macprefradio-pulsante yui3-macprefradio-destra controllato" title = "no" > Off < / div >
< nome input = "radio1" type = "hidden" value = "" / >
< / div >

6

Fare clic su "File" e poi "Salva". Corretta creazione di pulsanti di opzione stile Mac usando i CSS.