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.

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


  1. <div id="clock">
  2. <div id="hour">
  3. 20
  4. </div>
  5.  
  6. <div id="minute">
  7. 13
  8. </div>
  9. </div>
gewandelt in 0.018 Sekunden, benutzt wurde GeSHi 1.0.8.10



CSS
#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);
}


Demo ansehen

Tutorial Verlinken

URL: 
BBCode: 
HTML-Code: 
Kommentare
Es wurden noch keine Kommentare verfasst.
Kommentar schreiben
Bitte logge dich ein, um einen Kommentar zu verfassen.
Anzeige
Anzeige

© 2016 Real Space. All rights reserved | Design by W3layouts
Powered by PHP-Fusion copyright © 2002 - 2017 by Nick Jones. Released as free software without warranties under GNU Affero GPL v3.