Created
October 9, 2012 04:37
-
-
Save janily/3856638 to your computer and use it in GitHub Desktop.
image shapes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * image shapes | |
| * ------------ | |
| * shapes work in all current versions of Chrome, Firefox, IE, Opera, Safari | |
| * animations work properly in Chrome, Firefox, Safari | |
| * are all wrong in Opera | |
| * and are not supported by IE9 | |
| */ | |
| html { | |
| min-height: 100%; | |
| background: linear-gradient(45deg, black, crimson) fixed; | |
| text-align: center; | |
| } | |
| body { overflow-x: hidden; padding: 3em 0 0; margin: 0; } | |
| .shape { | |
| min-width: 30em; | |
| width: 90%; | |
| max-width: 40em; | |
| height: 12em; | |
| padding: 0 1px 1px 0; | |
| margin: 1em auto; | |
| background: linear-gradient(dodgerblue 2.5%, transparent 2.5%), | |
| linear-gradient(left, dodgerblue 2.5%, transparent 2.5%); | |
| background-size: 2em 2em, 2em 2em; | |
| } | |
| .shape:hover { | |
| background-image: linear-gradient(dodgerblue 2.5%, transparent 2.5%), | |
| linear-gradient(left, dodgerblue 2.5%, transparent 2.5%); | |
| } | |
| .opt, .ani { display: none; } | |
| .shape-choice, .ani-lbl { | |
| float: left; | |
| height: 1em; | |
| padding: .25em .5em; | |
| border-top: solid .125em grey; | |
| border-bottom: solid .125em grey; | |
| margin: 0 0 .25em; | |
| box-shadow: 1px 1px 1px black, inset 0 -2em 1.5em -.75em silver; | |
| background: whitesmoke; | |
| color: black; | |
| line-height: 1; | |
| text-shadow: 0 1px white; | |
| cursor: pointer; | |
| } | |
| .ani-lbl { float: right; } | |
| .shape-choice:hover, .ani-lbl:hover { | |
| box-shadow: 1px 1px 1px black, inset 0 -2em 1.5em -.75em darkgrey; | |
| background: gainsboro; | |
| color: darkgreen; | |
| } | |
| .opt:checked + .shape-choice, .ani:checked + .ani-lbl { | |
| box-shadow:inset 1px 1px 1px black, inset 0 -2em 1.5em -.75em dimgrey; | |
| background: grey; | |
| color: greenyellow; | |
| text-shadow: 0 1px black; | |
| } | |
| .ani-lbl:before { | |
| display: inline-block; | |
| padding: 0 0 0 .35em; | |
| content: '✗' | |
| } | |
| .ani:checked + .ani-lbl:before { content: '✓' } | |
| .shape section, .shape div, .shape img { | |
| display: inline-block; | |
| overflow: hidden; | |
| width: 10em; height: 10em; | |
| pointer-events: none; | |
| } | |
| .initial { clear: left; float: left; } | |
| .final { float: right; overflow: hidden; } | |
| .animating { margin-top: 2em; } | |
| .shape img { opacity: .75; } | |
| .shape:hover .final, .shape:hover .animating img { transform: none; } | |
| .triangle .o1:checked ~ .ani:checked ~ .animating { | |
| animation: totrianglew 5s forwards; | |
| } | |
| .triangle .o1:checked ~ .ani:checked ~ .animating img { | |
| animation: totrianglei 5s 5s forwards; | |
| } | |
| @keyframes totrianglew { | |
| 25% { transform: translateX(-50%); } | |
| 50% { transform: translateX(-50%) rotate(-30deg); } | |
| 75% { transform: translateX(-50%) rotate(-30deg) skewX(30deg); } | |
| to { transform: translateX(-50%) rotate(-30deg) skewX(30deg) scaleY(.866); } | |
| } | |
| @keyframes totrianglei { | |
| 25% { transform: scaleY(1.155); } | |
| 50% { transform: scaleY(1.155) skewX(-30deg); } | |
| 75% { transform: scaleY(1.155) skewX(-30deg) rotate(30deg); } | |
| to { transform: scaleY(1.155) skewX(-30deg) rotate(30deg) translateX(50%); } | |
| } | |
| .triangle .o1:checked ~ .final { | |
| transform: translateX(-50%) rotate(-30deg) skewX(30deg) scaleY(.866); | |
| } | |
| .triangle .o1:checked ~ .final img { | |
| transform: scaleY(1.155) skewX(-30deg) rotate(30deg) translateX(50%); | |
| } | |
| .triangle .o2:checked ~ .ani:checked ~ .animating { | |
| animation: totriangle2w 5s forwards; | |
| } | |
| .triangle .o2:checked ~ .ani:checked ~ .animating img { | |
| animation: totriangle2i 5s 5s forwards; | |
| } | |
| @keyframes totriangle2w { | |
| 25% { transform: translateX(50%); } | |
| 50% { transform: translateX(50%) rotate(-30deg); } | |
| 75% { transform: translateX(50%) rotate(-30deg) skewX(30deg); } | |
| 100% { transform: translateX(50%) rotate(-30deg) skewX(30deg) scaleY(.866); } | |
| } | |
| @keyframes totriangle2i { | |
| 25% { transform: scaleY(1.155); } | |
| 50% { transform: scaleY(1.155) skewX(-30deg); } | |
| 75% { transform: scaleY(1.155) skewX(-30deg) rotate(30deg); } | |
| 100% { transform: scaleY(1.155) skewX(-30deg) rotate(30deg) translateX(-50%); } | |
| } | |
| .triangle .o2:checked ~ .final { | |
| transform: translateX(50%) rotate(-30deg) skewX(30deg) scaleY(.866); | |
| } | |
| .triangle .o2:checked ~ .final img { | |
| transform: scaleY(1.155) skewX(-30deg) rotate(30deg) translateX(-50%); | |
| } | |
| .triangle .o3:checked ~ .ani:checked ~ .animating { | |
| animation: totriangle3w 5s forwards; | |
| } | |
| .triangle .o3:checked ~ .ani:checked ~ .animating img { | |
| animation: totriangle3i 5s 5s forwards; | |
| } | |
| @keyframes totriangle3w { | |
| 25% { transform: translateY(50%); } | |
| 50% { transform: translateY(50%) rotate(30deg); } | |
| 75% { transform: translateY(50%) rotate(30deg) skewY(30deg); } | |
| to { transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866); } | |
| } | |
| @keyframes totriangle3i { | |
| 25% { transform: scaleX(1.155); } | |
| 50% { transform: scaleX(1.155) skewY(-30deg); } | |
| 75% { transform: scaleX(1.155) skewY(-30deg) rotate(-30deg); } | |
| to { transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-50%); } | |
| } | |
| .triangle .o3:checked ~ .final { | |
| transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866); | |
| } | |
| .triangle .o3:checked ~ .final img { | |
| transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-50%); | |
| } | |
| .triangle .o4:checked ~ .ani:checked ~ .animating{ | |
| animation: totriangle4w 5s forwards; | |
| } | |
| .triangle .o4:checked ~ .ani:checked ~ .animating img { | |
| animation: totriangle4i 5s 5s forwards; | |
| } | |
| @keyframes totriangle4w { | |
| 25% { transform: translateY(-50%); } | |
| 50% { transform: translateY(-50%) rotate(30deg); } | |
| 75% { transform: translateY(-50%) rotate(30deg) skewY(30deg); } | |
| to { transform: translateY(-50%) rotate(30deg) skewY(30deg) scaleX(.866); } | |
| } | |
| @keyframes totriangle4i { | |
| 25% { transform: scaleX(1.155); } | |
| 50% { transform: scaleX(1.155) skewY(-30deg); } | |
| 75% { transform: scaleX(1.155) skewY(-30deg) rotate(-30deg); } | |
| to { transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(50%); } | |
| } | |
| .triangle .o4:checked ~ .final { | |
| transform: translateY(-50%) rotate(30deg) skewY(30deg) scaleX(.866); | |
| } | |
| .triangle .o4:checked ~ .final img { | |
| transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(50%); | |
| } | |
| .pentagon .o1:checked ~ .ani:checked ~ .animating { | |
| animation: topentagonw 3s forwards; | |
| } | |
| .pentagon .o1:checked ~ .ani:checked ~ .animating .inner { | |
| animation: topentagonin 7s 3s forwards; | |
| } | |
| .pentagon .o1:checked ~ .ani:checked ~ .animating img { | |
| animation: topentagonim 4s 10s forwards; | |
| } | |
| @keyframes topentagonw { | |
| 33% { transform: rotate(18deg); } | |
| 67% { transform: rotate(18deg) skewY(54deg); } | |
| to { transform: rotate(18deg) skewY(54deg) scaleX(.588); } | |
| } | |
| @keyframes topentagonin { | |
| 14.29% { transform: scaleX(1.7); } | |
| 28.57% { transform: scaleX(1.7) skewY(-54deg); } | |
| 42.86% { transform: scaleX(1.7) skewY(-54deg) rotate(-18deg); } | |
| 57.14% { transform: scaleX(1.7) skewY(-54deg) rotate(-18deg) translateY(36%); } | |
| 71.43% { | |
| transform: scaleX(1.7) skewY(-54deg) rotate(-18deg) | |
| translateY(36%) rotate(-36deg); | |
| } | |
| 85.71% { | |
| transform: scaleX(1.7) skewY(-54deg) rotate(-18deg) | |
| translateY(36%) rotate(-36deg) skewX(18deg); | |
| } | |
| to { | |
| transform: scaleX(1.7) skewY(-54deg) rotate(-18deg) | |
| translateY(36%) rotate(-36deg) skewX(18deg) scaleY(.954); | |
| } | |
| } | |
| @keyframes topentagonim { | |
| 25% { transform: scaleY(1.048); } | |
| 50% { transform: scaleY(1.048) skewX(-18deg); } | |
| 75% { transform: scaleY(1.048) skewX(-18deg) rotate(36deg); } | |
| to { transform: scaleY(1.048) skewX(-18deg) rotate(36deg) translateY(-50%); } | |
| } | |
| .pentagon .o1:checked ~ .final { | |
| transform: rotate(18deg) skewY(54deg) scaleX(.588); | |
| } | |
| .pentagon .o1:checked ~ .final .inner { | |
| transform: scaleX(1.7) skewY(-54deg) rotate(-18deg) | |
| translateY(36%) rotate(-36deg) skewX(18deg) scaleY(.954); | |
| } | |
| .pentagon .o1:checked ~ .final img { | |
| transform: scaleY(1.048) skewX(-18deg) rotate(36deg) translateY(-50%); | |
| } | |
| .hexagon .o1:checked ~ .ani:checked ~ .animating { | |
| animation: tohexagonw 3s forwards; | |
| } | |
| .hexagon .o1:checked ~ .ani:checked ~ .animating img { | |
| animation: tohexagoni 4s 3s forwards; | |
| } | |
| @keyframes tohexagonw { | |
| 33% { transform: rotate(-30deg); } | |
| 67% { transform: rotate(-30deg) skewX(30deg); } | |
| to { transform: rotate(-30deg) skewX(30deg) scaleY(.866); } | |
| } | |
| @keyframes tohexagoni { | |
| 25% { transform: scaleY(1.155); } | |
| 50% { transform: scaleY(1.155) skewX(-30deg); } | |
| 75% { transform: scaleY(1.155) skewX(-30deg) rotate(30deg); } | |
| to { transform: scaleY(1.155) skewX(-30deg) rotate(30deg) scaleX(.866); } | |
| } | |
| .hexagon .o1:checked ~ .final { | |
| transform: rotate(-30deg) skewX(30deg) scaleY(.866); | |
| } | |
| .hexagon .o1:checked ~ .final img { | |
| transform: scaleY(1.155) skewX(-30deg) rotate(30deg) scaleX(.866); | |
| } | |
| .hexagon .o2:checked ~ .ani:checked ~ .animating { | |
| animation: tohexagon2w 3s forwards; | |
| } | |
| .hexagon .o2:checked ~ .ani:checked ~ .animating img { | |
| animation: tohexagon2i 4s 3s forwards; | |
| } | |
| @keyframes tohexagon2w { | |
| 33% { transform: rotate(30deg); } | |
| 67% { transform: rotate(30deg) skewY(30deg); } | |
| to { transform: rotate(30deg) skewY(30deg) scaleX(.866); } | |
| } | |
| @keyframes tohexagon2i { | |
| 25% { transform: scaleX(1.155); } | |
| 50% { transform: scaleX(1.155) skewY(-30deg); } | |
| 75% { transform: scaleX(1.155) skewY(-30deg) rotate(-30deg); } | |
| to { transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) scaleY(.866); } | |
| } | |
| .hexagon .o2:checked ~ .final { | |
| transform: rotate(30deg) skewY(30deg) scaleX(.866); | |
| } | |
| .hexagon .o2:checked ~ .final img { | |
| transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) scaleY(.866); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- content to be placed inside <body>…</body> --> | |
| <article class='triangle shape'> | |
| <input type='radio' name='triangle' id='t1' class='opt o1' checked> | |
| <label for='t1' class='shape-choice'>t1</label> | |
| <input type='radio' name='triangle' id='t2' class='opt o2'> | |
| <label for='t2' class='shape-choice'>t2</label> | |
| <input type='radio' name='triangle' id='t3' class='opt o3'> | |
| <label for='t3' class='shape-choice'>t3</label> | |
| <input type='radio' name='triangle' id='t4' class='opt o4'> | |
| <label for='t4' class='shape-choice'>t4</label> | |
| <input type='checkbox' name='ani' id='tani' class='ani'> | |
| <label for='tani' class='ani-lbl'>animate to shape</label> | |
| <section class='initial'> | |
| <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1996-07-b-web.jpg'> | |
| </section> | |
| <section class='final'> | |
| <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1996-07-b-web.jpg'> | |
| </section> | |
| <section class='animating'> | |
| <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1996-07-b-web.jpg'> | |
| </section> | |
| </article> | |
| <article class='pentagon shape'> | |
| <input type='radio' name='pentagon' id='penta1' class='opt o1' checked> | |
| <label for='penta1' class='shape-choice'>penta1</label> | |
| <input type='checkbox' name='ani' id='pentaani' class='ani'> | |
| <label for='pentaani' class='ani-lbl'>animate to shape</label> | |
| <section class='initial'> | |
| <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1998-28-a-web.jpg'> | |
| </section> | |
| <section class='final'> | |
| <div class='inner'> | |
| <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1998-28-a-web.jpg'> | |
| </div> | |
| </section> | |
| <section class='animating'> | |
| <div class='inner'> | |
| <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1998-28-a-web.jpg'> | |
| </div> | |
| </section> | |
| </article> | |
| <article class='hexagon shape'> | |
| <input type='radio' name='hexagon' id='hexa1' class='opt o1' checked> | |
| <label for='hexa1' class='shape-choice'>hexa1</label> | |
| <input type='radio' name='hexagon' id='hexa2' class='opt o2'> | |
| <label for='hexa2' class='shape-choice'>hexa2</label> | |
| <input type='checkbox' name='ani' id='hexani' class='ani'> | |
| <label for='hexani' class='ani-lbl'>animate to shape</label> | |
| <section class='initial'> | |
| <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2008-16-al-web.jpg'> | |
| </section> | |
| <section class='final'> | |
| <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2008-16-al-web.jpg'> | |
| </section> | |
| <section class='animating'> | |
| <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2008-16-al-web.jpg'> | |
| </section> | |
| </article> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment