Premetto che sono un completo principiante nello sviluppo di fogli di stile, con CSS. Al momento ho un server web che uso quasi esclusivamente per fare questo genere di prove, o poco piu.
Questo è il fantastico risultato al quale sono giunto ora. (Allegato al messaggio)
Questo è il CSS:
Codice: Seleziona tutto
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 <title>Apache2 Ubuntu Default Page: It works</title>
6 <style type="text/css" media="screen">
7
8 .flex-container-leonardo {
9 display: flex;
10 flex-direction: row;
11 flex-wrap: unwrap;
12 justify-content: space-around;
13 align-items: center;
14 align-content: center;
15 height: 10em;
16 padding: 1em;
17 border: 2em solid blue;
18 margin: 1em;
19 }
20 .inner-box-1 {
21 position: relative;
22 padding: 1px;
23 border: 4px solid #d60927;
24 width: 10em;
25 height: 8em;
26 border-radius: 30%;
27 text-align: center;
28 background-image: conic-gradient(green, yellow, red, blue, orange);
29
30 }
31
32 .green-box-1 {
33 position: relative;
34 width: 7em;
35 height: 5em;
36 margin-left: 1.5em;
37 margin-top: 0.5em;
38 background-color: green;
39 /* background-color: linear-gradient(rgba(0, 1, 0, 1), rgba(1, 0, 0, 1)); */
40 border-radius: 30%;
41 text-align: center;
42 background-image: radial-gradient(rgba(0, 1, 0, 1), rgba(1, 0, 1, 0), transparent 7em, purple 0);
43 }
44
45 .inner-box-2 {
46 display: grid;
47 border: 4px solid red;
48 width: 10em;
49 height: 8em;
50 border-radius: 30%;
51 }
52
53 </style>
54 </head>
55 <body>
56
57 <div>
58 Header
59 </div>
60
61 <div class="flex-container-leonardo">
62 <div class="inner-box-1">1
63 <div class="green-box-1">Green box</div>
64 </div>
65 <div>2 Il percorso del CSS è:<br><br>/var/www/html</div>
66 <div class="inner-box-2">3</div>
67 </div>
68
69 <div>
70 Footer
71 </div>
72
73 </body>
74 </html>
Questa è il risultato dell'istruzione che compare alla riga 42.
Ho provato ad inserire un gradiente, ed impostarlo in maniera che fosse completamente trasparente.
La mia idea era di fare in modo che l'intero box verde scomparisse, impostando questa trasparenza, ma non so come farlo.
Una sorta di "cut-out". Nelle mie intenzioni, vorrei creare una sagoma qualunque, e questa dovrebbe essere il green box, nel mio caso attuale, questo è il motivo per il quale su green box imposto delle misure assolute, e poi impostarlo con la massima trasparenza, in modo da "ritagliare" il bordo colorato esterno.
Non funziona.
La trasparenza è parziale e, in particolare, sempre alla riga 42, questa trasparenza corrisponde alla dimensione "7em" dell'opzione "transparent 7em".
Quindi la domanda: come faccio a rendere l'intero box verde trasparente, applicando la trasparenza a tutto l'elemento verde, evitando artifici del tipo aumentare a dismisura la dimensione della trasparenza della background image finche questa non superi la dimensione del box?
Detta in altre parole, come si fa a rendere il box verde, globalmente, trasparente, ma lasciando inalterate le dimensioni specificate in modo assoluto(width, height, margin...)?
So di essere stato un po contorto. Mi dispiace. Spero comunque di essermi fatto capire.
Grazie
