Powered by Blogger.

25 Code Snippets for Web Designers

originally from http://tutorialblog.org/25-code-snippets-for-web-designers-part5

Web Project Framework – The ESWAT web project framework is a kit that contains a folder structure and some pre-written components that I use whenever I start off a new web project
79.jpg

SwfIR – Using the dark arts of JavaScript and Flash, swfIR gives you the ability to apply an assortment of visual effects to any or all images on your website 206.jpg

Sexy Buttons with CSS – This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS 128.jpg

Uni-Form – Uni-Form is an attempt to standardize form markup (xhtml) and css, “modularize” it, so even people with only basic knowledge of these technologies can get nice looking, well structured, highly customizable, semantic, accessible and usable forms 225.jpg

PNG Overlay – Basically, it involves creating a transparent PNG overlay which can be used as a mask / frame around regular JPEG or GIF. This way, a typical CMS installation can be configured so users can upload photos without having to worry about using any graphics program to apply filters 2111.jpg

CSS-Based Form Template – Provided here is a flexible, semantically correct, and dare I say, accessible form template 312.jpg

CSS Cheat Sheet – All the CSS properties at a glance 48.jpg

New Clearing Method for IE7 – The easy clearing method described at Position Is Everything uses that to create a very convenient way of clearing floats without having to add extra markup. Unless I’m wrong that method will not work in IE7, since the box model bug was fixed in the original IE7 Beta 2 Preview 58.jpg

10 Free CSS and Javascript Calendars – Calendars may be used on webpages for various reasons, such as allowing users to easily pick a date in a form, or just to provide monthly information. Here are a list of various css and javascript calendars for use on your site 68.jpg

10 Free CSS Graph Resources – Often in web-based applications, developers want to be able to display on the fly graphs. Here are 10 CSS Generators or Techniques that may help you in generating CSS graphs 88.jpg

Master Stylesheet – One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling 98.jpg

Grid Calculator – Change the settings (by dragging the sliders, clicking on the bars, or editing the values) to calculate the overall width of your grid 108.jpg

Subtraction – It’s been about a year now since I first started thinking about creating some kind of definitive documentation about my approach to designing for the Web with the typographic grid as my primary layout tool 1112.jpg

101 CSS Resources – All the cool kids are using CSS to separate content from appearance on their sites. Here is 101 resources that will get your feet wet with CSS 129.jpg

CSS Boxes with Outside Frame (Rounded or Not) – The designer I work with wanted to have a site with information inside boxes. He also said that there would be a lot of boxes of variable height and width. More to that, the boxes needed to have a custom border all around and both the bottom side and the left one of the box would have a shadow that would be positioned above a random pattern 137.jpg

Ajaxian – JavaScript Round Corners with Drop Shadow 146.jpg

Heat Map – ClickHeat is a visual heatmap of clicks on a HTML page, showing hot and cold click zones 157.jpg

Ajax Poll Script – Download this Ajax script for creating a poll on your site 167.jpg

Ajax Load – Create your own animated gifs to indicate Ajax activity on your site 177.jpg

Ajaxian – Dynamic Right Click Context Menu 187.jpg

Plotr – I came across PlotKit, a well written piece of javascript that enables developers to use Canvas or SVG elements for rendering bar, line and pie charts. The only thing was that PlotKit needed the Mochikit library to work. So I took some parts of PlotKit and wrote some parts myself. The result is a lightweight charting framework (12kb!) named Plotr 197.jpg

Simple PHP randomizer – Display list items randomized 226.jpg

CSS Solid block menu – This is a lean, professional looking CSS menu that’s draped in a solid two color background image 235.jpg

8 Web Menus – I will show you some great examples in this posting which I hope you will enjoy and use on your websites. Some of them are built by me while other have credits but are free to use 245.jpg

CSS Link Backgrounds – Offering in-line external link backgrounds is challenging, especially getting them to work and look right with Internet Explorer 6. I decided to try it for myself to see what the fuss was all about 255.jpg

Bannerad

Artikel Terpopuler

Tags

Blogumulus by Roy Tanck and Amanda Fazani