background preloader

CSS Compressor

CSS Compressor
Related:  Frameworks and Libraries

CSS Analyser Contents Translations Spanish Version About this Service This service has been provided to allow you to check the validity of your CSS against the W3C's validation service, along with a colour contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement. If the CSS is specified by a URL, it will be loaded into the text area to offer an option to make changes for testing without having to re-upload. A special thank you to Roberto Scano who suggested extending the service to incorporate the validation of CSS, and validating units of measurement. [Back to the contents] Colour Contrast Guideline 2.2 of the Web Content Accessibility Guidelines 1.0 requires that foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits, or when viewed on a black and white screen. This page is provided to allow you to check the contrast of two colours using the W3C's colour contrast algorithm. Units of Measurement

Word HTML Cleaner A tool to strip Microsoft’s proprietary tags and other superfluous noise from Word-generated HTML documents, leaving all the basic goodness intact. File sizes are greatly reduced, and the returned markup is easier to read, revise and employ. This is intended for fairly basic styled text documents: please don’t upload your 50,000-word richly illustrated annual report and expect a nice slim web page in return. If however you’re used to writing in Word and you regularly find it awkward to get your text ready to publish online, this is the tool for you. Typographer’s quotes and dashes, and other non-ascii characters, are converted to HTML entities to increase their portability amongst browsers and operating systems. Basic styling and structure, as well as links, image references and tables, should come through intact. HOW TO USE : Save a Word document ‘as Web Page…’ to your hard drive (this will not work with ordinary Word files, e.g., filename.doc).

70 Expert Ideas For Better CSS Coding Advertisement CSS isn’t always easy to deal with. Depending on your skills and your experience, CSS coding can sometimes become a nightmare, particularly if you aren’t sure which selectors are actually being applied to document elements. An easy way to minimize the complexity of the code is as useful as not-so-well-known CSS attributes and properties you can use to create a semantically correct markup. We’ve taken a close look at some of the most useful CSS tricks, tips, ideas, methods, techniques and coding solutions and listed them below. And what has come out of it is an overview of over 70 expert CSS ideas which can improve your efficiency of CSS coding. We’d like to express sincere gratitude to all designers who shared their ideas, techniques, methods, knowledge and experience with their readers. Update (29/05/2007): Brazilian-Portuguese translation of the article2 is also available. 1.1. 1.2. 1.3. Keep containers to a minimum. 1.4.

Refresh CSS Automatically With CSSRefresh Javascript Here were looking at a small Javascript resource which will check when you have changed your CSS files and will automatically refresh your browser. In modern development using CSS3 you can design a full website directly in the browser, in this situation you are making changes to your CSS files switching back the browser, refreshing the page to see the change. If you are making small changes to box-shadows/colour gradients you can be switching between browser and CSS file a lot. What Is CSS Refresh CSS Refresh Javascript file makes the switching so much easier by taking away the refresh and waiting for the browser to reload. All you have to do is include the Javascript file in your web page and as soon as you make changes to your CSS files you will see the changes without having to refresh the page. How To Use CSS Refresh Download Download the script from the CSS Refresh website. CSS Refresh Download Include this file one your page in the head tag. Bookmarklet

