Creating Interactive Fictional UI With CSS3 In today’s article we will create an interactive fiction user interface (UI) coded with CSS transforms and transition properties. The idea is to have a button and reveal more information when mouse over on it. You can check out the demo before you proceed to the next section. View Demo Cool right? HTML Structure We will have a simple HTML structure with several division where each one contains title and description. As you can see above, each menu object “menu_obj” division contains extra classes such as “home”, “profile” and “contact” that gives us freedom to define background image with CSS later. Home Button Profile Button Contact Button Hover State Ok. CSS Style Let’s define the style for each buttons and its child. First of all, we have given the width, height for each “menu_obj”; apply inner and outer drop shadows; and define the transition type and its duration. The title element has scale up 5 times, and 0 opacity. The content division will fade in and scale up to 1. That’s it! Conclusion
How to Make a Smooth Animated Menu with jQuery Ever seen some excellent jQuery navigation that left you wanting to make one of your own? Today we’ll aim to do just that by building a menu and animate it with some smooth effects. The Goal – One Smooth Menu Here’s a demo of what we’ll end up with by the end. Introduction – An explanation of easing The menu has such a smooth animation because of a thing called “easing”. “The term easing refers to gradual acceleration or deceleration during an animation, which helps your animations appear more realistic. Thanks to the magic of the jQuery Easing plugin, we can now use easing outside of Flash and Actionscript environments. Step 1 – Set up the Structure Before starting with any jQuery, we’ve got to build a quick menu structure with XHTML and load in the required project files. Nothing out of the ordinary here. Then copy in this menu structure into the body: Menu items have a class assigned to it that will designate the color of the block. Step 3 – Style with CSS Step 4 – Animate with jQuery
cufón - fonts for the people 50 New Useful CSS Techniques, Tutorials and Tools Advertisement These are great times for front-end developers. After months of exaggerated excitement about HTML5 and CSS3, the web design community now starts coming up with CSS techniques that actually put newly available technologies to practical use instead of abusing them for pure aesthetic purposes. We see fewer “pure CSS images” and more advanced, clever CSS techniques that can actually improve the Web browsing experience of users. And that’s a good thing! In this post we present recently released CSS techniques, tutorials and tools for you to use and enhance your workflow, thus improving your skills. CSS Techniques Now Playing: transitions and animations with CSSTim Van Damme showcases a fairly simple CSS design that uses transitions, animations and subtle hover-effects to produce an engaging user experience. CSS3 range slider, checkbox + radio buttonA demo of HTML input elements made with CSS3. The Simpler CSS GridWhy restrict your layout so that it can fit into this 960gs?
10 Superb Image Effects and Slider Tutorials with Jquery 10 Superb Image Effects and Sliders with Jquery and CSS. I haven’t been into jquery much but since i had to use it in one of my site i worked on one and i became a fan of jquery. that is why i have gathered a list of awesome jquery effects tutorial for images and sliders. All tutorials are gathered from various sites and are linked back. Fancy Thumbnail Hover Effect w/ jQuery This is an awesome thumbnail hover effect jquery tutorial. Sliding Boxes and Captions with jQuery This tutorial is my personal favorite, u can stylize your images with divs/boxes and make superb , very attractive effects by simple jquery. Create an Image Rotator with Description (CSS/jQuery) This is a very very handy and attractive master piece of jquery and css. AnythingSlider jQuery Plugin AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features. ImageSwitch A superb easy to use plugin which switches between images in a very attractive animated style.
browserling - interactive cross-browser testing Advanced CSS Menu Last tutorial, I showed you how to design a watercolor effect menu in Photoshop. This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let's take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property. View Demo CSS menu Download Demo ZIP Overview Here are the required graphics to assembe the menu (you can download from the zip). 1. Open the Photoshop file. 2. Turn off the background Layer Group and leave only the menu text layers visible. Create a new file and take note of the file dimension (w x h), in my case the "home" graphic is 144 x 58px. Here is how the hover effect will work. Repeat this step for the other buttons. 3. When you are done with the graphics, let's start coding. #menu Reset the menu to no padding, no margin, and no list-style. #menu span #menu a The key point here is the text-indent property.
jQuery: The Write Less, Do More, JavaScript Library jQuery custom content scroller Last updated on Mar 10, 2015 Originally published on August 1, 2010 by malihu, under Plugins. Highly customizable custom scrollbar jQuery plugin. Features include vertical and/or horizontal scrollbar(s), adjustable scrolling momentum, mouse-wheel (via jQuery mousewheel plugin), keyboard and touch support, ready-to-use themes and customization via CSS, RTL direction support, option parameters for full control of scrollbar functionality, methods for triggering actions like scroll-to, update, destroy etc., user-defined callbacks and more. Current version 3.0.8 (Changelog)Upgrading from version 2 When upgrading from version 2.x to 3.x it’s important to use version 3 CSS and .png files. Version 3 is backwards compatible but it’s also a huge overhaul. Version 2 is still maintained and updated here. How to use it Get started by downloading the archive which contains the plugin files (and a large amount of HTML demos and examples). Initialization Initialize via javascript more info Initialize via HTML
CSS3 Image Styles When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn't render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly. Darcy Clarke and I put a quick tutorial together on how to use jQuery to make perfect rounded corner images dynamically. View Demo Image Styles Problem (see demo) Take a look at the demo and note that there is border-radius and inset box-shadow applied in the first row of images. Workaround To get the border-radius and inset box-shadow working, the workaround is to apply the actual image as background-image. Dynamic Way To make it dynamic, you can use to jQuery to wrap the background image dynamically for every image element. Output The above code will output the following HTML code: Circle Image (see demo) Now that the image is applied as a background image, you can pretty much add any style to it. Card Style (see demo) Embossed Style (see demo)
jQuery for Designers - Tutorials and screencasts