Mes liensShaared links2013-09-18T20:11:32+02:00https://xoofoo.org/paper/https://xoofoo.org/paper/https://xoofoo.org/paper/ShaarliCreative Loading Effectshttps://xoofoo.org/paper/?svIadQ2013-09-18T20:11:32+02:002013-09-18T20:11:32+02:00
Please note that the examples only serve as inspiration, they are dummies and not meant for production. You’ll have to use the transitions or animation together with a custom JavaScript solution.
— Permalink]]>Transitions for off-canvas navigationshttps://xoofoo.org/paper/?QYix7g2013-09-10T00:29:37+02:002013-09-10T00:29:37+02:00
The structure of our demo is very specific because we want to be able to show all effects in one page only. But in general, we need a sidebar element that will be either inside or outside of a push wrapper, depending on whether we want the sidebar to be on top of the push wrapper or under it.
— Permalink]]>Understanding the CSS Clip Propertyhttps://xoofoo.org/paper/?MrV4vA2013-01-16T20:40:03+01:002013-01-16T20:40:03+01:00
I’m pretty sure some of you don’t even know there is a CSS property called clip since it’s probably the less used property in the world. It’s no big deal guys, we will cover pretty much everything you have to know about it.
The clip property aims at defining what portion of an element you want to show. You may have heard of this stuff as “crop”. There are a bunch of JavaScript plugins out there to crop an element, but actually you can do pretty much the same thing with the CSS clip property. Probably, with some limitations of course. We’ll take a look at them later.
— Permalink]]>Learning Principles for Improving Your CSShttps://xoofoo.org/paper/?eiNnIA2012-11-20T19:34:52+01:002012-11-20T19:34:52+01:00
First, let me remind you that CSS is an extremely simple language. It can be summed up in 3 words: selector, property, value. Nothing more, really. This is why some people don’t like CSS at all: because they feel like children playing with LEGOs.
Yup. Explain the basics of CSS to a 9 years old child and he or she will be able to create a website. Not a complex one I agree, but maybe a few pages with headers, links, content, images, and such.
But the fact that CSS is an easy language doesn’t mean everyone is on the same level. Some people use CSS like a chimp uses a fork, some people are okay to good with it, and some people can do magic with it.
From what I can tell, I’ve been playing around with CSS for almost two years now and on what I would call a heavy level for something like 7 months. I’m still far from perfect, and there are still some tricks I don’t know or understand.
— Permalink]]>Creative CSS Loading Animationshttps://xoofoo.org/paper/?r48R5A2012-11-14T20:28:10+01:002012-11-14T20:28:10+01:00
A few things before we start:
- You won’t see any vendor prefixes in the CSS snippets, but you will, of course, find them in the files.
- The goal of the tutorial is to show the potential of CSS, particularly CSS3, that’s why the rendering could be altered on IE9-. If you plan to support these browsers, be sure to make fallbacks.
- I personally use the box-model where [width] = [element-width] + [padding] + [borders]. I activate it with the following snippet:
— Permalink]]>Mobile Design Typography is Vitally Important … and Challenginghttps://xoofoo.org/paper/?BnBvmQ2012-11-12T20:57:35+01:002012-11-12T20:57:35+01:00
One of the emerging challenges for web designers is creating web typography that works in the mobile environment as well. But it can be difficult, and there are many things to consider. The keys are to focus on readability, contrast, space and responsiveness.
— Permalink]]>Heading Set Styling with CSShttps://xoofoo.org/paper/?1_ZPJQ2012-11-02T23:19:28+01:002012-11-02T23:19:28+01:00— Permalink]]>Filter Functionality with CSS3https://xoofoo.org/paper/?1wWlBw2012-07-19T20:03:51+02:002012-07-19T20:03:51+02:00— Permalink]]>CSS Buttons with Pseudo-elementshttps://xoofoo.org/paper/?xMGv-Q2012-07-18T20:33:44+02:002012-07-18T20:33:44+02:00
In this tutorial, I’ll show you how to create buttons with a twist, using just one anchor tag per button and the great power of CSS.
— Permalink]]>