4/16/2012

Awesome writing Css 3D

Posted by Johnson William On 12:51 AM No comments

Demo : http://jsfiddle.net/love4all1080/W2cM3/

Html Code

   1:  <div class="plane">

   2:  <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

   3:  <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

   4:  <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

   5:  <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

   6:  <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

   7:  <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

   8:  <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

   9:  <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

  10:  <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

  11:  <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

  12:  <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

  13:  <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

  14:  </div>

Css Code

   1:  .plane {width:100px; height:100px; margin:150px auto;

2:

   3:  -webkit-transform-style: preserve-3d;

4:

   5:  -moz-transform-style: preserve-3d;

6:

   7:  -webkit-transform-origin: 50px 50px;

8:

   9:  -moz-transform-origin:50px 50px;

10:

  11:  transform-origin: 50px 50px;

12:

  13:  -webkit-animation:spin 8s infinite linear;

14:

  15:  -moz-animation:spin 8s infinite linear;

16:

  17:  }

18:

19:

  20:  .plane ul {padding:0; margin:0; list-style:none; width:100%; height:100%; position:absolute;

21:

  22:  -webkit-transform-style: preserve-3d;

23:

  24:  -moz-transform-style: preserve-3d;

25:

  26:  }

27:

28:

29:

  30:  .plane ul li {position:absolute; display:block;

31:

  32:  border-radius: 50px;

33:

  34:  opacity: 0.8;

35:

  36:  -webkit-backface-visibility: hidden;

37:

  38:  -moz-backface-visibility: hidden;

39:

  40:  }

41:

42:

  43:  .plane ul li:nth-child(1) {-moz-transform: rotateY(0deg) translateZ(187px); background:red;}

44:

  45:  .plane ul li:nth-child(2) {-moz-transform: rotateY(15deg) translateZ(187px); background:orange;}

46:

  47:  .plane ul li:nth-child(3) {-moz-transform: rotateY(30deg) translateZ(187px); background:yellow;}

48:

  49:  .plane ul li:nth-child(4) {-moz-transform: rotateY(45deg) translateZ(187px); background:green;}

50:

  51:  .plane ul li:nth-child(5) {-moz-transform: rotateY(60deg) translateZ(187px); background:blue;}

52:

  53:  .plane ul li:nth-child(6) {-moz-transform: rotateY(75deg) translateZ(187px); background:indigo;}

54:

  55:  .plane ul li:nth-child(7) {-moz-transform: rotateY(90deg) translateZ(187px); background:violet;}

56:

  57:  .plane ul li:nth-child(8) {-moz-transform: rotateY(105deg) translateZ(187px); background:indigo;}

58:

  59:  .plane ul li:nth-child(9) {-moz-transform: rotateY(120deg) translateZ(187px); background:blue;}

60:

  61:  .plane ul li:nth-child(10) {-moz-transform: rotateY(135deg) translateZ(187px); background:green;}

62:

  63:  .plane ul li:nth-child(11) {-moz-transform: rotateY(150deg) translateZ(187px); background:yellow;}

64:

  65:  .plane ul li:nth-child(12) {-moz-transform: rotateY(165deg) translateZ(187px); background:orange;}

66:

  67:  .plane ul li:nth-child(13) {-moz-transform: rotateY(180deg) translateZ(187px); background:red;}

68:

  69:  .plane ul li:nth-child(14) {-moz-transform: rotateY(195deg) translateZ(187px); background:orange;}

70:

  71:  .plane ul li:nth-child(15) {-moz-transform: rotateY(210deg) translateZ(187px); background:yellow;}

72:

  73:  .plane ul li:nth-child(16) {-moz-transform: rotateY(225deg) translateZ(187px); background:green;}

74:

  75:  .plane ul li:nth-child(17) {-moz-transform: rotateY(240deg) translateZ(187px); background:blue;}

76:

  77:  .plane ul li:nth-child(18) {-moz-transform: rotateY(255deg) translateZ(187px); background:indigo;}

78:

  79:  .plane ul li:nth-child(19) {-moz-transform: rotateY(270deg) translateZ(187px); background:violet;}

80:

  81:  .plane ul li:nth-child(20) {-moz-transform: rotateY(285deg) translateZ(187px); background:indigo;}

82:

  83:  .plane ul li:nth-child(21) {-moz-transform: rotateY(300deg) translateZ(187px); background:blue;}

