CSS Background Animations Background animations are an awesome touch when used correctly. In the past, I used MooTools to animate a background position. Luckily these days CSS animations are widely supported enough to rely on them to take over JavaScript-based animation tasks. The following simple CSS snippet animates the background image (via background position) of a given element. We'll use CSS animations instead of transitions for this effect: With the animation code in place, now it's time to apply it to an element with a background image: The cloud background image within the sample element will elegantly scroll from left to right over a duration of 40 seconds, seamlessly repeating an infinite number of times. How epic is it that we don't need to use JavaScript to manage these animations anymore?
HTML5 Snippets Timelines CSS - 7 astuces Présenter une histoire, une succession d’événements, bref toute une vie et pourquoi pas une navigation, telle est la raison d’être d’une timeline. Découvrez 7 astuces pour réaliser la votre en CSS. Une timeline en CSS permet de se dispenser d’une image, difficilement évolutive dans un site web dynamique. Une timeline CSS basique, verticale Pure CSS Timeline par MattBango Une timeline CSS scrollable Un exemple bien réalisé par Smashing Magazine Un tutoriel bien complet par TutorialZine Une timeline avec un tutoriel complet Exemple et sources à télécharger par Eric Meyer Un exemple avec le nouveau portfolio de Peter Cain, construit sur une timeline : petejcain.co.uk/ Cette entrée a été publiée dans CSS, avec comme mot(s)-clef(s) astuce css, chronologie css, css, css timeline.
Koloria: Free Icons Set Dear readers, designers, developers and bloggers, I am pleased to announce you my second free icon set, Koloria. It contains more than 160 pixel perfect icons (32×32 pixels) and is suitable for various types of commercial or open source projects. Preview Koloria Icon Set - 35949 downloads A Free Multipurpose Icon Set I designed Koloria in order to cover as many needs as possible. Pixel Perfect Icons Designed in Adobe Photoshop, the icons are pixel perfect. Suitable for Dark or Light Compositions One of the challenges with this icon pack was to be suitable for different type of layouts covering both dark and light ones. Why free? I like to think that as designers and developers, we are responsible for creating a healthy working ecosystem. Terms of Use - Koloria Icon Set can be used in open source or commercial projects for free. - When you mention Koloria Icon Set, please refer to this page/download link. - Do not sell the package on graphic stock sites – this pack is intended to be free.
Web Design Tools (lightbox, carousel...) HTML5, CSS3, JS Demos, Creations and Experiments | CSSDeck Code Snippets - Snipplr Social Snippet Repository Best CSS Code Snippet Sites On the web there are many different code repositories of web programming languages from which you can take free or licensed, but mostly free, small snippets for personal and professional use. Many are also collaborative communities that share code and discuss with others. Here is a small selection: asdfgas CSS Tricks CSS Tricks offer CSS code snippets but also some for HTML, HTAccess, JavaScript, jQuery, PHP and Wordpress. Although it is an HTML5 repository, labels filter snippets for CSS3 very well. html5snippets.com/css3 Other blogs have already published good collections of snippets in some of their posts: Tzine is an awesome web development website with tutorials and resources. tutorialzine.com
A collection of free, coded HTML5/CSS user interface snippets. by viktory12345 Feb 9