CSS3 Facebook Buttons Buttons To create the default "button" add a class of uibutton to any appropriate element. To create the blue variant include an additional class confirm. To create the green variant include an additional class special. <a class="uibutton" href="#">Button</a><button class="uibutton" type="submit">Button</button><input class="uibutton" type="submit" value="Button"> Larger buttons To create larger buttons inclue an additional class of large. Grouped buttons To created grouped buttons wrap them in an element, or use a list, given the class uibutton-group. <div class="uibutton-group"><a class="uibutton" href="#">Dashboard</a><a class="uibutton" href="#">Inbox</a><a class="uibutton" href="#">Account</a><a class="uibutton" href="#">Logout</a></div><ul class="uibutton-group"><li><a class="uibutton" href="#">Dashboard</a></li><li><a class="uibutton" href="#">Inbox</a></li><li><a class="uibutton" href="#">Account</a></li><li><a class="uibutton" href="#">Logout</a></li></ul> Mixed groups New message Download git clone Instantiation jQuery( '.parallax-layer' ).parallax( options ); What does jquery.parallax do? jParallax turns nodes into absolutely positioned layers that move in response to the mouse. With a bit of CSS you can either set up windows to see these layers through, or leave them free to roam about. The diagram on the right illustrates what jParallax does to the html: and here's a demonstration with some images: More demos demos/index.html demos/stalkbuttons.html - multiple parallax. demos/remotecontrol.html - parallax by remote control. demos/thumbnails.html - beautiful interactive thumbnails. demos/target.html - demonstrates how smoothly jParallax handles window resizing. Using jParallax The default behaviour of jParallax is to show the whole width of a layer in response to the mouse travelling the whole width of the mouseport. There are various ways to style jParallax effectively. Options Layer Options Events

Online javascript beautifier Coda - One-Window Web Development for Mac OS X Good question. Coda is everything you need to hand-code a website, in one beautiful app. While the pitch is simple, building Coda was anything but. How do you elegantly wrap everything together? More than anything else, Coda is a text editor. But an incredible text editor is just a nice typewriter if you can’t easily handle all of your files — from anywhere. Then you’ll want to see what your code looks like. Believe it or not, we’ve just scratched the surface. Finally, hiding behind the Plus button in the tab bar is a built-in Terminal and MySQL editor, two amazingly powerful Tab Tools. And it’s all wrapped up in our Sites, which get you started quickly. Coda is a very good app.

Collection Of CSS Resets Now with the difference in the multiple browsers that are being used we need to a way of trying to standardise them so we have a chance of creating a consistent design for each of the browsers. There are some small differences with the different browsers on how some elements behaviour, for example IE tend to add extra padding and margins to elements than the other browsers. This can cause your designs to look different or even throw some design off depending on the browser. Other browsers might behaviour differently to floats and clears, which can make your designs look off. To get around this problem we can use a bit of CSS that will reset the browser defaults to something we setup making all the browsers render elements the same. Here is a list of some of the most popular CSS reset files. Eric Meyer’s “Reset CSS” 2.0 The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The HTML5 CSS Reset

CSS3 Box Shadow Generator - CSS3gen Use this CSS3 box shadow generator to quickly generate box shadow CSS for your project. Your browser does not support the CSS3 box-shadow property. You can still use this tool to generate the CSS3 rule, but you won't be able to see the results. <div class="error_msg">Please enable Javascript to use this page. Box Shadow Explained The CSS3 box-shadow property allows you to add depth to your website's design without the need for images or extra container elements. While the syntax is easy to understand, it is hard to visualise the style using just code. The box-shadow syntax works as follows: The first value defines the distance of the box shadow in the x (horizontal) direction and the second value defines the distance in the y (vertical) direction. Optionally you can include an additional parameter after the blur distance: This defines the spread distance of the shadow. Supporting Browsers

A Hand-Coded Designer CSS UI Kit Web UI sets have been around for ages, but this takes things a step further. This free UI Kit is coded by hand using HTML5 and CSS3 so you can easily drop these elements into any project you're working on. This code is made to take advantage of modern browsers and to degrade gracefully in older versions of internet explorer, so no matter what your client or visitor is using they will be see an excellent design. Preview A screenshot of UI set is below, but to really see what this looks like you should take a look at the live preview. How to Use This HTML5 UI kit uses very few tweaks to work in all browsers and you can get started in just three steps. Internet Explorer Compatibility First, there are two important files that must be included for internet explorer to understand the HTML5 tags. Include the CSS Either copy the specific lines of CSS that you require from the included stylesheets, or just include the entire file. Insert the HTML That’s it! License, Usage, and Sharing