Μετάβαση στο κύριο περιεχόμενο

Αναρτήσεις

Εμφάνιση αναρτήσεων με την ετικέτα Clock

Pure CSS3 Dial Clock v2

Ένα ρολοι σαν το προηγούμενο.


Pure CSS3 Digit Clock

Αντιγραφή τον παρακάτω κώδικα:




<style>
/* *************************************** */
/*  by http://foulscode.blogspot.gr */
@font-face {
    font-family: 'digital-7';
    src: url('http://denisx.ru/fonts/digital-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
.myClockJS .digit {
margin: 0 auto;
position: relative;
width: 100px;
font: 48px/1 'digital-7';
  left: -60px;
}
.myClockJS b {
  font-weight: normal;
}

.myClockJS .digit .arr>b>b:nth-child(1)>b:after{content:'0';}
.myClockJS .digit .arr>b>b:nth-child(2)>b:after{content:'1';}
.myClockJS .digit .arr>b>b:nth-child(3)>b:after{content:'2';}
.myClockJS .digit .arr>b>b:nth-child(4)>b:after{content:'3';}
.myClockJS .digit .arr>b>b:nth-child(5)>b:after{content:'4';}
.myClockJS .digit .arr>b>b:nth-child(6)>b:after{content:'…

Pure CSS3 Digit Clock

Ένα όμορφο ρολόι για το blog / site σας. Μείνετε συντονισμένη και έρχονται και αλλα!
Αντιγραφή τον παρακάτω κώδικα:

<style>
/* global */
.myClockJS {
margin: 4em;
}
.myClockJS b {
display: block;
width: 100%;
font-weight: normal;
}
.myClockJS .inner {
margin: 0 auto;
position: relative;
}
/* dial clock */
.myClockJS .dial.inner {
width: 251px;
height: 251px;
}
.myClockJS .dial .shadow {
position: absolute;
http://twitter.com/foulscode/
 Date: 2012-02-02
 Prooflink: http://foulscode.blogspot.gr/2013/03/pure-css3-digit-clock.html
 Name: Pure CSS3 Dial Clock without Images & Javascript100%;
height: 100%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.myClockJS .dial .shadow-out {
margin: -9% 0 0 -9%;
padding: 9%;
-webkit-box-shadow: 0px 10px 30px #747788;
-moz-box-shadow: 0px 10px 30px #747788;
-ms-box-shadow: 0px 10px 30px #747788;
-o-box-shadow: 0px 10px 30px #747788;
box-shadow: 0px 10px 30px #74778…