altri SmileANCORA ANCORA SMILE!!E ringraziate donia x queste!!

Nuova Discussione
Rispondi
Cerca nel forum
 
Pagina precedente | 1 | Pagina successiva
Vota | Stampa | Notifica email    
Autore
Facebook  

Kentaromiura CrazyCorner 0.1 alpha(Gatsu)

Ultimo Aggiornamento: 04/04/2006 08.32
OFFLINE
Post: 506
Post: 332
Registrato il: 26/06/2003
Città: ALTIVOLE
Sesso: Maschile
Occupazione: Studente
Utente Senior
file Test.html
<html>
<head>
<title>CC Test</title>
<link href="crazycorner.css" type="text/css" rel="stylesheet"></link>
<script language="javascript" type="text/javascript" src="crazycorner.js"></script>
<style type="text/css">
/*Style are embedded into HTML only for testing purpose*/
#main{
padding:10px;
font-family:Verdana,Georgia,Sans-serif;
font-size:14px;
background-color:#FFeeFF;
}
div:first-line{
font-weight:bold;
}
.raised,.inset,.square,.curved,.serif,.pillar,.chamfer,.barrel{
width:500px;
}
div{
padding:5px;
}
</style>
<script language="javascript" type="text/javascript">
/*Script are embed into HTML only for testing purpose*/
onload=function(){
/*PAGE_LOAD*/
cornerize("id1","raised");
cornerize("id1b","raised","lightsteelblue");
cornerize("id2","inset");
cornerize("id2b","inset","lightsteelblue");
cornerize("id3","square");
cornerize("id3b","square","lightsteelblue");
cornerize("id4","curved");
cornerize("id4b","curved","lightsteelblue");
cornerize("id5","serif");
cornerize("id5b","serif","lightsteelblue");
cornerize("id6","pillar");
cornerize("id6b","pillar","lightsteelblue");
cornerize("id7","chamfer");
cornerize("id8","barrel");
cornerize("id7b","chamfer","lightsteelblue");
cornerize("id8b","barrel","lightsteelblue");
}
</script>
</head>
<body>
<div id="main">

