WebTecker the latest Web Trends, Resources and News. » CSS

5 Time Saving CSS3 Tools and Generators

Brett — Wed, 16 Mar 2011 23:33:13 +0000

Below is a list of CSS3 Tools and Generators that will help you save time during your website Development. You can Also Check out 14 CSS Tools to Save you Time.

Ultimate CSS Gradient Generator

The Ultimate CSS Gradient Editor allows you to easily create CSS3 Gradients of any style and color. Another cool feature is the ability to see how the output will look in IE. Also they have quite of few preset gradients you can use. Ultimate CSS Gradient Editor was created by Alex Sirota.

CSS3 Generator

CSS3 Generator is a very cool tool. It allows you to change the border, border-radius, box-shadow, background gradient and opacity. Almost each property has optional and detailed settings like ability to define different border-radius values for each corner or selecting inset our outset shadow for box-shadow. CSS3 Generator was designed by Eric Hoffman and coded by Peter Funk.

CSS3 Button Maker

The CSS3 Button Maker is a very easy way to style your Buttons without coding anything. It gives you a number of sliders and color pickers to style your own CSS3 button. The CSS3 Button Maker was Created by Chris Coyier.

CSSWarp

CSSWarp is a CSS3 Text to Path Generator. It’s a very neat tool that uses the CSS3 Text-Transform Property. CSSWrap is a proof of concept but you cans still use it in your site. CSSWrap was created by Dirk Weber.

Border Radius

Border Radius is a very simple yet effective CSS3 Rounded Border Tool. You just type in the border you want and you are done. Border Radius was created by Jacob Bijani.

If you have any more CSS3 Tools and Generators Please Post them in the Comments!

SuperCoolCoupons.com will save you money!

Brett — Mon, 20 Apr 2009 19:10:23 +0000

In this tough economy it is always nice to be able to save money anywhere you can. You see a few days ago I was shopping on Amazon.com and when I was checking out I needed a coupon. This is where SuperCoolCoupons.com came in. SuperCoolCoupons.com is a website that collects coupons from hundreds of online merchants. One of the best features that I found on SuperCoolCoupons.com is the search feature. Just type in the url of the site in the search box (example: amazon.com, apple.com, dell.com, etc…) and you will get coupon codes for that site to save you money. SuperCoolCoupons.com is a very straight forward coupon site that gives you the deals you want to find. The website loads very fast and there are no annoying or distracting ads that you find on most Coupon sites. The best part of this site is that it is user-driven. Meaning any visitor can submit new coupons. You can also rate the coupon code to let others know if the coupon worked or not.

So if you need a coupon go to it will save you money!

List of CSS Frameworks

Brett — Thu, 17 Apr 2008 07:06:36 +0000

About a week ago a reader here named Andy Ford commented on the post 14 CSS Tools to Save you Time. Andy asked “why no mention of any CSS frameworks?”, well the truth is I really enjoy writing all on my own code and never looked into frameworks. But since I’ve heard these CSS Frameworks save lots of time and are fully tested in all browsers I decided to take a look at them and I put together a list of CSS Frameworks.

– Blueprint CSS framework created by Olav Bjorkoy is a framework that offers an easily customizable grid, sensible typography, and even a stylesheet for printing. A lot of the CSS in this project is completely based on work by other people, like: Jeff Croft , Nathan Borror, Christian Metts, and Eric Meyer. The Blueprint CSS Framework is available for use in all personal or commercial projects, under both the MIT and the GPL license.
– YAML aka “Yet Another Multicolumn Layout”, is an (X)HTML/CSS framework for creating modern and flexible floated layouts. YAML created by Dirk Jesse fully supports all IE versions. The YAML framework is published under the Creative Commons Attribution 2.0 License, which permits both private and commercial use. YAML is also very flexible and comes with a bilingual documentation. YAML even has a layout/css builder, that allows visual configuration of the basic layout elements, that is very cool.
– 960 Grid System created by Nathan Smith is a CSS framework for grids. The 960 Grid System’s purpose is to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. The reason for 960 pixels is because 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.
UI Grid CSS – The entire YUI CSS foundation includes the Reset, Fonts, and Grids packages. It even contains a grid builder to allow for faster development. The Yahoo! UI Grid CSS supports easy customization of the width for fixed-width layouts.
– Logic CSS framework is a collection of CSS files and PHP utilities to cut development times for web-standards compliant xHTML layouts.
– ESWAT is web project framework kit that contains a folder structure and some pre-written components. The ESWAT framework is meant to remove the hassle of recreating the same folders, HTML tags, CSS rules, Photoshop guides, etc.
– Elements is a CSS Framework that was developed by Ben Henschel. It lets you write CSS easier, faster, more efficient, and allows you to organize all of your project files. Elements goes beyond being just a framework, it’s its own project workflow.

If you know any other frameworks please don’t hesitate to comment. Also if you extensively use any of these frameworks I would love to hear from you.

