CSS Advanced Summary

1. Rounded Corners 🔼

Use border-radius property to give any element rounded corners.

📚w3schools CSS Rounded Corners

3. Multiple Backgrounds 🔼

Add multiple background images to one element.

📚 w3schools CSS Multiple Backgrounds

Background Size

The CSS background-size property allows specifying the size of background images.

The size can be specified in:
lengths
percentages
or by using one of the two keywords:
contain
or
cover

Define Sizes of Multiple Background Images
The background-size property can accept multiple values for background size using a comma-separated list, when working with multiple backgrounds.

Full Size Background Image

Want: put a background image on a website that covers the entire browser window at all times.

The requirements are as follows:

• Fill the entire page with the image (no white space)
• Scale image as needed
• Center image on page
• Do not cause scrollbars

html {
  background:url(img_man.jpg) no-repeat center fixed;
  background-size:cover;
}

Hero Image
Use different background properties on a <div> to create a hero image - a large image with text - and place it where it is wanted.

.hero-image {
  background: url(img_man.jpg) no-repeat center;
  background-size: cover;
  height: 500px;
  position: relative;
}     

CSS background-origin Property
background-origin property specifies where the background image is positioned.

border-box

the background image starts from the upper left corner of the border

padding-box default

the background image starts from the upper left corner of the padding edge

content-box

the background image starts from the upper left corner of the content

#example1 {
  border:10px solid black;
  padding:35px;
  background:url(img_flwr.gif);
  background-repeat:no-repeat;
  background-origin:content-box;
}

5. Gradients 🔼

Display smooth transitions between two or more specified colors.

📚 w3schools CSS Gradients

Two types of gradients:
Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)

Linear Gradients

To create a linear gradient you must define at least two color stops.

Color stops are the colors wanted to render smooth transitions among. A starting point and a direction (or an angle) along with the gradient effect can be set.

Syntax

Linear Gradient - Top to Bottom (this is default)

a linear gradient that starts at the top

Linear Gradient - Left to Right

a linear gradient that starts from the left

Linear Gradient - Diagonal

a gradient diagonally by specifying both the horizontal and vertical starting positions

Using Angles

To have more control over the direction of the gradient, can define an angle, instead of the predefined directions (to bottom, to top, to right, to left, to bottom right, etc.).

Syntax

The angle is specified as an angle between a horizontal line and the gradient line.

Using Multiple Color Stops

Using Transparency

CSS gradients also support transparency, which can be used to create fading effects.

Use the rgba() function to define the color stops to add transparency.

The last parameter in the rgba() function can be a value from 0 to 1 , and it defines the transparency of the color:
0 indicates full transparency
1 indicates full color (no transparency)

Repeating a linear-gradient

CSS Radial Gradients

📚 w3schools CSS Radial Gradients

Defined by its center.

To create a radial gradient must define at least two color stops.

Syntax

By default:
shape = ellipse
size = farthest-corner
position is center

Radial Gradient - Evenly Spaced Color Stops (this is default)

Radial Gradient - Differently Spaced Color Stops
The following example shows a radial gradient with differently spaced color stops:
background-image: radial-gradient(red 5%, yellow 15%, green 60%);

Set Shape

The shape parameter defines the shape. It can take the value:
circle
or
ellipse
The default value is ellipse.

Use of Different Size Keywords

The size parameter defines the size of the gradient. It can take four values:
closest-side
farthest-side
closest-corner
farthest-corner

Repeating a radial-gradient

The repeating-radial-gradient() function is used to repeat radial gradients.

7. Text Effects 🔼

📚 w3schools CSS Text Effects

Available text effects:
text-overflow
word-wrap
word-break
writing-mode

9. 2D Transforms 🔼

📚 w3schools CSS 2D Transforms

Allow you to move, rotate, scale, and skew elements.

11. Transitions 🔼

📚 w3schools CSS Transitions

Allows changing property values smoothly, over a given duration.

13. Tooltip 🔼

📚 w3schools CSS Tooltip

