Utilize the CSS Grid Layout to create complex and responsive grid-based layouts. Define the grid container and its items using CSS. Here's an example:
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="grid-container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Embed custom fonts in your web page using the @font-face rule. You can include font files (e.g., .woff, .ttf) and define their usage in your CSS. Here's an example:
<style>
@font-face {
font-family: 'CustomFont';
src: url('custom-font.woff') format('woff');
}
body {
font-family: 'CustomFont', sans-serif;
}
</style>
Add informative tooltips to elements on your page using the title attribute. When users hover over an element, a tooltip with the specified text will be displayed. Here's an example:
<p title="This is a tooltip">Hover over me!</p>
Set a video as the background of a section on your webpage to create an engaging visual effect. Use the <video> element with the autoplay and loop attributes. Here's an example:
<style>
#video-section {
position: relative;
height: 100vh;
overflow: hidden;
}
#video-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
<div id="video-section">
<video id="video-background" autoplay loop>
<source src="video.mp4" type="video/mp4">
</video>
</div>
Display a progress bar to show the completion status of a task or process. Use the <progress> element and specify the value and max attributes to indicate the progress. Here's an example:
<progress value="50" max="100">
</progress>
Feel free to incorporate these HTML tricks into your web projects and customize them according to your needs.