<div id="id1">
Raised:<br>
Lorem ipsum dolor sit amet <br>
Consectetuer libero eget Vestibulum egestas <br>
Lorem pede In dis pretium <br>
Sed facilisi vitae congue neque <br>
Fermentum hendrerit ornare ipsum vitae <br>
Lorem Suspendisse venenatis Nullam ipsum <br>
Pellentesque netus venenatis nunc velit <br>
Neque faucibus felis Vestibulum eu <br>
Nisl montes tellus justo tellus <br>
Ut pede vitae molestie orci <br>
Porttitor quis id Ut pellentesque <br>
Ipsum justo quam neque arcu <br>
Elit dui at condimentum Aenean <br>
Hac tortor risus Phasellus quis <br>
</div>
<div id="id1b">
Raised:<br>
Lorem ipsum dolor sit amet <br>
Consectetuer libero eget Vestibulum egestas <br>
Lorem pede In dis pretium <br>
Sed facilisi vitae congue neque <br>
Fermentum hendrerit ornare ipsum vitae <br>
Lorem Suspendisse venenatis Nullam ipsum <br>
Pellentesque netus venenatis nunc velit <br>
Neque faucibus felis Vestibulum eu <br>
Nisl montes tellus justo tellus <br>
Ut pede vitae molestie orci <br>
Porttitor quis id Ut pellentesque <br>
Ipsum justo quam neque arcu <br>
Elit dui at condimentum Aenean <br>
Hac tortor risus Phasellus quis <br>
</div>
<div id="id2">
Inset:<br>
Lorem ipsum dolor sit amet <br>
Consectetuer libero eget Vestibulum egestas <br>
Lorem pede In dis pretium <br>
Sed facilisi vitae congue neque <br>
Fermentum hendrerit ornare ipsum vitae <br>
Lorem Suspendisse venenatis Nullam ipsum <br>
Pellentesque netus venenatis nunc velit <br>
Neque faucibus felis Vestibulum eu <br>
Nisl montes tellus justo tellus <br>
Ut pede vitae molestie orci <br>
Porttitor quis id Ut pellentesque <br>
Ipsum justo quam neque arcu <br>
Elit dui at condimentum Aenean <br>
Hac tortor risus Phasellus quis <br>
</div>
<div id="id2b">
Inset:<br>
Lorem ipsum dolor sit amet <br>
Consectetuer libero eget Vestibulum egestas <br>
Lorem pede In dis pretium <br>
Sed facilisi vitae congue neque <br>
Fermentum hendrerit ornare ipsum vitae <br>
Lorem Suspendisse venenatis Nullam ipsum <br>
Pellentesque netus venenatis nunc velit <br>
Neque faucibus felis Vestibulum eu <br>
Nisl montes tellus justo tellus <br>
Ut pede vitae molestie orci <br>
Porttitor quis id Ut pellentesque <br>
Ipsum justo quam neque arcu <br>
Elit dui at condimentum Aenean <br>
Hac tortor risus Phasellus quis <br>
</div>
<div id="id3">
Square:<br>
Lorem ipsum dolor sit amet <br>
Consectetuer libero eget Vestibulum egestas <br>
Lorem pede In dis pretium <br>
Sed facilisi vitae congue neque <br>
Fermentum hendrerit ornare ipsum vitae <br>
Lorem Suspendisse venenatis Nullam ipsum <br>
Pellentesque netus venenatis nunc velit <br>
Neque faucibus felis Vestibulum eu <br>
Nisl montes tellus justo tellus <br>
Ut pede vitae molestie orci <br>
Porttitor quis id Ut pellentesque <br>
Ipsum justo quam neque arcu <br>
Elit dui at condimentum Aenean <br>
Hac tortor risus Phasellus quis <br>
</div>
<div id="id3b">
Square:<br>
Lorem ipsum dolor sit amet <br>
Consectetuer libero eget Vestibulum egestas <br>
Lorem pede In dis pretium <br>
Sed facilisi vitae congue neque <br>
Fermentum hendrerit ornare ipsum vitae <br>
Lorem Suspendisse venenatis Nullam ipsum <br>
Pellentesque netus venenatis nunc velit <br>
Neque faucibus felis Vestibulum eu <br>
Nisl montes tellus justo tellus <br>
Ut pede vitae molestie orci <br>
Porttitor quis id Ut pellentesque <br>
Ipsum justo quam neque arcu <br>
Elit dui at condimentum Aenean <br>
Hac tortor risus Phasellus quis <br>
</div>
<div id="id4">
Curved:<br>
Lorem ipsum dolor sit amet <br>
Consectetuer libero eget Vestibulum egestas <br>
Lorem pede In dis pretium <br>
Sed facilisi vitae congue neque <br>
Fermentum hendrerit ornare ipsum vitae <br>
Lorem Suspendisse venenatis Nullam ipsum <br>
Pellentesque netus venenatis nunc velit <br>
Neque faucibus felis Vestibulum eu <br>
Nisl montes tellus justo tellus <br>
Ut pede vitae molestie orci <br>
Porttitor quis id Ut pellentesque <br>
Ipsum justo quam neque arcu <br>
Elit dui at condimentum Aenean <br>
Hac tortor risus Phasellus quis <br>
</div>
<div id="id4b">
Curved:<br>
Lorem ipsum dolor sit amet <br>
Consectetuer libero eget Vestibulum egestas <br>
Lorem pede In dis pretium <br>
Sed facilisi vitae congue neque <br>
Fermentum hendrerit ornare ipsum vitae <br>
Lorem Suspendisse venenatis Nullam ipsum <br>
Pellentesque netus venenatis nunc velit <br>
Neque faucibus felis Vestibulum eu <br>
Nisl montes tellus justo tellus <br>
Ut pede vitae molestie orci <br>
Porttitor quis id Ut pellentesque <br>
Ipsum justo quam neque arcu <br>
Elit dui at condimentum Aenean <br>
Hac tortor risus Phasellus quis <br>
</div>
<div id="id5">
Serif:<br>
Lorem ipsum dolor sit amet <br>
Consectetuer libero eget Vestibulum egestas <br>
Lorem pede In dis pretium <br>
Sed facilisi vitae congue neque <br>
Fermentum hendrerit ornare ipsum vitae <br>
Lorem Suspendisse venenatis Nullam ipsum <br>
Pellentesque netus venenatis nunc velit <br>
Neque faucibus felis Vestibulum eu <br>
Nisl montes tellus justo tellus <br>
Ut pede vitae molestie orci <br>
Porttitor quis id Ut pellentesque <br>
Ipsum justo quam neque arcu <br>
Elit dui at condimentum Aenean <br>
Hac tortor risus Phasellus quis <br>
</div>
<div id="id5b">
Serif:<br>
Lorem ipsum dolor sit amet <br>
Consectetuer libero eget Vestibulum egestas <br>
Lorem pede In dis pretium <br>
Sed facilisi vitae congue neque <br>
Fermentum hendrerit ornare ipsum vitae <br>
Lorem Suspendisse venenatis Nullam ipsum <br>
Pellentesque netus venenatis nunc velit <br>
Neque faucibus felis Vestibulum eu <br>
Nisl montes tellus justo tellus <br>
Ut pede vitae molestie orci <br>
Porttitor quis id Ut pellentesque <br>
Ipsum justo quam neque arcu <br>
Elit dui at condimentum Aenean <br>
Hac tortor risus Phasellus quis <br>
</div>
<div id="id6">
Pillar:<br>
Lorem ipsum dolor sit amet <br>
Consectetuer libero eget Vestibulum egestas <br>
Lorem pede In dis pretium <br>
Sed facilisi vitae congue neque <br>
Fermentum hendrerit ornare ipsum vitae <br>
Lorem Suspendisse venenatis Nullam ipsum <br>
Pellentesque netus venenatis nunc velit <br>
Neque faucibus felis Vestibulum eu <br>
Nisl montes tellus justo tellus <br>
Ut pede vitae molestie orci <br>
Porttitor quis id Ut pellentesque <br>
Ipsum justo quam neque arcu <br>
Elit dui at condimentum Aenean <br>
Hac tortor risus Phasellus quis <br>
</div>
<div id="id6b">
Pillar:<br>
Lorem ipsum dolor sit amet <br>
Consectetuer libero eget Vestibulum egestas <br>
Lorem pede In dis pretium <br>
Sed facilisi vitae congue neque <br>
Fermentum hendrerit ornare ipsum vitae <br>
Lorem Suspendisse venenatis Nullam ipsum <br>
Pellentesque netus venenatis nunc velit <br>
Neque faucibus felis Vestibulum eu <br>
Nisl montes tellus justo tellus <br>
Ut pede vitae molestie orci <br>
Porttitor quis id Ut pellentesque <br>
Ipsum justo quam neque arcu <br>
Elit dui at condimentum Aenean <br>
Hac tortor risus Phasellus quis <br>
</div>
<div id="id7">
Chamfer:<br>
Lorem ipsum dolor sit amet <br>
Consectetuer libero eget Vestibulum egestas <br>
Lorem pede In dis pretium <br>
Sed facilisi vitae congue neque <br>
Fermentum hendrerit ornare ipsum vitae <br>
Lorem Suspendisse venenatis Nullam ipsum <br>
Pellentesque netus venenatis nunc velit <br>
Neque faucibus felis Vestibulum eu <br>
Nisl montes tellus justo tellus <br>
Ut pede vitae molestie orci <br>
Porttitor quis id Ut pellentesque <br>
Ipsum justo quam neque arcu <br>
Elit dui at condimentum Aenean <br>
Hac tortor risus Phasellus quis <br>
</div>
<div id="id7b">
Chamfer:<br>
Lorem ipsum dolor sit amet <br>
Consectetuer libero eget Vestibulum egestas <br>
Lorem pede In dis pretium <br>
Sed facilisi vitae congue neque <br>
Fermentum hendrerit ornare ipsum vitae <br>
Lorem Suspendisse venenatis Nullam ipsum <br>
Pellentesque netus venenatis nunc velit <br>
Neque faucibus felis Vestibulum eu <br>
Nisl montes tellus justo tellus <br>
Ut pede vitae molestie orci <br>
Porttitor quis id Ut pellentesque <br>
Ipsum justo quam neque arcu <br>
Elit dui at condimentum Aenean <br>
Hac tortor risus Phasellus quis <br>
</div>
<div id="id8">
Barrel:<br>
Lorem ipsum dolor sit amet <br>
Consectetuer libero eget Vestibulum egestas <br>
Lorem pede In dis pretium <br>
Sed facilisi vitae congue neque <br>
Fermentum hendrerit ornare ipsum vitae <br>
Lorem Suspendisse venenatis Nullam ipsum <br>
Pellentesque netus venenatis nunc velit <br>
Neque faucibus felis Vestibulum eu <br>
Nisl montes tellus justo tellus <br>
Ut pede vitae molestie orci <br>
Porttitor quis id Ut pellentesque <br>
Ipsum justo quam neque arcu <br>
Elit dui at condimentum Aenean <br>
Hac tortor risus Phasellus quis <br>
</div>
<div id="id8b">
Barrel:<br>
Lorem ipsum dolor sit amet <br>
Consectetuer libero eget Vestibulum egestas <br>
Lorem pede In dis pretium <br>
Sed facilisi vitae congue neque <br>
Fermentum hendrerit ornare ipsum vitae <br>
Lorem Suspendisse venenatis Nullam ipsum <br>
Pellentesque netus venenatis nunc velit <br>
Neque faucibus felis Vestibulum eu <br>
Nisl montes tellus justo tellus <br>
Ut pede vitae molestie orci <br>
Porttitor quis id Ut pellentesque <br>
Ipsum justo quam neque arcu <br>
Elit dui at condimentum Aenean <br>
Hac tortor risus Phasellus quis <br>
</div>
</div>
</body>
</html>

