CSS Advanced Summary

2020-May-26

📚 start of w3schools CSS Advanced

💨 Eugene Ruthven

email Feedback About This Page

🔽 1. Rounded Corners 🔽 9. 2D Transforms 🔽 17. Pagination Examples
🔽 2. Border Images 🔽 10. 3D Transforms 🔽 18. Multiple Columns
🔽 3. Multiple Backgrounds 🔽 11. Transitions 🔽 19. User Interface
🔽 4. Colors 🔽 12. Animations 🔽 20. Variables
🔽 5. Gradients 🔽 13. Tooltip 🔽 21. Box Sizing
🔽 6. Shadow Effects 🔽 14. Styling Images 🔽 22. Flexbox
🔽 7. Text Effects 🔽 15. The object-fit Property 🔽 23. Media Queries
🔽 8. Web Fonts 🔽 16. Buttons 🔽 24. Media Queries - Examples


1. Rounded Corners 🔼

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

📚w3schools CSS Rounded Corners

PropertyDescription
border-radius A shorthand property for setting all the four border-*-*-radius properties
border-top-left-radius Defines the shape of the border of the top-left corner
border-top-right-radius Defines the shape of the border of the top-right corner
border-bottom-right-radius Defines the shape of the border of the bottom-right corner
border-bottom-left-radius Defines the shape of the border of the bottom-left corner

2. Border Images 🔼

With border-image property can set an image to be used as the border around an element.

📚w3schools CSS Border Images

PropertyDescription
border-image A shorthand property for setting all the border-image-* properties
border-image-source Specifies the path to the image to be used as a border
border-image-slice Specifies how to slice the border image
border-image-width Specifies the widths of the border image
border-image-outset Specifies the amount by which the border image area extends beyond the border box
border-image-repeat Specifies whether the border image should be repeated, rounded or stretched

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

contain

Scales background image to be as large as possible but both its width and its height must fit inside the content area.

As such, depending on the proportions of the background image and the background positioning area, there may be some areas of the background which are not covered by the background image.

 

cover

Scales the background image so that the content area is completely covered by the background image both its width and height are equal to or exceed the content area.

As such, some parts of the background image may not be visible in the background positioning area.


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:

Example of this using the <html> element.
Why the <html> element? It is always at least the height of the browser window.
Set a fixed and centered background on it.
Adjust its size with the background-size property

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.

The property takes three different values:
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;
}

 

CSS Advanced Background Properties
PropertyDescription
background A shorthand property for setting all the background properties in one declaration
background-clip Specifies the painting area of the background
background-image Specifies one or more background images for an element
background-origin Specifies where the background image(s) is/are positioned
background-size Specifies the size of the background image(s)

4. Colors 🔼

CSS supports 140+ color names, HEX values, RGB values, RGBA values, HSL values, HSLA values, and opacity.

📚 w3schools CSS Colors


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

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
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

background-image: linear-gradient(angle, color-stop1, color-stop2);

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

Using Multiple Color Stops

The following example shows a linear gradient (from top to bottom) with multiple color stops background-image: linear-gradient(red, yellow, green);

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

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

CSS Radial Gradients

📚 w3schools CSS Radial Gradients

Defined by its center.

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

Syntax

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

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.

CSS Gradient Properties
PropertyDescription
background-image Sets one or more background images for an element

6. Shadow Effects 🔼

Can add shadow to text and to elements.

📚 w3schools CSS Shadow Effects

The following properties:
text-shadow
box-shadow

text-shadow property applies shadow to text.

box-shadow property applies shadow to elements.


7. Text Effects 🔼

📚 w3schools CSS Text Effects

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

CSS Text Effect Properties
PropertyDescription
text-align-last Specifies how to align the last line of a text
text-justify Specifies how justified text should be aligned and spaced
text-overflow Specifies how overflowed content that is not displayed should be signaled to the user
word-break Specifies line breaking rules for non-CJK scripts
word-wrap Allows long words to be able to be broken and wrap onto the next line
writing-mode Specifies whether lines of text are laid out horizontally or vertically

8. Web Fonts 🔼

📚 w3schools CSS Web Fonts

Web fonts allow Web designers to use fonts that are not installed on the user's computer:
TrueType Fonts (TTF)
OpenType Fonts (OTF)
The Web Open Font Format (WOFF)
The Web Open Font Format (WOFF 2.0)
SVG Fonts/Shapes
Embedded OpenType Fonts (EOT)

CSS Font Descriptors
DescriptorValuesDescription
font-family name Required. Defines a name for the font
src URL Required. Defines the URL of the font file
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
Optional. Defines how the font should be stretched. Default is "normal"
font-style normal
italic
oblique
Optional. Defines how the font should be styled. Default is "normal"
font-weight normal
bold
100
200
300
400
500
600
700
800
900
Optional. Defines the boldness of the font. Default is "normal"
unicode-range unicode-range Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF"

9. 2D Transforms 🔼

📚 w3schools CSS 2D Transforms

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

CSS Transform Properties
PropertyDescription
transform Applies a 2D or 3D transformation to an element
transform-origin Allows you to change the position on transformed elements

 

