Creating Liquid Layouts with Negative Margins
I was recently confronted with the task of creating a two-column liquid layout with a header and footer in which the content needed to come before the sidebar in the source code. I took opportunity to demonstrate an under-used aspect of CSS: negative margins. Negative margins allow us to push the content area away from the sides of the browser, leaving room for the sidebar.
Related cards:
Matching elements on complex web pages with Webrat
XPath matchers can be combined with CSS-selector matchers. This is really useful if not, for example, the content of an element should be matched but the element itself like in the following example. Here a form is used to display data as default ...
Print-Friendly Images and Logos with CSS
The trick is this: send a low-resolution version of your image to the screen, and a high-resolution version to the printer.
Here’s what we’ve learned about doing UI for mobile web apps with WebKit
Lately, we’ve been exploring ways to offer web apps that perform like native apps on mobile devices. For this short sprint we targeted mobile WebKit browsers—especially the default browsers on iOS and Android—because of their widespread use and ex...
Creating spheres with CSS
Using the CSS border-radius property, we can create rounded shapes and circles. Add some gradients and they become spheres. Let’s try that, and add some animation to bring them to life.
Use -webkit-line-clamp to natively truncate long (multi-line) texts with an ellipsis
Note: You won't need this for single lines of text. In this case it is better to just use the text-overflow property: Use CSS "text-overflow" to truncate long texts
You can use -webkit-line-clamp in your CSS/SA...
About PIE – CSS3 PIE: CSS3 decorations for IE
CSS Level 3 brings with it some incredibly powerful styling features. Rounded corners, soft drop shadows, gradient fills, and so on. These are the kinds of elements our designer friends love to use because they make for attractive sites, but are d...
Inspect and Debug CSS Flexbox and Grid Layouts by using the Layouts Tab in Dev Tools
tl;dr
In Chrome DevTools in the Layouts tab you have handy options to debug CSS Flexbox and Grid. Including:
- Display size and lines along with labels
- Changing their attributes
- Change how overlay is colored and fastl...
Flexible overflow handling with CSS and JavaScript
You can use text-overflow to truncate a text using CSS but it does not fit fancy requirements.
Here is a hack for the special case where you want to truncat...
Cross-Domain Data with Rack and Rails | Union Station
Asynchronous JavaScript and CSS, also known as CSSHttpRequest, is a method of URI-encoding data in 2KB chunks split over several CSS rules with a modified data URI scheme. Because CSS is not subject to the same-origin policy, no service proxy is r...
Liquid Canvas
Liquid Canvas is a JavaScript library which allows you to draw inside an HTML canvas element with an easy yet powerful description language.
It can be used to add graphics to your web page without ever touching an image creation tool such as The ...