Responsive Multi-Level Menu A responsive multi-level menu that shows its submenus in their own context, allowing for a space-saving presentation and usage. View demo Download source Today we want to share an experimental drop-down menu with you. The main idea is to save space for menus that have a lot of content and sub-levels. Each sub-level in this menu will be shown in its own context, making the “parent” level disappear. This is done with subtle animations that are defined in separate animation classes. Please note: this only works as intended in browsers that support the respective CSS properties. The structure of the menu contains an unordered list that can have an arbitrary number of sub-lists: Animations are defined in animation classes: And the plugin is called as following: We hope you like this little experiment and find it inspiring!
Mini AJAX File Upload Form Martin Angelov In this tutorial we are going to create an AJAX file upload form, that will let visitors upload files from their browsers with drag/drop or by selecting them individually. For the purpose, we will combine the powerful jQuery File Upload plugin with the neat jQuery Knob to present a slick CSS3/JS driven interface. The HTML As usual, we will start off with a basic HTML5 document: <! In the head of the document, I have included two fonts from Google Webfonts, and before the closing </body>tag you can see a number of JavaScript libraries. The main element on the page is the #upload form. <li class="working"><input type="text" value="0" data-width="48" data-height="48" data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p>Sunset.jpg <i>145 KB</i></p><span></span></li> The input item in the snippet above is hidden with CSS. Mini AJAX File Upload Form The jQuery Code There are two ways a visitor can upload files with this form: assets/js/script.js The PHP Script We’re done!
Planning Your Web Design with Sketches Planning a website doesn't have to be completely digital. Learn how sketching wireframes can help you speed up and innovate your creatives. There are plenty of foundational courses taught in design school. And it’s no surprise that big agencies and startups are taking a back-to-basics approach to their design processes. Whether you’ve been a lifelong doodler or have serious sketch ‘chops,’ being able to use paper to explore new ideas is an important skill in the design field. Fear not! In fact, I’ve heard of a growing backlash against wasted billable hours developing fully-rendered Photoshop comps. Whether you’re a big agency or freelancer, being able to communicate ideas to clients with a quick sketch is a valuable tool. Why Sketch? Sketching has some advantages to digital wireframes or even digital drawing. I’ve found, too, that clients tend to find the work informal enough that they can suggest changes and make edits. And sketching kills the need for-placement-only (FPO) images. So What?
Creating Nestable Dynamic Grids Learn how to create flexible and fluid grids which make nesting at arbitrary depths easy, while allowing full freedom for how the grid behaves in all viewports. With the rapid addition of responsive design and development to our workflows, since Ethan Marcotte’s A List Apart article in 2010, a myriad of tools have emerged to attempt to make our lives easier in developing responsive sites. All these tools, however, can be difficult to filter through in order to find a robust solution for our projects. In this article I will outline methods I have developed for creating flexible and fluid grids which allow for nesting at arbitrary depths, while allowing full freedom for how the grid behaves in all viewports. This is all possible with a big help from the excellent grid generator Gridpak, put together by the folks over at Erskine. What We’ll Be Able To Do Once we’re done here, we’ll have a grid which can do some of the following: and can be used to manage our layouts in the real world like so:
FlexNav - A jQuery Plugin for Responsive Menus A Device-Agnostic Approach to Complex Site Navigation FlexNav is a mobile-first example of using media queries and javascript to make a decent multi-level menu with support for touch, hover reveal, and keyboard tab input accessibility. Special attention is paid to touch screens using tap targets (the key feature of FlexNav). Note: If you find a bug, please file an issue and note device and browser versions. Download on GitHub → Basic Usage Start with a simple unordered list, adding in the class and data attributes:<ul class="flexnav" data-breakpoint="800"><li>... Add the small screen menu button somewhere outside your navigation markup:<div class="menu-button">Menu</div> Add flexnav.css to the head of your document:<link href="css/flexnav.css" rel="stylesheet" type="text/css" /> Add jquery.flexnav.min.js before the closing body tag:<script type="text/javascript" src="js/jquery.flexnav.min.js"></script> Initialize FlexNav right before your closing body tag:$(".flexnav").flexNav(); Options
5 astuces photoshop gratuites avec Photoshop CS5 sur Tuto Voici 5 astuces Photoshop CS5 gratuites pour débutants qui vous feront gagner du temps. Au cours de ce tuto gratuit, nous verrons donc : le paramétrage de la grille, le magnétisme des pixels, les repères commentés, la ré-initialisation des réglages d'un filtre et l'utilité de la fenêtre info. Jetez un oeil à ces autres tuto Photoshop CS5 Pour vous faire un avis, voici un extrait de quelques secondes. TefDesign , Formateur De formation BAC Pro dans la maintenance PC et réseau, je me suis converti depuis peu en Intégrateur WebDesigner. Toutes les formations de TefDesign D'autres tuto de TefDesign Notes attribuées par les utilisateurs ( 35 votes) Note moyenne des utilisateurs Votez pour ce tuto Les avis / Questions des utilisateurs ( 22 ) Donnez votre avis ou posez une question au formateur. Vous souhaitez commenter ce tuto vidéo ?
Caption Hover Effects | Codrops A tutorial on how to create some subtle and modern caption hover effects. View demo Download source Today we want to show you how to create some simple, yet stylish hover effects for image captions. The idea is to have a grid of figures and apply a hover effect to the items which will reveal a caption with the title, author and a link button. Please note: this only works as intended in browsers that support the respective CSS properties. The images used in the demos are Dribbble shots by talented Jacob Cummings. Let’s get started. The Markup The structure of our grid and the figures will be made of an unordered list and each item will contain a figure element. <ul class="grid cs-style-1"><li><figure><img src="images/1.png" alt="img01"><figcaption><h3>Camera</h3><span>Jacob Cummings</span><a href=" a look</a></figcaption></figure></li><li><figure></figure></li></ul> This is the default structure for all the grid examples. The CSS Effect 1 Effect 2
Image Techniques for Creating Depth in Web Design Creative manipulation of images, from layering to composition to special effects, can add depth to web projects. We live in a three-dimensional world, something that designers are trying to recreate in web design every day. The element of depth can add a greater touch of reality to certain design projects. Creating it can be easier than you think. Layering Layering is a tool that can be intentionally used in the way images and objects are placed in the design process, as a tool to manipulate images or purposefully in the image itself. We’ve all seen the layout where images are placed on top of each other haphazardly to look like a stack of printed photos. Often multiple photos are merged into one to create two distinct parts of an image – a foreground and another background. Another effective layering tool is laying a photograph or image over a seemingly flat background. Finally, some images are created with layering in mind. Photography But how do you compose photos in this manner?
BookBlock: A Content Flip Plugin - Demo 2 January 2013 Monday Tuesday Wednesday Thursday Friday Saturday Sunday 7Mon 8Tue 9Wed 10Thu 11Fri 12Sat 13Sun 14Mon 15Tue 16Wed 17Thu 18Fri 19Sat 20Sun 21Mon 22Tue 23Wed 24Thu 25Fri 26Sat 27Sun February 2013 4Mon 5Tue 6Wed 7Thu 8Fri 9Sat 10Sun 11Mon 12Tue 13Wed 14Thu 15Fri 16Sat 17Sun 18Mon 19Tue 20Wed 21Thu 22Fri 23Sat 24Sun March 2013 25Mon 26Tue 27Wed 28Thu 29Fri 30Sat 31Sun April 2013 1Mon 2Tue 3Wed 4Thu 5Fri 6Sat 7Sun 8Mon 9Tue 10Wed 11Thu 12Fri 13Sat 14Sun 15Mon 16Tue 17Wed 18Thu 19Fri 20Sat 21Sun 22Mon 23Tue 24Wed 25Thu 26Fri 27Sat 28Sun May 2013 6Mon 7Tue 8Wed 9Thu 10Fri 11Sat 12Sun 13Mon 14Tue 15Wed 16Thu 17Fri 18Sat 19Sun 20Mon 21Tue 22Wed 23Thu 24Fri 25Sat 26Sun 27Mon 28Tue 29Wed 30Thu 31Fri June 2013 3Mon 4Tue 5Wed 6Thu 7Fri 8Sat 9Sun 10Mon 11Tue 12Wed 13Thu 14Fri 15Sat 16Sun 17Mon 18Tue 19Wed 20Thu 21Fri 22Sat 23Sun 24Mon 25Tue 26Wed 27Thu 28Fri 29Sat 30Sun July 2013 August 2013 5Mon 6Tue 7Wed 8Thu 9Fri 10Sat 11Sun 12Mon 13Tue 14Wed 15Thu 16Fri 17Sat 18Sun 19Mon 20Tue 21Wed 22Thu 23Fri 24Sat 25Sun 26Mon 27Tue 28Wed 29Thu 30Fri 31Sat September 2013 2Mon 3Tue 4Wed 5Thu 6Fri 7Sat 8Sun 9Mon 10Tue 11Wed 12Thu 13Fri 14Sat 15Sun 16Mon 17Tue 18Wed 19Thu 20Fri 21Sat 22Sun
17 Useful & Fresh Tools for Web Designers Don't Forget to participate in a contest where you can win an amazing e-Commerce template from TemplateMonster. Despite the fact that there is a huge plethora of web tools that are available for the web developers and designers to help them with their work, designers and developers always need some fresh tool that can expedite their work flow. A useful tool is just like a blessing for the designer and for the web developer as well. Having good tools and useful resources make web development easier and save time as well. Mailrox A web application to quickly build bulletproof HTML emails. BootMetro Simple and complete web UI framework to create web apps with Windows 8 Metro user interface. Spritebox Spritebox is a WYSIWYG tool to help web designers quickly and easily create CSS classes and IDs from a single sprite image. Tiny Fluid Grid The happy & awesome way to build fluid grid based websites. Sequence.js Sequence is the jQuery slider plugin with infinite style. TiltShift Jarallax Favicon 0to255