CSS Resize

Great CSS tricks

Watch User Created Playlist (31)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Reuse Flexbox Styles With A Sass Mixin

Using Flexbox in Websites and Applications

P

Turning a flexbox into a grid using flex-wrap and align-content

P

Combining the flexbox sizing properties using the flex shorthand

P

Using flex-shrink and flex-grow to make flexbox children resize correctly

P

Defining dimensions on flexbox children using flex-basis

P

Demystifying alignment in flexbox children

P

Using order to rearrange flexbox children

P

Flexbox Fundamentals

Create a tab component using vanilla CSS

Easily Reset Styles With a Single CSS value

Dynamically Size Elements with Pure CSS

Target Positional Elements Using *-Of-Type CSS pseudo-classes

Creating visual skip links in HTML and CSS

Manipulate Images Using CSS Filter and Blend Modes

Control Image Aspect Ratio Using CSS

Use CSS Counters to Create Pure CSS Dynamic Lists

Create a fixed-fluid-fixed layout using CSS calc()

Layout Responsive Fluid Columns Using CSS

Create CSS Selectors in Chrome DevTools from Selection

P

Focus management using CSS, HTML, and JavaScript

Targeting Elements with CSS Attribute Selectors

Using CSS Combinators to Identify Siblings and Descendants in CSS

P

CSS :target Selector

P

CSS Media Queries

CSS Display Property: Block, Inline-Block, and Inline

P

CSS :not Selector

P

CSS Transitions: Easing and Other Timing Functions

P

CSS Transitions: Delays and Multiple Properties

Introduction to CSS Transitions

Basic CSS Selectors

css tutorial about Reuse Flexbox Styles With A Sass Mixin

Reuse Flexbox Styles With A Sass Mixin

4:54 css

This lesson covers flexbox in a reusable mixin that should cover most layout situations on your site. With variables and common defaults, this mixin will cover most alignment issues and replace the need for tables for all time. Need a column with each item evenly spaced but starting their alignment on the top? No problem! How about a row with the items evenly spaced out as well as equal spacing around the edges? We have you covered!

css tutorial about Using Flexbox in Websites and Applications

Using Flexbox in Websites and Applications

3:29 css PRO

Flexbox makes it easier to create layouts that can adjust depending on the content that is added and the space available. In this lesson we look at a couple real-world applications of Flexbox in an application and website.

css tutorial about Turning a flexbox into a grid using flex-wrap and align-content

Turning a flexbox into a grid using flex-wrap and align-content

1:47 css PRO

Adding flex-wrap to a flexbox container allows the items to form a grid. The content can then be aligned and distributed along the grid using justify-content and align-content.

css tutorial about Combining the flexbox sizing properties using the flex shorthand

Combining the flexbox sizing properties using the flex shorthand

1:39 css PRO

The flex shorthand makes it easier to declare flex-shrink, flex-grow, and flex-basis, but it sometimes has unexpected results because the defaults differ.

css tutorial about Using flex-shrink and flex-grow to make flexbox children resize correctly

Using flex-shrink and flex-grow to make flexbox children resize correctly

2:36 css PRO

Flex-basis lets us set the ideal dimensions for a flexbox child, but flex-shrink lets us define what should happen if there isn't enough room, and flex-grow can define what happens when there is too much room.

css tutorial about Defining dimensions on flexbox children using flex-basis

Defining dimensions on flexbox children using flex-basis

1:38 css PRO

The flex-basis property allows us to define the dimension (along the flex-direction axis) that a flexbox child should ideally have.

css tutorial about Demystifying alignment in flexbox children

Demystifying alignment in flexbox children

3:35 css PRO
css tutorial about Using order to rearrange flexbox children

Using order to rearrange flexbox children

1:17 css PRO

Using the order property we alter the order in which flexbox children appear on the page, without making changes to the dom.

css tutorial about Flexbox Fundamentals

Flexbox Fundamentals

9:55 css

In this lesson we'll look at all of the properties available to us with the CSS3 Flexible Box, or flexbox.

css tutorial about Create a tab component using vanilla CSS

Create a tab component using vanilla CSS

3:09 css

Learn how to create tabs with nothing more than good ole' CSS. Look Ma, No Javascript!

note: This approach has some accessibility issues. To make a tab component that is properly accessible, it requires some JavaScript.

css tutorial about Easily Reset Styles With a Single CSS value

Easily Reset Styles With a Single CSS value

1:13 css

There are times where you need to reset a an element’s styles. Instead of overwriting it with even more style declarations, you can simply reset them.

css tutorial about Dynamically Size Elements with Pure CSS

Dynamically Size Elements with Pure CSS

2:57 css

Learn how to size elements based on the dimensions of the viewport, even when the browser is resized - no JavaScript needed!

css tutorial about Target Positional Elements Using *-Of-Type CSS pseudo-classes

Target Positional Elements Using *-Of-Type CSS pseudo-classes

2:43 css

Learn how to target elements based on their position inside of a parent element in relation to its siblings.

css tutorial about Creating visual skip links in HTML and CSS

Creating visual skip links in HTML and CSS

5:51 css

Skip links are an extremely helpful navigation pattern for keyboard and screen reader users, since they let you skip past sections of content. Learn how to create skip links in HTML and CSS that show on focus, and you'll benefit all users!

css tutorial about Manipulate Images Using CSS Filter and Blend Modes

Manipulate Images Using CSS Filter and Blend Modes

2:24 css

