A 3D Slider created purely with HTML5 and CSS3. Pauses on Hover.
https://github.com/jaskiran-chhokar/3D-Image-Slider
A Pen by Ivaylo Parvanov on CodePen.
ipcsdemo asteroidsbg
This file contains hidden or 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
| <svg viewBox="0 0 100 100"> | |
| <path class="heart" d="M50,33.32c-1.2-3.22-3.49-5.92-6.47-7.63c-2.98-1.71-6.47-2.31-9.85-1.71c-3.38,0.6-6.45,2.37-8.66,5.01 c-2.21,2.63-3.43,5.96-3.44,9.39c0,18.45,19.98,33.03,26.43,37.26c0.59,0.39,1.28,0.59,1.99,0.59c0.71,0,1.4-0.21,1.99-0.59 c6.45-4.23,26.43-18.81,26.43-37.26c-0.01-3.44-1.23-6.76-3.44-9.39c-2.21-2.63-5.28-4.4-8.66-5.01c-3.38-0.6-6.87,0-9.85,1.71 C53.49,27.4,51.2,30.1,50,33.32z"/> | |
| </svg> |
This file contains hidden or 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
| <div class="grid"> | |
| <h1>Angel</h1> | |
| <div class="vincent"> | |
| <img src="https://i.pinimg.com/564x/96/ce/c2/96cec216db4a26d7ea86039479d2b65f.jpg"> | |
| </div> | |
| <b class="cell" aria-hidden="true"></b> | |
| <b class="cell" aria-hidden="true"></b> | |
| <b class="cell highlight" aria-hidden="true"></b> | |
| <b class="cell" aria-hidden="true"></b> | |
| <b class="cell" aria-hidden="true"></b> |
This file contains hidden or 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
| <div id='content'></div> |
asteroidsbg
/ index.html
Last active
March 28, 2018 14:37
St. Gridcent – CSS Grid, clip-path, filter, & blend-mode experiment
This file contains hidden or 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
| <div class="grid"> | |
| <h1>Angel</h1> | |
| <div class="vincent"> | |
| <img src="https://i.pinimg.com/564x/96/ce/c2/96cec216db4a26d7ea86039479d2b65f.jpg"> | |
| </div> | |
| <b class="cell" aria-hidden="true"></b> | |
| <b class="cell" aria-hidden="true"></b> | |
| <b class="cell highlight" aria-hidden="true"></b> | |
| <b class="cell" aria-hidden="true"></b> | |
| <b class="cell" aria-hidden="true"></b> |
This file contains hidden or 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
| %h1.logo | |
| Solar explorer | |
| %span in only CSS | |
| %input.planet9{:type => 'radio', :id => 'pluto', :name => 'planet'} | |
| %label.pluto.menu{:for => 'pluto'} | |
| .preview | |
| .info | |
| %h2 | |
| .pip | |
| Pluto |
A Pen by Ivaylo Parvanov on CodePen.
This file contains hidden or 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
| <canvas></canvas> | |
| <!-- | |
| ,--. ,--. | |
| ((O ))--((O )) | |
| ,'_`--'____`--'_`. | |
| _: ____________ :_ | |
| | | ||::::::::::|| | | | |
| | | ||::::::::::|| | | | |
| | | ||::::::::::|| | | | |
| |_| |/__________\| |_| |
This file contains hidden or 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
| %canvas#canvas | |
| %div#box | |
| %div.wrap | |
| -100.times do | |
| %div.c |
HTML5 video skin.
Found a great tutorial that walks you through how to skin an html5 video. Works great and looks great! Try it out
Tutorial: http://www.inwebson.com/html5/custom-html5-video-controls-with-jquery/
Original design here http://dribbble.com/shots/866381-Mini-Player
NewerOlder