Category

Mobile

10 Must Have CSS Tools for Web Developers to Prettify, Remove, Compress and Generate CSS

By | Mobile | No Comments
  1. ProCSSor

    With this online CSS Prettifier you can just copy/paste your CSS (or upload the file or type a URL), choose whether to have it “neat,” “pretty,” or “awesome,” and ProCSSor will clean up and improve your CSS. With a useful – and optional – fail-safe mode, this tool is now also available as a native Mac application.

  2. Remove Unused CSS

    GTmetrix’s Page Speed tool provides a report for any web page, breaking down page load speed by a wide variety of factors. Can be used as a bookmarklet and to compare different web pages. With unneeded CSS rules often a factor in excessive load times, identifying which CSS-related processes are not optimized for speed of loading can be extremely important. Google note about Remove Unused CSS.

  3. CSS Compressor

    Cut down on the size of your CSS stylesheets by choosing which level (highest, high, standard, low) of compression you want (as level decreases, legibility of the resulting file also decreases). Just copy/paste the CSS you wish to compress. You can identify the specific properties you wish to compress (colors, font-weight, unnecessary backslashes/semicolons, etc.).

  4. CSS3 Generator

    Need some CSS but not quite sure how to code it? This tool will do the work for you, and covers a number of popular style items ranging from the simple to more complex. Examples of CSS styling possibilities include border radius, multiple columns, and shadows and transitions of various kinds.

  5. CSSTidy

    Clean, Optimize and Compress CSS, does your CSS need tidying up? With similar options to the CSSCompressor tool, this one also lets you upload a CSS file or access that file at a given URL. Has three compression levels (low for development, medium for staging, high for production) and four CSS options to choose from (colors, font-weight, lowercase selectors and unnecessary backslashes).

  6. SpritePad

    Create and Edit CSS Sprites, SpritePad has a three-step process for creating and editing CSS sprites in seconds. Drag and drop an image and the tool creates a PNG sprite and the appropriate CSS code for immediate use. A free account gives you cloud storage for your sprites. Premium features are also available, and a guided tour helps first-time users.

  7. CSSMatic

    CSSmatic gradient generator allows you to use multiple colors and opacity stops to create amazing gradient effects with smooth color changing style or subtle transparencies. The Noise Texture tool is lets you create great patterns for use as background. The box shadow, lets you create nice shadow effect for your <div>s with the ability to specify the blur and spread radius. Great time-savers when building interfaces.

  8. CSS Type Set

    CSS Type Set is a hands-on typography tool that allows designers and developers to interactively test and learn how to style their Web content

  9. Blueprint CSS

    Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing

  10. CSS EM Calculator

    Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.

Spritepad Drag & Drop CSS Sprites Generator

By | Mobile | No Comments

CSS sprites are great for minimizing the number of requests our websites perform by embedding multiple images in a single image and displaying the appropriate ones using background-position. However, once the images are placed on a canvas, finding the positions of each item is a time-consuming process, here comes in SpritePad as an impressive web app.

Create Pure CSS Icons using just CSS and semantic HTML

By | Coding, Mobile | No Comments

An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints. This is not a “production ready” CSS icon set. The HTML is very simple and it relies on CSS pseudo-elements rather than extraneous HTML elements.

Known support: Firefox 3.5+, Safari 5+, Chrome 5+, Opera 10.6+.

Pseudo-elements

Pseudo-elements provide many possibilities to developers interested in writing semantic HTML. If you’re looking for practical uses of pseudo-elements, this experiment gave me the idea for the technique used to create Multiple Backgrounds and Borders with CSS 2.1. But these GUI icons were atechnical exercise.

Example code

Some of these GUI icons can only be created in browsers that support CSS3 transforms.

The HTML is a basic unordered list of links.

Each icon uses its own set of styles. For example, the key parts of the CSS responsible for the “expand” icon are as follows:

The demo page contains a full set of user interaction and media player control icons, as well as other common icons. For now, several icons actually require more than one element as CSS 2.1 only specifies 2 pseudo-elements per element that can contain generated content. The CSS3 Generated and Replaced Content Module allows for an unlimited number of pseudo-elements but has yet to be fully implemented in any modern browser.

Source: nicolasgallagher.com

20 Free Online CSS3 Generator Tools

By | Mobile | No Comments

