CSS transforms allow you to move, rotate, scale, and skew elements. Mouse over the element below to see a 2D transformation: In this chapter you will learn about the following CSS property: transform Browser Support The numbers in the table specify the first browser version that fully supports the property. Property Google Chrome Internet Explorer… Read More »
The CSS @font-face Rule Web fonts allow Web designers to use fonts that are not installed on the user’s computer. When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed. Your “own” fonts are defined… Read More »
CSS Text Overflow, Word Wrap, Line Breaking Rules, and Writing Modes In this chapter you will learn about the following properties: text-overflow word-wrap word-break writing-mode CSS Text Overflow The CSS text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped: This is some long text that will not… Read More »
CSS Shadow Effects With CSS you can add shadow to text and to elements. In these chapters you will learn about the following properties: text-shadow box-shadow CSS Text Shadow The CSS text-shadow property applies shadow to text. In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px): Text shadow effect! Example… Read More »
CSS gradients let you display smooth transitions between two or more specified colors. CSS defines three types of gradients: Linear Gradients (goes down/up/left/right/diagonally) Radial Gradients (defined by their center) Conic Gradients (rotated around a center point) CSS Linear Gradients To create a linear gradient you must define at least two color stops. Color stops are… Read More »
This page will explain the transparent, currentcolor, and inherit keywords. The transparent Keyword The transparent keyword is used to make a color transparent. This is often used to make a transparent background color for an element. Example Here, the background color of the <div> element will be fully transparent, and the background image will show through: <!DOCTYPE html> <html> <head> <style>… Read More »
CSS Multiple Backgrounds CSS allows you to add multiple background images for an element, through the background-image property. The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer. The following example has two background images, the first image is a… Read More »
CSS Border Images With the CSS border-image property, you can set an image to be used as the border around an element. CSS border-image Property The CSS border-image property allows you to specify an image to be used instead of the normal border around an element. The property has three parts: The image to use as the border Where… Read More »
CSS border-radius Property The CSS border-radius property defines the radius of an element’s corners. Tip: This property allows you to add rounded corners to elements! Here are three examples: Here is the code: Example <!DOCTYPE html> <html> <head> <style> #rcorners1 { border-radius: 25px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 25px; border:… Read More »
The CSS math functions allow mathematical expressions to be used as property values. Here, we will explain the calc(), max() and min() functions. The calc() Function The calc() function performs a calculation to be used as the property value. CSS Syntax calc(expression) Value Description expression Required. A mathematical expression. The result will be used as the value.The following operators can be used:… Read More »