MakeUseOf Directory » css

BearCSS: Create CSS Stylesheets Using HTML

Hammad — Mon, 06 Feb 2012 02:01:07 +0000

If you want to create a prefect stylesheet (CSS) based on your HTML markup, then check out Bear CSS.

BearCSS is a handy tool for web designers, who want to create stylesheets using your markup. All you have to do is write your HTML, upload it and Bear CSS will automatically generate a CSS template based on HTML elements you used.

To use the service, just click on the “Upload HTML” button and choose the HTML file from which you want the markups taken from – the website will automatically check the HTML elements and draw up a CSS template file from the HTML one.

Once done, you can download the CSS file to your local computer and use it in whatever way you want.

Features

Simple and easy to use.
Effective way to draw up CSS template stylesheet without errors.
Saves time as CSS template file is chalked up using your own made HTML file.
Similar sites: Csspivot, CSS3-Generator, Typeset Style Generator, CSSPrefixer, CSS Warp, TextSnip and Codepad.

Check out BearCSS @ www.bearcss.com

CSSBorderRadiusGenerator: Generate CSS Code For Desired Border Radius

TehseenBaweja — Tue, 31 Jan 2012 04:01:49 +0000

Before CSS3 came into play, developers had a really hard time putting round corners in their design and usually had to go through images or multiple DIV tags. CSS3 solved that problem by introducing the Border Radius element, but it still requires you to write a few lines of code specially if you have to specify different value for each corner. CSSBorderRadiusGenerator however lets you generate CSS code for your desired values automatically.

Just enter the value you want for each corner, and specify if you want support for Gecko, WebKit and CSS3. As soon as you make your choices, the tool generates CSS code for you that you can copy and use in your stylesheet. There is now download or registration required.

Features:

Generate CSS code for rounded corners.
Specify desired value for each corner.
No registration required.
Similar tools: CSSRound, CornerShop, HTML and CSS Rounded Corner Button Generator and Rounded CSS Boxes.

Visit CSSBorderGenerator @ www.borderradius.com

CSSSuperScrub: Make CSS Cleaner & Smaller

TehseenBaweja — Mon, 30 Jan 2012 02:01:25 +0000

CSS files can get pretty complex and messy especially if you have worked on them over time. CSSSuperScrub is a simple web based tool to clean your CSS of unneeded content and reduce it in both size and complexity. It does that by removing redundant calls, removing unnecessary white space, indenting CSS, and intelligently grouping elements together.

Simply enter the URL of your CSS file and click submit. The tool will instantly give you a new CSS file that you can copy to your site. It also displays the percentage reduction in the size of your CSS file and lets you customize some of the scrubbing options by turning them on or off.

Features:

Scrubs your CSS file of unneeded elements.
Intelligently groups elements together.
Enter URL of your CSS file to start.
No registration required.
Similar tools: CSSLint, Gridcalc, Colorspire, CSS3 Dropshadow Generator, and Layerstyles.

Visit CSSSuperScrub @ www.isnoop.net/tools/css.php

CompareNinja: Create HTML & CSS Comparison Tables Online

Hammad — Mon, 26 Dec 2011 02:01:32 +0000

If you are looking for a simple and easy way to create a HTML and CSS comparison chart, then you should give Compare Ninja a try.

Compare Ninja is an online website that allows people to create beautiful HTML & CSS based comparison tables. All of this is accomplished in a matter of minutes and the result can be displayed on your website/blog or anywhere you want.

To start off, click on the “Create Now” button, after which you will be required to make an account on the website. Once done, log in and start to fil in the basic details, i.e. table title, items to compare, table width, etc. Choose the design. Once done, edit the fields accordingly and click the “Get Code” button to get the HTML & CSS code for the comparison table.

Features

Free and easy to use.
User-friendly themes make comparison tables look beautiful and appealing.
Comparison tables can be edited at moments notice – HTML & CSS code available.

Check out Compare Ninja @ www.compareninja.com/index.php

Gridlover: Quickly Create Grids & Obtain Their CSS Code

MOin — Thu, 10 Nov 2011 23:01:35 +0000

Creating grids for webpage designs is not easy work. You have to code up your grid, preview any changes you make, and continue to do so till you get something you are satisfied with. A web service called Gridlover greatly simplifies the task by letting you create a grid and obtaining its CSS quickly.

Gridlover is a free to use web tool that will be highly useful to webmasters and graphics designers. The app helps you quickly create grids that you want and obtain their CSS codes. You can start using the site without signing up for anything. Head on over to Gridlover’s homepage, scroll down a bit, and you will find the customizable grid. In front of each grid category such as font size, you will find a quantity highlighted in blue. Click on this blue highlighted text and move it left or right to decrease/increase its value.

The changes you make are updated on the grid right away. When you are satisfied with the grid you have created, you can use the button in the top right of the site to obtain the grid’s CSS.

Features:

A user-friendly web service.
Lets you create grids easily.
Provides CSS code for grids you create.
Does not require any sign-ups.
Similar tools: CSSGridBuilder, Variable Grid System, Fluid Grid Calculator and TinyFluidGrid.
Also read related article: Selected 25 CSS Applications and Tools.

Check out Gridlover @ www.gridlover.net (via Web Resources Depot) (by MOin from Thumb Press)

CSSLoad: Create Custom Loading Icons & Obtain Their CSS Code

MOin — Thu, 29 Sep 2011 01:01:24 +0000

