source: extensions/flop_style/thumbnails/polaroid.css @ 17139

Last change on this file since 17139 was 16393, checked in by flop25, 12 years ago

update for 2.4 : really amazing !

File size: 2.2 KB
RevLine 
[9818]1/* from http://www.zurb.com/playground/css3-polaroids thx ! */
2.content {
3        display:block;
[9821]4        position: relative;
5        z-index: 1;
6}
7ul.thumbnails {
[9818]8        list-style: none;
[9834]9        overflow: hidden;
[9818]10        width: 100%;
11        padding-top: 20px;
12        padding-right: 0;
13        padding-bottom: 0;
14        padding-left: 0;
15        margin: 0px;
16}
[9821]17ul.thumbnails li {
18        display: inline;
[9818]19}
[9821]20ul.thumbnails a {
21        -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
22        -moz-transform: rotate(-2deg);
23        -webkit-transition: -webkit-transform .15s linear;
24        -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
25        -webkit-transform: rotate(-2deg);
26        -o-transition: -webkit-transform .15s linear;
27        -o-box-shadow: 0 3px 6px rgba(0,0,0,.25);
28        -o-transform:rotate(-2deg);
29        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
[9834]30        text-shadow: 0 1px 1px #CCC;
[9821]31        background: none repeat scroll 0 0 #FFFFFF;
32        color: #333333;
33        display: inline;
34        float: left;
35        font-family: "Marker Felt", sans-serif;
36        font-size: 18px;
37        margin: 0 0 27px 30px;
38        padding: 10px 10px 15px;
39        text-align: center;
40        text-decoration: none;
41        width: auto;
42        overflow:hidden;
43        border:none;
[9818]44}
[9821]45ul.thumbnails img {
46        display: block;
47        margin-bottom: 12px;
[9818]48}
[9821]49ul.thumbnails a:after {
50        content: attr(title);
[9818]51}
[9821]52ul.thumbnails li:nth-child(2n) a {
53        -moz-transform: rotate(2deg);
54        -webkit-transform: rotate(2deg);
55        -o-transform:rotate(2deg);
[9818]56}
[9821]57ul.thumbnails li:nth-child(3n) a {
58        -moz-transform: none;
59        -webkit-transform: none;
60        -o-transform:none;
61        position: relative;
62        top: -5px;
[9818]63}
[9821]64ul.thumbnails li:nth-child(5n) a {
65        -moz-transform: rotate(5deg);
66        -webkit-transform: rotate(5deg);
67        -o-transform: rotate(5deg);
68        position: relative;
69        right: 5px;
[9818]70}
[9821]71ul.thumbnails li:nth-child(8n) a {
72        position: relative;
73        right: 5px;
74        top: 8px;
[9818]75}
[9821]76ul.thumbnails li:nth-child(11n) a {
77        left: -5px;
78        position: relative;
79        top: 3px;
[9818]80}
[9821]81ul.thumbnails li.messy a {
82        -moz-transform: rotate(-5deg);
83        -webkit-transform: rotate(-5deg);
84        -o-transform: rotate(-5deg);
85        margin-left: 160px;
86        margin-top: -375px;
[9818]87}
[9821]88ul.thumbnails li a:hover {
[16393]89        box-shadow: 6px 6px 8px  rgba(0, 0, 0, 0.85);
[9821]90        -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
91        -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
92        -moz-transform: scale(1.25);
93        -webkit-transform: scale(1.25);
94        -o-transform:  scale(1.25);
95        position: relative;
96        z-index: 5;
97        border:none;
98}
Note: See TracBrowser for help on using the repository browser.