Tag: CSS

We all know what importance colors hold in anything, whether it’s a website layout, image, video, or any other graphical element. In essence, color is a subjective experience that results from the interaction between light, the eye, and the brain. Adding colors to the website gives a new life to the whole layout and graphical elements. Nobody likes to visit web pages with white, black, and gray colors on them. Colors make the elements look more realistic and catchy to the human eye.

Not just theoretically, psychology also comes into play when we use colors on websites. It has been scientifically proven that a specific set of colors triggers particular emotions in the human brain, such as autumn colors like orange and yellow representing joy or happiness, red color to festive seasons, and blue viewed as calm and trustworthy. Besides, you must have noticed that many food companies often use red and yellow on their websites, pharmaceutical companies tend to use green on their sites, fitness companies sometimes use orange, and so on.

Let’s imagine we’re making a small component. It can be anything, really, but let’s use a media object as an example. Nicole Sullivan had a solid definition of media objects from way back in 2010, and you probably already know the pattern well: some form of media (often an image) on the left and text beside it on the right. The media could be an image or a video, for example.

This is the basic HTML for the layout, minimized for brevity:

<section class="container">
  <article class="float-left">
    <img src="https://picsum.photos/100">
      <p>I've never had to cook or clean since I discovered Xyz. They perform all my tasks for me. I recommend them.</p>
      <h3>Dan Somore</h3>
  </article>

  <!-- more articles -->

</section>

This HTML gives us a <section> element that is the container for four <article> elements, where each one is a testimonial container that holds an <img> and a <div> with a block of text — our media objects.

Let’s apply some light styling in CSS:

/* Give the parent container breathing room */
.container {
  padding: 20px;
}

/* 
  Styles for each testimonial container 
  Each container is floated left
*/
.float-left {
  border: 2px solid blue;
  background-color: transparent;
  float: left;
  width: 45%;
  min-height: 150px;
  margin-bottom: 20px;
  margin-right: 20px;
}

/* Testimonial images are floated left */
img {
  float: left;
  margin-right: 10px;
}

This code is by no means perfect. In fact, it introduces the wrapping and overflow issues we’re about to discuss. We will look at these issues together before getting into solutions.

Issue 1: Height Collapsing

When an element is floated in its container, it exits its normal document flow and into a floated position, making no contributions to the container’s height. In a container of many floated media objects, the container element’s height is collapsed to contain only non-floated elements. The collapsed height might be inconspicuous in containers without a border or non-floated elements and could disrupt the layout of other elements after a media object container. However, this issue can be easily discovered if there is a non-floated element in the container, among other floated elements.

Let’s add a border to the parent container to see the height-collapsing effect.

The height of the content is what influences the height of the testimonial container. If the image were in the container’s flow, it would be taller than the text, and the container would adjust to it. But, alas, that’s not the case since we introduced a block formatting context when floating the image.

The popular solution with a single line of CSS on the testimonial’s parent container:

.container {
  overflow: auto;
}

The BFC this generates establishes a new document flow within the page’s root element, containing all the container's child elements, including floated media objects. It effectively prevents the testimonial elements from being displaced beyond the parent container’s borders — no extra divs or pseudo-elements are needed like the clearfix approach.

See the Pen Float Solutions: overflow: auto [forked] by Geoff Graham.

That certainly gets the job done! But I want to show you one more way to do this because I believe it’s the best of the bunch.

The Best Solution: display: flow-root

display: flow-root was introduced to address inconsistencies associated with using overflow for generating BFCs. In fact, display: flow-root was explicitly designed to produce BFC, while the overflow property is designed to manage content that surpasses its container. Consequently, overflow can induce unintended side effects, from unwanted scrollbars to data loss.

That’s why I recommend using display: flow-root. It is meant to create a BFC when you need it, whereas the other solutions are more like workarounds.

CSS block formatting contexts are great because they allow you to leave the main document flow, allowing elements to interact differently in a layout. But, of course, those different interactions can feel like buggy behavior if you’re unaware that you’re actually working in a different formatting context.

This is exactly why we have modern layout techniques like Flexbox and Grid. Before we had them, floats were a nice trick for faking columns. But the BFC they created wasn’t so nice. Hence clever workarounds like the clearfix to create a BFC to wrangle the other BFC.

