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.
Related cards:
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: negat...
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...
CSS: Letting text flow around a round element
If you have an element with significant border-radius (e.g. 50% for a circle) and you want inline content (i.e. text) to flow around it, do it like this:
- Place the element right before the text and
float: rightorfloat: left - Tell the b...
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...
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 ...
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...
Managing vendor libraries with the Rails asset pipeline
The benefit of the Rails asset pipeline is that it compiles your stylesheets and javascripts to a single file, respectively. However, the consequences are startling if you don't understand them. Among others, the raw asset pipeli...
IE-friendly mobile-first CSS with Sass 3.2
Building CSS mobile-first is the way forward, because blah blah blah progressive enhancement blah. Problem is, Internet Explorer prior to 9 ignores anything within media query blocks, leaving those browsers with mobile styles.
Not all of us can g...
Best Practice: Creating User Accounts Without Sending the Password
In applications without a sign-up, user accounts are usually created by an admin. This imposes two challenges:
- How to transmit the password securely and
- How to make the user change the initial password immediately
There is a simple solution:...
Classic CSS problems that are easy with flexbox
Solved with flexbox is a collection of css problems which were hard or impossible to solve without flexbox:
- Better, Simpler Grid Systems
- Holy Grail Layout
- Input Add-ons
- Media Object
- S...