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.

Page Curl Effekt
Kategorie: CSS
PHP-Fusion Version: Keine
Schwierigkeitsgrad:
 
Einen schönen Page Curl Effekt findet Ihr hier.

Faq

Quellcode

GeSHi: HTML


  1. <ul class="box">
  2. <li></li>
  3. <li></li>
  4. <li></li>
  5. <li></li>
  6. <li></li>
  7. <li></li>
  8. </ul>
gewandelt in 0.002 Sekunden, benutzt wurde GeSHi 1.0.8.10



CSS

GeSHi: CSS


  1. ul.box {
  2. position: relative;
  3. z-index: 1; /* prevent shadows falling behind containers with backgrounds */
  4. overflow: hidden;
  5. list-style: none;
  6. margin: 0;
  7. padding: 0; }
  8.  
  9.  
  10. ul.box li {
  11. position: relative;
  12. float: left;
  13. width: 250px;
  14. height: 150px;
  15. padding: 0;
  16. border: 1px solid #efefef;
  17. margin: 0 30px 30px 0;
  18. background: #fff;
  19. -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  20. -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  21. box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }
  22.  
  23.  
  24. ul.box li:before,
  25. ul.box li:after {
  26. content: '';
  27. z-index: -1;
  28. position: absolute;
  29. left: 10px;
  30. bottom: 10px;
  31. width: 70%;
  32. max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
  33. max-height: 100px;
  34. height: 55%;
  35. -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  36. -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  37. box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  38. -webkit-transform: skew(-15deg) rotate(-6deg);
  39. -moz-transform: skew(-15deg) rotate(-6deg);
  40. -ms-transform: skew(-15deg) rotate(-6deg);
  41. -o-transform: skew(-15deg) rotate(-6deg);
  42. transform: skew(-15deg) rotate(-6deg); }
  43.  
  44.  
  45. ul.box li:after {
  46. left: auto;
  47. right: 10px;
  48. -webkit-transform: skew(15deg) rotate(6deg);
  49. -moz-transform: skew(15deg) rotate(6deg);
  50. -ms-transform: skew(15deg) rotate(6deg);
  51. -o-transform: skew(15deg) rotate(6deg);
  52. transform: skew(15deg) rotate(6deg); }
  53.  
gewandelt in 0.005 Sekunden, benutzt wurde GeSHi 1.0.8.10




Demo ansehen

Demo


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


© 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.