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
CSS allows animation of HTML elements without using JavaScript!
In this article you will learn about the following properties :
@keyframesanimation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-timing-functionanimation-fill-modeanimationAn animation lets an element gradually change from one style to another.
You can change as many CSS properties you want, as many times as you want.
To use CSS animation, you must first specify some keyframes for the animation.
Keyframes hold what styles the element will have at certain times.
CSS transitions allows you to change property values smoothly, over a given duration.
In this chapter you will learn about the following properties:
transitiontransition-delaytransition-durationtransition-propertytransition-timing-functionCSS also supports 3D transformations.
With the CSS transform property you can use the following 3D transformation functions:
rotateX()rotateY()rotateZ()CSS transforms allow you to move, rotate, scale, and skew elements.
With the CSS transform property you can use the following 2D transformation functions:
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()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 within the CSS @font-face rule.