2D Transform Methods
FunctionDescription
matrix(n,n,n,n,n,n) Defines a 2D transformation, using a matrix of six values
translate(x,y) Defines a 2D translation, moving the element along the X- and the Y-axis
translateX(n) Defines a 2D translation, moving the element along the X-axis
translateY(n) Defines a 2D translation, moving the element along the Y-axis
scale(x,y) Defines a 2D scale transformation, changing the elements width and height
scaleX(n) Defines a 2D scale transformation, changing the element's width
scaleY(n) Defines a 2D scale transformation, changing the element's height
rotate(angle) Defines a 2D rotation, the angle is specified in the parameter
skew(x-angle,y-angle) Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle) Defines a 2D skew transformation along the X-axis
skewY(angle) Defines a 2D skew transformation along the Y-axis

10. 3D Transforms 🔼

📚 w3schools CSS 3D Transforms

CSS Transform Properties
PropertyDescription
transform Applies a 2D or 3D transformation to an element
transform-origin Allows you to change the position on transformed elements
transform-style Specifies how nested elements are rendered in 3D space
perspective Specifies the perspective on how 3D elements are viewed
perspective-origin Specifies the bottom position of 3D elements
backface-visibility Defines whether or not an element should be visible when not facing the screen

 

CSS 3D Transform Methods
FunctionDescription
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Defines a 3D transformation, using a 4x4 matrix of 16 values
translate3d(x,y,z) Defines a 3D translation
translateX(x) Defines a 3D translation, using only the value for the X-axis
translateY(y) Defines a 3D translation, using only the value for the Y-axis
translateZ(z) Defines a 3D translation, using only the value for the Z-axis
scale3d(x,y,z) Defines a 3D scale transformation
scaleX(x) Defines a 3D scale transformation by giving a value for the X-axis
scaleY(y) Defines a 3D scale transformation by giving a value for the Y-axis
scaleZ(z) Defines a 3D scale transformation by giving a value for the Z-axis
rotate3d(x,y,z,angle) Defines a 3D rotation
rotateX(angle) Defines a 3D rotation along the X-axis
rotateY(angle) Defines a 3D rotation along the Y-axis
rotateZ(angle) Defines a 3D rotation along the Z-axis
perspective(n) Defines a perspective view for a 3D transformed element

11. Transitions 🔼

📚 w3schools CSS Transitions

Allows changing property values smoothly, over a given duration.

CSS Transition Properties
PropertyDescription
transition A shorthand property for setting the four transition properties into a single property
transition-delay Specifies a delay (in seconds) for the transition effect
transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete
transition-property Specifies the name of the CSS property the transition effect is for
transition-timing-function Specifies the speed curve of the transition effect

12. Animations 🔼

📚 w3schools CSS Animations

Allows animation of HTML elements without using JavaScript or Flash!

CSS Animation Properties
PropertyDescription
@keyframes Specifies the animation code
animation A shorthand property for setting all the animation properties
animation-delay Specifies a delay for the start of an animation
animation-direction Specifies whether an animation should be played forwards, backwards or in alternate cycles
animation-duration Specifies how long time an animation should take to complete one cycle
animation-fill-mode Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
animation-iteration-count Specifies the number of times an animation should be played
animation-name Specifies the name of the @keyframes animation
animation-play-state Specifies whether the animation is running or paused
animation-timing-function Specifies the speed curve of the animation

13. Tooltip 🔼

📚 w3schools CSS Tooltip

Create tooltips with CSS.

4 parts to creating a tooltip with CSS for each part:
  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)


Basic Tooltip: Hover over me Basic Tooltip text


14. Styling Images 🔼

📚 w3schools CSS Styling Images

 


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

The object-fit property can have the following values:

16. Buttons 🔼

📚 w3schools CSS Buttons

Style buttons using CSS.

Basic Button Styling
default styling

Button Colors
Use background-color property to change the background color of a button

Button Sizes
Use font-size property to change the font size of a button

Rounded Buttons
Use border-radius property to add rounded corners to a button

Colored Button Borders
Use border property to add a colored border to a button

Hoverable Buttons
Use :hover selector to change the style of a button when you move the mouse over it.

Tip: Use transition-duration property to determine the speed of the hover effect.

Shadow Buttons
Use box-shadow property to add shadows to a button

Disabled Buttons
Use opacity property to add transparency to a button - creates a disabled look.

Tip: You can also add cursor property with a value of not-allowed, which will display a no parking sign when you mouse over the button

Button Width
By default, the size of the button is determined by its text content - as wide as its content. Use width property to change the width of a button

Button Groups
Remove margins and add float:left to each button to create a button group

Bordered Button Group
Use border property to create a bordered button group

Vertical Button Group
Use display:block instead of float:left to group the buttons below each other, instead of side by side

Button on Image

Animated Buttons


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


18. Multiple Columns 🔼

📚 w3schools CSS Multiple Columns

CSS Multi-column Layout
The CSS multi-column layout allows easy definition of multiple columns of text - just like in newspapers.