84:

  85:  .plane ul li:nth-child(22) {-moz-transform: rotateY(315deg) translateZ(187px); background:green;}

86:

  87:  .plane ul li:nth-child(23) {-moz-transform: rotateY(330deg) translateZ(187px); background:yellow;}

88:

  89:  .plane ul li:nth-child(24) {-moz-transform: rotateY(345deg) translateZ(187px); background:orange;}

90:

91:

92:

93:

94:

  95:  .plane ul:nth-child(1) {-moz-transform: rotateX(0deg);}

96:

  97:  .plane ul:nth-child(2) {-moz-transform: rotateX(15deg);}

98:

  99:  .plane ul:nth-child(3) {-moz-transform: rotateX(30deg);}

 100:

 101:  .plane ul:nth-child(4) {-moz-transform: rotateX(45deg);}

 102:

 103:  .plane ul:nth-child(5) {-moz-transform: rotateX(60deg);}

 104:

 105:  .plane ul:nth-child(6) {-moz-transform: rotateX(75deg);}

 106:

 107:  .plane ul:nth-child(7) {-moz-transform: rotateX(89.9deg);}

 108:

 109:  .plane ul:nth-child(8) {-moz-transform: rotateX(105deg);}

 110:

 111:  .plane ul:nth-child(9) {-moz-transform: rotateX(120deg);}

 112:

 113:  .plane ul:nth-child(10) {-moz-transform: rotateX(135deg);}

 114:

 115:  .plane ul:nth-child(11) {-moz-transform: rotateX(150deg);}

 116:

 117:  .plane ul:nth-child(12) {-moz-transform: rotateX(165deg);}

 118:

 119:

 120:

 121:  .plane ul li:nth-child(1) {-webkit-transform: rotateY(0deg) translateZ(187px); width:70px; height:70px; left:15px; top:15px;}

 122:

 123:  .plane ul li:nth-child(2) {-webkit-transform: rotateY(15deg) translateZ(187px); width:70px; height:70px; left:15px; top:15px;}

 124:

 125:  .plane ul li:nth-child(3) {-webkit-transform: rotateY(30deg) translateZ(187px); width:64px; height:64px; left:18px; top:18px;}

 126:

 127:  .plane ul li:nth-child(4) {-webkit-transform: rotateY(45deg) translateZ(187px); width:58px; height:58px; left:21px; top:21px;}

 128:

 129:  .plane ul li:nth-child(5) {-webkit-transform: rotateY(60deg) translateZ(187px); width:54px; height:54px; left:23px; top:23px;}

 130:

 131:  .plane ul li:nth-child(6) {-webkit-transform: rotateY(75deg) translateZ(187px); width:52px; height:52px; left:24px; top:24px;}

 132:

 133:  .plane ul li:nth-child(7) {-webkit-transform: rotateY(90deg) translateZ(187px); width:50px; height:50px; left:25px; top:25px;}

 134:

 135:  .plane ul li:nth-child(8) {-webkit-transform: rotateY(105deg) translateZ(187px); width:52px; height:52px; left:24px; top:24px;}

 136:

 137:  .plane ul li:nth-child(9) {-webkit-transform: rotateY(120deg) translateZ(187px); width:54px; height:54px; left:23px; top:23px;}

 138:

 139:  .plane ul li:nth-child(10) {-webkit-transform: rotateY(135deg) translateZ(187px); width:58px; height:58px; left:21px; top:21px;}

 140:

 141:  .plane ul li:nth-child(11) {-webkit-transform: rotateY(150deg) translateZ(187px); width:64px; height:64px; left:18px; top:18px;}

 142:

 143:  .plane ul li:nth-child(12) {-webkit-transform: rotateY(165deg) translateZ(187px); width:70px; height:70px; left:15px; top:15px;}

 144:

 145:  .plane ul li:nth-child(13) {-webkit-transform: rotateY(180deg) translateZ(187px); width:70px; height:70px; left:15px; top:15px;}

 146:

 147:  .plane ul li:nth-child(14) {-webkit-transform: rotateY(195deg) translateZ(187px);  width:70px; height:70px; left:15px; top:15px;}

 148:

 149:  .plane ul li:nth-child(15) {-webkit-transform: rotateY(210deg) translateZ(187px); width:64px; height:64px; left:18px; top:18px;}

 150:

 151:  .plane ul li:nth-child(16) {-webkit-transform: rotateY(225deg) translateZ(187px); width:58px; height:58px; left:21px; top:21px;}

 152:

 153:  .plane ul li:nth-child(17) {-webkit-transform: rotateY(240deg) translateZ(187px); width:54px; height:54px; left:23px; top:23px;}

 154:

 155:  .plane ul li:nth-child(18) {-webkit-transform: rotateY(255deg) translateZ(187px); width:52px; height:52px; left:24px; top:24px;}

 156:

 157:  .plane ul li:nth-child(19) {-webkit-transform: rotateY(270deg) translateZ(187px); width:50px; height:50px; left:25px; top:25px;}

 158:

 159:  .plane ul li:nth-child(20) {-webkit-transform: rotateY(285deg) translateZ(187px); width:52px; height:52px; left:24px; top:24px;}

 160:

 161:  .plane ul li:nth-child(21) {-webkit-transform: rotateY(300deg) translateZ(187px); width:54px; height:54px; left:23px; top:23px;}

 162:

 163:  .plane ul li:nth-child(22) {-webkit-transform: rotateY(315deg) translateZ(187px); width:58px; height:58px; left:21px; top:21px;}

 164:

 165:  .plane ul li:nth-child(23) {-webkit-transform: rotateY(330deg) translateZ(187px); width:64px; height:64px; left:18px; top:18px;}

 166:

 167:  .plane ul li:nth-child(24) {-webkit-transform: rotateY(345deg) translateZ(187px); width:70px; height:70px; left:15px; top:15px;}

 168:

 169:

 170:  .plane ul:nth-child(1) {-webkit-transform: rotateX(0deg);}

 171:

 172:  .plane ul:nth-child(2) {-webkit-transform: rotateX(15deg);}

 173:

 174:  .plane ul:nth-child(3) {-webkit-transform: rotateX(30deg);}

 175:

 176:  .plane ul:nth-child(4) {-webkit-transform: rotateX(45deg);}

 177:

 178:  .plane ul:nth-child(5) {-webkit-transform: rotateX(60deg);}

 179:

 180:  .plane ul:nth-child(6) {-webkit-transform: rotateX(75deg);}

 181:

 182:  .plane ul:nth-child(7) {-webkit-transform: rotateX(90deg);}

 183:

 184:  .plane ul:nth-child(8) {-webkit-transform: rotateX(105deg);}

 185:

 186:  .plane ul:nth-child(9) {-webkit-transform: rotateX(120deg);}

 187:

 188:  .plane ul:nth-child(10) {-webkit-transform: rotateX(135deg);}

 189:

 190:  .plane ul:nth-child(11) {-webkit-transform: rotateX(150deg);}

 191:

 192:  .plane ul:nth-child(12) {-webkit-transform: rotateX(165deg);}

 193:

 194:

 195:

 196:  .plane ul:nth-child(2) li:nth-child(19),

 197:

 198:  .plane ul:nth-child(3) li:nth-child(19),

 199:

 200:  .plane ul:nth-child(4) li:nth-child(19),

 201:

 202:  .plane ul:nth-child(5) li:nth-child(19),

 203:

 204:  .plane ul:nth-child(6) li:nth-child(19),

 205:

 206:  .plane ul:nth-child(7) li:nth-child(19),

 207:

 208:  .plane ul:nth-child(8) li:nth-child(19),

 209:

 210:  .plane ul:nth-child(9) li:nth-child(19),

 211:

 212:  .plane ul:nth-child(10) li:nth-child(19),

 213:

 214:  .plane ul:nth-child(11) li:nth-child(19),

 215:

 216:  .plane ul:nth-child(12) li:nth-child(19),

 217:

 218:

 219:

 220:  .plane ul:nth-child(2) li:nth-child(18),

 221:

 222:  .plane ul:nth-child(4) li:nth-child(18),

 223:

 224:  .plane ul:nth-child(6) li:nth-child(18),

 225:

 226:  .plane ul:nth-child(8) li:nth-child(18),

 227:

 228:  .plane ul:nth-child(10) li:nth-child(18),

 229:

 230:  .plane ul:nth-child(12) li:nth-child(18),

 231:

 232:

 233:

 234:  .plane ul:nth-child(2) li:nth-child(20),

 235:

 236:  .plane ul:nth-child(4) li:nth-child(20),

 237:

 238:  .plane ul:nth-child(6) li:nth-child(20),

 239:

 240:  .plane ul:nth-child(8) li:nth-child(20),

 241:

 242:  .plane ul:nth-child(10) li:nth-child(20),

 243:

 244:  .plane ul:nth-child(12) li:nth-child(20),

 245:

 246:

 247:

 248:  .plane ul:nth-child(2) li:nth-child(7),

 249:

 250:  .plane ul:nth-child(3) li:nth-child(7),

 251:

 252:  .plane ul:nth-child(4) li:nth-child(7),

 253:

 254:  .plane ul:nth-child(5) li:nth-child(7),

 255:

 256:  .plane ul:nth-child(6) li:nth-child(7),

 257:

 258:  .plane ul:nth-child(7) li:nth-child(7),

 259:

 260:  .plane ul:nth-child(8) li:nth-child(7),

 261:

 262:  .plane ul:nth-child(9) li:nth-child(7),

 263:

 264:  .plane ul:nth-child(10) li:nth-child(7),

 265:

 266:  .plane ul:nth-child(11) li:nth-child(7),

 267:

 268:  .plane ul:nth-child(12) li:nth-child(7),

 269:

 270:

 271:

 272:  .plane ul:nth-child(2) li:nth-child(6),

 273:

 274:  .plane ul:nth-child(4) li:nth-child(6),

 275:

 276:  .plane ul:nth-child(6) li:nth-child(6),

 277:

 278:  .plane ul:nth-child(8) li:nth-child(6),

 279:

 280:  .plane ul:nth-child(10) li:nth-child(6),

 281:

 282:  .plane ul:nth-child(12) li:nth-child(6),

 283:

 284:

 285:

 286:  .plane ul:nth-child(2) li:nth-child(8),

 287:

 288:  .plane ul:nth-child(4) li:nth-child(8),

 289:

 290:  .plane ul:nth-child(6) li:nth-child(8),

 291:

 292:  .plane ul:nth-child(8) li:nth-child(8),

 293:

 294:  .plane ul:nth-child(10) li:nth-child(8),

 295:

 296:  .plane ul:nth-child(12) li:nth-child(8) {display:none;}

 297:

 298:

 299:

 300:  @-webkit-keyframes spin {

 301:

 302:  0% {-webkit-transform: rotateZ(0deg) rotateY(45deg) rotateX(0deg);}

 303:

 304:  100% {-webkit-transform: rotateZ(360deg) rotateY(405deg) rotateX(360deg);}

 305:

 306:  }

 307:

 308:  @-moz-keyframes spin {

 309:

 310:  0% {-moz-transform: rotateZ(0deg) rotateY(45deg) rotateX(0deg);}

 311:

 312:  100% {-moz-transform: rotateZ(360deg) rotateY(405deg) rotateX(360deg);}

 313:

 314:  }

 315:

4/15/2012

jQuery 1.4 Cheat Sheet

Posted by Johnson William On 11:31 PM No comments

Download: http://sky.geocities.jp/love4all1080_codedemo/impulse_studios-jquery_cheat_sheet-1.0.pdf

Relax with RUN! (Theme 1 from Canabalt)

Posted by Johnson William On 11:10 PM No comments

The Remote Agent Experiment: Debugging Code from 60 Million Miles Away

Posted by Johnson William On 9:36 PM No comments

4/13/2012

Surround link to Image automatic

Posted by Johnson William On 10:39 PM No comments

Following instructions below to practise add a link surround image automatic.
Html code before using jQuery

   1:  <div id="main_container">

   2:      <ul>

   3:          <li>

   4:              <img src="/images/pic_1.jpg" alt="">

   5:              <div class="description">

   6:                  <p>Some description demo</p>

   7:                  <p>Some description demo</p>

   8:              </div>

   9:          </li>

10:

  11:          <li>

  12:              <img src="/images/pic_1.jpg" alt="">

  13:              <div class="description">

  14:                  <p>Some description demo</p>

  15:                  <p>Some description demo</p>

  16:              </div>

  17:          </li>

  18:          <li>

  19:              <img src="/images/pic_1.jpg" alt="">

  20:              <div class="description">

  21:                  <p>Some description demo</p>

  22:                  <p>Some description demo</p>

  23:              </div>

  24:          </li>

  25:          <li>

  26:              <img src="/images/pic_1.jpg" alt="">

  27:              <div class="description">

  28:                  <p>Some description demo</p>

  29:                  <p>Some description demo</p>

  30:              </div>

  31:          </li>

  32:      </ul>

  33:  </div>