Modificato da kentaromiura 03/04/2006 12.46

____________________________
_____________
Kentaromiura
03/04/2006 12.30
 
Email
 
Scheda Utente
 
Modifica
 
Cancella
 
Quota
DIO è Amore, Figuriamoci se era Cattivo!Testimoni di Geova Online...76 pt.20/03/2019 21.13 by I-gua
Giovanna Carollo (Rai Sport)TELEGIORNALISTE FANS FORU...54 pt.20/03/2019 21.08 by peppino de filippo
ATP WT Game: MIAMITUTTO TENNIS FORUM28 pt.20/03/2019 23.52 by Bobby realdeal
Kim Kardashian Ipercaforum25 pt.20/03/2019 14.13 by bryc
RIPORTARE DEI VALORI IN BASE A DEI RANGEExcel Forum12 pt.20/03/2019 16.24 by stellablu79
scelta dell'allenatore: situazione più grave del suono del capotasto basso di un organoSenza Padroni Quindi Roma...12 pt.20/03/2019 23.08 by lucaDM82
OFFLINE
Post: 507
Post: 333
Registrato il: 26/06/2003
Città: ALTIVOLE
Sesso: Maschile
Occupazione: Studente
Utente Senior
file crazycorner.css
/*
CSS FOR Kentaromiura Crazy Corner Version 0.1 alpha preview (codename:Gatsu)
|-->from an idea of www.mswebpeople.com/krazy.html
|--------->from snazzy corner idea http://www.cssplay.co.uk/boxes/snazzy.html 
|---------------->from nifty corner idea	http://pro.html.it/articoli/id_598/idcat_31/pro.html
*/

