CSS Box Sizing The CSS box-sizing property allows us to include the padding and border in an element’s total width and height. Without the CSS box-sizing Property By default, the width and height of an element is calculated like this: width + padding + border = actual width of an elementheight + padding + border = actual… Read More »
CSS Variables The var() function is used to insert the value of a CSS variable. CSS variables have access to the DOM, which means that you can create variables with local or global scope, change the variables with JavaScript, and change the variables based on media queries. A good way to use CSS variables is when it… Read More »
CSS User Interface In this chapter you will learn about the following CSS user interface properties: resize outline-offset Browser Support The numbers in the table specify the first browser version that fully supports the property. Property Google Chrome Internet Explorer Mozilla Firefox Safari Opera resize 4.0 79.0 5.0 4.0 15.0 outline-offset 4.0 15.0 5.0 4.0… Read More »
CSS Multi-column Layout The CSS multi-column layout allows easy definition of multiple columns of text – just like in newspapers: CSS Multi-column Properties In this chapter you will learn about the following multi-column properties: column-count column-gap column-rule-style column-rule-width column-rule-color column-rule column-span column-width Browser Support The numbers in the table specify the first browser version that… Read More »
Learn how to create a responsive pagination using CSS. Simple Pagination If you have a website with lots of pages, you may wish to add some sort of pagination to each page: Example <!DOCTYPE html> <html> <head> <style> .pagination { display: inline-block; } .pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none;… Read More »
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 »