Efeito Polaroid

<< Click to Display Table of Contents >>

Navigation:  Html >

Efeito Polaroid

Previous pageReturn to chapter overviewNext page

Tela

 

polaroid

 

Fonte html

 

<!DOCTYPE html>

<html>

<head>

    <style>

        body

        {

            background-colorsilver;

        }

 

        ul.polaroids

        {

            width60%/*970px */

            margin0 0 18px -30px;

        }

 

            ul.polaroids li

            {

                displayinline;

            }

 

            ul.polaroids a

            {

                border1px solid #cccccc;

                background#fff;

                displayinline;

                floatleft;

                margin0 0 27px 30px;

                widthauto;

                padding10px 10px 15px;

                text-aligncenter;

                font-family"Marker Felt"sans-serif;

                text-decorationnone;

                color#333;

                font-size18px;

                -webkit-box-shadow0 3px 6px rgba(0,0,0,.25);

                -moz-box-shadow0 3px 6px rgba(0,0,0,.25);

                -webkit-transition-webkit-transform .15s linear;

            }

 

            ul.polaroids img

            {

                displayblock;

                width190px;

                margin-bottom12px;

            }

 

            ul.polaroids a:after

            {

                contentattr(title);

            }

 

            ul.polaroids li.messy a

            {

                margin-top-375px;

                margin-left160px;

            }

 

            ul.polaroids li a:hover

            {

                -webkit-transformscale(1.25);

                -moz-transformscale(1.25);

                -webkit-box-shadow0 3px 6px rgba(0,0,0,.5);

                -moz-box-shadow0 3px 6px rgba(0,0,0,.5);

                positionrelative;

                z-index5;

            }

    </style>

</head>

<body>

    <h1>Exemplo de Polaroids (não funciona no IE)</h1>

    <ul class="polaroids">

        <li>

            <a href="http://www.flickr.com/photos/zurbinc/3971679981/" title="Tom">

                <img src="http://www.zurb.com/playground/playground/css3-polaroids/image-01.jpg" alt="Roeland!" />

            </a>

        </li>

        <li>

            <a href="http://www.flickr.com/photos/zurbinc/3985295842/" title="Create!">

                <img src="http://www.zurb.com/playground/playground/css3-polaroids/image-02.jpg" alt="Discussion" />

            </a>

        </li>

        <li>

            <a href="http://www.flickr.com/photos/zurbinc/3993123611/" title="A Hearty Laugh">

                <img src="http://www.zurb.com/playground/playground/css3-polaroids/image-03.jpg" alt="A Hearty Laugh" />

            </a>

        </li>

        <li>

            <a href="http://www.flickr.com/photos/zurbinc/4001991326/" title="Evil Matt Coding">

                <img src="http://www.zurb.com/playground/playground/css3-polaroids/image-04.jpg" alt="Evil Matt Coding" />

            </a>

        </li>

        <li>

            <a href="http://www.flickr.com/photos/zurbinc/4001992350/" title="Amanda Glares...">

                <img src="http://www.zurb.com/playground/playground/css3-polaroids/image-05.jpg" alt="Amanda Glares..." />

            </a>

        </li>

        <li>

            <a href="http://www.flickr.com/photos/zurbinc/4001229589/" title="Scribble scribble...">

                <img src="http://www.zurb.com/playground/playground/css3-polaroids/image-06.jpg" alt="Scribbles" />

            </a>

        </li>

        <li>

            <a href="http://www.flickr.com/photos/zurbinc/3957026139/" title="The Dougernaut">

                <img src="http://www.zurb.com/playground/playground/css3-polaroids/image-07.jpg" alt="The Dougernaut" />

            </a>

        </li>

    </ul>

</body>

</html>