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/mainpage_categories/polaroid.css

    r9818 r9821  
    22.content {
    33        display:block;
    4     position: relative;
    5     z-index: 1;}
     4        position: relative;
     5        z-index: 1;
     6}
    67ul.polaroids {
    78        list-style: none;
    … …  
    1516}
    1617ul.polaroids li {
    17     display: inline;
     18        display: inline;
    1819}
    1920ul.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;
     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);
     30  text-shadow: 0 1px 1px #CCC;
     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        border:none;
    3343}
    3444ul.polaroids img {
    35     display: block;
    36     margin-bottom: 12px;
    37     width: 190px;
     45        display: block;
     46        margin-bottom: 12px;
     47        width: 190px;
    3848}
    3949ul.polaroids a:after {
    40     content: attr(title);
     50        content: attr(title);
    4151}
    4252ul.polaroids li:nth-child(2n) a {
    43     -moz-transform: rotate(2deg);
     53        -moz-transform: rotate(2deg);
     54        -webkit-transform: rotate(2deg);
     55        -o-transform:rotate(2deg);
    4456}
    4557ul.polaroids li:nth-child(3n) a {
    46     -moz-transform: none;
    47     position: relative;
    48     top: -5px;
     58        -moz-transform: none;
     59        -webkit-transform: none;
     60        -o-transform:none;
     61        position: relative;
     62        top: -5px;
    4963}
    5064ul.polaroids li:nth-child(5n) a {
    51     -moz-transform: rotate(5deg);
    52     position: relative;
    53     right: 5px;
     65        -moz-transform: rotate(5deg);
     66        -webkit-transform: rotate(5deg);
     67        -o-transform: rotate(5deg);
     68        position: relative;
     69        right: 5px;
    5470}
    5571ul.polaroids li:nth-child(8n) a {
    56     position: relative;
    57     right: 5px;
    58     top: 8px;
     72        position: relative;
     73        right: 5px;
     74        top: 8px;
    5975}
    6076ul.polaroids li:nth-child(11n) a {
    61     left: -5px;
    62     position: relative;
    63     top: 3px;
     77        left: -5px;
     78        position: relative;
     79        top: 3px;
    6480}
    6581ul.polaroids li.messy a {
    66     -moz-transform: rotate(-5deg);
    67     margin-left: 160px;
    68     margin-top: -375px;
     82        -moz-transform: rotate(-5deg);
     83        -webkit-transform: rotate(-5deg);
     84        -o-transform: rotate(-5deg);
     85        margin-left: 160px;
     86        margin-top: -375px;
    6987}
    7088ul.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;
     89        -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
     90        -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
     91        -moz-transform: scale(1.25);
     92        -webkit-transform: scale(1.25);
     93        -o-transform:  scale(1.25);
     94        position: relative;
     95        z-index: 5;
     96        border:none;
    7597}
Note: See TracChangeset for help on using the changeset viewer.