Apply filters like blur, brightness, saturation and hue to images. Combined with CSS blend modes, you can create powerful image effects using only code. This can drastically reduce the amount of time spent back and forth between designers and developers.

Here's more information about filter, blend-mode, and mix-blend-mode.

css tutorial about Control Image Aspect Ratio Using CSS

Control Image Aspect Ratio Using CSS

2:14 css

Resize images and videos to fill their parent and maintain their aspect ratio with pure CSS. The new object-fit and object-position properties allow you to scale images and videos, much like you could with background-size and background-position.

css tutorial about Use CSS Counters to Create Pure CSS Dynamic Lists

Use CSS Counters to Create Pure CSS Dynamic Lists

1:19 css

CSS counters let you create dynamic lists without JavaScript. In this lesson, we will create a multi-level table of contents using the CSS counter-reset and counter-increment properties with the counter attribute.

css tutorial about Create a fixed-fluid-fixed layout using CSS calc()

Create a fixed-fluid-fixed layout using CSS calc()

0:59 css

CSS calc() allows you to mix and match units to get real-time calculations. It's useful when you need to size elements but you have some unknown number that you have to account for.

css tutorial about Layout Responsive Fluid Columns Using CSS

Layout Responsive Fluid Columns Using CSS

3:03 css

Learn how to use CSS columns to quickly lay out fluid columns that are responsive, degrade gracefully and don't require extra markup.

Notes:

  • column-width operates like min-width, not width. The browser will render as many columns as it can with the width provided. If each column can take up more than the value provided, they will do so.
  • column-span enables a specific element to ignore column-count and column-width. It can be set to an integer to span a certain number of columns, or "all" to span them all. However, this property does not work in Firefox. A workaround could be to move the element (say, a heading) outside of the container with the columns applied to it. That way, it remains outside of the automatic column flow.
  • column-fill allows you to change the way content flows into columns. By default, it's set to "balance", where content is distributed as much as possible between columns. It can also be set to "auto", but in order to do so, it requires setting a fixed height. This breaks the idea of fluid, responsive layouts, so use it with caution. You'll also need some browser prefixes, so be sure to reference this browser support chart.
css tutorial about Create CSS Selectors in Chrome DevTools from Selection

Create CSS Selectors in Chrome DevTools from Selection

1:32 css PRO

Chrome dev tools allow you to generate css selectors based on you your mouse selection. This lesson shows you how to leverage the dev tools to generate css selectors and then revise them to match your needs.

css tutorial about Focus management using CSS, HTML, and JavaScript

Focus management using CSS, HTML, and JavaScript

8:34 css

Something important to consider when coding a web application is managing the user's focus. For keyboard and screen reader users, we must ensure their focus is not dropped as content is deleted or shown in new contexts. Skip links also provide a way for users to get past a lot of content. In this lesson, you'll learn HTML, CSS and JavaScript techniques for focus management that can be applied to many situations.

css tutorial about Targeting Elements with CSS Attribute Selectors

Targeting Elements with CSS Attribute Selectors

5:00 css

Beyond classes and IDs CSS also provides selectors to target element based on their attributes. In this lesson we'll look at selecting elements based on attributes and using CSS modifiers to identify variations of those values

css tutorial about Using CSS Combinators to Identify Siblings and Descendants in CSS

Using CSS Combinators to Identify Siblings and Descendants in CSS

4:37 css PRO

CSS combinators allows us to reference the DOM relationship between two or more elements in CSS.

css tutorial about CSS :target Selector

CSS :target Selector

1:52 css PRO

The :target selector allows us to interact with a fragment identifier, or hash, in our URL from CSS.

css tutorial about CSS Media Queries

CSS Media Queries

5:05 css

Using CSS media queries allows you to design responsive layout in your web apps and website. We will go over the media query basics in this lesson.

css tutorial about CSS Display Property: Block, Inline-Block, and Inline

CSS Display Property: Block, Inline-Block, and Inline

2:51 css PRO

Understanding the most common CSS display types of block, inline-block, and inline will allow you to get the most out of your HTML and use CSS Frameworks like Bootstrap to their fullest.

css tutorial about CSS :not Selector

CSS :not Selector

0:53 css PRO

The CSS :not() selector allows us to exclude a subset of elements matched by our selector. In this example we refactor two selectors down to one using the CSS :not() selector.

css tutorial about CSS Transitions: Easing and Other Timing Functions

CSS Transitions: Easing and Other Timing Functions

3:55 css PRO

Learn how to apply timing functions to CSS transitions. We'll talk about pre-defined functions like 'ease-in', 'ease-out' and 'step', and then look at how to specify a custom function capturing the exact transition effect you're looking for.

css tutorial about CSS Transitions: Delays and Multiple Properties

CSS Transitions: Delays and Multiple Properties

3:33 css

Learn how to spice up your CSS Transitions using delays and compound transition rules that specify independently varying rules for transitions to multiple properties on the same object.

css tutorial about Introduction to CSS Transitions

Introduction to CSS Transitions

2:27 css

Learn how to use native CSS transitions to automagically add motion to your application. By specifying a simple transition rule, changes to the values of specific properties can be interpolated over time to give a graceful, polished look and feel to what used to be a jarring and sudden transition.

css tutorial about Basic CSS Selectors

Basic CSS Selectors

2:23 css

The first step to styling a website or application is correctly defining CSS selectors. Garth breaks down the anatomy of a basic CSS ruleset to lay the foundation for more complex selectors.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?