Perhaps the bigger takeaway from all this, though, is to evaluate your layout strategy. If you’re reaching for a float, is it really the best option for what you’re trying to do? Because if so, you may as well embrace the natural text-wrapping behavior rather than trying to fight it. And if you don’t want to fight it, that’s a sure sign you ought to reach for a more modern layout technique, like Flexbox or Grid.

Resources

• CSS in Depth, Keith J. Grant
• Block formatting context (Mozilla Developer Network)

Further Reading On SmashingMag

• “Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid”, Manuel Matuzović
• “Overflow Issues In CSS”, Ahmad Shadeed
• “Editorial Design Patterns With CSS Grid And Named Columns”, Rachel Andrew
• “Futuristic CSS”, Sacha Greif

CSS Variables, also known as Custom Properties, have revolutionized the way we manage styles and build maintainable, flexible stylesheets. They enable developers to store and reuse values throughout a stylesheet, making it easier to change themes, colors, fonts, and more with just a few updates. In this article, we’ll explore the best practices for using CSS variables, along with some helpful code examples.

Your Designer Toolbox Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

DOWNLOAD NOW

1. Defining and Using CSS Variables

To define a CSS variable, you must use the double hyphen (–) syntax. Typically, you’ll want to create your variables within the :root pseudo-class, which refers to the highest-level parent element in the DOM tree. This ensures that your variables are globally accessible.

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}

body {
  font-size: var(--font-size);
}

a {
  color: var(--primary-color);
}

button {
  background-color: var(--secondary-color);
}

In the example above, we’ve defined three CSS variables: –primary-color, –secondary-color, and –font-size. To use these variables, we use the var() function, which accepts the variable name as its argument.

2. Fallback Values

One of the great features of CSS variables is their ability to provide a fallback value. This is helpful when a variable may not be defined or supported by a particular browser. To provide a fallback value, include a second argument within the var() function.

body {
  font-size: var(--font-size, 16px);
}

In this example, if the –font-size variable isn’t defined, the browser will use the fallback value of 16px.

3. Leveraging Variables in Media Queries and Theming

CSS variables are incredibly useful when combined with media queries and theming. You can quickly and easily update your styles for different devices or themes by redefining the variable values.

:root {
  --font-size: 16px;
}

@media screen and (min-width: 768px) {
  :root {
    --font-size: 18px;
  }
}

body {
  font-size: var(--font-size);
}

In this example, we’ve updated the –font-size variable within a media query. When the screen width is at least 768px, the font size will automatically adjust to 18px.

4. Working with Calculated Values

CSS variables can be combined with the calc() function to create dynamic and flexible values.

:root {
  --base-padding: 10px;
}

.container {
  padding: calc(var(--base-padding) * 2);
}

In the example above, we’ve defined a base padding value and used it in combination with the calc() function to double the padding for the .container element.

5. Handling Colors with HSL and CSS Variables

When working with colors, using the HSL color format in combination with CSS variables makes it easier to create color schemes and adjust hues, saturation, and lightness.

:root {
  --primary-hue: 210;
  --primary-color: hsl(var(--primary-hue), 50%, 50%);
  --primary-color-light: hsl(var(--primary-hue), 50%, 75%);
  --primary-color-dark: hsl(var(--primary-hue), 50%, 25%);
}

a {
  color: var(--primary-color);
}

a:hover {
  color: var(--primary-color-light);
}

a:active {
  color: var(--primary-color-dark);
}

In this example, we’ve used the HSL color format and CSS variables to create a primary color and its lighter and darker variations. By adjusting the –primary-hue value, you can change the color scheme throughout your stylesheet with ease.

6. JavaScript Interoperability

CSS variables can be accessed and manipulated using JavaScript, providing an additional layer of flexibility and dynamism. For instance, you can create user-customizable themes by modifying variables through JavaScript.

<button onclick="changeTheme()">Change Theme</button>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20function%20changeTheme()%20%7B%0A%20%20%20%20let%20root%20%3D%20document.documentElement%3B%0A%20%20%20%20let%20currentHue%20%3D%20parseInt(root.style.getPropertyValue('--primary-hue'))%3B%0A%20%20%20%20let%20newHue%20%3D%20(currentHue%20%2B%2030)%20%25%20360%3B%0A%20%20%20%20root.style.setProperty('--primary-hue'%2C%20newHue)%3B%0A%20%20%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

