Basic navigation bar with animation
Zurc Zurc
Zurc
/ Json-list-to-website-colourful-boxes....markdown
Created
September 18, 2013 11:37
A Pen by Zurc.
Given a JSON object list i'm trying to write the code to display it on a website with this format:
- A User ID Tag is a 300x300px square filled with the tag background color.
- I want to display a User ID Tag for each user.
- The users should be sorted by their IDs.
- The tag background colors should be randomly picked - different for each user and different with every refresh.
- On mouse-over each tag should change to have white background and display user name, mention name and email in black in different lines.
- On mouse-out I want to come back to random background-color
Zurc
/ Json-list-to-website-colourful-boxes....markdown
Created
September 18, 2013 17:37
A Pen by Zurc.
Given a JSON object list i'm trying to write the code to display it on a website with this format:
- A User ID Tag is a 300x300px square filled with the tag background color.
- I want to display a User ID Tag for each user.
- The users should be sorted by their IDs.
- The tag background colors should be randomly picked - different for each user and different with every refresh.
- On mouse-over each tag should change to have white background and display user name, mention name and email in black in different lines.
- On mouse-out I want to come back to random background-color
An advancement on my original 3D Carousel. Images are mathematically distributed and sized with JavaScript into a circle, provided with transitioned captions on hover, and zoomed on click. Keyboard shortcuts supported. Doesn't yet work correctly in IE or Safari, due to bugs in each (which I hope will be fixed in IE 11 and Safari 7).
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
| <input type="text" id="name" placeholder="new link name"> | |
| <input type="text" id="url" placeholder="www.example.com"> | |
| <input type="button" id="addLink" value="add link"> | |
| <div id="linkList"> | |
| <div> | |
| <a href="http://www.lavoz.com.ar" target="ventana">La Voz del Interior</a> | |
| <input type="button" id="removeLink" class ="removeLink" value="x"> | |
| </div> | |
| <div> |
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
| /** | |
| * shadows with CSS | |
| */ | |
| #box{ | |
| width: 300px; | |
| height: 500px; | |
| overflow: scroll; | |
| margin: 1em calc((100% - 300px)/2); | |
| background: | |
| linear-gradient(hsla(0, 0%, 100%, 0) 15px, white 40px), |
Zurc
/ dev-tool-resources.html
Last active
August 29, 2015 14:18
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
| // Paul Irish talking about Chrome DevTools Timeline's new Frame Mode | |
| http://www.youtube.com/watch?v=Vp524yo0p44 | |
| // Chrome Office Hours - troubleshooting paint times | |
| http://www.youtube.com/watch?v=z0_jD8nO5Zw | |
| // Break time to glass - youtube | |
| http://youtu.be/Il4swGfTOSM | |
| // Avoiding Unnecessary Paints |
Zurc
/ html5.html
Last active
August 29, 2015 14:18
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
| <!DOCTYPE html> | |
| <html class="no-js"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title></title> | |
| <meta name="description" content=""> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="css/main.css"> |
OlderNewer