Ignore:
Timestamp:
Mar 22, 2011, 3:30:57 PM (13 years ago)
Author:
flop25
Message:

polaroid for thumbnails
polaroid comp. for opera and webkit browsers
medium centered

File:
1 edited

Legend:

Unmodified
Added
Removed

  • extensions/flop_style/thumbnails/polaroid.css

    r9818 r9821  
    22.content {
    33        display:block;
    4     position: relative;
    5     z-index: 1;}
    6 ul.polaroids {
     4        position: relative;
     5        z-index: 1;
     6}
     7.navigationBar {
     8        clear:both;
     9}
     10ul.thumbnails {
    711        list-style: none;
    812        overflow: visible;
    … …  
    1418        margin: 0px;
    1519}
    16 ul.polaroids li {
    17     display: inline;
     20ul.thumbnails li {
     21        display: inline;
    1822}
    19 ul.polaroids a {
    20     -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    21     -moz-transform: rotate(-2deg);
    22     background: none repeat scroll 0 0 #FFFFFF;
    23     color: #333333;
    24     display: inline;
    25     float: left;
    26     font-family: "Marker Felt",sans-serif;
    27     font-size: 18px;
    28     margin: 0 0 27px 30px;
    29     padding: 10px 10px 15px;
    30     text-align: center;
    31     text-decoration: none;
    32     width: auto;
     23ul.thumbnails a {
     24        -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
     25        -moz-transform: rotate(-2deg);
     26        -webkit-transition: -webkit-transform .15s linear;
     27        -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
     28        -webkit-transform: rotate(-2deg);
     29        -o-transition: -webkit-transform .15s linear;
     30        -o-box-shadow: 0 3px 6px rgba(0,0,0,.25);
     31        -o-transform:rotate(-2deg);
     32        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
     33  text-shadow: 0 1px 1px #CCC;
     34        background: none repeat scroll 0 0 #FFFFFF;
     35        color: #333333;
     36        display: inline;
     37        float: left;
     38        font-family: "Marker Felt", sans-serif;
     39        font-size: 18px;
     40        margin: 0 0 27px 30px;
     41        padding: 10px 10px 15px;
     42        text-align: center;
     43        text-decoration: none;
     44        width: auto;
     45        overflow:hidden;
     46        border:none;
    3347}
    34 ul.polaroids img {
    35     display: block;
    36     margin-bottom: 12px;
    37     width: 190px;
     48ul.thumbnails img {
     49        display: block;
     50        margin-bottom: 12px;
     51        width: 118px;
    3852}
    39 ul.polaroids a:after {
    40     content: attr(title);
     53ul.thumbnails a:after {
     54        content: attr(title);
    4155}
    42 ul.polaroids li:nth-child(2n) a {
    43     -moz-transform: rotate(2deg);
     56ul.thumbnails li:nth-child(2n) a {
     57        -moz-transform: rotate(2deg);
     58        -webkit-transform: rotate(2deg);
     59        -o-transform:rotate(2deg);
    4460}
    45 ul.polaroids li:nth-child(3n) a {
    46     -moz-transform: none;
    47     position: relative;
    48     top: -5px;
     61ul.thumbnails li:nth-child(3n) a {
     62        -moz-transform: none;
     63        -webkit-transform: none;
     64        -o-transform:none;
     65        position: relative;
     66        top: -5px;
    4967}
    50 ul.polaroids li:nth-child(5n) a {
    51     -moz-transform: rotate(5deg);
    52     position: relative;
    53     right: 5px;
     68ul.thumbnails li:nth-child(5n) a {
     69        -moz-transform: rotate(5deg);
     70        -webkit-transform: rotate(5deg);
     71        -o-transform: rotate(5deg);
     72        position: relative;
     73        right: 5px;
    5474}
    55 ul.polaroids li:nth-child(8n) a {
    56     position: relative;
    57     right: 5px;
    58     top: 8px;
     75ul.thumbnails li:nth-child(8n) a {
     76        position: relative;
     77        right: 5px;
     78        top: 8px;
    5979}
    60 ul.polaroids li:nth-child(11n) a {
    61     left: -5px;
    62     position: relative;
    63     top: 3px;
     80ul.thumbnails li:nth-child(11n) a {
     81        left: -5px;
     82        position: relative;
     83        top: 3px;
    6484}
    65 ul.polaroids li.messy a {
    66     -moz-transform: rotate(-5deg);
    67     margin-left: 160px;
    68     margin-top: -375px;
     85ul.thumbnails li.messy a {
     86        -moz-transform: rotate(-5deg);
     87        -webkit-transform: rotate(-5deg);
     88        -o-transform: rotate(-5deg);
     89        margin-left: 160px;
     90        margin-top: -375px;
    6991}
    70 ul.polaroids li a:hover {
    71     -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
    72     -moz-transform: scale(1.25);
    73     position: relative;
    74     z-index: 5;
     92ul.thumbnails li a:hover {
     93        -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
     94        -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
     95        -moz-transform: scale(1.25);
     96        -webkit-transform: scale(1.25);
     97        -o-transform:  scale(1.25);
     98        position: relative;
     99        z-index: 5;
     100        border:none;
    75101}
Note: See TracChangeset for help on using the changeset viewer.