http://www.designtopx.com Web Design tips, tricks, and tutorials Mon, 18 Jul 2011 18:19:52 +0000 http://backend.userland.com/rss092 en The jQBoxModel plugin is a plugin for jQuery that allows you to quickly prototype complex layouts. This plugin was developed to streamline the page layout process by using % widths to have your main content width take up a percentage of the ]]> http://www.designtopx.com/2011/07/beat-your-html-layouts-into-submission-with-jqboxmodel-plugin/ One thing I envy about more advanced programming languages is their heavy use of XML to set the properties of controls. This demo is my attempt to use jQuery’s XML processing capabilities to mimic similar behavior. In particular, this demo will display notifications of various types with some robust customization options all within a nicely [...]]]> http://www.designtopx.com/2011/02/jquery-notifications-plugin/ This showcase highlights some standouts from companies you have heard of like CBS, Disney, and also some you may not have heard of. Each of these mobile websites attempt to make the mobile experience as good as possible even with limited bandwidth and screen space.]]> http://www.designtopx.com/2010/12/20-great-mobile-websites-that-beautifully-complement-their-desktop-sites/ CSS3 can be used to help enhance the look of your website for visitors who view it in better web browser.]]> http://www.designtopx.com/2010/12/modernize-your-web-design-with-these-css3-snippets/ Roundups are a popular way to list inspirational design, plug-ins, any other information that would be useful for web designers. I wanted to take the opportunity to show a roundup in an interesting way using jQuery and an HTML image map.]]> http://www.designtopx.com/2010/07/wordpress-theme-viewer-rgb/ Here i have created a colorpicker web application that is based on the colorpicker hosted on jQuery UI's website. To make it more useful to web designers I have added another slider to represent transparency. Additionally, the return values are now printed on the page as the sliders are moved left or right so they can be copied and pasted into your CSS file.]]> http://www.designtopx.com/2010/07/jquery-ui-based-colorpicker/ In this article I will take a basic portfolio website and enhance it with CSS3 properties like text shadow, box shadow and border-radius which are supported in newer browsers such as Chrome, Safari, Firefox and even the latest version of Opera. The website also has special consideration for Internet Explorer.]]> http://www.designtopx.com/2010/06/modern-css3-one-page-portfolio-template/ CSS 2.1 introduced advanced selectors with basic expressions that allow you to more easily target elements in the DOM for styling without creating extra classes in your HTML markup. Modern browser all offer support for this but IE only offers partial support in version 8. Here is a jquery plug-in to help earlier versions of Internet Explorer use these techniques.]]> http://www.designtopx.com/2010/06/iecss-a-jquery-plug-in-to-help-modernize-internet-explorer/ Here is a quick web design tool which simply shows a fairly good range of hex colors arranged by the level of RGB shown as a gradient. You can copy the hex codes and use them in your designs. Visit the demo page (link below) to see it in action.]]> http://www.designtopx.com/2010/05/html-color-grid-hex-shortcodes-for-your-designs/ Sometimes there is not enough space to present all the information you need on a web site. Here I present a very simple tool-tip solution. In the example presented in the demo, the tool-tip will appear if you hover over a link (in this case the link is an abbreviation). The link needed further information but presenting it on the web page would have interrupted the flow of the other list items so the solution is to display the additional information in a tool tip.]]> http://www.designtopx.com/2010/05/super-small-css-tooltip-works-in-all-modern-browsers/