Codrops - useful drops of code 25 CSS Snippets for Some of the Most Common and Frustrating Tasks In this post we have 25 CSS snippets and hacks that will solve many of the most frequently used and, at times, frustrating CSS development tasks. Why reinvent the wheel when there are already plenty of time-saving pre-written CSS code snippets? As well as some classic and timeless CSS hacks you will also find many CSS3 snippets, like box-shadow, border-radius,linear-gradient and many more. Adding shadow to text – text-shadow Helps make your text stand out from the rest. Source Adding an image-based border – border-image You can create any kind of border you want for any object(s) on your website using this. Adding shadow to borders and images – box-shadow Helps make your borders and images “pop” from the background more, giving a subtle 3D-like visual cue that it’s something separate, in the foreground, and the thing that visitors should be looking at. Adding rounded corners – border-radius Self-explanatory. Adding individual rounded corners – border-radius Adding a gradient – linear-gradient
Five simple steps to designing grid systems - Part 1 – July 4th, 2005 – The first part of this Five Simple Steps series is taking some of the points discussed in the preface and putting it to practice. Ratios are at the core of any well designed grid system. Sometimes those ratios are rational, such as 1:2 or 2:3, others are irrational such as the 1:1.414 (the proportion of A4). This first part is about how to combine those ratios to create simple, balanced grids which in turn will help you create harmonious compositions. Starting with a blank canvas It’s always easier in these kinds of tutorials to put the example in context, in some kind of real world scenario. Subdividing ratios The grid system we are going to design is a simple symmetrical grid based on a continuous division of the paper size in the ratio 1:1414. This is one of the easiest ways to create a balanced grid. Diagrams kindly updated by Michael Spence Getting creative Many have said grid systems can stifle creativity, but I disagree. So, we have our grid. Short but sweet
Columnal | A responsive CSS grid system helping desktop and mobile browsers play nicely together. Scrolling Parallax: A jQuery Plugin Scrolling Parallax examples Simple scrolling parallax effect Multiple, layered parallaxes for a nice depth effect Parallax in all directions: vertical and horizontal scrolling Parallax called on a piece of inline HTML markup About Scrolling Parallax Scrolling Parallax is a new jQuery plugin that binds a parallax effect to the scrollbars and mouse wheel. Basic use of the Scrolling Parallax plugin is extremely easy. The Scrolling Parallax plugin is also very versatile. Download the Scrolling Parallax Plugin for jQuery Scrolling Parallax for background images Using the parallax for a background image is incredibly easy. $.scrollingParallax('img/background-parallax.jpg'); This will append the image to the page, and stretch its dimensions as described above. This would stretch the background width to 200% of the screen size, and enable the parallax to work on horizontal as well as vertical scrolling. Scrolling Parallax on jQuery objects $('div.parallax-div').scrollingParallax(); staticSpeed : .2
25 Super Web-based HTML & CSS Tools HTML and CSS are the two most commonly used languages on the web. While it may not be the most advanced form of web development, every website made in the past decade uses both languages. Needless to say, there’s a lot to learn here, but that doesn’t mean tools can’t help. We’ve compiled a super list of super tools to take your markup from mediocre to macho. As of now, HTML5 and CSS3 specifications are frequently changing. CSS3 Please CSS3 Please! With all the browser-specific CSS3, it’s no doubt that anyone would get tired of having to essentially re-write a slightly modified line of code to accommodate just one browser. css3please takes care of this trouble by offering an incredibly easy way to generate proper markup to suit all browsers. CSS3.0 Maker CSS3.0 Maker This is one more great CSS3 markup generator. BonBon Buttons BonBon Buttons Ultimate CSS Gradient Generator Ultimate CSS Gradient Generator CSS Typeset CSS Typeset Mike Plate's CSS3 Playground Mike Plate’s CSS3 Playground PX to EM Primer
Formalize CSS - Teach your forms some manners! A Basic Responsive Grid (Plus Handy CSS3 Media Query Reporter) Responsive web design is here to stay. Jeffrey Zeldman's press, A Book Apart, has published a book by the name. The HTML5 Boilerplate has responsive elements built into its code base. Everybody and their uncle is promoting their new responsive web template. Why? The Magic is in the Media Query With the advent of CSS3 Media Queries, we have the ability to create CSS rules designed specifically for a variety of screen sizes. load assets and layout styles progressively and only as they’re needed Thus, it becomes possible to produce a single "device agnostic, one web boilerplate" for your designs. It's a Beautiful Thing In this short tutorial, I'll provide both a basic review (or introduction) to the basic concepts of responsive design while building a handy CSS3 Media Query Reporter which you may find handy in your future design projects. Then, using that reporter, we will take a first step toward converting a fixed-width grid system into a fluid and responsive grid system. What we'll do here:
jQuery and CSS single page portfolio, a vertical parallax navigation experiment « Design and Development tuts – TutorialShock Once in a while, something new shows up that has the power to shake the world and stimulate all people to keep moving instead of stay still, this quote applies for practically every instance in life and business. A while ago, Nike released an astonishing website named “Nike Better World” to support all the athletes around the world; the design itself was brilliant and it generated a lot of positive reviews, but the real breakthrough came thanks to the navigation system that these guys made, a fantastic vertical Parallax system. On this tutorial we’re going to undress the structure of this website and then we’re going to create something inspired by Nike’s website using jQuery and CSS. View Demo Download Source This tutorial is a practical exercise, created with the only intention of explore the functionality behind the “Nike Better World” website, all the credits belong entirely to Nike. How does it work? Understanding the “Nike” effect Step 1: Insert the HTML Step 2: Working with jQuery
Browser Support for CSS3: What’s the Current Status? Creating a website with HTML5 and CSS3 without having to worry about using techniques like progressive enrichment and polyfills is the ultimate dream for modern-day front-end developers. But unfortunately, mainly because of the widespread use of IE6-8, that is still just a distant dream. But it is getting closer. I thought it would be a good idea to summarize where CSS3 stands as far as browser support goes, so you can feel comfortable making decisions about what to use or abuse when incorporating CSS3 into new projects. This outline will be divided up into sections beginning with the safest CSS3 features to use, and going down the list towards the not-so-safe. First: IE6, IE7, and IE8 As many of us know, with respects to CSS3 support, the only real problem browsers are older versions of IE. The only properties and features supported by IE6-8 are: There are other ways to get pre-IE9 versions of IE to mimic certain aspects of CSS3. CSS3 Features Supported by All Modern Browsers Conclusion
960 Grid System Golden Grid System GGS was my next step after Less Framework. Instead of a fixed-width grid, it used a fully fluid-width one, without even a maximum width. The resources it was published with are still available on GitHub. The idea was to take a 18-column grid, use the outermost columns as margins, and use the remaining 16 to lay elements out. On smaller screens the 16 columns could be folded into 8, 4 and 2. This behaviour was inspired by Massimo Vignelli's Unigrid system. While the grid's columns were fluid — proportional to the screen's width — the gutters (spaces between the columns) were proportional to the font-size being used. GGS also contained a set of typographic presets, strictly to a baseline grid. Correctly setting all of these measurements is difficult, of course. When published, GGS gained a lot of attention, as the web design community was searching ways to work with fluid-width grids, which have always been troublesome, running counter to many graphic design principles.
jqDnR :: Minimalistic Drag'n'Resize for jQuery Who? jqDnR Minimalistic Drag'n'Resize for jQuery What? jqDnR is a lightweight plugin for jQuery that lets you drag, drop, and resize elements. Features; Drag + Drop Element Posistioning South East ResizingDefinable Drag and Resize "handles"Translucent Dragging, Preservation of Original Opacity Why? I wrote jqDnR to compliment jqModal elements, allowing drag+resize functionality while remaining true to the plugin's minimalistic architecture. jqDnR provides the all the basic elastic functionality most dialogs will need. If you like jqDnR, please consider a dontation to support its development: When? Current Version: 2007.08.19 +r2 (c) 2007 Brice Burgess under The MIT License Where? Download the Plugin (jqDnR.js - 972 bytes) Download the Dimensions Plugin (dimensions.js) [OPTIONAL] - If detected, the dimensions plugin by Brandon Aaron will be used to alleviate Internet Explorer "jumpiness" with elements that have fixed or percentage based position. How? Examples 1. Javascript 2. 3. Etc.