Blogfreakz - Web Design and Web Development resources » CSS Layout

A Quaintly Designed CSS Typographic Grid

Keith@Blogfreakz — Thu, 02 Feb 2012 13:17:02 +0000

Here’s a very fascinating take on creating a CSS grid by Chris Coyier. If you’re site is text-heavy then this kind of layout might suit it perfectly. Check out the demo to see how it works.

Horizontal Grid

Vertical Grid

The concept is inspired by one Richard Rutter with his article Compose to a Vertical Rhythm. If you’re having trouble trying to align your site’s font with the grid because of the size variation, you can use a few tools like Baseline Rhythm Calculator, Grid bookmarklet, and Adobe Air EM calculator to help you out with the math. Or better yet, try getting some EM-based CSS.

Incoming search terms for the article:

How to Render Filter Effects With This CSS Webkit

Marvin@Blogfreakz — Mon, 09 Jan 2012 09:55:40 +0000

Go crazy with the cool CSS Filter Effects 1.0 tutorials from WebKit Nightly ! Here you’ll learn how to customize basic image or video rendering with Photoshop-like effects. Let’s check it out.

Note: To test and view the effects, use Webkit Nightly and Chrome Canary.

Here are some CSS snippets that will change the element:

Blur

img {

-webkit-filter: blur(2px);

}

Hue-rotate

img {

-webkitfilter: hue-rotate(90deg);

}

Grayscale

img {

-webkit-filter: grayscale (100%);

}

Sepia

img {

-webkit-filter: sepia (100%);

}

Opacity

Default is 100%, no transparency.

img {

-webkit-filter: opacity (30%);

}

For more of these awesome tutorials click here.

Incoming search terms for the article:

Sprite Cow – Generate CSS For Sprite Sheets

Mufti Ali — Thu, 23 Jun 2011 13:57:07 +0000

Automated spritesheet generators are pretty cool, but I prefer the control over optimisation and compression you get by making them manually. However, copying all the positions & sizes from graphics apps will wasted a ton of your time.

Sprite Cow is web based tools helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css. The source code also available for download on github.

Website: http://www.spritecow.com

Incoming search terms for the article:

CSS Lint – Find The Problems In Your CSS Code

Mufti Ali — Sun, 19 Jun 2011 04:50:44 +0000

CSS Lint is a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.

By default, CSS Lint shows any parsing errors. Parsing errors usually mean you mistyped a character and may cause the browser to drop your rule or a property. Parsing errors are presented as errors by CSS Lint, the most important issues to fix.

Website: http://csslint.net

Incoming search terms for the article:

inuit.css – A Flexible CSS Framework With Mobile-Tablet Support

Mufti Ali — Sun, 24 Apr 2011 11:07:23 +0000

inuit.css is built to work on smaller screens (such as tablets) and tiny screens (such as phones) straight out of the box with minimal effort. inuit.css has basic support for new HTML5 elements.

inuit.css is a very stripped back framework designed to be built upon by you… no undoing things, and the minimum predefined styles. It has some little typographical niceties built into it from the outset. It also has a typographical scale and a (loose) baseline to get you well on your way.

inuit.css’ main features are fully supported in IE7 but not in IE6 because, well, it’s time to move on. inuit.css embraces progressive enhancement.

Requiremens: -
Demo: http://csswizardry.com/inuitcss
License: Other license

Incoming search terms for the article:

Cascader – Excellent Tools To Separate Inline CSS From HTML Files

Mufti Ali — Sat, 23 Apr 2011 09:55:00 +0000

Cascader is web based tool that helps developers to separate inlined CSS from HTML files. Cascader takes HTML as input, then generates clean and separate CSS and HTML files.

Cascader does this by:

Parsing inputted HTML and building a CSS document with detected inline styles
Replacing inline styles in HTML with generated CSS classes
Preventing duplicate CSS class definitions
Providing a CSS document containing generated CSS classes
Providing a cleaned-up, inline-free HTML document

