background preloader

50 Extremely Useful And Powerful CSS Tools - Smashing Magazine

50 Extremely Useful And Powerful CSS Tools - Smashing Magazine
Advertisement We love useful stuff. For months, we have been bookmarking interesting, useful and creative CSS tools and related resources. We have been contacting developers, encouraging them to improve their tools and release their handy little apps to the public. Last year we prepared and published some of them in a series of smashing posts about CSS1. Now again is the time to give these tools the attention they deserve. Below, we present 50 extremely useful CSS tools, generators, templates and resources. We strongly encourage you to develop these tools further, build on the ideas presented here, release new tools for the public and let us know about them. Please take a look at the following related posts: CSS and Typography Hyphenator8Hyphenator.js brings client-side hyphenation of HTML documents to every browser by inserting soft hyphens using hyphenation patterns and Frank M. CSS Online Tools

Related:  CSS

Learn CSS Positioning in Ten Steps: position static relative absolute float 1. position:static The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set. 2. position:relative If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. CSS Sprites + Rounded corners Introduction Yes, I know that there are thousands of tutorials regarding rounded corners with CSS, but anyway, I wanted to show you this way too. Hopefully, you will find it useful.

Best Practices for Speeding Up Your Web Site The Exceptional Performance team has identified a number of best practices for making web pages fast. The list includes 35 best practices divided into 7 categories. Minimize HTTP Requests tag: content 80% of the end-user response time is spent on the front-end. Beautiful CSS3 Search Form Lately I've been playing around with CSS3 and discovered some new CSS tricks. Did you know you can make a round circle with border-radius and create inner shadow effect with box-shadow inset? Check out this beautiful search form demo that I've created with CSS gradient, border-radius, and box-shadow. It displays perfect in CSS3 browsers and degrades gracefully in non-CSS3 browsers. View Demo Search Form Round Circle Trick

10 Useful CSS/JS-Coding Solutions For Web-Developers - Smashing Magazine Advertisement Often creative and truly remarkable design solutions remain unknown because we, designers, simply overlook them. Being busy with our own projects, we sometimes try to grasp the intuition behind (probably) complex and cluttered code of other designers to understand how they manage to implement particular design ideas.

Free CSS Layouts And Templates - Smashing Magazine Advertisement As a web-developer you don’t have to re-invent the wheel all the time. If it just has to work, and has to be valid, and has to have a nice, visually appealing design hierarchy, you just can use css-techniques developed in the web-dev-community over the last few years. If you take a look around, you’ll find many templates, which include basic (X)HTML/CSS-markup.

The Ultimate List of Online CSS Tools This is a list of online css tools to help web designers produce code easier and quicker. Fonts Typetester Typetester is an online application for comparison of the fonts for the screen. Em Calculator Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. HTML5 - Responsive Web Design It all started with Responsive Web Design, an article by Ethan Marcotte on A List Apart. Essentially, the article proposed addressing the ever-changing landscape of devices, browsers, screen sizes and orientations by creating flexible, fluid and adaptive Web sites. Instead of responding to today’s needs for a desktop Web version adapted to the most common screen resolution, along with a particular mobile version (often specific to a single mobile device), the idea is to approach the issue the other way around: use flexible and fluid layouts that adapt to almost any screen.

CSS 2.1 and CSS 3 Help Cheat Sheets (PDF) - Smashing Magazine Advertisement Today we are glad to release two useful cheat sheets that will help you quickly look up the right CSS 2.1-property or an obscure CSS 3 property. The style sheets contain most important properties, explanations and keywords for each property. The help sheets were created by GoSquared and released for Smashing Magazine and its readers. Photoshop Darkness Logo Tutorial This tutorial will show you how to create a great looking dark logo using Adobe Photoshop. Start by Opening a new document Now using the text tool type the word “Darkness” on the screen using white as the color. The font that I am using is blade 2 and the size is 150px. The Blade 2 font can be downloaded here. Now open the Layer Style window by right clicking the layer and selecting Blending Options.

CSS gallery CSS TEA - 120 Excellent Examples of CSS Horizantal Menu Saturday, 13 December 2008 17:42 Menu is an important element of website. Menu has to be user-friendly and match the design in order to facilitate navigation. In this list you will find 120 excellent examples of css horizontal menu.

Related:  css