Web app creators often employ loading icons for their applications. Coding up these loading icons from scratch can be quite time-consuming. But you can make the process much faster by using a web tool called CSS Load.

CSS Load is a free to use web tool that lets you get customized loading icons for web apps. You start by selecting an icon type from the ones available on the site’s homepage. Next you customize the icon’s colors, dimensions, and animation speed.

A preview of your loading icons is shown in the right-most pane. The preview can be viewed in front of a plain background, a black one, or a grid one.

When you are satisfied with your icon you can click on the “Get code” button and obtain your icons’ CSS to use in your projects.

Features:

A user friendly web tool.
Generates CSS code for loading icons used in web apps.
Lets you customize colors and dimensions of icons.
Lets you preview icons in front of different backgrounds.
Similar tool: SpinJS.
Also read related article: How To Create An Animated Loading Image Easily.

Check out CSSLoad @ www.cssload.net (by MOin from Urban Savior)

Prefixr: Create Cross-Browser CSS In Seconds

TehseenBaweja — Sun, 07 Aug 2011 21:01:35 +0000

Over the past few years, different vendors have introduced specific prefixes for their browsers. To some designers, this is a good thing as it allows them to do more, but some hate the extra amount of coding it requires. Prefixr is a tool that solves this problem by quickly making your CSS compatible with all major browsers.

Simply paste your CSS code and click submit. The tool will then take your code and tweak the prefixes so your CSS becomes cross-browser compatible. You can also instruct the tool to compress your code and exclude certain browser kits such as WebKit or MOZ. Another pretty good feature of the tool is that it lets you integrate to any code editor through its API.

Features:

Create cross-browser CSS easily.
Use Prefixr in your favorite code editor via its API.
Choose to exclude certain browsers.
No registration required.
Similar tools: WebPutty, CSS Gradient Editor, CSSPrism and ProCSSor.
Also read related articles: 11 Useful Tools To Check, Clean & Optimize Your CSS File, Selected 25 CSS Applications and Tools

Visit Prefixr @ www.prefixr.com

WebPutty: CSS Editor With Preview & Syntax Highlighting

MOin — Sun, 24 Jul 2011 21:01:53 +0000

Copying the CSS off your website, changing it in a regular text editor, and then returning to your browser to preview the changes is not the best way to go about the process. Here to make matters much easier and simpler is a web service called WebPutty.

WebPutty is a currently free web service for developers. The site lets you easily edit, preview, and publish the CSS for your websites. You sign into the site using your Google account. Next you add your websites and add a link tag plus a script tag to the end of your website’s element. From then on, you will easily be able to view the stylesheets for your added sites on your WebPutty dashboard.

Along with added lines and syntax highlighting, the CSS editor for the stylesheets lets you preview your changes. Two preview modes – preview and publish – let you view the editing stage and the published result of your CSS. The URL of the stylesheet being edited can be found at the top of your preview pane. A publish button in the CSS editing area lets you implement your modified CSS right away.

Features:

A user-friendly web service.
Lets you edit your site’s CSS.
Adds lines and syntax highlighting to your code for better editing.
Lets you preview your changes.
Similar tools: CSS Gradient Editor, CSSPrism and ProCSSor.
Also read related articles: 11 Useful Tools To Check, Clean & Optimize Your CSS File and Selected 25 CSS Applications and Tools.

Check out WebPutty @ www.webputty.net (via ReadWriteWeb) (by MOin from Urban Savior)

Fluid Grid Calculator: Generate Code For Customized Fluid Grids

Umar — Sun, 03 Jul 2011 21:01:45 +0000

Fluid grids offer great flexibility in design and can certainly help with the prototyping portion of a web design. While designers can certainly code up their own fluid grids, much valuable time can be saved if they used Fluid Grid Calculator instead.

Fluid Grid Calculator is a website that generates the code for fluid grids. All you have to do is enter the specifications of your grid: total number of columns, width per column, and the gutter pixels. With these figured entered, you can click on the “Get the grid!” button and obtain its code.

Features:

A user-friendly web tool.
Very helpful for web developers.
Generates code for fluid grids.
Lets you specify grid properties.
Similar tools: CSSGridBuilder.
For more CSS tools see our article “11 Useful Tools To Check, Clean & Optimize Your CSS File“.

Check out Fluid Grid Calculator @ www.csswizardry.com/fluid-grids (By Umar from TechCityInc)

GradientScanner: Easily Get The CSS For Gradients In An Image

MOin — Tue, 28 Jun 2011 23:01:39 +0000

Coding up the CSS for gradients in an image can be a difficult matter if you do not use the proper tools. But thanks to a web service called GradientScanner, the gradients in your image are automatically detected and their code generated.

GradientScanner is a free to use web service that lets you upload an image and then draw a line indicating the color gradients. This line is shown underneath the image displaying the variation in the gradient. Clicking on the “Next” button located in the bottom right quickly generates the code for the gradient with a slider letting you modify the count and deltaE to modify the color matching sensitivity.

Features:

A user-friendly web service.
Lets you get the code for gradients in an image.
Supports images stored on your computer.
Lets you draw line to indicate gradient.
Lets you modify count and deltaE to modify the color matching sensitivity.
Similar tools: CSS Gradient Editor, Ultimate CSS Gradient Generator, CSS3-Generator, Quick 3-Color CSS3 Gradient Generator, CSS3 Gradient Generator and CSS3.me.

Check out GradientScanner @ gradient-scanner.com (by MOin from ThumbPress)