Programing Cheat Sheets

Brett — Tue, 15 Apr 2008 03:27:27 +0000

After learning a few programing languages it gets hard remembering all of the functions and properties that programing languages come with. Below is a list of Cheat sheets to make your coding experience much easier and faster. The list is categorized by languages.

ActionScript

ActionScript Cheat Sheet – Covers everything from ActionScript 2.0 to ActionScript 3.0 and Even Adobe AIR.

Ajax/JavaScript Frameworks

Prototype Cheat Sheet – Detailed methods and properties of each of the modules within the Prototype JavaScript library.
Scriptaculous Cheat Sheet – List of the Effects.
MooTools Cheat Sheet – Details of the MooTools Library.
jQuery Cheat Sheet – Details of the jQuery Library version 1.2.x.
YUI Cheat Sheet – This cheat sheet is straight from Yahoo and the download link is at the bottom of the page or you can download the zip file here.

ASP

ASP/VBScript Cheat Sheet – Everything you want or need to know about ASP and VBScript.

CSS

CSS level 1 – Includes Fonts, Backgrounds, Text, Box, and Units
CSS level 2 – Includes Box Model, Print, Fonts, Visual Effects, Pseudo Classes and Elements.
CSS 2 Quick Reference Guide – Shows you examples on how to use a wide variety of classes
CSS Cheat Sheet – Lists all selectors (as of CSS 2.1) and properties.
CSS Property Index – Lists all CSS Properties Alphabetically
CSS Shorthand Guide – A fairly detailed guide of CSS Shorthand properties

C# and VB.NET

C# and VB.NET Comparison Cheat Sheet – Cheat sheet that highlights some key syntactical differences between C# and VB.NET.
C# Basic Reference Sheet – A Brief Cheat sheet to give you the basics of C#.
VB.NET Basic Reference Sheet – A Brief Cheat sheet to give you the basics of VB.NET.

C++

C++ Cheat Sheet – This Cheat Sheet shows a list of C++ Containers
C++ Quick Reference Sheet – Is a Basic Cheat Sheet that doesn’t go that in depth.

JavaScript

JavaScript Cheat Sheet – The JavaScript cheat sheet is designed to act as a reminder and reference sheet, listing methods and functions of JavaScript.
JavaScript Quick Reference – Consists of the JavaScript and Browser Objects Quick Reference.
Regular Expressions for JavaSript – Excerpts of the VisiBone JavaScript references

SQL

SQL Cheat Sheet – A very Basic SQL Cheat sheet but gives you all the necessary data.
SQL Server Cheat Sheet – Cheat Sheet to Microsoft’s SQL Server.
MySQL Cheat Sheet – A quick reference guide for MySQL, including functions (both in MySQL and PHP), data types, and sample queries.

PHP

PHP Cheat Sheet – This is an in depth cheat sheet for PHP.
PHP Reference Sheet – This Sheet gives you basic functions for PHP but useful.

If you have any more to add to this list than please comment below. Also if you would like other languages added please comment below

14 CSS Tools to Save you Time

Brett — Mon, 07 Apr 2008 21:52:38 +0000

As a web designer/developer you must continue to find ways to reduce the time it takes to design/develop websites. This is very important to improve your productivity and to maximize your profits. The CSS Tools below, which are categorized by function, are here to save you time designing websites.

Optimizer/Formatter

CSSTidy – CSS Tidy is an open source CSS parser and optimiser.
CleanCSS - CleanCSS is a powerful CSS optimizer and formatter. Based on CSSTidy
CSS Optimizer – CSS Optimizer reduces the file size of cascading style sheets.
CSS Analyzer – CSS Analyzer allows you to check the validity of your CSS against the W3C’s validation service

Font

Em Calculator – EM Calculator calculats pixel font sizes to ems.
CSS Font and Text Style Wizard – This wizard is good to experiment with font and text styles and generate sample CSS style source code.

Forms

CSS Form Code Maker – Generates ‘Colorful Box Layout’ For Forms
JotForm – JotForm is a web based WYSIWYG form builder

Navigation/Buttons

CSS Buttons - Css Button and Text field Generator.
CSS Menu Generator – CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons.

Generator

CSS Creator – Css Creator is a layout generator that will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer.
QrONE CSS Designer – QrONE is an online CSS generator and editor.
Web 2.0 Generator – Web 2.0 Generator creates a full website layout with HTML and CSS.
CSS Mate - CSS Mate is an online CSS editor.

If you have any more tools that could help you save time then please comment below.

Top 7 List of free 50+ CSS Website Templates

Brett — Wed, 12 Mar 2008 18:16:49 +0000

This is a list of a 7 free 50+ CSS website templates that will help you get started on building your website. This list will not only give you the CSS and HTML but some will also give you the graphic files.

