Css tutorial – Box con angoli arrotondati senza uso di immagini
Come primo post vorrei cominciare ad inserire alcuni tutorial css.
In questo vedremo come è possibile creare un box con gli angolo arrotondati con i css, senza l’uso di immagini di backlground.
Lo stile css:
[css].curvy {position:relative; width:250px; background:#9caf9c; color:#000; margin:5em auto;}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#9caf9c; background:#fff; overflow:hidden; font-style:normal; z-index:1;}
#ctl {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.curvy em b {position:absolute; font-size:150px; font-family:arial; color:#9caf9c; line-height:40px; font-weight:normal;}
#ctl b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}
.curvy p {position:relative; z-index:100; padding:5px 10px;}[/css]
Ed ecco l’html:
[html]
•
•
•
Questo box è stato creato con i css
[/html]
Questo ebook è il primo pubblicato da Informatica Friuli dedicato alla personalizzazione di certi aspetti dei template per WordPress.
Questo ebook non deve dare grosse aspettative ...
Non c'è hosting, spazio web dove hai caricato i file del tuo sito, che ti da la garanzia al 100% di posizionarti nella serp di Google al primo posto.
[caption id="" ...
Prendo spunto da quanto si può leggere su MasterNewMedia per quanto riguarda il Newsmaster come la figura che filtra e fornisce ...
Non sono daccordo con questa tecnica per un semplice motivo legato all’accessibilità , nel senso che ingrandendo o diminuendo il testo (cosa che accade spesso) i cosidetti puntini aumentano e diminuiscono creando un effetto poco professionale oltre a lasciare l’utente un po perplesso, l’idea è buona ma sono dell’opinione che se è possibile è conveniente continuare ad usare le immagini di background o utilizzare javascript
Quello esposto è un modo molto semplice per fare dei box con i bordi arrotondati.
Personalmente anche io preferisco mettere immagini di background, in quanto a mio avviso si ottengono effetti migliori.
Questo tutorial, serviva a dimostrare, come era possibile, utilizzando i css creare dei box arrotondati, senza parlare di accessibilità o quant’altro
certo è un workaround anche interessante, sarebbe da provare a dichiarare le misure in em per vedere se è possibile far allargare tutto senza che si perda qualità . Saluti da pordenone
ottimo!!