PHP-Fusion.at - Offizielle Supportseite für PHP-Fusion

Tutorials

Eine immer größer werdende Tutorialdatenbank.

PHP-Fusion Core

Aktuelle PHP-Fusion Vollversionen und Updates

Addon Downloads

Alle Downloads garantiert Kostenlos

Support 24/7

24 Stunden, 7 Tage die Woche, das ganze Jahr.

Du hast in deinem Browser kein Javascript aktiviert.
Um diese Seite korrekt anzuzeigen ist Javascript jedoch zwingend nötig.
Bitte aktiviere Javascript in den Einstellungen deines Browser beziehungsweiße besorge dir einen Browser, der diesen unterstützt.
Mozilla Firefox | Safari | Opera | Google Chrome | Internet Explorer höher Version 6

CSS Flipp Clock Effekt

Kategorie: CSS

PHP-Fusion Version: Keine

Schwierigkeitsgrad:

Ein schöner Flipp-Clock-Effekt der mit CSS realisiert ist und leicht als funktionierende Uhr angepasst werden kann.

Faq

HTML-Code

GeSHi: PHP

<div id="clock">
    <div id="hour">
        20
    </div>
 
    <div id="minute">
        13
    </div>
</div>
gewandelt in 0.015 Sekunden, benutzt wurde GeSHi 1.0.8.10

CSS

Zitat

#clock {
position: absolute;
top: 50%;
left: 50%;
margin-top: -180px;
margin-left: -200px;
width: 400px;
height: 230px;

background: -moz-linear-gradient(top, #000, #121212);
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#121212));
-moz-box-shadow: 5px 5px 30px rgba(200, 200, 200, .07), 0 -5px 20px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .1), 0 -1px 0 rgba(0, 0, 0, .25);
-webkit-box-shadow: 5px 5px 30px rgba(200, 200, 200, .07), 0 -5px 20px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .1), 0 -1px 0 rgba(0, 0, 0, .25);
box-shadow: 5px 5px 30px rgba(200, 200, 200, .07), 0 -5px 20px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .1), 0 -1px 0 rgba(0, 0, 0, .25);
-moz-border-radius: 26px;
-webkit-border-radius: 26px;
border-radius: 26px;
}

#clock:before {
content: '';
display: block;
position: absolute;
z-index: 200;
top: 90px;
left: 9px;
width: 3px;
height: 50px;

-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: -moz-linear-gradient(top, #000, #424242 35%, #363636 52%, #000);
background: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(.35, #424242), color-stop(.52, #363636), to(#000));
border: 1px solid #000;
-moz-box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1), 1px 1px 0 rgba(255, 255, 255, .06);
-webkit-box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1), 1px 1px 0 rgba(255, 255, 255, .06);
box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1), 1px 1px 0 rgba(255, 255, 255, .06);
}

#clock:after {
content: '';
display: block;
position: absolute;
z-index: 200;
top: 90px;
right: 9px;
width: 3px;
height: 50px;

-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: -moz-linear-gradient(top, #000, #424242 35%, #363636 52%, #000);
background: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(.35, #424242), color-stop(.52, #363636), to(#000));
border: 1px solid #000;
-moz-box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1), 1px 1px 0 rgba(255, 255, 255, .06);
-webkit-box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1), 1px 1px 0 rgba(255, 255, 255, .06);
box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1), 1px 1px 0 rgba(255, 255, 255, .06);
}

#hour,
#minute {
width: 190px;
height: 193px;
padding-top: 17px;
overflow: hidden;

background: #333;
background: -moz-linear-gradient(top -80deg, #383838, #111 50%, #363636);
background: -webkit-gradient(linear, 30% top, 70% bottom, from(#383838), color-stop(.5, #111), to(#363636));

-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset, 0 2px 0 rgba(0, 0, 0, 1) inset, 0 3px 0 rgba(255, 255, 255, .2) inset, 0 5px 0 rgba(0, 0, 0, .75) inset, 0 6px 0 rgba(255, 255, 255, .2) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 -2px 0 #000 inset, 0 -3px 0 rgba(255, 255, 255, .18) inset, 0 -5px 0 #000 inset, 0 -6px 0 rgba(255, 255, 255, .08) inset, 0 0 30px rgba(0, 0, 0, .3) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset, 0 2px 0 rgba(0, 0, 0, 1) inset, 0 3px 0 rgba(255, 255, 255, .2) inset, 0 5px 0 rgba(0, 0, 0, .75) inset, 0 6px 0 rgba(255, 255, 255, .2) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 -2px 0 #000 inset, 0 -3px 0 rgba(255, 255, 255, .18) inset, 0 -5px 0 #000 inset, 0 -6px 0 rgba(255, 255, 255, .08) inset, 0 0 30px rgba(0, 0, 0, .3) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset, 0 2px 0 rgba(0, 0, 0, 1) inset, 0 3px 0 rgba(255, 255, 255, .2) inset, 0 5px 0 rgba(0, 0, 0, .75) inset, 0 6px 0 rgba(255, 255, 255, .2) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 -2px 0 #000 inset, 0 -3px 0 rgba(255, 255, 255, .18) inset, 0 -5px 0 #000 inset, 0 -6px 0 rgba(255, 255, 255, .08) inset, 0 0 30px rgba(0, 0, 0, .3) inset;

font-size: 130px;
font-family: 'Black Ops One', cursive;
color: #fff;
text-align: center;
letter-spacing: -20px;
line-height: 171px;
}

#hour {
position: absolute;
top: 10px;
left: 9px;

-moz-border-radius: 24px 0 0 24px;
-webkit-border-radius: 24px 0 0 24px;
border-radius: 24px 0 0 24px;
border-right: 1px solid #000;
text-indent: -10px;
}

#minute {
position: absolute;
top: 10px;
left: 200px;

-moz-border-radius: 0 24px 24px 0;
-webkit-border-radius: 0 24px 24px 0;
border-radius: 0 24px 24px 0;
text-indent: -30px;
}

#hour:before,
#minute:before {
content: '';
display: block;
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 190px;
height: 105px;

background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .4));
background: -webkit-gradient(linear, left 80%, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .4)));
border-bottom: 1px solid #000;
-moz-box-shadow: 0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 rgba(255, 255, 255, .04), 0 5px 100px rgba(255, 255, 255, .3);
-webkit-box-shadow: 0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 rgba(255, 255, 255, .04), 0 5px 100px rgba(255, 255, 255, .3);
box-shadow: 0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 rgba(255, 255, 255, .04), 0 5px 100px rgba(255, 255, 255, .3);

pointer-events: none;
}

#hour:after {
content: '';
display: block;
position: absolute;
z-index: 100;
top: 80px;
right: 0px;
width: 3px;
height: 50px;

-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: -moz-linear-gradient(top, #000, #424242 35%, #363636 52%, #000);
background: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(.35, #424242), color-stop(.52, #363636), to(#000));
border: 1px solid #000;
-moz-box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1), 1px 1px 0 rgba(255, 255, 255, .06);
-webkit-box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1), 1px 1px 0 rgba(255, 255, 255, .06);
box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1), 1px 1px 0 rgba(255, 255, 255, .06);
}

#minute:after {
content: '';
display: block;
position: absolute;
z-index: 100;
top: 80px;
left: 0px;
width: 3px;
height: 50px;

-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: -moz-linear-gradient(top, #000, #424242 35%, #363636 52%, #000);
background: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(.35, #424242), color-stop(.52, #363636), to(#000));
border: 1px solid #000;
-moz-box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1);
-webkit-box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1);
box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1);
}