background preloader

CSS Compressor

CSS Compressor

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.

Stitches - An HTML5 sprite sheet generator Drag & drop image files onto the space below, or use the “Open” link to load images using the file browser. Then, click “Generate” to create a sprite sheet and stylesheet. This demo uses a couple of HTML5 APIs, and it is only compatible with modern browsers. Drag & drop image files onto the space below, or use the “Open” link to load images using the file browser. Stitches is developed by Matthew Cobbs in concert with the lovely open-source community at Github. Copyright © 2013 Matthew Cobbs Licensed under the MIT license. Implementation After dependencies, Stitches requires a stylesheet, a script, and an HTML element to get the job done: The sprite sheet generator is automatically created in elements that have the stitches class: If you choose, any images that are a part of the initial markup will be loaded onto the canvas: Documentation Documentation is available here. Dependencies jQuery 1.7.1, Modernizr 2.0.6, Bootstrap 2.3.0 New Contributing License Download

Styling <hr> with CSS Introduction Even though it's sometimes recommended to replace the <hr> element with cascading stylesheets only using horizontal borders of other elements, I prefer <hr> as a section divider. This makes a web page more readable even in older browsers that receive only pure HTML with no style sheet. On the other hand, simple, unstyled <hr> does not look good in richly styled documents. That's why I tried to find a couple of cross-browser compatible ways to make it prettier. Which properties work Various CSS properties can be applied on <hr>: All three browsers allow setting width and height of the <hr> element. Examples Now, let's take a look at a couple of examples. so all rules are 80% wide and should have no initial borders. Let's add colors If you want to show a solid, red line, use the following code: color: #f00; background-color: #f00; height: 5px; and you get this result: Next three examples shows another variations that look reasonably well in all three browsers. What about images Notes 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.

Personnaliser une carte Google Maps - Tutorial Google met à disposition du public une application permettant de personnaliser graphiquement les Google Maps. Simple d’utilisation, elle permet à tous de générer un code que le développeur utilisera ensuite pour afficher une map personnalisée. Prise en main de l'interface de personnalisation Pour commencer, ouvrez l'éditeur de Google Maps personnalisées. L’interface est simple : en fond, la carte qui s’actualise automatiquement au fur et à mesure des modifications apportées. Exemple Pour comprendre comment marche l’outil, commençons par un exemple très simple : nous allons changer la couleur de l’eau. Centrez la carte où vous le souhaitez. Les éléments personnalisables dans la Google Maps En prenant un à un les éléments personnalisables de l'application, nous allons voir comment réaliser cette map en 10 minutes seulement : 1. Voici les modifications que nous allons apporter pour notre exemple : 2. › Man made : les surfaces occupées par des villes et villages › Natural : le reste 3. 4. 5. 6.

CSS Code Snippets For all it’s many advantages, sometimes it’s the little things that CSS layout makes difficult that really get to you. A logical and structured layout is the best way to go. Not only because your layout varies between browsers, but also because CSS has a lot of ways to position every element you have. Today we wanted to share with you some quick CSS code snippets on how to avoid easy pitfalls when creating your CSS layout, some of the following snippets are cross browsers while others are not. This is the first part in this series as there are SO MANY good tricks out there and if you see an easier or better methods, then post a comment below or email me so we add it in this series. 1. By Drew Douglass. 2. “Internet Explorer 6 is the only browser that recongizes the “* html _____” selector and thus is the only browser to read the hard-set height. of “height” as a min-height. href=" Walsh Another way to do this and make it valid CSS: 3. 4.

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