α-wwwiki

α-wwwiki :: history/lifted_corners/20130729-223705.txt

editor : alpha [82.253.126.95] 2013/07/29 22:37:05
_h3 lifted corners
_p Click on "include someCSS" to see something ...
{input {@ type="submit" value="include someCSS" onclick="°°
  var css = document.createElement('style');
  css.innerHTML = getId('styles').innerHTML;
  document.head.appendChild( css );
  this.value = 'OK, someCSS is included !';
  this.disabled='disabled'; 
°°"}}

{div {@ class="lifted"}OLD WAY}
{div {@ class="new_lifted"}NEW WAY}

_h3 CSS rules
{pre {@ id="styles" style="white-space:pre-wrap;"}°°
/* 1) SHARED */
 
.lifted, .new_lifted {
  border-radius:2px;
  position:relative;
  margin:20px auto;
  padding:10px;
  text-align:center;
  font:bold 3em optima;
  background:#fcfcfc;
  box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.2);
  -o-box-shadow: 0px 0px 1px 1px  rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 0px 1px 1px  rgba(0,0,0,0.2);
}

/* 2) OLD WAY */

.lifted:before, .lifted:after {
	bottom:14px;
	content: "";
	position: absolute;
	z-index: -1;
	-ms-transform: rotate(-1deg);
	-webkit-transform: rotate(-1deg); /* Safari and Chrome */
	-o-transform: rotate(-1deg); /* Opera */
	-moz-transform: rotate(-1deg); /* Firefox */
	box-shadow: 0 15px 5px rgba(0, 0, 0, 0.3);
	height: 50px;
	left: 5px;
	max-width: 50%;
	width: 50%;
}
.lifted:after {
	
	-ms-transform: rotate(1deg); /* IE 9 */
	-webkit-transform: rotate(1deg); /* Safari and Chrome */
	-o-transform: rotate(1deg); /* Opera */
	-moz-transform: rotate(1deg); /* Firefox */
	left: auto;
	right: 5px;
}

/* 3) NEW WAY */

.new_lifted:before, .new_lifted:after {

content: "";
	position: absolute;
	z-index: -1;
	< b>-ms-transform: skew(-3deg,-2deg);
	-webkit-transform: skew(-3deg,-2deg); /* Safari and Chrome */
	-o-transform: skew(-3deg,-2deg); /* Opera */
	-moz-transform: skew(-3deg,-2deg); /* Firefox */< /b>
	bottom: 14px;
	box-shadow: 0 15px 5px rgba(0, 0, 0, 0.3);
	height: 50px;
	left: 1px;
	max-width: 50%;
	width: 50%;
}
.new_lifted:after {

< b>-ms-transform: skew(3deg,2deg); /* IE 9 */
	-webkit-transform: skew(3deg,2deg); /* Safari and Chrome */
	-o-transform: skew(3deg,2deg); /* Opera */
	-moz-transform: skew(3deg,2deg); /* Firefox */< /b>
	left: auto;
	right: 1px;
}

°°}