CSS3 has taken web designing to a new platform. With features like css3 rounded corners and text-shadow, designers are no longer required to rely on bulky CSS hacks or graphics. However, with different browsers having their specific implementation of CSS3 it’s a load on designers to remember the syntax for each and every browser.

To make your work easy there are many CSS3 generator that helps to simplify the task. By just moving the sliders or giving in some values (for e.g. Border radius for the box) and the generator will generate CSS3 code with multiple browser support. So, now you need not to worry about the css3 browser support and use these generators to reduce your work load and development time.
1. CSS3.0 Maker Generator :- It is a free tool to practice on css properties , values and let you to generate a simple Cascading Style Sheets for your site or blog .

2. CSS3 Please :- It is a cross-browser CSS3 rules generator . With this generator you can easily edit edit the css3 values and use them on your stylesheet .

3. CSS3 Button Maker :- It is a cool css3 button maker tool and provides you various options to draw things , pick colors to create your own css3 buttons .

4. CSS3 Pie :- This CSS3 progressive internet explorer tool makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration properties and features like rounded corners, soft drop shadows and gradients .

5. CSS3 Generator :- This online css3 tool will let you generate CSS3 properties for border radius, box shadow, text shadow, RGBA, @font face, multiple columns, box resize, box sizing, outline .

6. CSS3 Generator :- It is a simple generator which helps you to understand capabilities of CSS3 .

7. CSS3 Gradient Generator :- The CSS3 Generator is a useful tool to get various gradients results and provides a simple graphical user interface for working with CSS webkit .

8. CSS3 Menu :- It is a amazing free CSS3 menu generator , which let you generate css menus and buttons with css3 rounded corners, css3 gradient and css3 shadows.

9. CSS3 Gen :- This CSS3 generator helps you to create useful snippets for border radius , box shadow and text shadow easily . Just select the CSS3 element , customize it in browser and then paste it into your project .

10. CSS3 Rounded Corner Generator :- It is a useful tool and helps you to generate the necessary code , which is used to make rounded corners (border-radius) with right css3 properties for your webpages.

11. CSS3 Click Chart :- This CSS3 Click Chart or help charts showcase all new css properties with a clickable heading that opens a box at the bottom of the page for information on that particular feature.

12. CSS3 Selectors Test :- It is a amazing tool that let you conduct small tests that are being used together for determining if your browser will work with CSS selectors or not, and If any selector of CSS is not compatible with CSS3 Selectors test, it will be marked automatically.

13. Quick 3-Color CSS3 Gradient Generator :- This handy tool will let you create linear and radial gradients easily  with simple procedure .

14. CSS Border Radius Generator :- This css3 border generator tool help you to create stylish and good looking curved corners for your web page .

15. Border Image Generator :- This tool will help you to generate codes for border radius properties and allows a single image to be used to style the borders and background of a particular element.

16. CSS3 Column Generator :- It is a css3 multi column generator tool and compatible with chrome , safari , firefox and mozilla deerpark . Tool is in different language but you can use Google translate tool for English .

17. CSS3 Sandbox :- It tool will help you to generate linear gradients, radial gradients, text shadows, box shadows, transforms and text stroke.

18. Xeo CSS :- It is a web-based tool for generating clean code for new CSS3 properties . It is also a good CSS3 gradient generator styling tool for web designers.

19. CSS Corners :- It is a handy tool with nice CSS3 gradient maker options and professional looking rounded corners .

20. CSS3 Gradient Button Generator :- It is amazing css3 button generator combined with shadows and rounded borders .

15+ Web developer Tools a Front-end Developer can’t life without

By | Mobile | No Comments

IE WebDeveloper Toolbar

Is a free plugin The Microsoft Internet Explorer Developer Toolbar provides a variety of tools for quickly creating, understanding, and troubleshooting Web pages. Features:

  • Explore and modify the document object model (DOM) of a Web page.
  • Locate and select specific elements on a Web page through a variety of techniques.
  • Selectively disable Internet Explorer settings.
  • View HTML object class names, ID’s, and details such as link paths, tab index values, and access keys.
  • Outline tables, table cells, images, or selected tags.
  • Validate HTML, CSS, WAI, and RSS web feed links.
  • More

FireBug

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

  • Inspect HTML and modify style and layout in real-time
  • Use the most advanced JavaScript debugger available for any browser
  • Accurately analyze network usage and performance
  • Extend Firebug and add features to make Firebug even more powerful
  • Get the information you need to get it done with Firebug.
  • More