Now, to convert all images included in #main_container block to hyperlink, we use a jQuery function below

   1:   $(function(){

   2:              //Find all images listed in the block #main_container

   3:              $('#main_container img').each(function ()

   4:              {

   5:                  //set image founded for a new variable to cache the selector

   6:                  var currImg = $(this);

   7:                  //get the link of image and assign for a link tag around the image

   8:                  currImg.wrap("<a href='" + currImg.attr("src") + "' />");

   9:              });

  10:          });

Remember add file jQuery library before this function:

   1:  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

==> Result Html code after using jQuery function

   1:  <div id="main_container">

   2:      <ul>

   3:          <li>

   4:              <a href="/images/pic_1.jpg"><img src="/images/pic_1.jpg" alt=""></a>

   5:              <div class="description">

   6:                  <p>Some description demo</p>

   7:                  <p>Some description demo</p>

   8:              </div>

   9:          </li>

10:

  11:          <li>

  12:              <a href="/images/pic_2.jpg"><img src="/images/pic_2.jpg" alt=""></a>

  13:              <div class="description">

  14:                  <p>Some description demo</p>

  15:                  <p>Some description demo</p>

  16:              </div>

  17:          </li>

  18:          <li>

  19:              <a href="/images/pic_3.jpg"><img src="/images/pic_3.jpg" alt=""></a>

  20:              <div class="description">

  21:                  <p>Some description demo</p>

  22:                  <p>Some description demo</p>

  23:              </div>

  24:          </li>

  25:          <li>

  26:              <a href="/images/pic_1.jpg"><img src="/images/pic_1.jpg" alt=""></a>

  27:              <div class="description">

  28:                  <p>Some description demo</p>

  29:                  <p>Some description demo</p>

  30:              </div>

  31:          </li>

  32:      </ul>

  33:  </div>