CSS Multi-columns Properties
PropertyDescription
column-count Specifies the number of columns an element should be divided into
column-fill Specifies how to fill columns
column-gap Specifies the gap between the columns
column-rule A shorthand property for setting all the column-rule-* properties
column-rule-color Specifies the color of the rule between columns
column-rule-style Specifies the style of the rule between columns
column-rule-width Specifies the width of the rule between columns
column-span Specifies how many columns an element should span across
column-width Specifies a suggested, optimal width for the columns
columns A shorthand property for setting column-width and column-count

19. User Interface 🔼

📚 w3schools CSS User Interface

CSS user interface properties:
resize
outline-offset


CSS User Interface Properties
PropertyDescription
outline-offset Adds space between an outline and the edge or border of an element
resize Specifies whether or not an element is resizable by the user

20. Variables 🔼

📚 w3schools CSS Variables

The var() function can be used to insert the value of a custom property.

Variables in CSS should be declared within a CSS selector that defines its scope. For a global scope can use either the :root or the body selector.

The variable name must begin with two dashes (--) and is case sensitive!

The syntax of the var() function is as follows:
var(custom-name, value)

ValueDescription
custom-name Required. The custom property's name (must start with two dashes)
value Optional. The fallback value (used if the custom property is invalid)

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.


22. Flexbox 🔼

📚 w3schools CSS Flexbox

CSS Flexbox Layout Module

Before the Flexbox Layout module, there were four layout modes:
Block, for sections in a webpage
Inline, for text
Table, for two-dimensional table data
Positioned, for explicit position of an element

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

Flexbox Elements
To start using the Flexbox model, need to first define a flex container.

Parent Element (Container)
The flex container becomes flexible by setting the display property to flex

The flex-direction property defines in which direction the container wants to stack the flex items.

The flex-wrap property specifies whether the flex items should wrap or not.

The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.

The justify-content property is used to align the flex items.

The align-items property is used to align the flex items.

The align-content property is used to align the flex lines.

Perfect Centering
SOLUTION: Set both the justify-content and align-items properties to center, and the flex item will be perfectly centered.

Child Elements (Items)
The direct child elements of a flex container automatically becomes flexible (flex) items.

The flex item properties are:

order
specifies the order of the flex items

flex-grow
specifies how much a flex item will grow relative to the rest of the flex items

flex-shrink
specifies how much a flex item will shrink relative to the rest of the flex items

flex-basis
specifies the initial length of a flex item

flex
a shorthand property for the flex-grow, flex-shrink, and flex-basis properties

align-self
specifies the alignment for the selected item inside the flexible container
overrides the default alignment set by the container's align-items property

Responsive Image Gallery using Flexbox
Use flexbox to create a responsive image gallery that varies between:
four images
two images
or
full-width images
depending on screen size.

Responsive Website using Flexbox
Use flexbox to create a responsive website, containing a flexible navigation bar and flexible content.

CSS Flexbox Properties
PropertyDescription
display Specifies the type of box used for an HTML element
flex-direction Specifies the direction of the flexible items inside a flex container
justify-content Horizontally aligns the flex items when the items do not use all available space on the main-axis
align-items Vertically aligns the flex items when the items do not use all available space on the cross-axis
flex-wrap Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line
align-content Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines
flex-flow A shorthand property for flex-direction and flex-wrap
order Specifies the order of a flexible item relative to the rest of the flex items inside the same container
align-self Used on flex items. Overrides the container's align-items property
flex A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties

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

A media query consists of a media type and can contain one or more expressions, which resolve to either true or false.
@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">

CSS3 Media Types
ValueDescription
all Used for all media type devices
print Used for printers
screen Used for computer screens, tablets, smart-phones etc.
speech Used for screenreaders that "reads" the page out loud

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


24. Media Queries - Examples 🔼

📚 w3schools CSS Media Queries - Examples

Media Queries For Menus

Media Queries For Columns

📚 w3schools To learn more about the Flexible Box Layout Module

📚 w3schools To learn more about Responsive Web Design

Hide Elements With Media Queries

Another common use of media queries, is to hide elements on different screen sizes.

Change Font Size With Media Queries

Can also use media queries to change the font size of an element on different screen sizes.

Flexible Image Gallery

Use media queries together with flexbox to create a responsive image gallery.

Flexible Website

There is an example that uses media queries together with flexbox to create a responsive website, containing a flexible navigation bar and flexible content.

Orientation: Portrait/Landscape

Media queries can also be used to change layout of a page depending on the orientation of the browser.

Can have a set of CSS properties that will only apply when the browser window is wider than its height, a so called Landscape orientatio

Min Width to Max Width

Can also use the (max-width: ..) and (min-width: ..) values to set a minimum width and a maximum width.

CSS @media Reference

For a full overview of all the media types and features/expressions, look at the @media rule at

📚 w3schools a full overview of all the media types and features/expressions

Tip: To learn more about responsive web design (how to target different devices and screens), using media query breakpoints, read the tutorial 📚 w3schools to learn more about responsive web design


🏆 🎈 The End!!! 🏁 📣