Loading lesson path
CSS
Advanced visual effects, richer styling techniques, and CSS patterns you layer on top of the basics.
The CSS border-radius property is used to create rounded corners for elements.
Sass is a CSS pre-processor.
With the CSS border-image property, you can define an image to be used as the border around an element.
CSS allows you to add multiple background images for an element, through the background-image property.
The background-size property allows you to specify the size of background images.
The CSS background-origin property specifies where the background image is positioned.
The CSS background-clip property defines how far the background (color, image, or gradient) should extend within an element.
CSS supports 140+ color names, HEX values, RGB values , RGBA values, HSL values, HSLA values, and opacity.
CSS has some special predefined color keywords that can be used with properties like color , background-color and border-color .
The CSS gradient functions let you display smooth transitions between two or more colors within an element.
The CSS radial-gradient() function creates a radial gradient.
The CSS conic-gradient() function creates a conic gradient.
With CSS you can create shadow effects!
The CSS box-shadow property is used to apply one or more shadows to an element.
CSS has some properties to handle text overflow, word wrapping, line breaking rules and writing modes.
The font does not have to be installed on the user's computer.
The CSS transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, and skew elements.
The scale() function increases or decreases the size of an element (according to the parameters given for the width and height).
The skewX() function skews an element along the X-axis by the given angle.
The CSS transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, and skew elements.
CSS transitions allows you to change property values smoothly, over a given duration.
The transition-timing-function property specifies the speed curve of the transition effect.
CSS allows animation of HTML elements without using JavaScript!
The animation-delay property specifies a delay for the start of an animation.
This page covers the CSS animation direction, fill mode, and the shorthand property.
A CSS tooltip is used to specify extra information about something when the user moves the mouse pointer over an element:
To create an arrow that should appear from a specific side of the tooltip, add "empty" content after tooltip, with the pseudo-element class ::after together with the content property. The arrow itsel…
You can use the border-radius property to create rounded images:
The opacity property specifies the opacity/transparency of an element.
Create an overlay effect on hover:
This example demonstrates how to use HTML, CSS and JavaScript together, to create a responsive modal image gallery.
With CSS, you can center images with several methods.
The CSS filter property is used to add visual effects (like blur and saturation) to elements.
With CSS it is easy to shape (clip) images to circles, ellipses and polygons.
The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container.
The CSS object-position property is used together with the object-fit property to specify how an <img> or <video> should be positioned with x/y coordinates within its container.
CSS masking allows you to create a mask layer to place over an element to partially or fully hide portions of the element.
CSS gradients can also be used as the mask layer image.
The SVG <mask> element can be used to apply a mask to an image.
With CSS, different HTML buttons can be styled in many ways.
This page covers CSS button hover effects, shadows, disabled states, and width.
This page covers CSS button groups and animated buttons.
This page covers advanced pagination styling including hover effects, transitions, and breadcrumbs.
The CSS Multi-column Layout Module allows easy definition of multiple columns of text - just like in newspapers:
This page covers CSS column rules, span, and width properties.
- resize - outline-offset
The var() function is used to insert the value of a CSS variable.
from the earlier example we have learned that global variables can be accessed through the entire document, while local variables can be used only inside the selector where it is declared.
CSS variables have access to the DOM, which means that you can change them with JavaScript.
Media Queries are about defining different style rules for different devices (screens, tablets, mobile phones, etc.). You can learn more Media Queries in our Media Queries Chapter .
The definition below creates a custom property named --myColor, defines it as a color property, specifies that it will inherit values from its parent elements, and its default value is lightgray.
The CSS box-sizing property defines how to calculate the width and height of an element: should the calculation include padding and borders, or not.
CSS media queries allow you to apply styles based on the characteristics of a device or the environment displaying the web page.