Apr 3, 2007
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;}
Ed ecco l'html:
HTML:
Post Correlati e Simili:
Ultimi 5 articoli di lordmarin
- Template Open source - January 27th, 2008
- css tutorial - Come definire la grandezza del font - April 3rd, 2007
- PHP tutorial - Come creare un semplice sistema di login - April 3rd, 2007
- Apple supporto per vista con l'aggiornamento di Boot Camp - April 3rd, 2007
Add New Comment
Viewing 3 Comments
Thanks. Your comment is awaiting approval by a moderator.
Do you already have an account? Log in and claim this comment.
Do you already have an account? Log in and claim this comment.
Do you already have an account? Log in and claim this comment.
Do you already have an account? Log in and claim this comment.
Add New Comment
Trackbacks
(Trackback URL)