Safari Developer Tools

Apple has brought its expertise in Mac OS X and iOS development tools to the web. Safari includes a powerful set of tools that make it easy to modify, debug, and optimize a website for peak performance and compatibility. To access these tools, enable the Develop menu in Safari’s Advanced preferences.

CSS Grid Builder

CSS Grid Builder is an online GUI for customizing the YUI Grids CSS – a lightweight CSS framework developed by Yahoo! that comes with over 1000 page layout combinations. The CSS Grid Builder allows you to rapidly generate a CSS-based, web-standards compliant page layout in a matter of minutes (or even seconds). Once you’ve got the page layout the way you want it, all you have to do is press “Show Code” and it generates the HTML for you.

CSS Compressor, Minify CSS

Use CSS Compressor to compress CSS to reduce CSS code size and make your web pages load faster. You can select from four levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. It is quick, easy and free!

GIMP Photoshop

Adobe Photoshop is the undisputed heavyweight king of image editing, capable of satisfying every conceivable print- and online-imaging desire. However, like Visio, Photoshop’s features don’t come cheap. One very capable alternative is GIMP, an open source image manipulation program capable of producing very impressive graphics and sporting an extensible interface similar to Photoshop’s plugin community.

BrowserShot

Even though browser developers have made great strides towards standards compliance in recent years, it goes without saying that you should always “trust, but verify” (i.e. test your website within multiple browsers residing on multiple operating systems). Yet many developers might not have a Mac or even a Windows machine at their disposal. A great alternative is BrowserShots, an online utility capable of not only testing browser compatibility on multiple operating systems, but also multiple browser versions within these systems. Further, it tests compatibility with a number of lesser-used browsers, including Lynx, K-Meleon and Konqueror.

GreenShot Screenshot grabber

Whether you’re creating Web-based user documentation or sending clients screen grabs of user interface prototypes, you’ll need a capable tool for taking screenshots. Yet it wasn’t until relatively recently that capable open source solutions were available. If you’re a Windows user, I recommend Greenshot, a great utility capable of not only taking screenshots but also manipulating and sending screenshots.

FireQuery

Allows you to debug and code jQuery code. Requires Firebug.

FirePHP

Allows you to debug and code on the fly with PHP. Requires firebug.

Online CSS3 creator

Spits out CSS code that will be able to be viewed across different CSS3 capable browsers.

FontSquirrel

Ever wanted FREE @Face-Fonts that are very easy to use? Font Squirrel takes all the head-aches out of using fonts on the web.

Lorem Ipsum Text Generator

An easy way to get some text for making content in mockups.

IETester

If you want to test older version of Internet Explorer I recommend that you look at this tool called IETester.

SEO HTML Cheat Sheet

This cheat sheet cover most of what you need, Important SEO Html Tags, Search Engine Indexing Limits, Recommended Title Tag Syntax, Common Canonical Issues, Important Search Engine Robot User-Agents etc.

CSS Frameworks, cut down on your development time.

By | Graphics, Mobile | No Comments

A CSS framework, also known as a web design framework is a pre-prepared library that is meant to allow for easier, more standards-compliant styling of a webpage using the Cascading Style Sheets language. Just like programming and scripting language libraries, CSS frameworks (usually packaged as external .css sheets inserted into the header) package a number of ready-made options for designing and outlaying a webpage.

Modernizr: start implementing CSS 3 and HTML5 features now

By | Mobile | No Comments

So, you’re a front-end developer, and you want to start taking advantage of new features in CSS 3 and HTML5. That’s great, but you know that most of your users aren’t running browsers that support these new standards. You could just wait for browsers to get with the times, or you could check out Modernizr.

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Modernizr uses feature detection to test the current browser against upcoming features like rgba(), border-radius, CSS Transitions and many more. These are currently being implemented across browsers and with Modernizr you can start using them right now, with an easy way to control the fallbacks for browsers that don’t yet support them.

Additionally, Modernizr creates a self-titled global JavaScript object which contains properties for each feature; if a browser supports it, the property will evaluate TRUE and if not, it will be FALSE.

Lastly, Modernizr also adds support for styling HTML 5 elements. This allows you to use more semantic, forward-looking elements such as , and without having to worry about them not working in Internet Explorer.

Modernizr does not add missing functionality to browsers; instead, it detects native availability of features and offers you a way to maintain a fine level of control over your site regardless of a browser’s capabilities

