Alcuni prodotti Apple, tra cui Mac OS e iOS sistemi operativi, hanno diversi pulsanti di opzione arrotondati. Utilizzando il codice CSS e il linguaggio HTML, è possibile ricreare questi tasti arrotondati in stile Mac su una pagina Web, dando il vostro sito un Apple sentire. Si può imparare come creare pulsanti di opzione Mac con i CSS in pochi passaggi.

istruzione

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 Copia e incolla il seguente codice nel file CSS:

.yui3-macprefradio {
altezza: 1.75em;
}

.yui3-macprefradio .yui3-macprefradio-button {
border: 1px solid # 999;
float: left;
padding: 0.1em 0.5em;
-webkit-border-radius: 6px; /

Browser web-kit /
-khtml-border-radius: 6px; / Konquerer, funziona in Safari troppo /
-moz-border-radius: 6px; / Browser Gecko /
-o-border-radius: 6px; / Forse per opera /
border-radius: 6px;
text-align: center;
width: 50px;
}

.yui3-macprefradio .checked {
background-color: # DAF4DC;
border-color: # 7DC67D;
}

.yui3-macprefradio .yui3-macprefradio-center {
border-left: none;
-webkit-border-radius: 0;
-khtml-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
border-radius: 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 {
border-left: none;
-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 file CSS, e quindi chiuderlo.

4 Aprire il file HTML della pagina Web in Blocco note.

5 Copia e incolla il seguente blocco di codice nel file HTML nella posizione vuoi un pulsante in stile Mac ON / OFF:

<Div class = "yui3-macprefradio" id = "renderFromExactMarkup">
<Div class = "-macprefradio-pulsante yui3 yui3-macprefradio-sinistra" title = "yes"> On </ div>
<Div class = "-macprefradio-pulsante yui3 yui3-macprefradio-destra controllata" title = "no"> Disattiva </ div>
<Input name = "Radio1" type = valore "nascosto" = "" />
</ Div>

6 Fai clic su "File" e poi "Salva". Hai creato con successo pulsanti in stile Mac usando i CSS.