-
Selectors
5VideosSelectors have been available since the advent of CSS, but there are several new CSS3 selectors. These selectors allow web professionals to apply properties to page elements that were previously more difficult to access.
View Badge -
Typography
5VideosCSS3 includes numerous new typographic features, such as text-shadows. This is an exciting and rapidly evolving area of CSS3, wherein layout engines like webkit are pushing beyond W3C standards.
View Badge -
Web Fonts
8VideosThe @font-face rule allows for the inclusion of customized fonts, beyond what is available by default. This isn't actually a new feature of CSS3, but it has become popular over the last few years, so it has a coloquial association with other CSS3 properties.
View Badge -
Borders
6VideosCSS3 expands upon borders by adding features like rounded corners, shadows, and more. Using these features reduces the need for image-based solutions, which allows web pages to generally load faster.
View Badge -
Gradients
5VideosIn design, a gradient is the visual effect of one color gradually fading into another across a surface. Applying CSS3 gradients to elements reduces the need for image-based solutions and can improve front-end performance.
View Badge -
Backgrounds
5VideosMultiple backgrounds and background sizing are just two background features that are new in CSS3. Multiple backgrounds allows designers to build several layers of imagery into page elements and this feature in particular provides designers with tighter control than ever before.
View Badge -
Transitions
2VideosThe :hover pseudo-class has been used to create basic transitions for many years now, but the transition property allows things to animate more smoothly. When a transition is applied to an element, most changes to that element will be animated between two keyframe states.
View Badge -
Transforms
4VideosTransforms set page elements in either a 2D or 3D coordinate space. This makes it possible to manipulate the rotation and position of an element along the X, Y, and Z axis.
View Badge -
Animation
4VideosAnimations are a set of keyframes that are applied to an element via the animation property. Each keyframe includes CSS styling that is to be applied at that point in the animation. Then, the animation property smoothly animates between each keyframe.
View Badge -
Multi-Column Layouts
2VideosThe multi-column layout module in the CSS3 specification is capable of breaking up paragraph text into columns. These columns are created dynamically, which is much more flexible and accessible than continuous text that is broken across three separate HTML elements.
View Badge -
Media Queries
5VideosMedia Queries are a unique addition to CSS3 that allows designers to apply CSS declarations dynamically based on client conditions. For example, if the width of the browser window drops below a predetermined value, alternative CSS can be applied dynamically.
View Badge
Design Foundations
Unlocking this badge will help you earn the Design Foundations badge.
View the badge mapAbout this badge
CSS3 (Cascading Style Sheets 3) is a superset of CSS that adds many new constructs and properties. Support for CSS3 is rapidly improving across all major browsers, making it a critical piece of technology for modern web professionals.