In the example above, clicking the “Change Theme” button will change the –primary-hue variable, effectively updating the primary color and its variations.

Wrapping Up

Variables have transformed the way we approach theming, responsiveness, and maintainability in our stylesheets. By following best practices such as global variable declaration, using fallback values, leveraging variables in media queries, working with calculated values, handling colors with HSL, and harnessing JavaScript interoperability, you’ll unlock their full potential.

With this newfound understanding, you can create more efficient, flexible, and dynamic stylesheets that adapt to different devices, user preferences, and themes with minimal effort.

visibility: hidden and display: none are two CSS properties that can be used to hide elements. While they may seem similar at first glance, there are some significant differences between them. In this article, we’ll explore these differences and provide some examples to illustrate their use.

The UX Designer Toolbox

Unlimited Downloads: 500,000+ Wireframe & UX Templates, UI Kits & Design Assets Starting at only $16.50 per month!

DOWNLOAD NOW

visibility: hidden

The visibility property in CSS determines whether or not an element is visible on the web page. If set to hidden, the element will be hidden from view, but it will still occupy space on the page. This means that any other elements that would normally be positioned after it will still be positioned as if the hidden element were still visible.

Here’s an example of how visibility: hidden works:

<!DOCTYPE html>
<html>
  <head>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%23hidden-element%20%7B%0A%20%20%20%20%20%20%20%20visibility%3A%20hidden%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />
  </head>
  <body>
    <p>This is some text before the hidden element.</p>
    <div id="hidden-element">
      <p>This element is hidden using visibility.</p>
    </div>
    <p>This is some text after the hidden element.</p>
  </body>
</html>

In this example, the #hidden-element is hidden using visibility: hidden. Notice that the element still occupies space on the page, and the text after it is still positioned as if it were visible.

display: none

The display property in CSS determines how an element is displayed on the web page. If set to none, the element will be completely removed from the page and will not occupy any space. This means that any other elements that would normally be positioned after it will be repositioned as if the hidden element were not present.

Here’s an example of how display: none works:

<!DOCTYPE html>
<html>
  <head>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%23hidden-element%20%7B%0A%20%20%20%20%20%20%20%20display%3A%20none%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />
  </head>
  <body>
    <p>This is some text before the hidden element.</p>
    <div id="hidden-element">
      <p>This element is hidden using display.</p>
    </div>
    <p>This is some text after the hidden element.</p>
  </body>
</html>

In this example, the #hidden-element is hidden using display: none. Notice that the element does not occupy any space on the page, and the text after it is repositioned as if the element were not present.

When to use visibility: hidden vs. display: none

Now that we’ve seen how visibility: hidden and display: none work, it’s important to consider when to use one over the other.

Use visibility: hidden when you want to hide an element from view but still want it to occupy space on the page. This can be useful when you want to reveal the element later or when you want to maintain the layout of the page.

Use display: none when you want to completely remove an element from the page and don’t want it to occupy any space. This can be useful when you want to completely hide an element and don’t plan to reveal it later.

Maintaining the Aspect ratio of a div is a common requirement when creating responsive web designs. In this article, we’ll explore how to use CSS to maintain the Aspect ratio of a div as the window’s width changes.

To achieve this, we’ll use the padding hack. The padding hack is a technique that uses a percentage value for padding-top or padding-bottom to maintain the Aspect ratio of an element. The percentage value is calculated based on the width of the parent element. As the width of the parent element changes, the padding value will adjust to maintain the Aspect ratio of the child element.

Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

DOWNLOAD NOW

Let’s start by creating a div element with a background color.

<div class="aspect-ratio"></div>

<style>
  .aspect-ratio {
    background-color: #ccc;
  }
</style>

To maintain the Aspect ratio of this div, we’ll set its padding-top to a percentage value. The percentage value will be calculated based on the desired Aspect ratio of the div. For example, if we want the Aspect ratio to be 16:9, we’ll set the padding-top to 56.25% (9/16 * 100).

.aspect-ratio {
  background-color: #ccc;
  padding-top: 56.25%;
}

Now, as the width of the parent element changes, the padding value will adjust as desired.

Here’s an example that shows how to use the padding hack on a div with a background image.

