Centering a Horizontal Menu Bar When Adobe first introduced Spry, our goal was to bring Ajax capabilities to the web design community, allowing designers to create web pages that provided a richer experience for the end user. As we know, however, the web evolves at a blistering pace. Over the last couple of years, frameworks such as JQuery have evolved to encompass many of the capabilities originally envisaged for Spry, making Spry as a standalone offering less relevant. As we can continue to focus our efforts in furthering the web, we have decided to no longer invest in the development of Spry. Going forward, Adobe will continue to make contributions to JQuery UI, JQuery Mobile and other frameworks so as to help web designers create rich web and mobile experiences. Download Spry from Adobe GitHub account
DD_roundies: Code-only rounded HTML boxes 2011/4/8: It is high time I update the documentation here. This plugin got as far as supporting IE8 Release Candidate 1. That was a while ago. I spent some time away from the project before IE8 final was released. Foolishly, I never wrote anything to this effect because I'd hoped to give it a new college try at some point. Turns out I like riding my bicycle during my free time more than maintaining this project. That said, IE9 is supposedly offering itself as an update. This was a neat experiment, but note that I never took the version numbers out of "alpha" mode. If I were truly sore on this subject, I would take this page down; I will leave it up for posterity instead. This is a Javascript library that makes creation of rounded-corner HTML boxes easier, with a focus on Internet Explorer. IE is supported through use of VML. Since Opera doesn't currently (time of writing: 2009-01-01) support border-radius, this library doesn't do anything in Opera. Table of Contents Quick summary:
Cross browser CSS slide show 12th April 2006 copyright © stu nicholls - CSS play Information I have had many visitors asking how they could produce a slide show or photogallery using a mixture of portrait and landscape images. Well this is one way that it could be done It works in a similar manner to my previous examples except that I have removed the 2x image on hover (this was a bit of a gimmick anyway) and have gone straight for a click to produce the full size image. Yet again all photographs are taken from the stock.xchng For this to work, without scrolling, your visitor will need a screen resolution capable of displaying the whole projector screen. Hacks have been added to make it work in IE5.5 for people browsing using the standalone version. Cascading Style Sheet If you look at the header of this page you will see that the normal method of loading a file is used for the non-ie browser css files. The slide_show.css file The IE only style sheets are loaded using the conditional comment. The slide_show_ie.css file
CSS3 Gradient Buttons Last week I talked about Cross-Browser CSS Gradient. Today I'm going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values. What Is So Cool About These Buttons? Pure CSS: no image or Javascript is used. Preview The image below shows how the button will display in different browsers. Button States normal state = gradient with border and shadow styles. hover = darker gradient active = gradient is reversed, 1px down, and darker font color as well. General Styles For The Button The following code is the general styles for the .button class. For more details on border-radius, text-shadow, and box-shadow, read my article The Basics of CSS3. Color Gradient Styles The code below is the CSS styling for the orange button. How To Use My Buttons?
DD_belatedPNG: Medicine for your IE6/PNG headache! 2011/4/8: This is no longer an actively maintained project. I apologize, I must move on with current events. This is a Javascript library that sandwiches PNG image support into IE6 without much fuss. You can use PNGs as the SRC of an <IMG/> element or as a background-image property in CSS. If you attempt the latter, you will find that, unlike with vanilla usage of AlphaImageLoader, background-position and background-repeat work as intended. As a bonus, "fixed" elements will respond to a commonly used set of Javascript style assignments, as well as the A:hover pseudo-class. Table of Contents Long story short, this uses Microsoft's implementation of VML instead of Microsoft's AlphaImageLoader filter. The intended implementation is pretty easy: Download a copy of the DD_belatedPNG Javascript file - please do not hotlink mine, I am on a shared host. Due to popular demand, here is some documentation for how to "fix" elements on a pick-and-choose basis. (Based on the normal usage approach)
Moving a picture around slowly Top 10 CSS Table Designs Video Screencasts #130: First Moments with Grunt There are all these tasks that we need to do as front end developers. Concatenate and compress our files. #127: Basics of JavaScript Templating A template is a chunk of HTML that you need to inject onto the page. #126: Using Modernizr Should Modernizr be part of every modern web project? #124: A Modern Web Designer’s Workflow This is a presentation I gave at conferences in late 2012 and early 2013. It talks … #121: The Right CMS is a Customized One The perfect CMS to suite the needs of any non-trivial content-oriented website does not come out-of-the-box. #119: Let’s Answer Forum Posts! In this screencast we live answer more forums posts with no planning whatsoever. #117: Let’s Attempt To Do a “Pull Request” I’ve never in my life submitted a “Pull Request” on GitHub. #115: Don’t Overthink It Grids Even if the layout of a site is simple as a main content area on the left and a sidebar on the right, that’s a grid. #113: Creating and Using a Custom Icon Font
[Valid] Markup Validation of Congratulations The document located at < > was successfully checked as XHTML 1.0 Transitional. This means that the resource in question identified itself as "XHTML 1.0 Transitional" and that we successfully performed a formal validation of it. "valid" Icon(s) on your Web page To show your readers that you have taken the care to create an interoperable Web page, you may display this icon on any page that validates. A full list of icons, with links to alternate formats and colors, is available: If you like, you can download a copy of the icons to keep in your local web directory, and change the HTML fragment above to reference your local image rather than the one on this server. Linking to this result If you would like to create a link to page (i.e., this validation result) to make it easier to revalidate this page in the future or to allow others to validate your page, the URI is < Validating CSS Style Sheets ↑ Top
Cool notification messages with CSS3 & jQuery Nowadays, UX is a key factor when it comes about creating/designing a product or system. To keep users happy, developers struggle to create a good experience and a better interactivity. UX is a term used to describe the overall experience and satisfaction a user has when using a product or system. Notification messages are an important part of the user experience and you can't afford to omit them. In this article, you'll learn how to create some alert messages with CSS3 and jQuery. View demo Message Types Bellow is a list with common notification messages: InfoErrorWarningSuccess Info Its purpose is to inform user regarding a relevant matter. Error When an operation has failed, the user must be notified. Warning This type of message notify the user of a condition that might cause a problem in the future. Success The success message should be displayed after user successfully performs an action. The HTML <div class="info message"><h3>FYI, something just happened! The CSS The jQuery Conclusion Updates
CSS Message Boxes for different message types Can you believe this: Few days ago I went to my bank to check my credit score with the Credit Bureau. The bank official typed in my personal data and sent a request. Web application responded by displaying a yellow message box with an exclamation icon saying that data processing is still in progress. He checked several more times, but he didn't notice that at one moment the message changed to "Account available". But the message box hasn't changed. He continued to check a few more times and eventually he realized that the request was successful. I don't know what was in the minds of developers and designers who created this application, but it certainly wasn't the user. To prevent this, different message types should be displayed differently. I will show you a remake of CSS message boxes I used on my latest project. Let's first take a quick look at message types. 1. The purpose of information messages is to inform the user about something relevant. Informational messages 2. 3. 4. 1. 2. 3.
Tabbed Navigation Using CSS Introduction The contents of this tutorial – including the images, HTML, JavaScript and CSS – is licensed under an MIT license and is therefore free for you to use. Attribution is appreciated, but not required. Hello, fellow web designer! This tutorial will teach you how to create low-bandwidth tab navigation on a web page using CSS. Throughout the tutorial, I try to explain most of the things I am showing you, at a somewhat basic level. This tutorial follows a few guidelines of mine, which mostly revolve around the accessibility of the web page. The HTML and CSS should validate against the World Wide Web Consortium's respective validators. If your browser is capable of styling content, you'll notice that the text in some paragraphs stand out more. Now that we've got that out of the way, let's get started! Other languages This article is also available in the following languages: Step 1: The structure Cooking up the HTML The title The table of contents Result: That's it! The content The tabs