Created
May 29, 2014 20:25
-
-
Save iiic/ef71adf96e80384fa8ee to your computer and use it in GitHub Desktop.
efekt pro zobrazení flash zpráviček
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
| <!DOCTYPE HTML> | |
| <meta charset="utf-8"> | |
| <title>flash zprávičky</title> | |
| <style> | |
| @keyframes animace { | |
| 0% { | |
| opacity: 0; | |
| left: -500px; | |
| } | |
| 100% { | |
| opacity: 1; | |
| left: 0; | |
| } | |
| } | |
| @-moz-keyframes animace { | |
| 0% { | |
| opacity: 0; | |
| left: -500px; | |
| } | |
| 100% { | |
| opacity: 1; | |
| left: 0; | |
| } | |
| } | |
| @-webkit-keyframes animace { | |
| 0% { | |
| opacity: 0; | |
| left: -500px; | |
| } | |
| 100% { | |
| opacity: 1; | |
| left: 0; | |
| } | |
| } | |
| @-o-keyframes animace { | |
| 0% { | |
| opacity: 0; | |
| left: -500px; | |
| } | |
| 100% { | |
| opacity: 1; | |
| left: 0; | |
| } | |
| } | |
| #snippet--flashMessage { | |
| background: none; | |
| padding: 0; | |
| position: fixed; | |
| left: 16px; | |
| top: 0; | |
| width: 0; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| #snippet--flashMessage input { | |
| display: none; | |
| } | |
| #snippet--flashMessage input:checked+label { | |
| display: block; | |
| left: -600px; | |
| opacity: 0; | |
| cursor: default; | |
| -moz-transition: all 2s linear; | |
| -webkit-transition: all 2s linear; | |
| -o-transition: all 2s linear; | |
| transition: all 2s linear; | |
| } | |
| #snippet--flashMessage label { | |
| position: relative; | |
| width: 280px; | |
| opacity: 1; | |
| left: 0; | |
| display: block; | |
| border: 1px solid #afa; | |
| background-color: #fff; | |
| padding: 10px 24px 10px 10px; | |
| margin-bottom: 20px; | |
| cursor: pointer; | |
| -moz-animation: animace 1.4s linear; | |
| -webkit-animation: animace 1.4s linear; | |
| -o-animation: animace 1.4s linear; | |
| animation: animace 1.4s linear; | |
| -webkit-border-radius: 2px; | |
| -moz-border-radius: 2px; | |
| border-radius: 2px; | |
| -webkit-box-shadow: 0 1px 20px rgba(0,0,0,0.25), inset 0 -1px 0 rgba(0,0,0,0.1); | |
| -moz-box-shadow: 0 1px 20px rgba(0,0,0,0.25), inset 0 -1px 0 rgba(0,0,0,0.1); | |
| box-shadow: 0 1px 20px rgba(0,0,0,0.25), inset 0 -1px 0 rgba(0,0,0,0.1); | |
| } | |
| #snippet--flashMessage label[for="flash-2"] { | |
| -moz-animation: animace 1.5s linear; | |
| -webkit-animation: animace 1.5s linear; | |
| -o-animation: animace 1.5s linear; | |
| animation: animace 1.5s linear; | |
| } | |
| #snippet--flashMessage label[for="flash-3"] { | |
| -moz-animation: animace 1.6s linear; | |
| -webkit-animation: animace 1.6s linear; | |
| -o-animation: animace 1.6s linear; | |
| animation: animace 1.6s linear; | |
| } | |
| #snippet--flashMessage label[for="flash-4"] { | |
| -moz-animation: animace 1.7s linear; | |
| -webkit-animation: animace 1.7s linear; | |
| -o-animation: animace 1.7s linear; | |
| animation: animace 1.7s linear; | |
| } | |
| #snippet--flashMessage label[for="flash-5"] { | |
| -moz-animation: animace 1.8s linear; | |
| -webkit-animation: animace 1.8s linear; | |
| -o-animation: animace 1.8s linear; | |
| animation: animace 1.8s linear; | |
| } | |
| #snippet--flashMessage label[for="flash-6"] { | |
| -moz-animation: animace 1.9s linear; | |
| -webkit-animation: animace 1.9s linear; | |
| -o-animation: animace 1.9s linear; | |
| animation: animace 1.9s linear; | |
| } | |
| #snippet--flashMessage label[for="flash-7"] { | |
| -moz-animation: animace 2s linear; | |
| -webkit-animation: animace 2s linear; | |
| -o-animation: animace 2s linear; | |
| animation: animace 2s linear; | |
| } | |
| #snippet--flashMessage label[for="flash-8"] { | |
| -moz-animation: animace 2.1s linear; | |
| -webkit-animation: animace 2.1s linear; | |
| -o-animation: animace 2.1s linear; | |
| animation: animace 2.1s linear; | |
| } | |
| #snippet--flashMessage label[for="flash-9"] { | |
| -moz-animation: animace 2.2s linear; | |
| -webkit-animation: animace 2.2s linear; | |
| -o-animation: animace 2.2s linear; | |
| animation: animace 2.2s linear; | |
| } | |
| #snippet--flashMessage label:before { | |
| content: "info"; | |
| position: absolute; | |
| font-weight: bold; | |
| left: -24px; | |
| color: #ccc; | |
| -webkit-transform: rotate(-90deg); | |
| -moz-transform: rotate(-90deg); | |
| -o-transform: rotate(-90deg); | |
| transform: rotate(-90deg); | |
| } | |
| #snippet--flashMessage label:after { | |
| content: "˟"; | |
| font-size: 150%; | |
| right: 8px; | |
| margin-top: 6px; | |
| position: absolute; | |
| color: #ccc; | |
| } | |
| #snippet--flashMessage label:hover:after { | |
| color: red; | |
| } | |
| #snippet--flashMessage label.error, | |
| #snippet--flashMessage label.warning { | |
| border: 1px solid #f88; | |
| } | |
| #snippet--flashMessage label.error:before, | |
| #snippet--flashMessage label.warning:before { | |
| font-size: 90%; | |
| left: -28px; | |
| content: "chyba"; | |
| } | |
| </style> | |
| <p>Lorem ipsum dolor sit amet consectetuer justo quam Vestibulum In pellentesque. Mauris parturient sem Phasellus massa et lobortis ut eget faucibus congue. Vestibulum neque nascetur elit auctor a laoreet lorem nec vel felis. Mi urna metus eleifend Vestibulum nibh sagittis arcu laoreet sit leo. Leo tortor gravida Phasellus platea Curabitur felis Aenean elit In orci. Morbi Nulla Vestibulum arcu vel habitasse tempor Nullam consectetuer vel metus. Nam ac vel.</p> | |
| <p>Eu sapien elit sem pede egestas diam nulla augue Cum tempus. Aliquam Maecenas id magna nisl condimentum et augue felis velit dignissim. Nibh ut Pellentesque urna pellentesque Aenean a neque In Phasellus vitae. Lacinia dolor In nunc Proin ac quis pretium ut volutpat orci. Et Quisque elit justo In interdum a Donec orci egestas amet. Vitae.</p> | |
| <p>At sit pellentesque Sed justo dolor Phasellus et urna dui mus. Dolor pellentesque dolor In Curabitur Donec congue Nulla id quis ac. Congue at quam ligula tempus interdum vitae Cras magna vel libero. Tempus eros ac Vestibulum et vel vel vitae vel orci orci. Integer malesuada Sed Maecenas nibh Curabitur convallis semper sapien congue nibh. Pretium elit augue eget Nulla urna.</p> | |
| <p>Ligula Nullam at id nisl tempor tincidunt quis nisl et mus. Vel Curabitur semper ante mollis nibh metus montes vel Curabitur ut. Ipsum aliquam interdum ut montes quis iaculis ante non Sed pede. Ut mi arcu leo orci et Suspendisse Curabitur nibh parturient condimentum. Sed dolor a Aenean turpis Nunc dui ante.</p> | |
| <p>Lorem ipsum dolor sit amet consectetuer justo quam Vestibulum In pellentesque. Mauris parturient sem Phasellus massa et lobortis ut eget faucibus congue. Vestibulum neque nascetur elit auctor a laoreet lorem nec vel felis. Mi urna metus eleifend Vestibulum nibh sagittis arcu laoreet sit leo. Leo tortor gravida Phasellus platea Curabitur felis Aenean elit In orci. Morbi Nulla Vestibulum arcu vel habitasse tempor Nullam consectetuer vel metus. Nam ac vel.</p> | |
| <p>Eu sapien elit sem pede egestas diam nulla augue Cum tempus. Aliquam Maecenas id magna nisl condimentum et augue felis velit dignissim. Nibh ut Pellentesque urna pellentesque Aenean a neque In Phasellus vitae. Lacinia dolor In nunc Proin ac quis pretium ut volutpat orci. Et Quisque elit justo In interdum a Donec orci egestas amet. Vitae.</p> | |
| <p>At sit pellentesque Sed justo dolor Phasellus et urna dui mus. Dolor pellentesque dolor In Curabitur Donec congue Nulla id quis ac. Congue at quam ligula tempus interdum vitae Cras magna vel libero. Tempus eros ac Vestibulum et vel vel vitae vel orci orci. Integer malesuada Sed Maecenas nibh Curabitur convallis semper sapien congue nibh. Pretium elit augue eget Nulla urna.</p> | |
| <p>Ligula Nullam at id nisl tempor tincidunt quis nisl et mus. Vel Curabitur semper ante mollis nibh metus montes vel Curabitur ut. Ipsum aliquam interdum ut montes quis iaculis ante non Sed pede. Ut mi arcu leo orci et Suspendisse Curabitur nibh parturient condimentum. Sed dolor a Aenean turpis Nunc dui ante.</p> | |
| <p>Lorem ipsum dolor sit amet consectetuer justo quam Vestibulum In pellentesque. Mauris parturient sem Phasellus massa et lobortis ut eget faucibus congue. Vestibulum neque nascetur elit auctor a laoreet lorem nec vel felis. Mi urna metus eleifend Vestibulum nibh sagittis arcu laoreet sit leo. Leo tortor gravida Phasellus platea Curabitur felis Aenean elit In orci. Morbi Nulla Vestibulum arcu vel habitasse tempor Nullam consectetuer vel metus. Nam ac vel.</p> | |
| <p>Eu sapien elit sem pede egestas diam nulla augue Cum tempus. Aliquam Maecenas id magna nisl condimentum et augue felis velit dignissim. Nibh ut Pellentesque urna pellentesque Aenean a neque In Phasellus vitae. Lacinia dolor In nunc Proin ac quis pretium ut volutpat orci. Et Quisque elit justo In interdum a Donec orci egestas amet. Vitae.</p> | |
| <p>At sit pellentesque Sed justo dolor Phasellus et urna dui mus. Dolor pellentesque dolor In Curabitur Donec congue Nulla id quis ac. Congue at quam ligula tempus interdum vitae Cras magna vel libero. Tempus eros ac Vestibulum et vel vel vitae vel orci orci. Integer malesuada Sed Maecenas nibh Curabitur convallis semper sapien congue nibh. Pretium elit augue eget Nulla urna.</p> | |
| <p>Ligula Nullam at id nisl tempor tincidunt quis nisl et mus. Vel Curabitur semper ante mollis nibh metus montes vel Curabitur ut. Ipsum aliquam interdum ut montes quis iaculis ante non Sed pede. Ut mi arcu leo orci et Suspendisse Curabitur nibh parturient condimentum. Sed dolor a Aenean turpis Nunc dui ante.</p> | |
| <p>Lorem ipsum dolor sit amet consectetuer justo quam Vestibulum In pellentesque. Mauris parturient sem Phasellus massa et lobortis ut eget faucibus congue. Vestibulum neque nascetur elit auctor a laoreet lorem nec vel felis. Mi urna metus eleifend Vestibulum nibh sagittis arcu laoreet sit leo. Leo tortor gravida Phasellus platea Curabitur felis Aenean elit In orci. Morbi Nulla Vestibulum arcu vel habitasse tempor Nullam consectetuer vel metus. Nam ac vel.</p> | |
| <p>Eu sapien elit sem pede egestas diam nulla augue Cum tempus. Aliquam Maecenas id magna nisl condimentum et augue felis velit dignissim. Nibh ut Pellentesque urna pellentesque Aenean a neque In Phasellus vitae. Lacinia dolor In nunc Proin ac quis pretium ut volutpat orci. Et Quisque elit justo In interdum a Donec orci egestas amet. Vitae.</p> | |
| <p>At sit pellentesque Sed justo dolor Phasellus et urna dui mus. Dolor pellentesque dolor In Curabitur Donec congue Nulla id quis ac. Congue at quam ligula tempus interdum vitae Cras magna vel libero. Tempus eros ac Vestibulum et vel vel vitae vel orci orci. Integer malesuada Sed Maecenas nibh Curabitur convallis semper sapien congue nibh. Pretium elit augue eget Nulla urna.</p> | |
| <p>Ligula Nullam at id nisl tempor tincidunt quis nisl et mus. Vel Curabitur semper ante mollis nibh metus montes vel Curabitur ut. Ipsum aliquam interdum ut montes quis iaculis ante non Sed pede. Ut mi arcu leo orci et Suspendisse Curabitur nibh parturient condimentum. Sed dolor a Aenean turpis Nunc dui ante.</p> | |
| <div id="snippet--flashMessage"> | |
| <input id="flash-1" type="checkbox"> | |
| <label for="flash-1" class="flash ok">The item has been added.</label> | |
| <input id="flash-2" type="checkbox"> | |
| <label for="flash-2" class="flash ok">The item has been added.</label> | |
| <input id="flash-3" type="checkbox"> | |
| <label for="flash-3" class="flash error">Some error</label> | |
| <input id="flash-4" type="checkbox"> | |
| <label for="flash-4" class="flash ok">The item has been added.</label> | |
| <input id="flash-5" type="checkbox"> | |
| <label for="flash-5" class="flash ok">Lorem ipsum dolor sit amet consectetuer justo quam Vestibulum In pellentesque. Mauris parturient sem Phasellus massa et lobortis ut eget faucibus congue.</label> | |
| <input id="flash-6" type="checkbox"> | |
| <label for="flash-6" class="flash error">The item has been added.</label> | |
| <input id="flash-7" type="checkbox"> | |
| <label for="flash-7" class="flash warning">The item has been added.</label> | |
| <input id="flash-8" type="checkbox"> | |
| <label for="flash-8" class="flash ok">The item has been added.</label> | |
| <input id="flash-9" type="checkbox"> | |
| <label for="flash-9" class="flash ok">The item has been added.</label> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment