CSS3 – Effet parallaxe (sans JavaScript) Retour des tutoriels CSS avec quelque chose d’un peu original pour cet article : un effet parallaxe uniquement en CSS3. C’est à la suite de l’article de Simon Kern sur Alsacréations que m’est venue l’envie de tenter d’utiliser CSS pour reproduire cet effet initialement conçu avec JavaScript. L’article zoom sur l’effet parallaxe de Simon est bien conçu, je vous invite à le lire si vous préférez l’utilisation de jQuery, ou si vous souhaitez découvrir une alternative ou un complément à ce tutoriel. J’en profite pour remercier Simon qui m’a autorisé à reprendre son design ainsi que la base du code qu’il a conçu pour l’article sur Alsacréations. Démonstration Place à l’explication ! Concept Pour réaliser cet effet il nous faut plusieurs éléments qui vont nous permettre de simuler différents plans. Lorsque un tel effet est mis en place sur un site web, il l’est souvent pour offrir une transition originale entre deux vues, un peut comme lors d’un diaporama pour passer d’une slide à l’autre. <!
Sliding Image Panels with CSS3 Today we'll show you how to create some neat sliding image panels with CSS only. The idea is to use background images for the panels and animate them when clicking on a label. We'll use radio buttons with labels and target the respective panels with the general sibling selector. View demo Download source Today we’ll show you how to create some neat sliding image panels with CSS only. The beautiful images are by Joanna Kustra and they are licensed under the Attribution-NonCommercial 3.0 Unported Creative Commons License. You might as well be interested in Filter Functionality with CSS3 where we have used a similar technique for filtering elements based on their type. Please note: the result of this tutorial will only work as intended in browsers that support CSS transitions and animations. The Markup The HTML will consist of three major parts: the radio buttons and the labels, the container with the panels and their “slices” for each image, and the titles. Let’s style this baby. The CSS Demos
Tutos CSS3 Loading Animation Hello guys, this time i wanted to create 3 simple CSS3 Loading Animations. I remember that CSS3 Loading Animations are only visible in Firefox, Safari and Chrome. What do you wait, start reading! First Example CSS3 Loading Animation In this first example, the markup is very simple, where we will create an unordered list and we will create inside the div to create the effect and to control the total animation. Nothing difficult, just create the graphics for the unordered list, take special care to animation, thanks to the delay and control layers we can create this effects! Second Example CSS3 Loading Animation In this second example, we will see how to create a loading bar that fits any resolution. It looks like the style, much simpler than the previous, this is the basic setting, you can modify at your convenience. Third Example CSS3 Loading Animation As you can see the process is the same as the first example, you just know a little CSS to create wonderful effects. Conclusion
La boite à outils de la parallaxe Bientôt deux ans que les effets de parallaxe font parti du quotidien sur le web. Si vous n’avez pas encore sauté le pas, c’est le moment de vous y mettre ! Petite piqure de rappel sur la parallaxe avec cet article « 11 sites avec effet de parallaxe » mis en ligne début 2011. L’ancien site Nike Better World avait remis l’effet au goût du jour en utilisant un subtil mélange de Javascript et d’images PNG transparentes. Peut-on imaginer voir cette tendance se développer même avec l’ampleur que prend le responsive design ? Voici l’intérêt de cet article, qui est en quelque sorte une boite à outils et à utiles. 1 – Pour commencer, quelques exemples : Les sélections de sites utilisant de la parallaxe sont fréquentes sur les blogs design. Lois Jeans Mario Kart Wii Iutopi Dentsunetwork Activated Drinks Von Dutch Kryptis 2 – Tutoriels et ressources Templates : Des templates de sites en scrolling parallaxe sur WebdesignDev pour WordPress. Tutoriels : Un tutoriel récent et complet par WebdesignTuts+.
CSS3 with jQuery / Reverse Animation Hello guys, this time I wanted to bump into another interesting experiment, create a reverse animation. I helped with jQuery to assign the specific class at the click of the button. In my opinion an interesting experiment, I hope you will like and find alternative paths in the realization of the same experiment with different techniques. I remember this animations are only visible in Firefox, Safari and Chrome. Let’s start! The Markup The markup is not difficult, we used two unordered lists, the first list follow insert all graphics (via CSS3) and animations, while the second list social will have links to social networks always with a nice animation. As you will see the first list is composed of lines, points and special effect, the latter two are accompanied by an control layer to adjust the delay of the animation. This first part of the CSS will make you understand how all the elements are positioned in the scene, and how to apply the animations. CSS – Normal Animation jQuery Conclusion
Home - OK-Studios - Corporate Design & Brand Creation - Typo3 & Magento Agentur Hamburg webdesign.tutsplus There's no better way to learn CSS3 than to get your hands dirty on an actual project and that's exactly what we're going to do. I'm going to teach you how to create an awesome, layered CSS3 wheel menu using a few beginner to advanced CSS techniques. So break out your favorite text editor or IDE and let's get started on some CSS3 magic! Today you'll be learning how to create the candy cane teardrop out of the many different styles and color variations available. Note: Support for IE is limited at the moment. The Video Tutorial We're offering this tutorial in two different formats today: A video as well as a full written tutorial below. The Written Tutorial The step by step written tutorial is below. Step 1: The Layers The first thing we want to do is create some layers that will overlap each other and stay in place while using as little code as possible. The Code: As you can see the code is pretty straight-forward. Now we'll want to add some styling to each layer one by one. #menu-wrap:
I'm Google I’m Google is an ongoing tumblr blog in which batches of images and videos that I cull from the internet are compiled into a long stream-of-consciousness. Both the searching and arranging processes are done manually. The batches move seamlessly from one subject to the next based on similarities in form, composition, color, and theme. This results visually in a colorful grid that slowly changes as the viewer scrolls through it. The blog came out of my natural tendency to spend long hours obsessing over Google Image searches, collecting photos I found beautiful and storing them by theme. I feel that my experience wandering through Google Image Search and YouTube hunting for obscure information and encountering unexpected results is a very common one. Just wanted to add a note on how I make this blog, as I have seen people wonder the same couple things frequently. Firstly, lots of people ask if it's a algorithm or something. I hope you enjoyed my first FAQ – Dina Kelberman
Image map with CSS3 & jQuery tooltips Tooltips can play a big role in your web designs and that isn't new anymore. Just use them correctly and they will help you improve user experience. We have seen before how to create some good looking CSS3 tooltips and today you'll learn how to create an image map with pins and tooltips. View demo The idea A while ago, I had to create an image map with tooltips and, being inspired by some cool tooltips I noticed on Firefox's website, I decided to create these ones. The principal purpose was to have something that is easy to use and update, without needing any developing knowledge. As you will see further, you won't need any developer skills to add pins with tooltips to an image. HTML5 data attributes and jQuery HTML5 has a cool feature named "custom data attributes", which can help you store arbitrary snippets of metadata for the purpose of making your Javascript code simpler. Here's how the syntax looks: ... and this is how you can get the above value with jQuery: The HTML The CSS The jQuery
Portfolio Zoom Slider with jQuery In this tutorial we are going to create some nice effects for a portfolio or similar website with jQuery. We will create a tiny slider and integrate it with the amazing Cloud Zoom plugin and the elegant Fancybox plugin. The idea is to give the user the option to view details of […] View demoDownload source In this tutorial we are going to create some nice effects for a portfolio or similar website with jQuery. We will create a tiny slider and integrate it with the amazing Cloud Zoom plugin and the elegant Fancybox plugin. The idea is to give the user the option to view details of a portfolio item by zooming it on hover, and to allow a full view by clicking. When integrating jQuery scripts, it sometimes happens that there are conflicts, be it because of some shared attribute or because of some specific structure that is needed by each jQuery plugin. So, let’s start with the markup! The Markup For each item we will have a div element. Let’s look at the styling. The CSS The JavaScript
Animated Form Switching with jQuery In this tutorial we will create a simple animated form switch with three very common forms. The idea is not to leave the page when the user goes to another form but instead make the new form appear within the same container, expanding or contracting to the dimensions of the new form. […] View demoDownload source In this tutorial we will create a simple animated form switch with three very common forms. We will ensure that the form switch works as well when JavaScript is disabled in which case we will simply jump to the other’s form page. So, let’s begin by creating and styling the three forms. The Markup We will create three different forms, a login form, a registration form and a password reminder form with just one input field. First, we will create a wrapper for all three forms. Then we will add each form element to the wrapper and insert the necessary input fields. Now we will add the login form. And finally, we will add the password reminder form: The CSS And that’s all the style!
Login and Registration Form with HTML5 and CSS3 A tutorial on how to create a switching login and registration form with HTML5 and CSS3. View demo Download source In this tutorial we are going to create two HTML5 forms that will switch between login and registration using the CSS3 pseudo class :target. We will style it using CSS3 and an icon font. Note that this is for demo purpose only, it will only work in browser supporting the :target pseudo class, and you should not use this code on a live website without providing solid fallback. In the following, we will be going through Demo 1. The HTML In the HTML, we will put both forms, hiding the second one with CSS. We’ve added some HTML5 goodness here and used some of the new inputs. Now the two tricky parts. The second little trick is related to the use of the icon font. The CSS For the clearness of the code in this tutorial, I will omit all the vendor prefixes, but you will, of course, find them in the files. Styling both forms using CSS3 First we style the inputs, and remove the outline.
Slide Down Box Menu with jQuery and CSS3 In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left […] View demoDownload source In this tutorial we will create a unique sliding box navigation. We will be using the jQuery Easing Plugin and some beautiful photos by tibchris. The Markup For the HTML structure we will be using an unordered list where each menu item will contain the main link item and a div element for the submenu: <ul id="sdt_menu" class="sdt_menu"><li><a href="#"><img src="images/1.jpg" alt=""/><span class="sdt_active"></span><span class="sdt_wrap"><span class="sdt_link">Portfolio</span><span class="sdt_descr">My work</span></span></a><div class="sdt_box"><a href="#">Websites</a><a href="#">Illustrations</a><a href="#">Photography</a></div></li> ... If there is no submenu, the div can simply be left out. The CSS