Bordi orizzontali ai lati del testo

**miki92** · 25-08-2014, 21.54.51

Buonasera,
scusate per il titolo ma proprio non sapevo come chiamarli e non so nemmeno se hanno un nome.

Comunque l'effetto che voglio simulare è quanto segue... si può fare con il minimo uso di codice? Mi basta un bordo di 1px #ddd solid.

Esempio:

**NLSweb** · 25-08-2014, 22.53.01

Intendi il bordo della finestra o delle aree input ?

... comunque con CSS border:dotted 1px #DDD; ottieni il bordo puntinato
ma puoi diversi stile come:
double , dotted , groove , ridge , solid , inset , outset

**LastWings** · 26-08-2014, 02.17.05

Io ho capito che intende il bordo sfumato ai lati di Login

Qui ci sono esempi su come farlo

http://css-tricks.com/examples/GradientBorder/

http://jsfiddle.net/necolas/vqnk9/

**miki92** · 26-08-2014, 09.09.14

Esatto LastiWings... intendo proprio quel bordo lì. Bordi sfumati, gradienti ed altri li so fare intorno ai box... ma non riesco a trovare poco codice per fare questo:

-------------- LOGIN --------------

Ovviamente considerati i trattini una linea continua

**NLSweb** · 26-08-2014, 11.48.06

Con SVG ho trovato questa soluzione ...

Codice HTML:

<!DOCTYPE html>
<html>
<head>
<style>
#testo{
 background:white;
 font-family:Arial, sans-serif;
 font-size:150%;
 color:black;
 position:absolute;
 top:0px;left:250px;
 padding-left:10px;
 padding-right:10px;
}
</style>
</head>
<body>
<div id="testo">TESTO</div>

<svg height="150" width="800">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
    </radialGradient>
  </defs>
  <rect width="600" height="5" fill="url(#grad1)" />
</svg>

</body>
</html>

**miki92** · 26-08-2014, 13.56.04

Purtroppo questo codice in un contenitore non funziona.

**NLSweb** · 26-08-2014, 14.31.55

Guarda questo esempio , forse ti può aiutare...
chiaramente i contenuti e l'aspetto grafico li personalizzi come vuoi..

Codice HTML:

<!DOCTYPE html>
<html>
<head>
<style>
#area{
 position:absolute;
 top:20px;left:20px;
 width:600px;
 height:400px;
 box-shadow:0px 0px 5px black;
}
#testo{
 width:100px;
 background:white;
 font-family:Arial, sans-serif;
 font-size:150%;
 text-align:center;
 color:black;
 position:relative;
 top:32px;left:250px;
 padding-left:10px;
 padding-right:10px;
}
#riga{
 position:relative;
 top:50px;left:50px;
}
#Input{
 width:300px;
 position:relative;
 top:80px;
 left:150px;
 box-shadow:inset 0px 0px 4px black;
}
#Input h4{
 font-family:Arial, sans-serif;
 font-size:100%;
 text-align:center;
 padding:10px;
}
#Input input{
 width:250px;height:20px;
 border:3px inset blue;
 position:relative;
 bottom:20px;left:23px;
}
</style>
</head>
<body>

<div id="area">

<svg height="5" width="500" id="riga">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
    </radialGradient>
  </defs>
  <rect width="500" height="5" fill="url(#grad1)" />
</svg>

<div id="testo">TESTO</div>

<div id="Input">
 <h4>User:</h4><input type="text" name="username" />
 <h4>Pass:</h4><input type="text" name="passord" />
</div>

</div>

</body>
</html>

Discussione: Bordi orizzontali ai lati del testo

LinkBack

Strumenti discussione

Display

Bordi orizzontali ai lati del testo

Regole di scrittura