Learn how to style buttons using CSS.
.button {
background-color: #04AA6D; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Learn how to create a responsive pagination using CSS.
If you have a website with lots of pages, you may wish to add some sort of pagination to each page.
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
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 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. Continue reading CSS Masking
The CSS object-position property is used to specify how an <img> or <video> should be positioned within its container.
img {
width: 200px;
height: 300px;
object-fit: cover;
}
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 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 as “preserve that aspect ratio” or “stretch up and take up as much space as possible”. Continue reading CSS The object-fit Property
With CSS it is easy to shape (clip) images to circles, ellipses and polygons.
The clip-path property lets you clip an element to a basic shape.
The circle() function defines a circle with a radius and a position.
The circle() function is used within the clip-path property.
The CSS filter property is used to add visual effects to elements.
The CSS filter property is used to add visual effects (like blur and saturation) to elements.
Within the filter property, you can use the following CSS functions:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()One way to center an image horizontally on a page is to use margin: auto.
Since the <img> element is an inline element (and
margin: autodisplay: block.
In addition, we have to define a width. The width of the image must be smaller than the width of the page.
Here is a horizontally centered image using margin: auto.
Learn how to style images using CSS.
You can use the border-radius property to create rounded images :
Rounded Image:
img {
border-radius: 8px;
}
Circled Image:
img {
border-radius: 50%;
}
Create tooltips with CSS.
Create a tooltip that appears when the user moves the mouse over an element:
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
Hover over me Tooltip text