Kατεβάσετε την εφαρμογή android του blog! DownLoad

FoulsCode: 2011-17

Translate

Πρόσφατα Σχόλια

Σύνολο αναρτήσεων

Συνολικές προβολές σελίδας

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

Pure CSS3 Dial Clock v2

Written By Fouls Code on Κυριακή, 3 Μαρτίου 2013 | Μαρτίου 03, 2013


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




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




<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:'5';}
.myClockJS .digit .arr>b>b:nth-child(7)>b:after{content:'6';}
.myClockJS .digit .arr>b>b:nth-child(8)>b:after{content:'7';}
.myClockJS .digit .arr>b>b:nth-child(9)>b:after{content:'8';}
.myClockJS .digit .arr>b>b:nth-child(10)>b:after{content:'9';}
.myClockJS .digit .arr>b:nth-child(3)>b:nth-child(1)>b:after
, .myClockJS .digit .arr>b:nth-child(6)>b:nth-child(1)>b:after
{
content:':';
}
.myClockJS .digit .arr>b
, .myClockJS .digit .arr>b>b
{
position: absolute;
width: auto;
}

.myClockJS .digit .arr>b:nth-child(1) {
left: 0;
}
.myClockJS .digit .arr>b:nth-child(2) {
left: 30px;
}
.myClockJS .digit .arr>b:nth-child(3) {
left: 50px;
}
.myClockJS .digit .arr>b:nth-child(4) {
left: 70px;
}
.myClockJS .digit .arr>b:nth-child(5) {
left: 100px;
}
.myClockJS .digit .arr>b:nth-child(6) {
left: 120px;
}
.myClockJS .digit .arr>b:nth-child(7) {
left: 140px;
}
.myClockJS .digit .arr>b:nth-child(8) {
left: 170px;
}
.myClockJS .digit .arr:after {
content: '';
display: block;
clear: both;
}
.myClockJS .digit .arr>b>b {
opacity: 0;
}
/* webkit */
.myClockJS .digit .arr>b>b {
-webkit-animation-iteration-count: infinite;
}
.myClockJS .digit .arr>b:nth-child(1)>b{-webkit-animation-duration: 86400s;} /* 86400 */
.myClockJS .digit .arr>b:nth-child(2)>b{-webkit-animation-duration: 86400s;} /* 86400 */
.myClockJS .digit .arr>b:nth-child(4)>b{-webkit-animation-duration: 3600s;}  /* 3600 */
.myClockJS .digit .arr>b:nth-child(5)>b{-webkit-animation-duration: 600s;}   /* 600 */
.myClockJS .digit .arr>b:nth-child(7)>b{-webkit-animation-duration: 60s;}    /* 60 */
.myClockJS .digit .arr>b:nth-child(8)>b{-webkit-animation-duration: 10s;}    /* 10 */
.myClockJS .digit .arr>b:nth-child(3)>b
, .myClockJS .digit .arr>b:nth-child(6)>b
{
-webkit-animation-duration: 1s;
-webkit-animation-name: digit_second;
-webkit-animation-delay: 0.01s;
}
@-webkit-keyframes digit_second { 0% {opacity: 0 } 1% {opacity: 1 } 50% {opacity: 1 }  51% {opacity: 0 }}
/* moz */
.myClockJS .digit .arr>b>b {
-moz-animation-iteration-count: infinite;
}
.myClockJS .digit .arr>b:nth-child(1)>b{-moz-animation-duration: 86400s;} /* 86400 */
.myClockJS .digit .arr>b:nth-child(2)>b{-moz-animation-duration: 86400s;} /* 86400 */
.myClockJS .digit .arr>b:nth-child(4)>b{-moz-animation-duration: 3600s;}  /* 3600 */
.myClockJS .digit .arr>b:nth-child(5)>b{-moz-animation-duration: 600s;}   /* 600 */
.myClockJS .digit .arr>b:nth-child(7)>b{-moz-animation-duration: 60s;}    /* 60 */
.myClockJS .digit .arr>b:nth-child(8)>b{-moz-animation-duration: 10s;}    /* 10 */
.myClockJS .digit .arr>b:nth-child(3)>b
, .myClockJS .digit .arr>b:nth-child(6)>b
{
-moz-animation-duration: 1s;
-moz-animation-name: digit_second;
-moz-animation-delay: 0.01s;
}
@-moz-keyframes digit_second { 0% {opacity: 0 } 1% {opacity: 1 } 50% {opacity: 1 }  51% {opacity: 0 }}
.css-link {
  position: relative;
  top: 4em;
  text-align: center;
}
</style>
<!--http://foulscode.blogspot.gr
 Name: Pure CSS3 Digit Clock without Images & Javascript
