Creare box con angoli arrotondati con Dreamweaver CS4 e i CSS
In questo video
Pubblicato il 1 December, 2009
Uno degli argomenti più spinosi per chi vuole creare pagine web non solo funzionali e ben formattate ma anche accattivanti e con un pizzico di stile nei dettagli.
In questo video tutorial vediamo come creare in modo semplice diverse versioni di box e div con angoli arrotondati prendendo anche in considerazione l’evoluzione dei CSS che si approssimano alla versione CSS3.
Trattiamo l’argomento della compatibilità tra i browser e sperimentiamo le soluzioni più rapide per realizzare componenti grafici per le nostra pagine web.
CATEGORIE: DREAMWEAVER
Video lezioni Photoshop
roscio roscio roscio ???
Santa bistecca ???
pero’ mi e’ piaciuto ! non sapevo del comando border radius , grazie
Claudio Lodi, 2 anno fà
Sai che sono sempre pieno di risorse Clà
Max, 2 anno fà
MAX SANTO SUBITO!
mr sponkie, 2 anno fà
madddaaaiiiii :malu:
Max, 2 anno fà
Per la pigrizia siamo completamente d’accordo (non quella mentale!)
Debbo dire che è stato in assoluto il più bel pistolotto in stile WEB che si potesse realizzare, è servito a sciogliere i muscoli e a raccogliere le idee.
Per il prossimo tutorial saremo tutti più reattivi, Ciao e stammi bene……………………
Freddy, 2 anno fà
complimenti per il video, penso sia molto utile come spiegazione….
ho notato che non esiste un video per i menù a comparsa
anche quell’argomento sarebbe interessante
Alex, 2 anno fà
eeeeeeee… ci arriviamo ragazzi.. arriviamo dappertutto
Vi garantisco che tra video lezioni e il DVD che sto preparando arriverete ad essere dei webmaster da paura!
Max, 2 anno fà
Ho visto in giro alcuni siti con il box che presenta un ombra come negli stili di livello di Photoshop sarebbe interessante sapere come realizzarlo,ciao
Max, 2 anno fà
il procedimento è esattamente lo stesso, Massimiliano.
Assolutamente identico. In alcuni casi l’ombra è fatta con il metodo di creare una sottile immagine png di 1 o 2 pixel che viene ripetuta orizzontalmente o verticalmente nella regola del background-image.
Max, 2 anno fà
cmq max sei un grande
davvero complimenti!!
Alex, 2 anno fà
una curiosità, ho seguito i video vari e ho creato i vari box come template..solo che in una pagina sono obbligato ad inserire un immagine + grande e quindi esce dal box e mi si ripete il back ground a sfumare , se rimpicciolisco l’immagine nn si legge , allora ho optato per lo scroll ma nn mi ispira, c’è un modo per far ingrandire i box inautomatico in base al contenuto?
grazie e scusami per il disturbo
Alex, 2 anno fà
In teoria è sufficiente non settare il valore dell’altezza ma bisognerebbe vedere il caso specifico con codice alla mano.
Max, 2 anno fà
ciao Max,grazie per lo splendido tutorial,come sempre sei un grande!!
Volevo chiederti una cosa, ho creato l’immagine arrotondata trasparente, ma negli angoli mi inserisce il colore dello sfondo del box e non della pagina.devo creare l’immagine con lo sfondo della pagina o trasparente?
biagio, 2 anno fà
Scusa per la domanda,ma non sono stato evidentemente attento nel tutorial……!!
Per quanto riguarda l’ombra al box, se al box, ho gia’ impostato una regola per il background-image inserendo un immagine con il bordo arrotondato posizionata in alto, come faccio poi ad inserire un altra regola inserendo un immagine sottile di 1 pixel?
Questa non l’ho capita!!
biagio, 2 anno fà
Guardati questo tutorial http://www.total-photoshop.com/2009/06/creare-uno-sfondo-sfumato-per-le-tue-pagine-web-con-dreamweaver/
Max, 2 anno fà
Se vuoi dare l’ombra devi assicurarti che il box non abbia un colore di sfondo. Inoltre la png che ti crei avrà un colore specifico di riempimento al quale darai l’ombra.
Max, 2 anno fà
scusa max potresti rispondere anche alla mia domanda?
grazie ancora e scusa per il disturbo..
Alex, 2 anno fà
grazie dell’aiuto max adesso mi ci metto un pò a smanettare
Alex, 2 anno fà
caspita Max…questa lezione seguita ad una mia richiesta, da te pienamente soddisfatta, ha riscosso un bel successone vedo.
simone, 2 anno fà
Max, 2 anno fà
Ciao Max… Grazie anche per questo tutorial!!! Anche se non commento più (non ne ho il tempo, ma avrei 1000 domande) faccio ancora parte della classe!
Alessandro R., 2 anno fà
Oramai sei una colonna portante
Se non ti vedo alle prossime mando il bidello a cercarti 
Max, 2 anno fà
Solo ora ho potuto vedere il videotutorial!
Che dire..magico come sempre!
mi hai chiarito qualche cosina in più anche questa volta ed attendo con impazienza il prossimo tutorial
Bella li, Santa Bistecca!!! xD
Sephzero, 2 anno fà
a fine anno scolastico farai un esamino finale?? sarei molto curioso di vedere chi saranno i migliori alunni?
mr sponkie, 2 anno fà
perchè no?
Max, 2 anno fà
vorrei fare l’ ennesimo complimento a Max…non sa cosa significhino le parole : “superficialità”, “sottinteso”, “generico”, “apprssimativo”….ogni suo tutorial è curato nei minimi particolari e realizzato in modo che tutto possa essere il più chiaro possibile . Pensate…riesco a capirli io !!!!
Grazie a Max ed a tutto lo staff di http://www.total-photoshop.com.
simone, 2 anno fà
Uei Simo… guarda che sono uno dalla lacrima facile io
eace:
Grazie degli apprezzamenti… torno a ripetere che ce la mettiamo tutta
Max, 2 anno fà
Il tutorial è interessante ma ci sono dei problemini:
1 uso del css3 finche non verrà letto da tutti i browser non sarà molto utile per chi fa siti per lavoro, ma questo si risolverà in seguito come è già stato detto nel tutorial.
2 fare un immagine di sfondo cosi come nell’ esempio dà problemi se il testo cambia dimensione, se il testo è troppo lungo esce dallo spazio delimitato dall’immagine, meglio una soluzione diversa con un layout “liquido”
3 attenzione a non dire idiozie: il jpg non ha trasparenza, per avere il canale alfa va usato png o gif
Claudio, 2 anno fà
Claudio, grazie per le tue sottolineature, mi permetto di risponderti con ordine:
1 i CSS3 diverranno molto presto una realtà proprio per questo, per chi lavora o per chi è spinto da sana passione, una sbirciatina verso il futuro immediato crediamo che tanto male non faccia. In realtà l’unico browser a non supportare i CSS3 (per alcune specifiche) è, tanto per cambiare, Internet Explorer. Ragione in più per cominciare a guardare alle tecnologie di prossimo utilizzo.
2 sull’idea di utilizzare un layout liquido sono perfettamente d’accordo con te e sarà uno dei prossimi tutorial in programmazione. In questa fase stiamo gettando le basi e dando strumenti di pronto utilizzo a chi vuole capirci qualcosa.
3 ci guardiamo bene dal dire “idiozie”: in diversi altri tutorial abbiamo specificato il discorso delle png, chi ci segue lo sa.
Sarà un piacere ricevere altri tuoi feedback e suggerimenti costruttivi.
Max, 2 anno fà
Ciao Max, ho scoperto da poco questo sito e mi piace un sacco, sei veramente bravo e interessante da ascoltare ma ti prego non dire mai più fronzoli!!!!!!!! non ne posso più di sentire questo termine nel nostro lavoro!!
Soncio, 2 anno fà
Con esxplorernon funziona
miticmaster, 2 anno fà
… come detto nel tutorial
Max, 2 anno fà
questa domanda non c’entra con l’attuale video tutorial ma non so dove scriverla…
non è che potresti spiegare come si fa ad attaccare il contenitore nella parte alta e bassa della pagina? ho provato a mettere margin e padding 0 in top e bottom ma non succede niente…
Lawlietoc, 2 anno fà
Ho scoperto ieri mattina questo G-R-A-N-D-I-O-S-O sito! Devo creare un sito per il nostro trio e nelle ultime due settimane mi sono messo di nuovo giù a “rispolverare” le miei scarne conoscenze web…. così sono passato dallo scoprire i fogli di stile (miiiiiiiinkia che spettacolo) ai tuoi superlativi tutorial, che non solo mi stanno aiutando a dismisura, ma mi fanno spataccare dalle risate (la battutina ogni tot minuti è eccezionale
).
Scusa se mi sono dilungato, ma credo sia giusto ringraziare per il maxi-lavoro che fai/fate!
Davvero complimenti, continuerò sicuramente a seguirvi!!
(Santa bistecca!!)
Marco Messa, 2 anno fà
Max, 2 anno fà
Bello max il tutorial dei CSS. Io sapevo comunque di scrivere regole a parte di css per la differenza tra i browser usando la regola import.
Ti saluto ciao
andrea, 2 anno fà
è corretto anche così come dici tu, Andrea. Ma, francamente, dipende da quante regole devi gestire e quante eccezioni esistono. Meglio non crearne troppe… quando si riesce
Max, 2 anno fà
Ciao Max, scusami, ma non so se mi sono perso un passaggio del tutorial, rivedendolo non mi sembra.
Ti pongo il mio problema.
Ho inserito un box.png come sfondo: quando inserisco del testo che esce dal box come faccio a non far ripetere il box, ma a farlo solamente allungare?
Grazie…
Tiziano Ragazzi, 1 anno fà
Ciao Tiziano,
usando il metodo dell’immagine l’unica menata è proprio questa: la dimensione del contenuto.
Usando i CSS3 puoi invece rimanere più elastico.
Il consiglio è di esplorare le soluzioni con CSS3 perchè tra poco anche IE si adeguerà. L’uscita della release 9 è oramai prossima
Max, 1 anno fà
fantastico questo tutorial, anche se un po complicato per me che sto alle prime armi, comunque grazie delle ottime spiegazioni continuate così !!!
RxxK, 1 anno fà
si possono utilizzare i div in verticale ?
MB, 1 anno fà
allora ho un problema… su cs5 il border-radius non lo riesco a trovare…ke diamine debbo fare???
Stefano, 1 anno fà
devi scriverlo a mano
oppure scaricati l’html5 pack per dreamweaver cs5 dal sito adobe o come estensione. O semplicemente fai l’aggiornamento di DW. Dovrebbe essere incluso.
Max, 1 anno fà
grazie 1000 max…sempre il number one
Stefano, 1 anno fà
Ciao Max una domanda … con il border radius 10 px come gestisci l’entrata in gioco dello scroll ?
Quando si va a piazzare in automatico essendo non con gli angoli arrotondati sta veramente male …
hai una soluzione ?
Grazie ciaooo
Matteo, 1 anno fà
E’ sempre un piacere frequentare queste pagine, però mi sto sbattendo con dreamweaver cs4, che quando vado a convalidare la compatibilità brower mi dà errore nel file css. Non mi asciugo più!
luca-Zurigo, 1 anno fà
Tutorial bellissimi, complimenti.
Io personalmente creo solo gli angoli in questi casi. Per pagine con molti contenuti, soprattutto flash, il peso è tutto.
PS le congetture circa IE non sono poi così tanto congetture, Microsoft tende a voler imporre i suoi prodotti -_-’ W l’open source
Valentina, 9 mese fà
Max, sei mitico. Solo in questi giorni ho trovato i tuoi tutorial. Da allora ho perso il sonno.
Anto
maranto, 2 mese fà