Linea come separatore tra pulsanti del menu [css]

[webbeloz]

salve a tutti...

mi capita spesso di vedere menu con linee verticali con doppio colore...
e sembrano essere in solo CSS. Grazie
allego foto per capirci meglio.

[Prill]

i css3 prevedono, con la proprietà border-colors, di creare bordi che sfruttano colori diversi ottenendo un effetto sfumato. E' proprietà attualmente supportata solo da Firefox, con prefisso proprietario. Nel tuo caso puoi ricorrere a un'immagine di sfondo

[webbeloz]

questa è la situazione attuale...

L'effetto è abbastanza realistico, ma... serve qualcosa in + !!
per arrivare alla meta. L
avorando solo sul lato sx. bordo nero, ombra interna... in questo modo:

 
.myClass {
	width: 177px;
	height: auto;
	float: left;
	padding: 0 0 15px 0;
	border-left: 0.1em solid #000;

        -moz-box-shadow:
 inset 5px 0 4px -4px #464748;

    -webkit-box-shadow:
 inset 5px 0 4px -4px #464748;

   box-shadow:
 inset 5px 0 4px -4px #464748;
}

[mangusta91]

puoi inserire un "border-right: 1px solid #codicecolore;" all'interno del css relativo alle voci del menù e poi "abbellirlo" con questi css3 futuristici

[webbeloz]

se faccio come dici, mi trovo solo un bordo alla dx. e...
nn è quello che mi serve.

l'effetto sta nella foto allegata.

[mangusta91]

giocando con quello che ti ho detto io e i css3 fidati che ottieni la barretta che c'è in foto

[webbeloz]

bè, allora spara il codi..ce...
Solo x bordo SX. tnx

[mangusta91]

se all'interno della tua barra (che presumo sia un div con all'interno un elenco) dai un padding ai[*] che contengono le voci e poi gli dai un bordo sinistro, ottieni una "barretta" che non riempie tutta l'altezza della barra (grazie al padding). Poi con i css3 fai il resto. Credo che tu sia in grado di scriverti il codice da solo.

Io sto cercando di aiutarti, il "bè, allora spara il codi..ce..." non è il massimo della cordialità.

[webbeloz]

Originariamente inviato da mangusta91
se all'interno della tua barra (che presumo sia un div con all'interno un elenco) dai un padding ai[*] che contengono le voci e poi gli dai un bordo sinistro, ottieni una "barretta" che non riempie tutta l'altezza della barra (grazie al padding). Poi con i css3 fai il resto. Credo che tu sia in grado di scriverti il codice da solo.

Io sto cercando di aiutarti, il "bè, allora spara il codi..ce..." non è il massimo della cordialità.

Grazie mille del tuo "aiuto"
x mè si chiude quì.

[mangusta91]

il mio "aiuto" (poi mi spieghi le virgolette) te lo do volentieri, non sono tipo che se la prende per così poco.