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:
Printable View
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:
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
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/
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 :lol:
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>
Purtroppo questo codice in un contenitore non funziona.
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>