a Auto Type text with only CSS!
A Pen by CSS Support on CodePen.
a Auto Type text with only CSS!
A Pen by CSS Support on CodePen.
<body> | |
<div class="background"></div> | |
<div> | |
<div class="button"></div> | |
<div class="button"></div> | |
<div class="button"></div> | |
<div class="button"></div> | |
</div> | |
</body> |
I got this image from here http://placeimg.com/
- var images = ["https://lh3.googleusercontent.com/aC9nyW5dhaYFmWD8fcf8DApjpH08eHEkbCHqmUPHRQ5T3jK-QyNKZYVMehmrvyPdEA_KxWvgZ3_kyOOYOAv99Ow3UoKSvEloleVKGSfLOwOyDV3Q6Dwi1G-NYoa9-t_ofmmskE6BYnVIOnIz2HWlMcijzIEwvKAL_R4z63DaLgG0z_OcGiSQHunwGAPXrBQUv42ZXuIMODq4zxDHczSxJ72b0-_udtdQK3JuT2X8nXCwFoF7GxmOpzXS0H5f50DuCbXoXcx-O7bgBMCXZdMpTxB27-wdXeLmxpYUySXgjSN2NAKmK16DmGLYvw5tMlrqwb8h4MJEEbXjP1pjPxXsahb7UZseEGyn80uLjATANJvusyJWCtzkkxYXPz-yI1rDvfEJKe2eyA-5AvFlzFBSwBMASn8f7mXinUrXMMREkJQjoi89NfZ91G7253OEVQOqcWxddiYtcHCO5v6Pl3QfV2SUTWXgggscDSY2ezjSPpYERNTXnIM_aCyWmIG7ybrfqOB0eVYBAgynyuPVbjd4KuZWZq2Dfu33HX1RuPKglbOuZGD1QbpJnruvUVkAmjDXI40ENN7X=w1600-h766","https://lh3.googleusercontent.com/4Bn4zdADhWhegRcmxS1xmHxbxIBzEgB8ADfeaCmiwT9iF7y2mN9Wc5L7gFLxUo2bgl3V-97EFrOyE9OXfkvip3pkpNxYe50GiapeT41p7D7tNJm3oEdV8Y-7toGyvz0UZ8VgDACVTUEdzzVVm2NtQSCroSvmo4gL3u0ty-KAyKnah9vIitfw2Rs1MuNzQq6vmzUcw1_4obGAKmk_Nx0dD33RSy1jbT8D61kxERbOu0pHUciywIO2EeUX8iOcJfHHQwVW3lGYcZKSiimGjBUvzHILrSpVZQ1xUlj0U21EeY4Hil1ZaJQaX47hQezcxZj7H8GyWhNv2TzQ7EU8DS3_M |
A portfolio theme which screams minimalism.
A Pen by Sofiya Shakeel on CodePen.
/*! | |
* jquery.addrule.js 0.0.2 - https://gist.github.com/yckart/5563717/ | |
* Add css-rules to an existing stylesheet. | |
* | |
* @see http://stackoverflow.com/a/16507264/1250044 | |
* | |
* Copyright (c) 2013 Yannick Albert (http://yckart.com) | |
* Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php). | |
* 2013/11/23 | |
**/ |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Box Shadow</title> | |
<style> | |
.box { | |
height: 150px; | |
width: 300px; | |
margin: 20px; |
<a href ="javascript:(function()%7Bfunction%20getParameterByName(name)%20%7Bname%20%3D%20name.replace(%2F%5B%5C%5B%5D%2F%2C%20%22%5C%5C%5B%22).replace(%2F%5B%5C%5D%5D%2F%2C%20%22%5C%5C%5D%22)%3Bvar%20regex%20%3D%20new%20RegExp(%22%5B%5C%5C%3F%26%5D%22%20%2B%20name%20%2B%20%22%3D(%5B%5E%26%23%5D*)%22)%2Cresults%20%3D%20regex.exec(location.search)%3Breturn%20results%20%3D%3D%20null%20%3F%20%22%22%20%3A%20decodeURIComponent(results%5B1%5D.replace(%2F%5C%2B%2Fg%2C%20%22%20%22))%3B%7Dvar%20id%20%3D%20getParameterByName%20(%22v%22)%3Bif%20(typeof%20id%20!%3D%3D%20null%20%26%26%20id%20!%3D%3D%22%22)%20%7Bvar%20url%20%3D%20%22http%3A%2F%2Fimg.youtube.com%2Fvi%2F%22%20%2B%20id%20%2B%20%22%2Fmaxresdefault.jpg%22%3Bwindow.open(url%2C'_blank')%3B%7D%20else%20%7Balert%20(%22Activate%20the%20tab%20in%20your%20browser%20where%20the%20YouTube%20video%20is%20loaded%20and%20try%20again!%22)%3B%7D%7D)()">Grab Poster Image</a> |
<header> | |
… | |
</header> | |
<main> | |
<div class="cc"> | |
… | |
</div> | |
</main> |
Most of the time these slide in or fade in - just playing with other instantiation animations.
All animations are class-driven, and are animating the exact same HTML elements.
A Pen by Jesse Couch on CodePen.