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


Anmelden


Registrieren Passwort vergessen

RSS Feeds

Feeds abonieren

Letzte News
Letzte Threads
Anzeige

© Copyright 2018 PHP-Fusion.at | Alle Rechte vorbehalten.

© 2016 Real Space. All rights reserved | Design by W3layouts | 10,434,112 eindeutige Besuche
Powered by PHP-Fusion copyright © 2002 - 2018 by Nick Jones. Released as free software without warranties under GNU Affero GPL v3.