Color Animate Any Shape
Animation At the time of creation of this demo (May 2011), WebKit and Firefox 5 Beta only. Transition
Challenges - ThisisLegal.com
jQuery NailThumb - Créez des miniatures d'images à la volée
Avec jQuery NailThumb vous pourrez créer vos thumbnails, à la volée, à partir des images en haute-résolution sans aucune altération de l'image d'origine. En une seule ligne de code, vous pouvez créer vos miniatures coté client sans modifier les originaux. Les dimensions peuvent être déclarées directement dans vos feuilles de styles CSS ou LESS. Ce plugin peut-être intégré avec tous types de galeries d'images pour obtenir dynamiquement des versions différentes en fonction de vos besoins. jQuery NailThumb permet notamment de : recadrer, redimensionner ses photosafficher ses miniatures avec des animationsprécharger les imagesle personnaliser… Utilisation basique de jQuery NailThumb : 01. 02. .square-thumb { 03. width: 150px; 04. height: 150px; 06. 07. 08. 09. 10. 11. jQuery(document).ready(function() { 12. jQuery('.nailthumb-container').nailthumb(); 14. Site officiel
Design
Design is a suite of web-design and development assistive tools which can be utilised on any web-page. Encompassing utilities for grid layout, measurement and alignment, Design is a uniquely powerful JavaScript bookmarklet. Using Design is extremely simple: Drag the Design link below to your bookmark bar (or add it to your bookmarks by right clicking the link and selecting 'Add to bookmarks/favourites'): Load any web-page you want Click Design in your bookmark bar Load the design component you wish to use by clicking on it in the Design control panel. Design features the following components: Grid - overlays a highly configurable layout grid over a web-page. Once Design has loaded, you can load each individual component by simply clicking on the icon representing that component in the Design control panel. Each component can be loaded as a 'standalone bookmarklet' through the instructions of each of their individual pages. The following browsers are supported in Design: No IE6 support?
Circle Hover Effects with CSS Transitions
From our sponsor: Get started on your Squarespace website with a free trial In today’s tutorial we’ll experiment with hover effects on circles. Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites. One use that I especially enjoy seeing is the circular thumbnail which just looks so much more interesting than the usual rectangular. And because the circle is such a special shape, we are going to create some special hover effects for it! Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. We will omit vendor prefixes in this tutorial. So, let’s get started! The HTML For most of the examples, we’ll be using the following structure: Although we could use images here, we’ll give ourselves a bit more freedom by using background images instead. Now, let’s make some hover effects! The CSS Example 1 And now, the interesting hover action!
GridControl: A Grid Overlay System for Design Development.
Designing by grid is as old as design itself. Grids are a fundamental concept to design that transcend trends. Long after the shiny, sans-serify, reflective shadows of web 2.0 are gone, grids will still be here. When we access digital media through implants in our brain and see the internet through screens that appear right in our vision, grid-based design will be there. When the cavemen of old carved drawings onto cave walls, grids were there. There is a web design showcase I found when doing the Gallery Roundup that specifically showcases sites with great grid designs called Design By Grid. In order for grids to be really effective, you really need to honer them. A Ruler: A Grid Designer's Best Friend Seems pretty obvious. Overlaying a Digital Grid Much of this alignment business is already taken care of for you. So let's get to it. The CSS is pretty straightforward: The other two have identical CSS with the exception of the background image. Notice the display: none; in the CSS. Share On
60+ Awesome Grunge Font That Every Designer Should Collect
Advertisement Grunge and Dirty designs are probably the most popular design trends. Although grunge may means dirty to some people, but it is designer’s favorites. Today, we are going to share 65 Awesome Grunge Font that you probably want to collect. If i had missed out any fonts that you think are cool, please share through the comment section. 1. 2. 20th Century Woodcut 3. 28 Days Later 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 55. 56. 57. 58. 59. 61. 62.
InfoGrid
Superman View Image Super Power Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Costume Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morality Sidekicks Vehicles Weaknesses Batman View Image Aquaman View Image Spiderman View Image Ironman View Image
