Lists are a series of values stored together as a data structure. On their own they’re not any more useful than regular Sass variables, however they become more useful when using the built-in functions Sass provides for working with them. I’ve been talking about Sass data types, the operations you can perform on them and the built-in functions Sass gives us to manipulate them.
The logical next step from the :empty and :only-child CSS selectors, only-of-type selects single instances of particular elements in a particular context. Whereas :only-child cares only if the targeted element is by itself inside its container, :only-of-type actually looks at the element to determine if it is the only one of its kind in its context.
There’s a tool in CSS that you might not have heard of yet. It’s powerful. It’s been there for a while. And it’ll likely become one of your favorite new things about CSS. Behold, the @supports rule. Also known as Feature Queries. With @supports, you can write a small test in your CSS to see whether or not a particular “feature” (CSS property or value) is supported, and apply a block of code (or not) based on the answer.
In last two tutorials of this series, we have discussed how filters and blend modes can completely change the appearance of images. In this tutorial, I will cover the basics of editing images by using both these properties together.
Content overlays are a prominent part of modern web design. They help you hide an element on a web page, and later – with the user’s approval – reveal it, and display extra information or controls, such as buttons behind it. A typical overlay is semi-transparent, with a solid background color (usually black), and there’s some text or buttons on it for users to see or interact with.
Have you ever seen (or put yourself) some text into a <textarea> or <input>, not because it was part of a form, but because it made the whole block of text easier to select. Inputs like that have selection boundaries, meaning you can click into them and (for example) Select All and get just the text inside the input.
If you want to set a font-stack as a variable in Sass you could do something like $fonts: Helvetica, Arial, sans-serif in a single variable. Later you could assign the font stack with font-family: $fonts; However what if you only wanted to assign one of the fonts and not the whole stack? Sass lists might be your answer.
CSS3’s :not pseudo selector makes it possible for you to select and apply styling to every type of element except one. This handy little trick can save you from having to manually write a lot of CSS code, because in just one line you can define a style to be applied to certain elements while also designating that the style not be applied to another.
While the browser will automatically change the appearance of the cursor in the context of many UI elements - switching it to a pointing hand when over links, for example - there are occasions when you’ll want to change it manually for particular operations: a compass cursor to indicate that an element may be moved, for example. This is commonly achieved through CSS; in particular, the cursor property for an element.
In the previous tutorial of this series we discussed how to use CSS filters to edit images. While filters can produce great results, they are limited to just a single layer. Let's say you have an image and you want to overlay it with red color. You can't do that with filters.
In this article, I’ve introduced Cutestrap, a brand new CSS framework. Cutestrap has a number of interesting features, but its biggest plus for me is its easy learning curve: it took me just over an hour to learn how to use the framework and build the demo page that accompanies this article.
On your average CSS-writin' day, odds are you won't even think about precedence in CSS. It doesn't come up a whole heck of a lot. But it does matter! It comes up any time multiple CSS selectors match and element with the exact same specificity. Assuming specificity is exactly the same, order does matter. Styles declared later win.
Recently, while editing some CSS in Opera inspector, I noticed a CSS property called writing-mode, this was the first time that I know of it. After some research, I learned that its purpose is for vertical language scripts, like Chinese or Japanese. However, the interesting thing is that when using it with English, we can create a vertical text very easily.
It's done by using an element for each bar, then duplicating each and every one of these elements to create the reflection and finally adding a gradient cover to create the fading effect. Which sounds a bit like scratching behind your right ear with the toes of your left foot!
In this tutorial, we are going to see how to display a text in vertical orientation. We use CSS for displaying a floating text in vertical direction. In this example we are having a background image with a transparent vertical tagline to show a text. The floating vertical text will provide a rich and modern look.
Flexbox is extremely useful in layout in modern web design. However, one thing it’s not good at vertically aligning wrapped text in some circumstances. Returning to the example I detailed last week, the solution works really well when the text for both links is the same length, but when the text of one link wraps but not the other, the result is out of alignment...
Flip animations are popular CSS effects that show both the front and the back of an HTML element by turning them from the top to the bottom, or from left to the right (and vice versa). They are rad in 2 dimensions, but they are even cooler when performed in 3D.
Say you want an animation to run for 1 second, but then delay for 4 seconds before running again. Seems like that would be easy. Turns out it's not-so-straightforward, but doable. You need to fake it.