Learn how to style buttons using CSS. Basic Button Styling Example <!DOCTYPE html> <html> <head> <style> .button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } </style> </head> <body> <h2>CSS Buttons</h2> <button>Default Button</button> <a href=”#” class=”button”>Link Button</a> <button class=”button”>Button</button> <input… Read More »
With CSS masking you create a mask layer to place over an element to partially or fully hide portions of the element. The CSS mask-image Property The CSS mask-image property specifies a mask layer image. The mask layer image can be a PNG image, an SVG image, a CSS gradient, or an SVG <mask> element. Browser Support Note: Most browsers… Read More »
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 »