Form: effetto ombra

**marviv** · 22-09-2009, 21:56

Ciao a tutti.
Premetto che di CSS ne so veramente poco.

Ho il seguente.
.formbox { margin-top: 0px;
margin-bottom: 0px;
width: 500px;
padding: 5px;
background-color: #dbf8db;
color: #060683;
text-align:center;
margin:0 auto;
}

ogni volta che apro un form inserisco all'inizio:
<div class="formbox">
<form method="POST" name="login" action="/public/login/verify.asp">
...
</form>
</div>

Il tutto funziona bene.
Vorrei però inserire il classico effetto ombra. Ho provato a cercare nel forum ma ci sono talmente tanti esempi diversi dal mio che non ci capisco niente.

E' possibile fare qualcosa di semplice ?

Grazie per l'aiuto.

**miki003** · 22-09-2009, 23:04

Una cosa così?

**marviv** · 23-09-2009, 08:52

esattamente.

**miki003** · 23-09-2009, 10:45

Originariamente inviato da marviv esattamente.

Per fare quello devi mettere il form dentro ad un div con un'immagine dell'ombra come sfondo

**marviv** · 23-09-2009, 17:21

Caspita, forse per te sarà la cosa più facile del mondo ma io non so da che parte cominciare.

Anche quel poco che sono riuscito a fare è grazie a tentativi.

Riesci a darmi qualche informazione in più ? suggerimenti sul codice ?

**miki003** · 23-09-2009, 23:41

Ti posto un esempio, considera che è un esempio veloce quindi migliorabile sia come codice sia come impostazione:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
#sfondo {
	background-image: url(sfondo.jpg);
	height: 430px;
	width: 430px;
}
#form { 
background:#060; 
width: 400px; 
height: 400px;
}
-->
</style>
</head>

<body>
<div id="sfondo">
<form id="form" action="/public/login/verify.asp" method="post" enctype="text/plain" name="login">
	<input type="text" value="testo" />


      <input type="text" value="testo" />


      <input type="text" value="testo" />
</form>
</div>
</body>
</html>

immagine di sfondo
sfondo.jpg

**marviv** · 24-09-2009, 08:29

Vedo un problema e correggimi se sbaglio.
Tu inserisci una immagini jpg con dimensioni ben definite.
Il mio formbox si dimensiona automaticamente in funzione del numero di campi del form.
Vuoi dire che per ogni form devo crearmi una immagine jpg differente da inserirecome sfondo ?
Correggimi se sbaglio, ma se è così purtroppo non è la soluzione percorribile in quanto di form ne ho un'infinità.

Però dimmi se sto sbagliando ad interpretare il codice che mi hai inviato.

**miki003** · 24-09-2009, 19:41

Si ho usato misure fisse!
C'è un'altra soluzione tramite css ma mi sembra nel tuo caso alquanto complessa

**marviv** · 07-10-2009, 21:53

Soluzione.

Se a qualcuno interessa, ho modificato il css nel modo seguente:
.formbox { margin-top: 0px;
margin-bottom: 0px;
width: 500px;
padding: 5px;
background-color: #dbf8db;
color: #060683;
text-align:center;
margin:0 auto;
border: 1px solid #060683;
box-shadow:2px 2px 4px #000;
-webkit-box-shadow:2px 2px 4px #000;
-moz-box-shadow: 2px 2px 4px #000;
}

e con Safari funziona molto bene.
Indifferente invece per IE, Mozilla e Netscape

E' già qualcosa.....

**miki003** · 08-10-2009, 01:03

Prova anche così:

codice:

.formbox { 
	margin-top: 0px;
	margin-bottom: 0px;
	width: 500px;
	padding: 5px;
	background-color: #dbf8db;
	color: #060683;
	text-align:center;
	margin:0 auto;
	border: 1px solid #060683;
	box-shadow:2px 2px 4px #000;
	-webkit-box-shadow:2px 2px 4px #000;
	-moz-box-shadow: 2px 2px 4px #000;
	Filter: Blur(Add = 0, Direction = -50, Strength = 5)
}
-->
</style>

Oppure così
http://www.mrwebmaster.it/css/artico...o-css_932.html
Funziona anche con FF e IE

Discussione: Form: effetto ombra

Strumenti discussione

Ricerca discussione

Visualizza

Form: effetto ombra

Permessi di invio