TemplateBox: 275 free website, logo, banner, and flash templates to accompany their collection of paid templates.
Free CSS Templates: 270+ templates which is frequently updated with new submissions.
Template Perfection: 230+ free templates with quite a few non-english oriented templates.
Zymic: 80+ free templates that includes HTML Pages, CSS, Images, PSD Files, and Blank Images Files.
Art for the Web: 75 free templates that is a good place to look for something slightly out of the ordinary.
Ricky’s Web Templates: 50+ free templates, graphics, and buttons.
TemplateWorkz: 48 free web templates, along with some basic logo and newsletter templates.

If you would like to add to this list please comment below.

Create Beautiful Forms with Niceforms 1.0

Brett — Sat, 08 Mar 2008 17:59:24 +0000

Lets face it creating your own beautiful user friendly forms is hard, but with Niceforms its a hole lot easier. Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can develop your own look. Niceforms is incredibly easy to use and will help you create some very nice forms.

Photoshop like DHTML Color Picker

Brett — Mon, 18 Feb 2008 18:38:50 +0000

This is a light weight color picker that is very easy to use. It uses the least amount of code in comparison with it’s competitors: 3.5k of Javascript. DHTML Color Picker is one of the easiest scripts to use and I highly recommend it. It’s fully customizable and uses CSS and Javascript.

Pure CSS Footer

Brett — Sat, 16 Feb 2008 20:19:14 +0000

We’ve all had problems with getting the Footer to always stay on the bottom of the page. Now that problem is gone with Sicky-Footer written by Ryan Fait. This is very easy to implement and with minimum coding for both the CSS and HTML. It works in all browsers IE 5 and up, Firefox, Safari and Opera.

CSS3 Opacity Property

Brett — Sat, 16 Feb 2008 19:56:56 +0000

If you haven’t heard, you can create an opacity for an image in CSS3 without using JavaScript or any hack. To see the whole image use opacity:1.0 and to see nothing use opacity:0.0;. In order for the opacity to work in IE you must use filter:alpha(opacity=100). For CSS opacity to work in the browser it must have some placement specified, like float:left and that works for Internet Explorer, Mozilla Firefox and Opera. The code is below for a 50% Opaque:

.image_opacity {

float:left;

opacity: 0.5

filter: alpha(opacity = 50);

}

To learn more visit Mandarin Design

Internet Explorer PNG Fix

Brett — Wed, 13 Feb 2008 06:45:57 +0000

If you ever had trouble with PNG files in IE then this is the fix for you. This fix is very easy to implement and is a great script. I’ve been looking for a script to fix this problem and I finally found it. The script has been created by TwinHelix and is an amazing. All you need to do is add the following code to your CSS img, div { behavior: url(iepngfix.htc) } You can modify that script to include any ID or Class elements. You also have the option to add it to JavaScript if you feel more comfortable. One more thing you need to add the iepngfix.htc file to the same directory as the file with the PNG.

Add reflections to images without an image

Brett — Fri, 08 Feb 2008 19:45:07 +0000

Have you ever wanted to add a reflection to your image without doing it in your favorite photo editing software? Well now you can with reflection.js written by Christian Effenberger. Reflection.js works well with logos, icons and dynamic image content such as forum avatars. It uses unobtrusive javascript to keep your code clean and its very easy to implement. It works in all the major browsers and on older browsers your visitors won’t notice a thing.

Cross-Browser Gradient without Images

Brett — Thu, 07 Feb 2008 21:38:51 +0000

Yes that’s right you can create a gradient without using images and even better is that it works Cross Browser. The Javascript was written by slayeroffice and it is an easy script to implement.

To create the gradient you must first add the Javascript to the top of the page.

<script type="text/javascript" src="gradient.js">script>

Then add the following class to any element you wish.

You can change anything after gradient. You may also change vertical to horizontal to make a horizontal gradient and change any of the colors to any color you want.

Add Style to your HTML Tables

Brett — Wed, 06 Feb 2008 19:04:08 +0000

Add style to your HTML Tables use Tablecloth. Tablcloth is a wonderful script written by Alen Grakalic. This script allows you to highlight the rows and columns of any table with any style using CSS. It makes your tables very user friendly and it requires very little coding. Tablecloth only works when you are displaying tabular data.

Tablecloth Features:

Tablecloth will highlight rows or columns (or both).
Tablecloth adds selected state on click. Based on preferences it then selects rows or columns (or both). Unselect elements by clicking anywhere on the page.
It leaves room for you to modify the script for your own use.

Rounded Borders in CSS without Images

Brett — Wed, 06 Feb 2008 02:42:12 +0000

curvyCorners is a great free unobtrusive JavaScript script that will create rounded corners for any HTML DIV element. It is so easy to implement and it works so well. With this script you will no longer need to create rounded corners in any image editing software.

The Script Supports the following Features:

Easy to use JavaScript object
Full Anti-Aliasing support
Anti-Aliasing over graphical backgrounds
Background-image support (round corners of images)
Fluid height/width support
Solid border support, any color/width with Anti-Aliasing
User defined per corner radiuses