Chiedici un preventivo
Contattaci
800974469
Chatta con noi
Pubblicato il 24/07/2015
Son sicuro che molti di voi si saranno chiesti: ma a cosa serve studiare la trigonometria?
Ma perché devo conoscere il seno o il coseno quando alla fine ho il computer che lo fa per me?
Ecco, oggi inizieremo a capire come anche nel web, per fare un semplice strillo da mettere nelle offerte speciali, essa sia fondamentale!
senza bisogno di immagini usando solo il colore del bordo e le posizioni dei blocchi.
Bene, iniziamo!
Bordi Css
Son certo che se state leggendo questa miniguida, saprete cosa siano i bordi nei blocchi html, e come si possano modificare/gestire con i css.
Probabilmente vi sarà sfuggita la loro estrema flessibilità. Per capirci meglio, vediamo degli esempi che, come sempre accade, valgono più di mille parole.
Creiamo un blocco, di dimensioni 100x100 pixel, al quale applichiamo un bordo di 100pixel di quattro colori diversi, con questo css:
#blk {
width:100px;
height:100px;
margin:50px auto;
background:#ccc;
border-width:100px;
border-style:solid;
border-color:#0cf #0fc #fc0 #f0c;
}che ci darà questo risultato:
Non male no?
Allo stesso blocco, ora togliamo i bordi destro e inferiore:
#blk {
width:100px;
height:100px;
margin:50px auto;
background:#ccc;
border-width:100px 0 0 100px;
border-style:solid;
border-color:#0cf #0fc #fc0 #f0c;
}con questo risultato.
immagino state iniziando a capire dove voglia arrivare...
Ora settiamo come trasparenti tutti i bordi tranne quello superiore.
#blk {
width:100px;
height:100px;
margin:50px auto;
background:#ccc;
border-width:100px 0 0 100px;
border-style:solid;
border-color:#0cf transparent transparent transparent;
}
togliamo poi il colore di sfondo, lasciandolo trasparente, e settiamo larghezza e altezza a zero del blocco:
#blk {
width:0;
height:0; margin:50px auto;
background:none;
border-width:100px 0 0 100px;
border-style:solid;
border-color:#0cf transparent transparent transparent;
}et voilà: abbiamo ottenuto l'etichetta a 45 gradi che volevamo
Ovviamente avremmo potuto ottenere anche l'angolo sinistro o gli angoli bassi: inserisco il codice per il top-sx, gli altri ve li lascio per esercizio.
#blk {
width:0;
height:0;
margin:50px auto;
background:none;
border-width:100px 100px 0 0;
border-style:solid;
border-color:#0cf transparent transparent transparent;
}
Ok. E se volessi angoli diversi? tipo a 30 o 60 gradi, come si fa?
Semplice! Basta impostare le due larghezze del bordo in modo tale che l'angolo ottenuto sia quello voluto.
Eccola la trigonometria! Come si calcola, in un triangolo rettangolo, l'angolo congruente avendo i due cateti?
Facile dai! Dati a e b, cateti, e v l'angolo richiesto, otterremo che
b=a*tan(v)Prediamo i casi in cui v è di 30, e a fisso a 100px, otterremo che b deve essere:
b=100*tan(π/6) -> b=57.7 pixel.E, infatti, se proviamo con queste due set di regole:
#blk {
width:0;
height:0;
margin:50px auto;
background:none;
border-width:100px 0 0 57.7px;
border-style:solid;
border-color:#fc0 transparent transparent transparent;
}#blk {
width:0;
height:0;
margin:50px auto;
background:none;
border-width:57.7px 0 0 100px;
border-style:solid;
border-color:#f0c transparent transparent transparent;
}otterremo rispettivamente:
Bene finora, o no?
Vediamo ora come ottenere le etichette sfruttando ciò che abbiamo appreso con gli angoli dai bordi.
Etichette
Prepariamo un blocco html (testBlk), al quale vogliamo applicare l'effetto. Al suo interno aggiungiamo due blocchi: uno per l'angolo (.corner) e uno per il testo (.testo)
Iniziamo subito ad assegnare delle regole basi. In particolare, settiamo i due blocchi interni con posizione assoluta e fissati in alto e a destra, e assegnamo a corner le regole apprese sopra.
#testBlk {
background:#ccc;
width:200px;
height:200px;
border:1px solid #333;
position:relative;
margin:100px auto;
}
#testBlk .corner {
position:absolute;
top:0;
right:0;
width:0;
height:0;
margin:0;
padding:0;
background:none;
border-width:100px 0 0 100px;
border-style:solid;
border-color:#0cf transparent transparent transparent;
}
#testBlk .testo {
position:absolute;
top:0;
right:0px;
width:141.4px;
height:20px;
line-height:20px;
padding:118.4px 0 3px 0;
text-align:center;
background:rgba(127,127,127,0.5);
color:#f0c;
}Otterremo questo:
Notate la larghezza (141.4px e l'altezza [20+118.4+3=141.4px]). Perché proprio questo valore?
Semplice: vorremmo girare il quadrato del testo e alliearlo con il bordo. E come si calcolo l'ipotenusa di un triangolo rettangolo, conoescendo i cateti e/o un cateto e un angolo?
Ecco ancora la trigonometria che entra in gioco! :)
In questo caso specifico,
l=100/cos(π/4)=141.4 pixel.Spero abbiate notato anche che ho creato un'altezza di 20 pixel per poi aggiungervi del padding inferiore e soprattutto superiore per ottenere un blocco quadrato con il testo in basso!
Proviamo ora a girare il blocco del testo di 45 gradi aggiungendo questa regola [NdA: vale solo per webkit e mozilla. Per altri browser ci son altri metodi che esulano da questa discussione]
#testBlk .testo {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
notate come il blocco sia ruotato rispetto al centro.
Cosa che ovviamente non ci soddisfa!
Ci tocca spostare il centro fino a che il bordo del testo corrisponda al bordo diagonale del triangolo. E ok. E di quanto lo dobbiamo spostare?
Sì, avete capito: ancora trigonometria!
Per capire guardiamo meglio l'immagine:
Dobbiamo traslare il centro verso destra e verso l'altro, a 45 gradi in pratica, di uno spazio pari alla parte rossa e a quella gialla. E' evidente che la parte rossa diagonale sia pari a quelle orizzontali e verticali rosse (non vi tedio con geometria: è evidente che sia così in quanto è lo stesso blocco girato, e la riga rossa è la stessa, solo girata. E lo stesso vale per la parte gialla).
Quanto vale questo distanza(gialla + rossa)?
Beh, se notate, le linee orizzontali e verticali chiudono un nuovo triangolo isoscele rettangolo, con ipotenusa lunga 141.4 pixel e cateti lunghi quanto la traslazione (sì, lo so che c'è un altro modo molto più semplice per capire quanto siano lunghi, tranquilli!) :
Quanto dobbiamo traslare quindi? Beh, basta fare
141.4*cos(π/4)=100px.Ok, 100 pixel in una direzione. E se consideriamo l'asse cartesiano, quanto vale tale spostamento sui due assi?
Anche qui, semplice semplice:
100*cos(π/4)=70.7pixel
100*sin(π/4)=70.7pixel(sapendo che dato un triangolo rettangolo, data l'ipotenusa e un angolo, i cateti, ergo le proiezioni sugli assi, si calcolano moltiplicando ipotenusa per seno e coseno dell'angolo. Cosa? è ancora trigonometria? eccerto, ve l'ho detto che serve come il pane, no?!)
A questo punto abbiamo tutto per ottenere ciò che ci siamo prefissati:
#testBlk {
background:#ccc;
width:200px;
height:200px;
border:1px solid #333;
position:relative;
margin:100px auto;
}
#testBlk .corner {
position:absolute;
top:0;
right:0;
width:0;
height:0;
margin:0;
padding:0;
background:none;
border-width:100px 0 0 100px;
border-style:solid;
border-color:#0cf transparent transparent transparent;
}
#testBlk .testo {
position:absolute;
top:-70.7px;
right:-70.7px;
width:141.4px;
height:20px;
line-height:20px;
padding:118.4px 0 3px 0;
text-align:center;
background:none;
color:#f0c;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}il quale, mettendo due regolette per spostare un po' il bordo in basso, e aggiungendo l'immagine di sfondo nell'html, ci portano al risultato voluto
Html:
CSS finale:
#testBlk {
background:#fff;
width:200px;
height:200px;
border:1px solid #333;
position:relative;
margin:100px auto;
}
#testBlk .corner {
position:absolute;
top:1px;
right:1px;
width:0;
height:0;
margin:0;
padding:0;
background:none;
border-width:100px 0 0 100px;
border-style:solid;
border-color:rgba(255, 127, 0, 0.9) transparent transparent transparent;
}
#testBlk .testo {
position:absolute;
top:-69.7px;
right:-69.7px;
width:141.4px;
height:20px;
line-height:20px;
padding:118.4px 0 3px 0;
text-align:center;
background:none;
color:#fff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}Ok. Siamo arrivati alla fine. Ovviamente, per qualunque dubbio, siamo a disposizione: usate i commenti.
PS: Qui troverete l'html completo diviso passo per passo, nel caso vi siete persi qualche pezzo per strada!