<div class="aspect-ratio" style="background-image: url('image.jpg')"></div>

<style>
  .aspect-ratio {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }
  
  .aspect-ratio:before {
    content: "";
    display: block;
    padding-top: 56.25%;
  }
  
  .aspect-ratio > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

In this example, we are again using the padding hack, and we’re also using a pseudo-element (:before) to create the padding. We’re setting the position of the parent element to relative and the position of the child element to absolute to position the child element inside the parent element. We’re also setting the width and height of the child element to 100% to fill the parent element.

In conclusion, the padding hack is a simple and effective technique for maintaining the Aspect ratio of a div as the window’s width changes. By using a percentage value for padding-top or padding-bottom, we can calculate the padding value based on the desired Aspect ratio of the div. This technique is widely used in responsive web design and can be used to create a variety of layouts and designs. Be sure to check out our library of CSS articles and tutorials while you’re here!

The CSS selectors :where() and :is() are two pseudo-classes that allow you to select elements based on their relationship with other elements. Although they sound similar, they are different in terms of functionality and syntax.

Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

DOWNLOAD NOW

The :where() pseudo-class was introduced as part of the CSS Selectors Level 4 specification and allows you to select elements based on the presence of other elements that match a specific condition. In other words, you can select elements based on the relationship between elements in a DOM tree. For example, you can use the :where() selector to select a list item li only if it is the first child of an unordered list ul:

li:where(:first-child of ul) {
  background-color: yellow;
}

On the other hand, the :is() pseudo-class is part of the CSS Selectors Level 3 specification and allows you to select an element if it is one of several different selectors. It is similar to the logical OR operator, in CSS. For example, you can use the :is() selector to select a p element if it is either the first child of its parent or has a class of highlight:

p:is(:first-child, .highlight) {
  background-color: yellow;
}

It’s important to note that the :where() selector has better browser support than the :is() selector, and that the :is() selector should not be used in conjunction with the :not() pseudo-class.

In this quick tip, we’re going to show you 2 different ways to disable the resizing of a textarea, for those times when you don’t want the user to be able to control it in this manner. It’s a relatively quick process, with just some simple CSS using the resize CSS property.

Your Designer Toolbox Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

DOWNLOAD NOW

HTML

The HTML textarea element provides a resizable property by default. To disable it, you can use the CSS property resize: none in the textarea element. Here is an example:

 <textarea style="resize: none;"></textarea> 

CSS

You can also disable the resizable property of a textarea by using CSS that is not inline. You can add a class to the textarea element and then add the CSS property resize: none to the class. Here is an example:

<textarea class="no-resize"></textarea>

<style>
  .no-resize {
    resize: none;
  }
</style>

Did you know that we can hardware-accelerate graphics-intensive CSS features by offloading them to the GPU (Graphics Processing Unit) for better rendering performance in the browser? Computers have graphics cards suitable for CSS hardware acceleration. Because of this, we can...

The post Increase Site Performance With CSS Hardware Acceleration appeared first on Treehouse Blog.

There are two main CSS properties that control text selection highlighting: user-select and -webkit-user-select. These properties are used to specify whether or not users are able to select text on the web page.

UNLIMITED DOWNLOADS: Email, admin, landing page & website templates

Starting at only $16.50 per month! DOWNLOAD NOW

To disable text selection highlighting in CSS, you can set the value of the user-select property to none:

body {
   -webkit-user-select: none;  /* for Safari */
   -moz-user-select: none;     /* for Firefox */
   -ms-user-select: none;      /* for Internet Explorer */
   user-select: none;          /* for modern browsers */
}

In this example, the user-select property is applied to the body element, which means that text selection highlighting will be disabled for the entire page. If you want to disable text selection highlighting for a specific element, simply apply the property to that element instead of the body element.

It’s important to note that the -webkit-user-select and -moz-user-select properties are vendor-specific extensions, and are used to ensure compatibility with Safari and Firefox, respectively. The -ms-user-select property is used for compatibility with Internet Explorer. The standard user-select property should work in all modern browsers.

CSS has a lot of different units that you can choose from. In many cases, there is one unit that’s clearly better than any others. 

However, one question that seems to come up throughout my career is whether you should use pixels or rems on certain properties where it doesn’t seem to make a clear difference.