Cascader aims to make the migration from inline styles to CSS documents as easy as possible.

Website: http://www.cascader.co

Incoming search terms for the article:

CSSWarp – CSS3 Text to Path Generator

Mufti Ali — Sun, 13 Mar 2011 11:12:10 +0000

CSS3Warp is a proof of concept: create Illustrator like “warped” text (text following an irregular path) with pure CSS and HTML.

How does it work? CSS3 brings new text-transform options: rotation, skew, matrix, transform-origin… By applying the right transformations to every single letter it is possible to create the illusion of text following a path.

Type your text into the webform, click “Warp it!”, then alter the path as you like. You can attach your text to a circle or a bezier. Add or delete points, or change position, angle and radius of the circle. When your done, click “Generate code”. Copy the CSS and HTML into your document.

You can choose a font from the Google Font-Directory for warping or tell your webbrowser which local font on your machine you want to use.

Requirements: CSS3 Support
Demo: http://csswarp.eleqtriq.com/
License: License Free

Incoming search terms for the article:

CSS3 Buttons – GitHub Style Button

Mufti Ali — Sun, 20 Feb 2011 19:47:25 +0000

CSS3 buttons is a simple framework to create good-looking GitHub style button links. This framework allow us to create pill-like button with more rounded corners, by add a .pill class to the button. Sometimes when you have multiple buttons, it’s a good thing to highlight the button with the primary action in order to give the user a visual clue of what action to take if in doubt. This can be accomplished by adding a .primary class to the button.

If you have a button that triggers a negative action, like deleting data, it’s good practice to warn the user by styling the button differently than the normal buttons. Give a button the class .negative and the hover-state will change from blue to red. You can also create grouped buttons that are linked together, like seen at Gmail and other places, by using the .left, .middle and .right classes.

CSS3 Buttons supports a wide range of icons that can easily be added to any button by adding a span tag inside the anchor tag with the class of .icon and any one of the provided icon classes. CSS3 Buttons works in all major browsers. Some CSS3 features used in CSS3 Buttons is not supported in Internet Explorer browsers!

Requirements:-
Demo: http://css3buttons.michaelhenriksen.dk
License: Unlicense

Incoming search terms for the article:

CSS Drop Shadows Without Images

Mufti Ali — Sun, 20 Feb 2011 04:38:11 +0000

Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This article CSS drop-shadows without images is a summary of the technique and some of the possible appearances.

There is no need for extra markup, the effect can be applied to a single element. A couple of pseudo-elements (.drop-shadow:before, .drop-shadow:after) are generated from an element and then pushed behind it. The pseudo-elements need to be positioned and given explicit or implicit dimensions.
The next step is to add a CSS3 box-shadow and apply CSS3 transforms. Different types of drop-shadow can be produced by varying these values and the types of transforms applied.

Requirements: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+
Demo: http://nicolasgallagher.com/css-drop-shadows
License: License Free

Incoming search terms for the article:

Isotope – jQuery Plugin for Dynamic Layouts

Mufti Ali — Mon, 07 Feb 2011 23:44:59 +0000

Isotope is an exquisite jQuery plugin for create intelligent and dynamic layouts that can’t be achieved with CSS alone. Isotope allow us hide and reveal item elements easily with jQuery selectors. With isotope, Re-order item elements with sorting, sorting data can be extracted from just about anything.

Isotope support for Interoperability, features can be utilized together for a cohesive experience. And also there is progressive enhancement. Isotope’s animation engine takes advantage of the best browser features when available — CSS transitions and transforms, GPU acceleration — but will also fall back to JavaScript animation for lesser browsers.

Commercial use of Isotope requires purchase of one-time license fee per developer seat. Commercial use includes any application that makes you money — portfolio sites, premium templates, etc.

Requirements: jQuery Framework
Demo: http://isotope.metafizzy.co/
License: Non-Commercial Use Only