/* Inset 3D Raised */
.raised {background: transparent; width:40%;}
.raised h1, .raised p {margin:0 10px;}
.raised h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.raised p {padding-bottom:0.5em;}

.raised .top, .raised .bottom {display:block; background:transparent; font-size:1px;}
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden;}
.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}
.raised .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}
.raised .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}
.raised .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}
.raised .b4b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #999;}
.raised .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999;}
.raised .b2b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999;}


.raised .b1 {margin:0 5px; background:#fff;}
.raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}
.raised .b3, .raised .b3b {margin:0 2px;}
.raised .b4, .raised .b4b {height:2px; margin:0 1px;}
.raised .b1b {margin:0 5px; background:#999;}
.raised .boxcontent {display:block;  background:#ccc; border-left:1px solid #fff; border-right:1px solid #999;}



/* Inset 3D Curved */
.inset {background: transparent; width:40%;}
.inset h1, .inset p {margin:0 10px;}
.inset h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.inset p {padding-bottom:0.5em;}

.inset .top, .inset .bottom {display:block; background:transparent; font-size:1px;}
.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {display:block; overflow:hidden;}
.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {height:1px;}
.inset .b2 {background:#ccc; border-left:1px solid #999; border-right:1px solid #aaa;}
.inset .b3 {background:#ccc; border-left:1px solid #999; border-right:1px solid #ddd;}
.inset .b4 {background:#ccc; border-left:1px solid #999; border-right:1px solid #eee;}
.inset .b4b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #fff;}
.inset .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #fff;}
.inset .b2b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #fff;}


.inset .b1 {margin:0 5px; background:#999;}
.inset .b2, .inset .b2b {margin:0 3px; border-width:0 2px;}
.inset .b3, .inset .b3b {margin:0 2px;}
.inset .b4, .inset .b4b {height:2px; margin:0 1px;}
.inset .b1b {margin:0 5px; background:#fff;}

.inset .boxcontent {display:block; background:#ccc; border-left:1px solid #999; border-right:1px solid #fff;}

/* Chamfer Borders*/
.chamfer {background: transparent; width:40%;}
.chamfer h1, .chamfer p {margin:0 10px;}
.chamfer h1 {font-size:2em; color:#000; letter-spacing:1px;}
.chamfer p {padding-bottom:0.5em;}

.chamfer .top, .chamfer .bottom {display:block; background:transparent; font-size:1px;}
.chamfer .b1, .chamfer .b2, .chamfer .b3, .chamfer .b4, .chamfer .b5 {display:block; overflow:hidden; height:1px; background:#eca; border-left:1px solid #000; border-right:1px solid #000;}
.chamfer .b1 {margin:0 5px; background:#000;}
.chamfer .b2 {margin:0 4px;}
.chamfer .b3 {margin:0 3px;}
.chamfer .b4 {margin:0 2px;}
.chamfer .b5 {margin:0 1px;}

.chamfer .boxcontent {display:block; background:#eca; border-left:1px solid #000; border-right:1px solid #000;}

/* Square cutout Borders*/
.square {background: transparent; width:40%;}
.square h1, .square p {margin:0 10px;}
.square h1 {font-size:2em; color:#00c; letter-spacing:1px;}
.square p {padding-bottom:0.5em;}

.square .top, .square .bottom {display:block; background:transparent; font-size:1px;}
.square .b1t {margin:0 6px; display:block; overflow:hidden; height:5px; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c; border-top:1px solid #00c;}
.square .b2 {display:block; height:1px; margin:0; background:#9ce; border-left:7px solid #00c; border-right:7px solid #00c; overflow:hidden;}
.square .b1b {margin:0 6px; display:block; overflow:hidden; height:5px; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c; border-bottom:1px solid #00c;}

.square .boxcontent {display:block; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c;}

/* Curved cutout Borders*/
.curved {background: transparent; width:40%;}
.curved h1, .curved p {margin:0 10px;}
.curved h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.curved p {padding-bottom:0.5em;}

.curved .top, .curved .bottom {display:block; background:transparent; font-size:1px;}
.curved .b1, .curved .b2, .curved .b3, .curved .b4 {display:block; overflow:hidden; height:1px;}
.curved .b2, .curved .b3, .curved .b4 {background:#e0cea3; border-left:1px solid #fff; border-right:1px solid #fff;}
.curved .b1 {margin:0 4px; background:#fff;}
.curved .b2 {margin:0 4px; height:2px;}
.curved .b3 {margin:0 3px;}
.curved .b4 {margin:0; height:1px; border-width:0 3px 0 3px;}

.curved .boxcontent {display:block; background:#e0cea3; border:0 solid #fff; border-width:0 1px;}

/* flared serif */
.serif {background: transparent; width:40%;}
.serif h1, .serif p {margin:0 10px;}
.serif h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.serif p {padding-bottom:0.5em;}

.serif .top, .serif .bottom {display:block; background:transparent; font-size:1px;}
.serif .b1, .serif .b2, .serif .b3, .serif .b4 {display:block; overflow:hidden;}
.serif .b1, .serif .b2, .serif .b3 {height:1px;}
.serif .b2, .serif .b3 {background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff;}
.serif .b4 {background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff;}

.serif .b1 {margin:0; background:#fff;}
.serif .b2 {margin:0 1px; border-width:0 2px;}
.serif .b3 {margin:0 3px;}
.serif .b4 {height:2px; margin:0 4px;}

.serif .boxcontent {display:block;  background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 5px;}

/* Pillar type */
.pillar {background: transparent; width:40%;}
.pillar h1, .pillar p {margin:0 10px;}
.pillar h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.pillar p {padding-bottom:0.5em;}

.pillar .top, .pillar .bottom {display:block; background:transparent; font-size:1px;}
.pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4 {display:block; overflow:hidden;}
.pillar .b1, .pillar .b2, .pillar .b4 {height:1px;}
.pillar .b2, .pillar .b3 {background:#d66; border-left:1px solid #fff; border-right:1px solid #fff;}
.pillar .b4 {background:#d66; border-left:4px solid #fff; border-right:4px solid #fff;}

.pillar .b1 {margin:0 2px; background:#fff;}
.pillar .b2 {margin:0 1px; border-width:0 1px;}
.pillar .b3 {height:2px; margin:0;}
.pillar .b4 {margin:0 2px;}

.pillar .boxcontent {display:block; background:#d66; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 5px;}


/* Barrel cutout Borders*/
.barrel {background: transparent; width:40%;}
.barrel h1, .barrel p {margin:0 10px;}
.barrel h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.barrel p {padding-bottom:0.5em;}

.barrel .top, .barrel .bottom {display:block; background:transparent; font-size:1px;}
.barrel .b1, .barrel .b2, .barrel .b3, .barrel .b4, .barrel .b5 {display:block; overflow:hidden; height:1px; background:#e0cea3;}
.barrel .b1 {border-left:10px solid #dfd5c0; border-right:10px solid #dfd5c0;}
.barrel .b2 {border-left:5px solid #dfd5c0; border-right:5px solid #dfd5c0;}
.barrel .b3 {border-left:3px solid #dfd5c0; border-right:3px solid #dfd5c0;}
.barrel .b4 {border-left:2px solid #dfd5c0; border-right:2px solid #dfd5c0;}
.barrel .b5 {border-left:1px solid #dfd5c0; border-right:1px solid #dfd5c0;}
.barrel .b1 {margin:0 33%;}
.barrel .b2 {margin:0 20%;}
.barrel .b3 {margin:0 12%;}
.barrel .b4 {margin:0 5%;}
.barrel .b5 {margin:0 1px;}

.barrel .boxcontent {display:block; background:#e0cea3; border-left:1px solid #fff; border-right:1px solid #999;}

____________________________
_____________
Kentaromiura
03/04/2006 12.31
 
Email
 
Scheda Utente
 
Modifica
 
Cancella
 
Quota
OFFLINE
Post: 508
Post: 334
Registrato il: 26/06/2003
Città: ALTIVOLE
Sesso: Maschile
Occupazione: Studente
Utente Senior
file crazycorner.js
/*


released under Creative commons license ;)

http://creativecommons.org/licenses/by-nc-nd/2.0/

Test succesfully with:

Netscape 7.2, 
Ie 6.0sp2,(it should work with 5 too)	
FF1.5,	(it should work on 1.0 too)
opera 8.51

Kentaromiura Crazy Corner Version 0.1 alpha preview (codename:Gatsu)
|-->from an idea of www.mswebpeople.com/krazy.html
|--------->from snazzy corner idea http://www.cssplay.co.uk/boxes/snazzy.html by Stu Nicholls
|---------------->from nifty corner idea	http://pro.html.it/articoli/id_598/idcat_31/pro.html (grazie Alessandro Fulciniti;)
EDIT:
as Alessandro Fulciniti told me the original idea of Krazy Corners is of Stu Nicholls.(http://www.cssplay.co.uk/boxes/krazy.html)
TODO:
better support for bordercolors 
a decornerize functi0n(it must search for boxcontent trashing all the rest ;) )
better support for divs width 
*/

var d=document;

function ele(obj) {
	return d.createElement(obj);
}

function app(pNode,cNode) {
	pNode.appendChild(cNode);	
	return pNode;
}

function text(str) {
	return d.createTextNode(str);
}

function set(obj,attr,val) {
	obj.setAttribute(attr,val);
	return obj
}

function cornerize(id,type,col){
	if(type===undefined)
		raised(id,"raised",col);
	else
	switch(type){
		case "raised":raised(id,type,col);break;		
		case "inset":raised(id,type,col);break;
		
		case "square":square(id,col);break;
		
		case "curved":curved(id,type,col);break;
		case "serif":curved(id,type,col);break;
		case "pillar":curved(id,type,col);break;
		
		case "chamfer":chamfer(id,type,col);break;
		case "barrel":chamfer(id,type,col);break;
	}	
}

function curved(id,type,col){	
	
	var cn="class";
/*@cc_on
cn="className";
@*/	
	var box=set(d.getElementById(id),cn,"boxcontent");
	var ext=set(ele("div"),cn,type);
	if(!(col===undefined))
		box.style.backgroundColor=col;
		
	var top=set(ele("span"),cn,"top");
	var t;
	for(var i=1;i<5;i++){
		app(top,t=set(ele("span"),cn,"b"+i));	
		if(!(col===undefined)&&i!=1)
			t.style.backgroundColor=col;			
	}
	
	
	app(ext,top);
	
	box.parentNode.insertBefore(ext,box);	
	
	app(ext,box);//TRANSFER because it is already into the DOM
	
	var down=set(ele("span"),cn,"bottom");
	
	for(var i=4;i>0;i--){
		app(down,t=set(ele("span"),cn,"b"+i));
		if(!(col===undefined)&&i!=1)
			t.style.backgroundColor=col;
	}	
	app(ext,down);	
}

function square(id,col){
	
	var cn="class";
/*@cc_on
cn="className";
@*/
	var box=set(d.getElementById(id),cn,"boxcontent");
	var ext=set(ele("div"),cn,"square");
	
	if(!(col===undefined))
		box.style.backgroundColor=col;
			
	var top=set(ele("span"),cn,"top");	
	var t;
	app(top,t=set(ele("span"),cn,"b1t"));	
	if(!(col===undefined))
		t.style.backgroundColor=col;
	app(top,t=set(ele("span"),cn,"b2"));
	if(!(col===undefined))
		t.style.backgroundColor=col;
	app(ext,top);
	
	box.parentNode.insertBefore(ext,box);

	
	app(ext,box);
	
	var down=set(ele("span"),cn,"bottom");
	app(down,t=set(ele("span"),cn,"b2"));	
	if(!(col===undefined))
		t.style.backgroundColor=col;
	app(down,t=set(ele("span"),cn,"b1b"));	
	if(!(col===undefined))
		t.style.backgroundColor=col;
	app(ext,down);
}	

function chamfer(id,type,col){	
	var cn="class";
/*@cc_on
cn="className";
@*/	
	var box=set(d.getElementById(id),cn,"boxcontent");
	var ext=set(ele("div"),cn,type);
		
	if(!(col===undefined))
		box.style.backgroundColor=col;		
			
	var top=set(ele("span"),cn,"top");
	for(var i=1;i<6;i++){
		app(top,t=set(ele("span"),cn,"b"+i));
		if(!(col===undefined)&&i!=1)
			t.style.backgroundColor=col;			
	}		
	app(ext,top);
	
	box.parentNode.insertBefore(ext,box);	
		
	app(ext,box);
		
	var down=set(ele("span"),cn,"bottom");
	for(var i=5;i>0;i--){
		app(down,t=set(ele("span"),cn,"b"+i));	
		if(!(col===undefined)&&i!=1)
			t.style.backgroundColor=col;	
	}
	app(ext,down);
}

function raised(id,type,col){

	var cn="class";
/*@cc_on
cn="className";
@*/
	var box=set(d.getElementById(id),cn,"boxcontent");
	var ext=set(ele("div"),cn,type);	
	if(!(col===undefined))
		box.style.backgroundColor=col;	
		
	var top=set(ele("span"),cn,"top");	
	
	for(var i=1;i<5;i++){
		var t=set(ele("span"),cn,"b"+i);
		if(!(col===undefined) && i!=1)
			t.style.backgroundColor=col;
		app(top,t);	
	}
	app(ext,top);
	box.parentNode.insertBefore(ext,box);	
	
	app(ext,box);	
	
	var down=set(ele("span"),cn,"bottom");
	for(var i=4;i>0;i--){
		var t=set(ele("span"),cn,"b"+i+"b");
		if(!(col===undefined) && i!=1)
			t.style.backgroundColor=col;
		app(down,t);	
	}	
	app(ext,down);	
}

[Modificato da kentaromiura 04/04/2006 8.32]


____________________________
_____________
Kentaromiura
03/04/2006 12.31
 
Email
 
Scheda Utente
 
Modifica
 
Cancella
 
Quota
Amministra Discussione: | Chiudi | Sposta | Cancella | Modifica | Notifica email Pagina precedente | 1 | Pagina successiva
Nuova Discussione
Rispondi

Home Forum | Bacheca | Album | Utenti | Cerca | Login | Registrati | Amministra
Crea forum gratis, gestisci la tua comunità! Iscriviti a FreeForumZone
FreeForumZone [v.5.0.0] - Leggendo la pagina si accettano regolamento e privacy
Tutti gli orari sono GMT+01:00. Adesso sono le 07.14. Versione: Stampabile | Mobile
Copyright © 2000-2019 FFZ srl - www.freeforumzone.com