Nei precedenti articoli abbiamo visto come orientare un testo su di una curva o un cerchio usando esclusivamente HTML e CSS3. Alcuni ragazzi hanno sviluppato questo concetto, creando le loro forme, i loro loghi personalizzati.
Oggi vedremo come applicare realmente questo codice.
HTML
Ecco il codice HTML, costituito da un semplice contenitore <div> al cui interno è presente una lista con i relativi <ul> e <li>.
Questi elementi saranno ordinati con orientamento curvilineo tramite la gestione delle loro classi e del loro stile css.
<div>
<ul id="controls">
<li id="volume-neck">
<i class="num num-1">1</i>
<i class="num num-2">2</i>
<i class="num num-3">3</i>
<i class="num num-4">4</i>
<i class="num num-5">5</i>
<i class="num num-6">6</i>
<i class="num num-7">7</i>
<i class="num num-8">8</i>
<i class="num num-9">9</i>
<i class="num num-10">10</i>
<span><b>Volume</b></span>
</li>
</ul>
</div>
CSS
Ecco il codice CSS, dove vediamo una prima parte dedicata allo stile generale del <body>, <div>, e una seconda parte dedicata alla trasformazione curvilinea e alla rotazione.
// ================ Begin General Styles
body {
background: #ff9427;
font: normal 200%/1.5 Helvetica, sans-serif;
}
div {
width: 20em;
margin: 1.5em auto;
}
// ================ Control Knobs
#controls {
li {
/* control knobs */
display: inline-block;
font-size: .75em;
position: relative;
transition: .3s all ease-in-out;
z-index: 0;
/* control knob hover states */
&:hover {
transform: rotate(180deg);
cursor: pointer;
span:before {
background-image: linear-gradient(top, rgb(199,197,197) 37%, rgb(225,219,221) 70%, rgb(230,225,227) 85%);
}
}
/* control knobs hover state inner circle */
span {
//background-image: linear-gradient(top, rgb(199,197,197) 37%, rgb(225,219,221) 70%, rgb(230,225,227) 85%);
}
}
}
/* control knobs */
[class^=num] {
color: rgb(130,180,0);
display: inline-block;
font-size: .75em;
position: absolute;
width: auto;
position: absolute;
width: .875em;
height: 4.5em;
top: .175em;
left: 45%;
transform-origin: bottom center; // ala Chris Coyier's tip
text-shadow: 0 1px 0px #EFEFEF,
0 -1px 0px rgba(0,0,0,.45);
z-index: 100;
}
// A pretty sweet Sass loop ala Chris Coyier
@for $i from 1 through 20 {
.num-#{$i} {
transform: rotate(($i*32)+deg);
}
}
/* control knobs inner circle */
#controls span {
transition: .3s all ease-in-out;
background: #ecebe9;
border-radius: 80%;
box-shadow: 0 1px 3px rgba(0,0,0,.5),
inset 0 1px 3px rgba(255,255,255,1);
height: 4em;
line-height: 4em;
margin: 1.5em;
width: 4.175em;
color: rgb(130,180,0);
display: inline-block;
font-size: 1em;
text-align: center;
text-shadow: 0 1px 0px white,
0 -1px 0px rgba(0,0,0,.4);
}
/* control knobs outer circle styles */
#controls span:before {
background: #e1dbdd;
background-image: linear-gradient(bottom, rgb(199,197,197) 37%, rgb(225,219,221) 70%, rgb(230,225,227) 85%);
border-radius: 80%;
box-shadow: 0 1px 3px rgba(0,0,0,.5),
inset 0 1px 3px rgba(255,255,255,1);
content: "";
display: inline-block;
width: 7em;
height: 7em;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
Un ringraziamento particolare all’ideatore del codice, ecco il link relativo: http://codepen.io/grayghostvisuals/pen/volume-knobs/.
Ti e' piaciuto l'articolo?
Commenti (0) / Aggiungi un commento 
Vai al Forum
Tag:
Data: 11 luglio 2012 
