Topics Search

CSS

Home » CSS (1720)
  • Page 1 of 86
  • »
 

Manipulate And Retrieve Data With Sass List Functions

Manipulate And Retrieve Data With Sass List Functions Icon
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.
 
Advertisement:
 

Beautiful and Unique Snowflakes: Using the :only-of-type Selector

Beautiful and Unique Snowflakes: Using the :only-of-type Selector Icon
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.
 

Using Feature Queries in CSS

Using Feature Queries in CSS Icon
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.
 

Editing Images in CSS: Combining Techniques

Editing Images in CSS: Combining Techniques Icon
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.
 

How to CSS-Only Overlays Effect with Box-Shadow

How to CSS-Only Overlays Effect with Box-Shadow Icon
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.
 

Force Selection of Text Block

Force Selection of Text Block Icon
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.
 

How To Store Data In Sass Lists

How To Store Data In Sass Lists Icon
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.
 

How To Use CSS3’s :not() Pseudo Selector

How To Use CSS3’s :not() Pseudo Selector Icon
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.
 

Changing The Browser’s Cursor with CSS

Changing The Browser’s Cursor with CSS Icon
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.
 

Editing Images in CSS: Blend Modes

Editing Images in CSS: Blend Modes Icon
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.
 

Getting to Know Cutestrap, a Lightweight CSS Framework

Getting to Know Cutestrap, a Lightweight CSS Framework Icon
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.
 

Precedence in CSS (When Order of CSS Matters)

Precedence in CSS (When Order of CSS Matters) Icon
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.
 

Using RGB Color in CSS

Using RGB Color in CSS Icon
While longer-winded than hexadecimal, the RGB method for color in CSS is easier to manipulate directly via JavaScript; RGB is also the method that JavaScript uses to report the color of elements, regardless of how they may have originally been set in CSS, making RGB particularly useful to understand.
 

CSS Writing Mode

CSS Writing Mode Icon
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.
 

Editing Images in CSS: Filters

Editing Images in CSS: Filters Icon
Consider a situation where you have to have high-contrast, blurred or brighter versions of particular images on your website. Prior to CSS filters, your only options were either to upload different versions of these images or manipulate the images with JavaScript.
 

The State of CSS Reflections

The State of CSS Reflections Icon
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!
 

Display Text in Vertical Direction using CSS

Display Text in Vertical Direction using CSS Icon
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.
 

Vertically Aligning Wrapped Text in a Flexbox Layout

Vertically Aligning Wrapped Text in a Flexbox Layout Icon
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...
 

How to Create 3D Button Flip Animations

How to Create 3D Button Flip Animations Icon
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.
 

CSS Keyframe Animation with Delay Between Iterations

CSS Keyframe Animation with Delay Between Iterations Icon
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.
Home » CSS (1720)
  • Page 1 of 86
  • »