Phiên bản đầy đủ: jsB@nk » CSS » Khuôn mẫu » ShadedBorder
URL: https://www.javascriptbank.com/shadedborder.html
Hiệu ứng này sẽ tạo ra các khung chứa nội dung của bạn với các đường viền đổ bóng rất đẹp mà không dùng bất cứ hình ảnh nào. Bạn có thể sử dụng các định dạng đường viền khác nhau trên cùng một trang.
Phiên bản đầy đủ: jsB@nk » CSS » Khuôn mẫu » ShadedBorder
URL: https://www.javascriptbank.com/shadedborder.html
<style type="text/css"><!--#shadowed-border { padding: 20px; width: 30%; margin: 20px auto;}#shadowed-border .sb-inner { background:#ccc;}#shadowed-border .sb-border { background:#fff;}#shadowed-border2 { padding: 10px; width: 30%; margin: 10px auto; }#shadowed-border2 .sb-inner { background:#DFE2FF;}#shadowed-border2 .sb-border { background:#FFDC9F;}.plain { padding: 10px; width: 30%; margin: 10px auto; border: thin solid black;}--></style><script type="text/javascript"><!--// Created by Steffen Rusitschka - http://www.ruzee.com/var RUZEE = window.RUZEE || {};RUZEE.ShadedBorder = {create: function(opts) { var isie = /msie/i.test(navigator.userAgent) && !window.opera; function sty(el, h) { for(k in h) { if (/ie_/.test(k)) { if (isie) el.style[k.substr(3)]=h[k]; } else el.style[k]=h[k]; } } function crdiv(h) { var el=document.createElement("div"); el.className = "sb-gen"; sty(el, h); return el; } function op(v) { v = v<0 ? 0 : v; v = v>0.99999 ? 0.99999 : v; if (isie) { return " filter:alpha(opacity=" + (v*100) + ");"; } else { return " opacity:" + v + ';'; } } var sr = opts.shadow || 0; var r = opts.corner || 0; var bor = 0; var bow = opts.border || 0; var shadow = sr != 0; var lw = r > sr ? r : sr; var rw = lw; var th = lw; var bh = lw; if (bow > 0) { bor = r; r = r - bow; } var cx = r != 0 && shadow ? Math.round(lw/3) : 0; var cy = cx; var cs = Math.round(cx/2); var iclass = r > 0 ? "sb-inner" : "sb-shadow"; var sclass = "sb-shadow"; var bclass = "sb-border"; var edges = opts.edges || "trlb"; if (!/t/i.test(edges)) th=0; if (!/b/i.test(edges)) bh=0; if (!/l/i.test(edges)) lw=0; if (!/r/i.test(edges)) rw=0; var p = { position:"absolute", left:"0", top:"0", width:lw + "px", height:th + "px", ie_fontSize:"1px", overflow:"hidden" }; var tl = crdiv(p); delete p.left; p.right="0"; p.width=rw + "px"; var tr = crdiv(p); delete p.top; p.bottom="0"; p.height=bh + "px"; var br = crdiv(p); delete p.right; p.left="0"; p.width=lw + "px"; var bl = crdiv(p); var tw = crdiv({ position:"absolute", width:"100%", height:th + "px", ie_fontSize:"1px", top:"0", left:"0", overflow:"hidden" }); var t = crdiv({ position:"relative", height:th + "px", ie_fontSize:"1px", marginLeft:lw + "px", marginRight:rw + "px", overflow:"hidden" }); tw.appendChild(t); var bw = crdiv({ position:"absolute", left:"0", bottom:"0", width:"100%", height:bh + "px", ie_fontSize:"1px", overflow:"hidden" }); var b = crdiv({ position:"relative", height:bh + "px", ie_fontSize:"1px", marginLeft:lw + "px", marginRight:rw + "px", overflow:"hidden" }); bw.appendChild(b); var mw = crdiv({ position:"absolute", top:(-bh)+"px", left:"0", width:"100%", height:"100%", overflow:"hidden", ie_fontSize:"1px" }); function corner(el,t,l) { var w = l ? lw : rw; var h = t ? th : bh; var s = t ? cs : -cs; var dsb = []; var dsi = []; var dss = []; var xp=0; var xd=1; if (l) { xp=w-1; xd=-1; } for (var x=0; x<w; ++x) { var yp=0; var yd=1; if (t) { yp=h-1; yd=-1; } for (var y=0; y<h; ++y) { var div = '<div style="position:absolute; top:' + yp + 'px; left:' + xp + 'px; ' + 'width:1px; height:1px; overflow:hidden;'; var xc = x - cx; var yc = y - cy - s; var d = Math.sqrt(xc*xc+yc*yc); var doShadow = false; if (r > 0) { // draw border if (xc < 0 && yc < bor && yc >= r || yc < 0 && xc < bor && xc >= r) { dsb.push(div + '" class="' + bclass + '"></div>'); } else if (d<bor && d>=r-1 && xc>=0 && yc>=0) { var dd = div; if (d>=bor-1) { dd += op(bor-d); doShadow = true; } dsb.push(dd + '" class="' + bclass + '"></div>'); } // draw inner var dd = div + ' z-index:2;'; if (xc < 0 && yc < r || yc < 0 && xc < r) { dsi.push(dd + '" class="' + iclass + '"></div>'); } else if (d<r && xc>=0 && yc>=0) { if (d>=r-1) { dd += op(r-d); doShadow = true; } dsi.push(dd + '" class="' + iclass + '"></div>'); } else doShadow = true; } else doShadow = true; // draw shadow if (sr > 0 && doShadow) { d = Math.sqrt(x*x+y*y); if (d<sr) { dss.push(div + ' z-index:0; ' + op(1-(d/sr)) + '" class="' + sclass + '"></div>'); } } yp += yd; } xp += xd; } el.innerHTML = dss.concat(dsb.concat(dsi)).join(''); } function mid(mw) { var ds = []; ds.push('<div style="position:relative; top:' + (th+bh) + 'px;' + ' height:10000px; margin-left:' + (lw-r-cx) + 'px;' + ' margin-right:' + (rw-r-cx) + 'px; overflow:hidden;"' + ' class="' + iclass + '"></div>'); var dd = '<div style="position:absolute; width:1px;' + ' top:' + (th+bh) + 'px; height:10000px;'; for (var x=0; x<lw-r-cx; ++x) { ds.push(dd + ' left:' + x + 'px;' + op((x+1.0)/lw) + '" class="' + sclass + '"></div>'); } for (var x=0; x<rw-r-cx; ++x) { ds.push(dd + ' right:' + x + 'px;' + op((x+1.0)/rw) + '" class="' + sclass + '"></div>'); } if (bow > 0) { var su = ' width:' + bow + 'px;' + '" class="' + bclass + '"></div>'; ds.push(dd + ' left:' + (lw-bor-cx) + 'px;' + su); ds.push(dd + ' right:' + (rw-bor-cx) + 'px;' + su); } mw.innerHTML = ds.join(''); } function tb(el, t) { var ds = []; var h = t ? th : bh; var dd = '<div style="height:1px; overflow:hidden; position:absolute;' + ' width:100%; left:0px; '; var s = t ? cs : -cs; for (var y=0; y<h-s-cy-r; ++y) { ds.push(dd + (t ? 'top:' : 'bottom:') + y + 'px;' + op((y+1)*1.0/h) + '" class="' + sclass + '"></div>'); } if (y >= bow) { ds.push(dd + (t ? 'top:' : 'bottom:') + (y - bow) + 'px;' + ' height:' + bow + 'px;" class="' + bclass + '"></div>'); } ds.push(dd + (t ? 'top:' : 'bottom:') + y + 'px;' + ' height:' + (r+cy+s) + 'px;" class="' + iclass + '"></div>'); el.innerHTML = ds.join(''); } corner(tl, true, true); corner(tr, true, false); corner(bl, false, true); corner(br, false, false); mid(mw); tb(t, true); tb(b, false); return { render: function(el) { if (typeof el == 'string') el = document.getElementById(el); if (el.length != undefined) { for (var i=0; i<el.length; ++i) this.render(el[i]); return; } // remove generated children var node = el.firstChild; while (node) { var nextNode = node.nextSibling; if (node.nodeType == 1 && node.className == 'sb-gen') el.removeChild(node); node = nextNode; } var iel = el.firstChild; var twc = tw.cloneNode(true); var mwc = mw.cloneNode(true); var bwc = bw.cloneNode(true); el.insertBefore(tl.cloneNode(true), iel); el.insertBefore(tr.cloneNode(true), iel); el.insertBefore(bl.cloneNode(true), iel); el.insertBefore(br.cloneNode(true), iel); el.insertBefore(twc, iel); el.insertBefore(mwc, iel); el.insertBefore(bwc, iel); if (isie) { function resize() { twc.style.width = bwc.style.width = mwc.style.width = el.offsetWidth + "px"; mwc.firstChild.style.height = el.offsetHeight + "px"; } el.onresize=resize; resize(); } } };}}// add our styles to the documentdocument.write( '<style type="text/css">' + '.sb, .sbi, .sb *, .sbi * { position:relative; z-index:1; }' + '* html .sb, * html .sb *, * html .sbi, * html .sbi * { height:1%; }' + '.sbi { display:inline-block; }' + '.sb-inner { background:#ddd; }' + '.sb-shadow { background:#000; }' + '.sb-border { background:#bbb; }' + '</style>');// Multiple onload function created by: Simon Willison// http://simonwillison.net/2004/May/26/addLoadEvent/function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } }}addLoadEvent(function() { border.render('shadowed-border'); border.render('shadowed-border2');});//--></script><div id="shadowed-border" class="sb"> <p>Ma quande linguescoalesce, lingue es plu simplic regulari quam ti del coalescentlingues. Li nov lingua franca va esser plu simplic e regulari quam liexistent Europan lingues.</p> </div> <divid="shadowed-border2" class="sb"> <p>Ma quande linguescoalesce, lingue es plu simplic regulari quam ti del coalescentlingues. Li nov lingua franca va esser plu simplic e regulari quam liexistent Europan lingues.</p> </div> <divclass="plain"> <p> <em>Note: This is plain, without thescript.</em> Lorem ipsum dolor sit amet, consecte adipiscingelit.</p> </div><script type="text/javascript"><!-- var border = RUZEE.ShadedBorder.create({ corner: 8, shadow: 16, border: 2 });//--></script>