if you want a special image without hyper link you can add a class with a name 'special' or another name you want :)

<img src="/images/pic_1.jpg" alt="" class="special">

and before

currImg.wrap("<a href='" + currImg.attr("src") + "' />");

use If..else statements like this

if(currImg.hasClass('special')){//Do nothing}else{ currImg.wrap("<a href='" + currImg.attr("src") + "' />"); }

4/11/2012

Control block content display use jQuery

Posted by Johnson William On 3:20 PM No comments

Html code:

   1:  <ul id="ui_control">

   2:      <li>Shows</li>

   3:      <li><a href="#" class="current">2</a></li>

   4:      <li><a href="#">4</a></li>

   5:      <li><a href="#">6</a></li>

   6:      <li>rows</li>

   7:  </ul>

   8:  <ul id="ui_body">

   9:      <li>Data row 1</li>

  10:      <li>Data row 2</li>

  11:      <li>Data row 3</li>

  12:      <li>Data row 4</li>

  13:      <li>Data row 5</li>

  14:      <li>Data row 6</li>

  15:  </ul>

jQuery code

   1:  var $links = $('#ui_control li a');

   2:  var topIndex = 0;

   3:  var rows = 2;

4:

   5:  displayContent(rows);

6:

   7:  $links.click(function() {

   8:      rows = $(this).text();

   9:      displayContent(rows);

  10:          $links.fadeIn("fast").removeClass("current").addClass("none");

  11:          $(this).fadeIn("fast").addClass("current");

  12:          return false;

  13:  })

14:

  15:  function displayContent(rows) {

  16:      $('#ui_body li').hide(0)

  17:             .slice(0, rows )

  18:             .show();

  19:      topIndex += rows ;

  20:  }

Demo:

http://jsfiddle.net/jquerybyexample/GkKcc/1/

supported by: jquerybyexample@gmail.com

Code For Fun

4/16/2012

Awesome writing Css 3D

4/15/2012

jQuery 1.4 Cheat Sheet

Relax with RUN! (Theme 1 from Canabalt)

The Remote Agent Experiment: Debugging Code from 60 Million Miles Away

4/13/2012

Surround link to Image automatic

4/11/2012

Control block content display use jQuery

Site search

Tags

Random Post

ASP.NET

BLOGROLL

Blog Archive

LinkExchange

Followers