How to become an iPhone developer in 5 steps without learning Objective-C

By | Mobile | No Comments
  1. Buy a Mac
    You’ll need one with an Intel-based processor, running the Leopard version of MacOS X. It doesn’t have to be a top of the range model, though.
  2. Sign-up as an official developer
    If you plan on releasing your masterpiece at any point, you’ll need to sign up with the iPhone Developer Program. The Standard cost is $99, and it involves agreeing to Apple’s terms and conditions, and signing and returning the contract. Even if you’re nowhere near completing the project, you’ll need to sign up in order to test your code on an actual iPhone rather than an onscreen emulator. Once you’re on the Developer Program you’re sent a certficate, which allows you to pair up with an iPhone device.
  3. Download the SDK (software development kit)
    Apple provides the free SDK for iPhone development from their Developer site and this includes everything you need to get going, including the development environment Xcode, the iPhone Simulator for testing, performance analysers, interface builders and the full documentation reference library.
  4. Choose an iPhone Web developer Frameworks
    If you’re a web developer who wants to build mobile applications in HTML and JavaScript (Like I do) while still taking advantage of the core features in the iPhone, Android and Blackberry SDKs, PhoneGap is for you. PhoneGap framework includes a complete Xcode Sample application to get you right on track!
  5. Submit your app to Apple

Usefull Links

  1. iPhoneWebDev
  2. Open source libraries for IPhone Development
  3. jQTouch: A jQuery plugin with native animations, auto list navigation, and default application styles for Mobile WebKit browsers like iPhone, G1, and Pre.

Webkit 3D Cube using new CSS transformations

By | Coding, Mobile | No Comments

Paul Hayes has been playing with CSS transformations and making 3D cubes:

The impression of a three dimensional cube can be created using modern CSS techniques, without the need for JavaScript, imagery, canvas or SVG. Using the proprietary transform property to skew and rotate shaded rectangles, individual cube faces can combine to form a 3D object. Currently only supported in recent WebKit and Gecko based browsers, most importantly Firefox 3.5+ -moz-transform (documentation) and Safari 3.2+ -webkit-transform (documentation).

This resulted in:

A 3D cube created with CSS
Supported browsers: Safari 3.2+, Google Chrome, Firefox 3.5+

Experiment with multiple cubes and CSS transitions, still no JavaScript
Supported browsers: Safari 4+, Google Chrome

WebKit initially put this in (iPhone needed it after all!) and it will be interesting to see what users come out of it. The full CSS for the simple example is below:multiple-cubes-css

Top 9 CSS and HTML validation services

By | Mobile | No Comments

Tools and services to validate css / html / code.

  1. Walidator.com : front end to most common official validators
  2. Markup Validation Service : Markup Validation Service by W3.org
  3. CSS Validator : CSS Validation Service by W3.org
  4. CSSCheck : CSS validator at HTMLHelp
  5. Feed Atom and RSS Feed Validator : Atom and RSS Feed Validator at FeedValidator.org
  6. HTML Validator : online validator by CSE
  7. HTML Validator : HTML validator at HTMLHelp
  8. Page Valet : SGML/HTML validation
  9. LIFT Online 5 Pages Free Trial : html and accessability validation at UsableNet

Top 17 CSS Tutorials

By | Coding, Mobile | No Comments

Sites with long, multiple tutorials on CSS.

  1. CSS Basics.com : Learn everything you ever wanted to know about the basics of CSS
  2. CSS Tutorials : at EchoEcho
  3. CSS Tutorials : Eric Meyer / Meyerweb
  4. CSS Tutorials : at Tizag
  5. CSS Tutorials : at Tutorialized
  6. CSS Tutorials : at W3 Schools
  7. CSS Tutorials : CSS guide, Tutorials, Articles at WestCiv
  8. CSS Tutorials/Examples : Position Is Everything
  9. CSS Demonstrations and Tutorials : at DoMedia
  10. Floatutorial : CSS Tutorials on Float
  11. Listutorial : CSS Tutorials on Lists
  12. Selectutorial : CSS Tutorial on Selectors
  13. CSS Beginner’s Guide : at HTMLDog.com
  14. CSS Intermediate Guide : at HTMLDog.com
  15. CSS Advanced Guide : at HTMLDog.com
  16. Stylesheets : at HTMLSource
  17. Project Cool: Web Development Basics : CSS Tutorials at DevX