-->
<!--
 Get UTC time form server
 ?h=4 for Moscow UTC+4 time
-->
<link href="http://denisx.ru/myclockcss/keyframes_digit.php?h=4" rel="stylesheet" type="text/css" />
<div class="myClockJS">
<div class="digit">
<b class="arr">
<b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
</b>
<b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
</b>
<b>
<b><b></b></b>
</b>
<b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
</b>
<b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
</b>
<b>
<b><b></b></b>
</b>
<b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
</b>
<b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
</b>
</b>
</div>
</div>
<p class="css-link"><a target="_blank" href="http://foulscode.blogspot.gr/2013/03/pure-css3-dial-clock-v2.html">Pure CSS3 Dial Clock</a>→</p>


DEMO



Αποθήκευση και αυτό ήταν.

Μοιραστείτε το με τους φίλους σας στο twitter / facebook και βοηθήστε μας.

Μαρτίου 03, 2013 | 0 σχόλια | Διαβάστε περισσότερα

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 #747788;
background: #fff;
background: -webkit-linear-gradient(-90deg, #fff, #eaebed);
background: -moz-linear-gradient(-90deg, #fff, #eaebed);
background: -ms-linear-gradient(-90deg, #fff, #eaebed);
background: -o-linear-gradient(-90deg, #fff, #eaebed);
background: linear-gradient(-90deg, #fff, #eaebed);
}
.myClockJS .dial .shadow-in {
margin: -4% 0 0 -4%;
padding: 4%;
-webkit-box-shadow: 0px 3px 10px #747788 inset;
-moz-box-shadow: 0px 3px 10px #747788 inset;
-ms-box-shadow: 0px 3px 10px #747788 inset;
-o-box-shadow: 0px 3px 10px #747788 inset;
box-shadow: 0px 3px 10px #747788 inset;
background: #fff;
background: -webkit-linear-gradient(-90deg, #fff, #dce1e7);
background: -moz-linear-gradient(-90deg, #fff, #dce1e7);
background: -ms-linear-gradient(-90deg, #fff, #dce1e7);
background: -o-linear-gradient(-90deg, #fff, #dce1e7);
background: linear-gradient(-90deg, #fff, #dce1e7);
}
/* segments */
.myClockJS .dial .seg b {
position: absolute;
width: 1%;
height: 100%;
min-width: 1px;
left: 50%;
margin-left: -0.4%;
}
.myClockJS .dial .seg b b:after
, .myClockJS .dial .seg b b:before {
content: '';
position: absolute;
width: 100%;
height: 3%;
background-color: #aaa;
}
/* hours */
.myClockJS .dial .seg>b>b:before
, .myClockJS .dial .seg>b>b:after {
height: 6%;
width: 250%;
}
.myClockJS .dial .seg b:before {
bottom: 0;
}
/* setup all 60 segments */
.myClockJS .dial .seg>b:last-child{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.myClockJS .dial .seg>b>b:nth-child(2){
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
.myClockJS .dial .seg>b>b:last-child{
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.myClockJS .dial .seg>b>b b{
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-ms-transform: rotate(6deg);
-o-transform: rotate(6deg);
transform: rotate(6deg);
}
.myClockJS .dial .seg>b>b>b:last-child{
-webkit-transform: rotate(18deg);
-moz-transform: rotate(18deg);
-ms-transform: rotate(18deg);
-o-transform: rotate(18deg);
transform: rotate(18deg);
}
/* arrows with clones, for shadow */
.myClockJS .dial .arr b {
position: absolute;
height: 100%;
left: 50%;
min-width: 1px;
}
.myClockJS .dial .arr b:after {
position: absolute;
width: 100%;
content: '';
}
.myClockJS .dial .arr b:nth-child(1)
, .myClockJS .dial .arr b:nth-child(2) {
width: 4.5%;
margin-left: -2.2%;
}
.myClockJS .dial .arr b:nth-child(1):after
, .myClockJS .dial .arr b:nth-child(2):after {
height: 25%;
top: 25%;
background-color: #000;
}
.myClockJS .dial .arr b:nth-child(3)
, .myClockJS .dial .arr b:nth-child(4) {
width: 3%;
margin-left: -1.4%;
}
.myClockJS .dial .arr b:nth-child(3):after
, .myClockJS .dial .arr b:nth-child(4):after {
height: 37%;
top: 13%;
background-color: #000;
}
.myClockJS .dial .arr b:nth-child(5)
, .myClockJS .dial .arr b:nth-child(7) {
width: 1%;
min-width: 1px;
margin-left: -0.3%;
}
.myClockJS .dial .arr b:nth-child(5):after
, .myClockJS .dial .arr b:nth-child(7):after {
height: 67%;
background-color: #d70000;
}
.myClockJS .dial .arr b:nth-child(6)
, .myClockJS .dial .arr b:nth-child(8) {
width: 8%;
margin-left: -3.9%;
}
.myClockJS .dial .arr b:nth-child(6):after
, .myClockJS .dial .arr b:nth-child(8):after {
height: 8%;
top: 46%;
background-color: #d70000;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.myClockJS .dial .arr b:nth-child(1):after
, .myClockJS .dial .arr b:nth-child(3):after
, .myClockJS .dial .arr b:nth-child(5):after
, .myClockJS .dial .arr b:nth-child(6):after {
background-color: #000;
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
-ms-box-shadow: 0 0 5px #000;
-o-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
opacity: 0.2;
}
.myClockJS .dial .arr b:nth-child(1)
, .myClockJS .dial .arr b:nth-child(3) {
margin-top: 1.5%;
}
.myClockJS .dial .arr b:nth-child(6)
, .myClockJS .dial .arr b:nth-child(5) {
margin-top: 2%;
}
.myClockJS .dial .arr b {
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.myClockJS .dial .arr b:nth-child(1)
, .myClockJS .dial .arr b:nth-child(2) {
-webkit-animation-duration: 43200s;
-moz-animation-duration: 43200s;
-ms-animation-duration: 43200s;
-o-animation-duration: 43200s;
animation-duration: 43200s;
}
.myClockJS .dial .arr b:nth-child(3)
, .myClockJS .dial .arr b:nth-child(4) {
-webkit-animation-duration: 3600s;
-moz-animation-duration: 3600s;
-ms-animation-duration: 3600s;
-o-animation-duration: 3600s;
animation-duration: 3600s;
}
.myClockJS .dial .arr b:nth-child(5)
, .myClockJS .dial .arr b:nth-child(7) {
-webkit-animation-duration: 60s;
-moz-animation-duration: 60s;
-ms-animation-duration: 60s;
-o-animation-duration: 60s;
animation-duration: 60s;
}
.css-link {
  position: relative;
  top: 1em;
  text-align: center;
}
</style>
<!--
 www.foulscode.blogspot.gr
-->
<!--
 Get UTC time form server
 ?h=4 for Moscow UTC+4 time
-->
<link href="http://denisx.ru/myclockcss/keyframes_dial.php?h=4" rel="stylesheet" type="text/css" />
<div class="myClockJS">
    <div class="inner dial">
        <b class="shadow shadow-out"></b>
        <b class="shadow shadow-in"></b>
        <div class="seg">
            <b>
                <b>
                    <b>
                        <b></b>
                    </b>
                    <b>
                        <b></b>
                    </b>
                </b>
                <b>
                    <b>
                        <b></b>
                    </b>
                    <b>
                        <b></b>
                    </b>
                </b>
                <b>
                    <b>
                        <b></b>
                    </b>
                    <b>
                        <b></b>
                    </b>
                </b>
            </b>
            <b>
                <b>
                    <b>
                        <b></b>
                    </b>
                    <b>
                        <b></b>
                    </b>
                </b>
                <b>
                    <b>
                        <b></b>
                    </b>
                    <b>
                        <b></b>
                    </b>
                </b>
                <b>
                    <b>
                        <b></b>
                    </b>
                    <b>
                        <b></b>
                    </b>
                </b>
            </b>
        </div>
        <b class="arr">
            <b></b>
            <b></b>
            <b></b>
            <b></b>
            <b></b>
            <b></b>
            <b></b>
            <b></b>
        </b>
    </div>
</div>
<p class="css-link"><a target="_blank" href="http://foulscode.blogspot.gr/2013/03/pure-css3-digit-clock.html">Pure CSS3 Digit Clock</a>→</p>
<p>&nbsp;</p>




DEMO


Αποθήκευση και είστε έτοιμη.
Μαρτίου 03, 2013 | 0 σχόλια | Διαβάστε περισσότερα
 
berita unik