Create tooltips with CSS.

1. Tooltip container - a container element (like <div>) and add the tooltip class
2. Tooltip text - placed inside an inline element (like <span>) with class="tooltiptext".
3. Position the tooltip text - tooltip class uses position:relative, which is needed to position the tooltip text (position:absolute).
4. Show the tooltip text when mouse is over the tooltip container - tooltiptext class holds the actual tooltip text

Types of tooltips that can appear when the mouse is over an element:
Basic Tooltip
Positioning Tooltips
Tooltip Arrows
Fade In Tooltips (Animation)

15. The object-fit Property 🔼

📚 w3schools CSS The object-fit Property

Used to specify how an <img> or <video> should be resized to fit its container.

Tells the content to fill the container in a variety of ways - such as:
preserve that aspect ratio
or
stretch up and take up as much space as possible

• fill
  The default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit

• contain
  The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box

• cover
  The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit

• none
  The replaced content is not resized

• scale-down
  The content is sized as if none or contain were specified (would result in a smaller concrete object size)

17. Pagination Examples 🔼

📚 w3schools CSS Pagination Examples

Create a responsive pagination using CSS.

Simple Pagination
Add some sort of pagination to each page

Active and Hoverable Pagination
Highlight the current page with an .active class, and use the :hover selector to change the color of each page link when moving the mouse over them
Rounded Active and Hoverable Buttons
Add the border-radius property if you want a rounded active and hover button
Hoverable Transition Effect
Add the transition property to the page links to create a transition effect on hover

Bordered Pagination
Use the border property to add borders to the pagination
Rounded Borders
Tip: Add rounded borders to your first and last link in the pagination
Space Between Links
Tip: Add the margin property if you do not want to group the page links

Pagination Size
Change the size of the pagination with the font-size property

Centered Pagination
To center the pagination, wrap a container element (like <div>) around it with text-align:center

Breadcrumbs
Another variation of pagination is so-called breadcrumbs

19. User Interface 🔼

📚 w3schools CSS User Interface

CSS user interface properties:
resize
outline-offset

21. Box Sizing 🔼

📚 w3schools CSS Box Sizing

The CSS box-sizing property allows including the padding and border in an element's total width and height.

Without the CSS box-sizing Property
By default, the width and height of an element is calculated like this:
width + padding + border = actual width of an element
height + padding + border = actual height of an element

This means: when setting the width/height of an element, the element often appears bigger than set (because the element's border and padding are added to the element's specified width/height).

The box-sizing property solves this problem.

With the CSS box-sizing Property
The box-sizing property allows including the padding and border in an element's total width and height.

If setbox-sizing:border-box; on an element, padding and border are included in the width and height.

Since the result of using the box-sizing:border-box; is so much better, many developers want all elements on their pages to work this way.

The code below ensures that all elements are sized in this more intuitive way. Many browsers already use box-sizing:border-box; for many form elements (but not all - which is why inputs and text areas look different at width:100%;).

Applying this to all elements is safe and wise.

23. Media Queries 🔼

📚 w3schools CSS Media Queries

CSS2 Introduced Media Types

The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.

Unfortunately these media types never got a lot of support by devices, other than the print media type.

CSS3 Introduced Media Queries

Media queries in CSS3 extended the CSS2 media types idea:
Instead of looking for a type of device, they look at the capability of the device.

Media queries can be used to check many things, such as:
width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution

Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).

Media Query Syntax

@media not|only mediatype and (expressions) {
  CSS-Code;
}

The result of the query is true if the specified media type matches the type of device the document is being displayed on and all expressions in the media query are true.

When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.

Unless using the not or only operators, the media type is optional and the all type will be implied.

Can also have different stylesheets for different media:
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

Media Queries Simple Examples

One way to use media queries is to have an alternate CSS section right inside the style sheet.

More Media Query Examples

📚 w3schools CSS Media Queries - Examples

For a full overview of all the media types and features/expressions, look at:
📚 w3schools CSS @media Rule Reference