حصرياتالمزيد

الاثنين، 22 يناير 2018

احصل على هذة الاداة من هنا

ساعة بأشكال مختلفة للبلوجر




السلام عليكم ورحمة
الله وبركاته
--
 نقدم لكم في هذه التدوينة ساعة باشكال مختلفة وبتصاميم انيقة
الساعة نعمل تلقائيا



طريقة التركيب:

    1. توجه الى التخطيط ثم اضف اداة html/javascript
    2. ضع كود الشكل المختار داخل الاداة


    الشكل الاول
      <style>
              .clock-wrapper{
                position: absolute;
          top: 50%;
          right: 0;
          bottom: 50%;
          left: 0;
          width: 250px;
          height: 250px;
          margin: auto;
          padding: 5px;
          background-image: linear-gradient(#f7f7f7,#e0e0e0);
          border-radius: 50% !important;
          -webkit-box-sizing: border-box !important;
          box-sizing: unset !important;
          box-shadow: 0 10px 15px rgba(0,0,0,.15), 0 2px 2px rgba(0,0,0,.2);
      
              }
              .clock-base{
                 width: 250px;
          height: 250px;
          background-color: #eee;
          border-radius: 50% !important;
          box-shadow: 0 0 5px #eee;
          -webkit-box-sizing: unset !important;
          box-sizing: border-box;
              }
              .click-indicator{
                  position: absolute;
                  z-index: 1;
                  top: 15px;
                  left: 15px;
                  width: 230px;
                  height: 230px;
              }
              .click-indicator div{
                  position: absolute;
                  width: 2px;
                  height: 4px;
                  margin: 113px 114px;
                  background-color: #ddd;
              }
              .click-indicator div:nth-child(1) {
                  transform: rotate(30deg) translateY(-113px);
              }
              .click-indicator div:nth-child(2) {
                  transform: rotate(60deg) translateY(-113px);
              }
              .click-indicator div:nth-child(3) {
                  transform: rotate(90deg) translateY(-113px);
                  background-color: #aaa;
              }
              .click-indicator div:nth-child(4) {
                  transform: rotate(120deg) translateY(-113px);
              }
              .click-indicator div:nth-child(5) {
                  transform: rotate(150deg) translateY(-113px);
              }
              .click-indicator div:nth-child(6) {
                  transform: rotate(180deg) translateY(-113px);
                  background-color: #aaa;
              }
              .click-indicator div:nth-child(7) {
                  transform: rotate(210deg) translateY(-113px);
              }
              .click-indicator div:nth-child(8) {
                  transform: rotate(240deg) translateY(-113px);
              }
              .click-indicator div:nth-child(9) {
                  transform: rotate(270deg) translateY(-113px);
                  background-color: #aaa;
              }
              .click-indicator div:nth-child(10) {
                  transform: rotate(300deg) translateY(-113px);
              }
              .click-indicator div:nth-child(11) {
                  transform: rotate(330deg) translateY(-113px);
              }
              .click-indicator div:nth-child(12) {
                  transform: rotate(360deg) translateY(-113px);
                  background-color: #c00;
              }
              .clock-hour{
                  position: absolute;
                  z-index: 2;
                  top: 80px;
                  left: 128px;
                  width: 4px;
                  height: 65px;
                  background-color: #555;
                  border-radius: 2px;
                  box-shadow: 0 0 2px rgba(0,0,0,.2);
                  transform-origin: 2px 50px;
                  transition: .5s;
                  -webkit-animation: rotate-hour 43200s linear infinite;
                  -moz-animation: rotate-hour 43200s linear infinite;
              }
              .clock-minute{
                  position: absolute;
                  z-index: 3;
                  top: 60px;
                  left: 128px;
                  width: 4px;
                  height: 85px;
                  background-color: #555;
                  border-radius: 2px;
                  box-shadow: 0 0 2px rgba(0,0,0,.2);
                  transform-origin: 2px 70px;
                  transition: .5s;
                  -webkit-animation: rotate-minute 3600s linear infinite;
                  -moz-animation: rotate-minute 3600s linear infinite;
              }
              .clock-second{
                  position: absolute;
                  z-index: 4;
                  top: 20px;
                  left: 129px;
                  width: 2px;
                  height: 130px;
                  background-color: #a00;
                  box-shadow: 0 0 2px rgba(0,0,0,.2);
                  transform-origin: 1px 110px;
                  transition: .5s;
                  -webkit-animation: rotate-second 60s linear infinite;
                  -moz-animation: rotate-second 60s linear infinite;
              }
              .clock-second:after{
                  content: "";
                  display: block;
                  position: absolute;
                  left: -5px;
                  bottom: 14px;
                  width: 8px;
                  height: 8px;
                  background-color: #a00;
                  border: solid 2px #a00;
                  border-radius: 50%;
                  box-shadow: 0 0 3px rgba(0,0,0,.2);
              }
              .clock-center{
                      position: absolute;
          z-index: 1;
          width: 150px;
          height: 150px;
          top: 55px;
          left: 55px;
          background-image: linear-gradient(#e3e3e3,#f7f7f7);
          border-radius: 50% !important;
          box-shadow: inset 0 -1px 0 #fafafa, inset 0 1px 0 #e3e3e3;
              }
              .clock-center:after{
                  content: "";
                  display: block;
                  width: 20px;
                  height: 20px;
                  margin: 65px;
                  background-color: #ddd;
                  border-radius: 50%;
              }
      </style>
      <script>
      (function(){
      
                  //generate clock animations
                  var now       = new Date(),
                      hourDeg   = now.getHours() / 12 * 360 + now.getMinutes() / 60 * 30,
                      minuteDeg = now.getMinutes() / 60 * 360 + now.getSeconds() / 60 * 6,
                      secondDeg = now.getSeconds() / 60 * 360,
                      stylesDeg = [
                          "@-webkit-keyframes rotate-hour{from{transform:rotate(" + hourDeg + "deg);}to{transform:rotate(" + (hourDeg + 360) + "deg);}}",
                          "@-webkit-keyframes rotate-minute{from{transform:rotate(" + minuteDeg + "deg);}to{transform:rotate(" + (minuteDeg + 360) + "deg);}}",
                          "@-webkit-keyframes rotate-second{from{transform:rotate(" + secondDeg + "deg);}to{transform:rotate(" + (secondDeg + 360) + "deg);}}",
                          "@-moz-keyframes rotate-hour{from{transform:rotate(" + hourDeg + "deg);}to{transform:rotate(" + (hourDeg + 360) + "deg);}}",
                          "@-moz-keyframes rotate-minute{from{transform:rotate(" + minuteDeg + "deg);}to{transform:rotate(" + (minuteDeg + 360) + "deg);}}",
                          "@-moz-keyframes rotate-second{from{transform:rotate(" + secondDeg + "deg);}to{transform:rotate(" + (secondDeg + 360) + "deg);}}"
                      ].join("");
      
                  document.getElementById("clock-animations").innerHTML = stylesDeg;
      
              })();
      </script>
      
      <style id="clock-animations"></style>
        <div class="clock-wrapper">
              <div class="clock-base">
                  <div class="click-indicator">
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                  </div>
                  <div class="clock-hour"></div>
                  <div class="clock-minute"></div>
                  <div class="clock-second"></div>
                  <div class="clock-center"></div>
              </div>
          </div>



          الشكل الثاني
            <style>
            .b {
                padding: 0;
                margin: 0;
                box-sizing: border-box;
                font-size: 16px;
                color: #000;
                font-family: consolas, monaco, menlo, courier, monospace;
                border: 0;
                line-height: normal;
            }
            
            .c {
                text-align: center;
                margin: auto;
            }
            
            .ib {
                display: inline-block;
            }
            .circle {
                height: 300px;
                width: 300px;
                border: 10px solid #333;
                background-color: #ddd;
                background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8cmFkaWFsR3JhZGllbnQgaWQ9ImczNzMiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjeD0iNTAlIiBjeT0iNTAlIiByPSIyMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZGRkZGRiIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzg4OCIgb2Zmc2V0PSIxIi8+CjwvcmFkaWFsR3JhZGllbnQ+CjxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNnMzczKSIgLz4KPC9zdmc+);
                background-position: center;
                background-repeat: no-repeat;
                border-radius: 20px;
                overflow: hidden;
                display: none;
                transition: border-radius 0.25s;
            }
            .n {
                position: absolute;
                width: 280px;
                height: 22px;    
                margin-top: 129px;
                transform-origin: center center;
                z-index: 2;
            }
            .br {
                position: absolute;
                margin-top: 80px;
                margin-left: 85px;
                font-size: 24px;
                width: 100px;
                color: #bbb;
                text-shadow: 1px 1px 2px #fff;
            }
            .dn {
                display: none;
                margin-top: 10px;
            }
            .n:first-child {
                transform: rotate(-60deg)
            }
            .n:first-child > .tn {
                transform: rotate(60deg);
            }
            .n:nth-child(2) {
                transform: rotate(-30deg)
            }
            .n:nth-child(2) > .tn {
                transform: rotate(30deg);
            }
            .n:nth-child(3) {
                transform: rotate(0)
            }
            .n:nth-child(3) > .tn {
                transform: rotate(0deg);
            }
            .n:nth-child(4) {
                transform: rotate(30deg)
            }
            .n:nth-child(4) > .tn {
                transform: rotate(-30deg);
            }
            .n:nth-child(5) {
                transform: rotate(60deg)
            }
            .n:nth-child(5) > .tn {
                transform: rotate(-60deg);
            }
            .n:nth-child(6) {
                transform: rotate(90deg)
            }
            .n:nth-child(6) > .tn {
                transform: rotate(-90deg);
            }
            .tn {
                float: right;
                text-shadow: 1px 1px 2px #fff;
                color: #888;
                padding: 4px;
                height: 22px;
                width: 22px;
                font-size: 12px;
                border-radius: 50%;
                transform-origin: center center;
            }
            .tn:first-of-type {
                float: left;
            }
            .needle {
                position: absolute;
                height: 4px;
                background: #333;
                border-radius: 100% 5px 5px 100%;
                width: 145px;
                margin-top: 138px;
                margin-left: 12px;
                transform-origin: 128px 50%;
                background: brown;
                z-index: 5;
            }
            .medium {
                height: 8px;
                width: 120px;
                margin-top: 136px;
                margin-left: 37px;    
                background: rosybrown;
                z-index: 4;
                transform-origin: 102px 50%;
            }
            .short {
                height: 10px;
                width: 100px;
                margin-top: 136px;
                margin-left: 57px;
                background: #333;
                transform-origin: 83px 50%;
                z-index: 3;
            }
            .pivot {
                height: 16px;
                width: 16px;
                border-radius: 50%;
                border: 4px solid brown;
                background: #fff;
                position: relative;
                float: right;
                right: 10px;
                top: -6px;
                box-shadow: 0 0 4px #000 inset;
            }
            .circle:hover {
                cursor: pointer;
                border-radius: 50%;
            }
            </style>
            <script src='https://cdn.rawgit.com/ortilex/ortslider/c193586c/clockisweeb.js' type='text/javascript'/>
            
            <div class="b c outer">
                <noscript>
                    <div class="b c" style="color:red;font-size:24px">This clock needs JavaScript</div>
                </noscript>
                <div class="b c circle" id="off">        
                    <div class="b n">
                        <span class="b ib tn">7</span>
                        <span class="b ib tn">1</span>
                    </div>
                    <div class="b n">            
                        <span class="b ib tn">8</span>
                        <span class="b ib tn">2</span>
                    </div>
                    <div class="b n">
                        <span class="b ib tn">9</span>
                        <span class="b ib tn">3</span>
                    </div>
                    <div class="b n">
                        <span class="b ib tn">10</span>
                        <span class="b ib tn">4</span>
                    </div>
                    <div class="b n">
                        <span class="b ib tn">11</span>
                        <span class="b ib tn">5</span>
                    </div>
                    <div class="b n">
                        <span class="b ib tn">12</span>
                        <span class="b ib tn">6</span>
                    </div>
                    <div class="b c needle short" id="hour"></div>
                    <div class="b c needle medium" id="minute"></div>
                    <div class="b c needle long" id="second">
                        <div class="b c pivot"></div>
                    </div>
                    <div class="b c br">CLOCK</div>
                </div>
                <p class="b c dn" id="note"><small>Click clock to mute.</small></p>    
            </div>



              الشكل الثالث
                <style>
                .clock-day:before {
                  content: var(--timer-day);
                }
                .clock-hours:before {
                  content: var(--timer-hours);
                }
                .clock-minutes:before {
                  content: var(--timer-minutes);
                }
                .clock-seconds:before {
                  content: var(--timer-seconds);
                }
                
                .clock-container {
                  margin-top: 30px;
                  margin-bottom: 30px;
                  background-color: #080808;
                  border-radius: 5px;
                  padding: 60px 20px;
                  -webkit-box-shadow: 1px 1px 5px rgba(255, 255, 255, 0.15), 0 15px 90px 30px rgba(0, 0, 0, 0.25);
                          box-shadow: 1px 1px 5px rgba(255, 255, 255, 0.15), 0 15px 90px 30px rgba(0, 0, 0, 0.25);
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex;
                }
                .clock-col {
                  text-align: center;
                  margin-right: 40px;
                  margin-left: 40px;
                  min-width: 90px;
                  position: relative;
                }
                .clock-col:not(:last-child):before, .clock-col:not(:last-child):after {
                  content: "";
                  background-color: rgba(255, 255, 255, 0.3);
                  height: 5px;
                  width: 5px;
                  border-radius: 50%;
                  display: block;
                  position: absolute;
                  right: -42px;
                }
                .clock-col:not(:last-child):before {
                  top: 35%;
                }
                .clock-col:not(:last-child):after {
                  top: 50%;
                }
                .clock-timer:before {
                  color: #fff;
                  font-size: 4.2rem;
                  text-transform: uppercase;
                }
                .clock-label {
                  color: rgba(255, 255, 255, 0.35);
                  text-transform: uppercase;
                  font-size: .7rem;
                  margin-top: 10px;
                }
                
                @media (max-width: 825px) {
                  .clock-container {
                    -webkit-box-orient: vertical;
                    -webkit-box-direction: normal;
                        -ms-flex-direction: column;
                            flex-direction: column;
                    padding-top: 40px;
                    padding-bottom: 40px;
                  }
                
                  .clock-col + .clock-col {
                    margin-top: 20px;
                  }
                  .clock-col:before, .clock-col:after {
                    display: none !important;
                  }
                }
                
                </style>
                <script>
                document.addEventListener('DOMContentLoaded', () =>
                  requestAnimationFrame(updateTime)
                )
                
                function updateTime() {
                  document.documentElement.style.setProperty('--timer-day', "'" + moment().format("dd") + "'");
                  document.documentElement.style.setProperty('--timer-hours', "'" + moment().format("k") + "'");
                  document.documentElement.style.setProperty('--timer-minutes', "'" + moment().format("mm") + "'");
                  document.documentElement.style.setProperty('--timer-seconds', "'" + moment().format("ss") + "'");
                  requestAnimationFrame(updateTime);
                }
                </script>
                <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.min.js' type='text/javascript'/>
                <div class="clock-container">
                  <div class="clock-col">
                    <p class="clock-day clock-timer">
                    </p>
                    <p class="clock-label">
                      Day
                    </p>
                  </div>
                  <div class="clock-col">
                    <p class="clock-hours clock-timer">
                    </p>
                    <p class="clock-label">
                      Hours
                    </p>
                  </div>
                  <div class="clock-col">
                    <p class="clock-minutes clock-timer">
                    </p>
                    <p class="clock-label">
                      Minutes
                    </p>
                  </div>
                  <div class="clock-col">
                    <p class="clock-seconds clock-timer">
                    </p>
                    <p class="clock-label">
                      Seconds
                    </p>
                  </div>
                </div>




                  1. اذا واجهت اي مشكلة ضعها بتعليق


                EmoticonEmoticon