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. The idea behind this demo is to show the user the login form and provide a link to “switch” to the registration form. 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 Styling both forms using CSS3 Now let’s style our inputs and give them a nicer look. Demos
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. 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. 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. The CSS The JavaScript
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. 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. The link element which wraps the image will have the href pointing to the large image. Let’s look at the styling. The CSS First we will define the style for the item:
Fluid CSS3 Slideshow with Parallax Effect In this tutorial we will create a slideshow with a parallax effect using several CSS3 properties. The idea is to move the background positions of two backgrounds while sliding the container of the slides. View demo Download source In this tutorial, we are going to create a slideshow with a parallax effect with the help of some CSS3 properties. We’ll use radio buttons and sibling combinators for controlling which slide is shown. The graphics used in the demo are by: 5Milli (Global Vector Map) and by WeGraphics (Free Vector Infographic Kit). Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. The Markup We will “connect” the input elements to the division with the class sp-content by using the general sibling combinator. The list elements are the wrappers for each slide and although we are using simply images here, you can use any kind of content. The CSS The styles of the inputs and the labels: … and the sp-parallax-bg div:
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
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
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
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. You will receive all variations in the source files. Also as an added bonus I've added a little bit of optional Javascript so that you can rotate your images depending on the hovered menu item. 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 Code: As you can see the code is pretty straight-forward. #menu-wrap: .wrap1:
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
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. 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 The image will be styled as follows: