Creare box con angoli arrotondati con Dreamweaver CS4 e i CSS
Visto 14,953 volte
Pubblicato il : 1.12.2009
Categorie: DREAMWEAVER
Leggi i commenti a questo video
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.
December 1st, 2009 alle 10:42
roscio roscio roscio ???
Santa bistecca ???
pero’ mi e’ piaciuto ! non sapevo del comando border radius , grazie
December 1st, 2009 alle 10:47
Sai che sono sempre pieno di risorse Clà
December 1st, 2009 alle 11:25
MAX SANTO SUBITO!
December 1st, 2009 alle 11:29
madddaaaiiiii :malu:
December 1st, 2009 alle 12:57
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……………………
December 1st, 2009 alle 19:15
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
December 1st, 2009 alle 19:29
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!
December 1st, 2009 alle 21:08
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
December 1st, 2009 alle 22:23
cmq max sei un grande
davvero complimenti!!
December 2nd, 2009 alle 09:37
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.
December 2nd, 2009 alle 12:03
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
December 2nd, 2009 alle 12:33
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?
December 2nd, 2009 alle 12:47
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!!
December 2nd, 2009 alle 13:53
Guardati questo tutorial http://www.total-photoshop.com/2009/06/creare-uno-sfondo-sfumato-per-le-tue-pagine-web-con-dreamweaver/
December 2nd, 2009 alle 13:55
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.
December 2nd, 2009 alle 15:09
scusa max potresti rispondere anche alla mia domanda?
grazie ancora e scusa per il disturbo..
December 2nd, 2009 alle 15:27
In teoria è sufficiente non settare il valore dell’altezza ma bisognerebbe vedere il caso specifico con codice alla mano.
December 2nd, 2009 alle 15:56
grazie dell’aiuto max adesso mi ci metto un pò a smanettare
December 2nd, 2009 alle 21:03
caspita Max…questa lezione seguita ad una mia richiesta, da te pienamente soddisfatta, ha riscosso un bel successone vedo.
December 2nd, 2009 alle 21:12
December 2nd, 2009 alle 23:00
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!
December 3rd, 2009 alle 09:55
Oramai sei una colonna portante
Se non ti vedo alle prossime mando il bidello a cercarti 
December 5th, 2009 alle 13:40
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
December 5th, 2009 alle 13:42
a fine anno scolastico farai un esamino finale?? sarei molto curioso di vedere chi saranno i migliori alunni?
December 5th, 2009 alle 14:02
perchè no?
December 6th, 2009 alle 08:50
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.
December 7th, 2009 alle 09:40
Uei Simo… guarda che sono uno dalla lacrima facile io
eace:
Grazie degli apprezzamenti… torno a ripetere che ce la mettiamo tutta
December 24th, 2009 alle 16:58
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
December 28th, 2009 alle 09:39
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.
February 5th, 2010 alle 17:24
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!!
February 11th, 2010 alle 12:12
Con esxplorernon funziona
February 11th, 2010 alle 12:15
… come detto nel tutorial
February 21st, 2010 alle 01:10
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…
March 3rd, 2010 alle 16:51
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!!)
March 3rd, 2010 alle 16:56
March 5th, 2010 alle 10:55
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
March 5th, 2010 alle 11:05
è 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
July 26th, 2010 alle 14:51
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…
July 26th, 2010 alle 16:23
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
August 3rd, 2010 alle 10:37
fantastico questo tutorial, anche se un po complicato per me che sto alle prime armi, comunque grazie delle ottime spiegazioni continuate così !!!
August 30th, 2010 alle 17:10
si possono utilizzare i div in verticale ?
February 19th, 2011 alle 19:26
allora ho un problema… su cs5 il border-radius non lo riesco a trovare…ke diamine debbo fare???
February 21st, 2011 alle 09:53
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.
February 22nd, 2011 alle 21:20
grazie 1000 max…sempre il number one
March 6th, 2011 alle 16:55
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
March 14th, 2011 alle 10:46
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ù!
July 30th, 2011 alle 16:17
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