The CSS object-position property is used to specify how an <img> or <video> should be positioned within its container. The Image Look at the following image from Paris, which is 400×300 pixels: Next, we use object-fit: cover; to keep the aspect ratio and to fill the given dimension. However, the image will be clipped to fit, like this: Example… Read More »
The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container. The CSS object-fit Property The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container. This property tells the content to fill the container in a variety of ways; such… Read More »
In this chapter you will learn how to reflect an image. CSS Image Reflections The box-reflect property is used to create an image reflection. The value of the box-reflect property can be: below, above, left , or right. Browser Support The numbers in the table specify the first browser version that fully supports the property. Numbers followed by -webkit- specify the first version that… Read More »
Learn how to style images using CSS. Rounded Images Use the border-radius property to create rounded images: Example Rounded Image: <!DOCTYPE html> <html> <head> <style> img { border-radius: 8px; } </style> </head> <body> <h2>Rounded Image</h2> <p>Use the border-radius property to create rounded images:</p> <img src=”paris.jpg” alt=”Paris” width=”300″ height=”300″> </body> </html> Result: Example Circled Image: <!DOCTYPE html> <html>… Read More »
Create tooltips with CSS. Demo: Tooltip Examples A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element: Basic Tooltip Create a tooltip that appears when the user moves the mouse over an element: Example <!DOCTYPE html> <html> <style> .tooltip { position: relative; display: inline-block;… Read More »
CSS Animations CSS allows animation of HTML elements without using JavaScript or Flash!CSS In this chapter you will learn about the following properties: @keyframes animation-name animation-duration animation-delay animation-iteration-count animation-direction animation-timing-function animation-fill-mode animation Browser Support for Animations The numbers in the table specify the first browser version that fully supports the property. Property Google Chrome Internet… Read More »
CSS Transitions CSS transitions allows you to change property values smoothly, over a given duration. Mouse over the element below to see a CSS transition effect: In this chapter you will learn about the following properties: transition transition-delay transition-duration transition-property transition-timing-function Browser Support for Transitions The numbers in the table specify the first browser version… Read More »
CSS also supports 3D transformations. Mouse over the elements below to see the difference between a 2D and a 3D 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 »
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 »