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. The idea is to make a box with the menu item slide out, while a thumbnail pops up. 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: If there is no submenu, the div can simply be left out.
The CSS We will start by styling the unordered list: Genrally, we want to remove any default text-decoration and outline for all the link elements in our menu: We are using a background image that creates a glass like effect with a semi-transparent gradient. P.S. Subtle CSS3 Typography that you’d Swear was Made in Photoshop. Vertical Sliding Info Panel With jQuery. This is an example of simple page that's centered and has a vertical sliding panel on the far left (try it! Click on the 'infos' tab that's on the left!).
We used jQuery to create this sliding panel (and CSS3 rounded corners because it looks cool) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Ut purus metus, fermentum vitae pulvinar vel, elementum eget nulla. 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) - Smashing Magazine. Advertisement Although CSS is generally considered a simple and straightforward language, sometimes it requires creativity, skill and a bit of experimentation. The good news is that designers and developers worldwide often face similar problems and choose to share their insights and workarounds with the wider community. This is where we come in. We are always looking to collect such articles for our posts so that we can deliver the most useful and relevant content to our readers.
In this post, we present an overview of useful CSS/jQuery coding tips, tricks and techniques for visual effects, layouts and web form design to help you find solutions to the problems you are dealing with or will have to deal with in future. You may want to look at similar CSS-related posts that we published last months: CSS Layouts: Techniques And Workarounds Facebook Style Footer Admin Panel4Learn how to re-create the Facebook footer admin panel with CSS and jQuery. Adaptable View: How Do They Do It? 50 Brilliant CSS3/JavaScript Coding Techniques - Smashing Magazine. Advertisement CSS3 is coming. Although the browser support of CSS 3 is still very limited, many designers across the globe experiment with new powerful features of the language, using graceful degradation for users with older browsers and using the new possibilites of CSS3 for users with modern browsers.
That’s a reasonable solution — after all it doesn’t make sense to avoid learning CSS3 (that will be heavily used in the future) only because these features are not supported yet. The point of this article is to give you a glimpse of what will be possible soon and what you will be using soon and provide you with an opportunity to learn about new CSS3 techniques and features. In this post we present 50 useful and powerful CSS3/jQuery-techniques that can strongly improve user experience, improve designer’s workflow and replace dirty old workarounds that we used in Internet Explorer 6 & Co. Visual Effects and Layout Techniques With CSS3 Navigation Menus With CSS 3 Learning New CSS3 Selectors.
Brian Cherne's Porfolio. Welcome to my portfolio. This is not a showcase of *all* the work I've ever done -- the list below is a subset of the projects and clients I've worked with. Please contact me if you have questions. brian(at)cherne(dot)net YourReebok ActionScript@FluidAugust 2007 - August 2008 YourReebok (née RbkCustom) is a Flash-based, shoe configurator that Fluid built in 2005 and has maintained since. FineStationery Web Site HTML/CSS/JavaScript@FluidAugust 2006 - October 2006 FineStationery.com sells customized stationery and party invitations to consumers. The North Face In-Store Kiosk Interaction Design@FluidJanuary 2006 - March 2006 Fluid teamed up with Microsoft and The North Face to showcase emerging technologies using real-world products.
Macrovision TotalPlay HTML/CSS/JavaScript@FluidApril 2005 - November 2005 Macrovision is an industry leader in intellectual property protection technologies. The North Face Web Site HTML/CSS/JavaScript@FluidDecember 2003 - March 2004 Sanrio Shop Timberland Custom Boots. Interaction Design and Design Strategy. 1.3.0 (1/25/2012): Add custom events to allow control via custom JavaScript. Fixed intermittent loading issue on Chrome. Fixed IE issues. Refactored code to be more readable. Final version outside Foundation. 1.2.3 (3/17/2011): Fixed a number of issues including: Fixed issue of false parameters failingCan now have just 1 slide without it failingReorganized kit download to isolate "demo" pieces and core codeIncluded jQuery 1.5.1We've edited some of the docs here around "Content" slides 1.2.1 (2/3/2011): Changed caption styles to not break on different sized sliders and added documentation in here about positioning other than relative. 1.2 (1/20/2011): Content compatible, new loading animation, thumbnail navigation for bullets, animated captions, no more overflow hidden on the container, restructured the markup & js, changed the base UI, added callback, mouseover pause, better timer interactions and re-browser tested.
Exactly How to Create a Custom jQuery Accordion. Accordions can be very useful for showing lots of different sections of data in a small amount of space. jQuery UI has a built in Accordion function, but according to the jQuery UI Build your Download, the size of the Core jQuery UI and Accordion scripts are 25kb and 16.6kb, respectively. Today, I'll show you how to build a custom accordion that is more "bandwidth efficient". That seems like a lot for just one simple accordion.
Especially when you add in the normal jQuery script, which is 18kb minified and Gzipped. So instead of increasing your page load time with the extra unneeded functionality, why not create something from scratch? I also think that writing things from scratch really gives you a much better understand of how to use jQuery effectively, without always turning to use someone else’s code. So the plan for this tutorial is to show create an accordion using the jQuery UI function, then create one using some custom coding.
The Markup The CSS The jQuery UI Accordion That’s it. Quick Tip: Working with the Official jQuery Templating Plugin. Just this week, the jQuery team announced that Microsoft's templating plugin (along with a couple others) is now being officially supported. What this means is that the plugin will now be maintained and updated directly by the core team. In this video tutorial, we'll review the essentials of the plugin, and why it's so awesome. As a quick example, we'll, again, refer to the Twitter search API example from Friday (think Bieber). The only difference is that, this time, we'll use an HTML template to attach the returned data, rather than muddying up our JavaScript!
Months ago, Andrew Burgess introduced you to this plugin, still in beta. However, today, we'll integrate the plugin into real-live code. Crash Course Step 1 : Import jQuery and the Templating Plugin Step 2 : Create your Template Notice how this template is wrapped within script tags, and that a type of text/x-jquery-tmpl has been applied. Step 3 : Find Some Data to Render! Step 4 : Where Should the Mark-up Be Rendered? Final Source. Five Minute Upgrade | Build Internet! Add a Mobile Landing Page to Your Site Give mobile visitors a way to quickly access your company phone number, email, or just directions to the office. Five Minute Upgrade – Make Your Workstation (More) Ergonomic If you pile on hour after hour in front of a screen, maybe you should take the time to make sure you’re as comfortable as you could possibly be – which is where ergonomics comes in.
Five Minute Upgrade – Writing Blog Post Titles That Grab Attention How are you going to make the perfect elevator pitch for your article? Hold on a second, take some deep cleansing breathes, let’s take a look at some ways to make titles really grab the attention of your audience. Five Minute Upgrade – Making Your Design Pop Don’t get hung up on a dull design, before jumping ship take a minute to get versed in how to add some extra flair. Five Minute Upgrade – Increase Scannability The average visitor is not going to take the time to read everything you have written, they will glance over it. 6 Killer Text Replacement Tricks to Improve your Typography.
Typography has long been a large part of graphic, and web design. In the past though, web design has had to suffer typographically, with any text that was wanted in a non web safe font (a font already stored locally on users computers) had to be rendered as an image; not exactly brilliant for the user interface department. Font’s like Lucida Grande, Helvetica and Myriad Pro were as exciting as it got. Not any more though. Over the last few years we have seen the rise of some fantastic tools to allow us to get creative with the typefaces we use on our websites. 1.Google Font API Google recently entered the font replacement game with their free Font API and font directory.
However, like most of Google products, it is a fantastic piece of engineering, and is incredible easy to use. To learn how to implement the Google font API, Jeffrey Way at Nettuts has made a fantastic quick video. 2. If you are willing to pay premium for your web fonts then, this is the way to go. 3. 4. 5. sIFR 6. Website Anatomy Class | Build Internet!
Nivo Slider - The Most Awesome jQuery Image Slider. Beautiful transition effects Nivo Slider offers 16 transition effects ranging from slicing and sliding, to fading and folding, making your galleries interactive and fun. No coding skills needed Create a beautiful experience when playing your gallery of images without any advanced coding. Include the image slider in your posts and pages using a simple shortcode. Automatic image cropping Nivo Slider crops and resizes images to a specified size, so you don’t have to do it manually for each image. No more time wasted. Responsive and mobile ready The generated image sliders are completely responsive. Everyone loves Nivo! Time to make the best of your website’s’ image galleries. Pre-built slider themes You can choose the style of your sliders from the awesome pre-built themes.
Create sliders from categories or galleries Besides the classic image sliders, Nivo allows you to choose between Category and Gallery sliders. Post types support Create carousels Testimonials 30 day money back guarantee. 20 Websites To Help You Learn and Master CSS. CSS can be both a tricky and easy to learn. The syntax itself is easy, but some concepts can be difficult to understand. It’s super important to understand because your website’s reputation partially relies on it, as it is the backbone of your web design. This article features 20 excellent websites to help you “grok” CSS. There’s a wide range of websites included – from blogs to directory-style lists and websites that focus on one particular topic related to CSS. 1. A List Apart CSS Topics A List Apart, the premier site to read articles about web design and best practices, has a collection of articles on the topic of CSS dating back to 1999. 2.
CSS Help Pile is an aggregate of CSS resources, tips, and how-to’s. 3. CSS Basics is formatted like a book with 18 chapters dedicated to educating readers about fundamental CSS concepts. 4. Holy CSS Zeldman (not a site by Jeffrey Zeldman) is a useful collection of resources that link to standards-based CSS tutorials, tools, and layouts. 5. 8. 9. Tuts+ Network.
Super Easy Typographic Portrait in Photoshop. Last year we posted on Abduzeedo a very cool post about typographic portraits, the 45 Amazing Type Faces - Typographic Portraits became one of the most popular posts on Abduzeedo, and a lot of people asked me how to create that effect in Photoshop. We have also posted a little tutorial showing how to do that using, Flash Photoshop Quick Tips #5 - Typographic Portrait, however I decided to create a nice typographic effect using just Photoshop.
So in this tutorial I will show you how to create a really cool and super easy typographic portrait in Photoshop. We will use the Displace filter and some Blend Modes to achieve the effect. The whole process is quite simple but it might take you some time to add the texts and elements, but once you do that the rest is very straight forward. Step 1 Open Photoshop and create a new document. Step 2 Duplicate the layer and go to Image>Adjustment>Desaturate. Step 3 With the Horizontal Type Tool (T) create text boxes and start adding texts. Step 4 Step 5 Step 6. CSS-Tricks. Design Web. Los Angeles Web Designer | Web Designer & Front-end Developer - Soh Tanaka | Servicing All of Los Angeles County, South Bay Torrance, and more. Psdtuts+ | Adobe Photoshop tutorials, from beginner to advanced. Veerle's blog 3.0 - Webdesign - XHTML CSS | Graphic Design.