trong bài này ta sử dụng thẻ FIGURE để thêm hình ảnh vào web bằng html5.
- Thẻ figure cung cấp cho ta các nội dung tương đương một con số hay là biểu đồ, nó có thể dùng để nhóm một chú thích với một hoặc nhiều hình ảnh, một khối mã hoặc nội dung khác.
- Các thẻ <figure> là một trong các thẻ nội dung được nhúng trong HTML.
Cú Pháp:
<figure>-Trong thể img ta có thể thêm các thuộc tính như:
<img src="link hình" />
<figcaption>chú thích cho hình ảnh</figcaption>
</figure>
alt="..."
Ứng dụng thẻ HTML5 FIGURE - CSS3 Transform:
Nhằm giúp cho hình ảnh chúng ta khi rê chuột vào nó sẻ tạo ra các hiệu ứng đẹp mắt.
ở đây Dũ sẻ hướng demo cho các bạn luôn nhé.
các bạn chỉ việc tạo một file .html trên máy của mình và chạy thử bằng trình duyệt nhé.
<!DOCTYPE html>Lời kết : kết thúc bài này mình nghĩ các bạn cũng biết cách Chèn hình ảnh vào trang web bằng HTML5 rồi đúng không, các bạn nên tiềm thêm một số CSS3 Transform để sau này có thể áp dụng vào chức năng rê chuột vào sản phẩm hiện lên thông tin giá cả,... chúc các bạn thành công.
<title>Minh Dũ Blog - Ứng dụng thẻ HTML5 FIGURE - CSS3 Transform</title>
<style type='text/css'>
.list-cover figure {
display: inline-block;
margin: .2em;
transition: transform .3s ease-out;
max-height: 315px;
min-height: 315px;
}
.list-cover figure:hover, .list-cover figure:active {
transform: scale(1.2);
}
.list-cover figcaption {
background: rgba(46,204,113,.7);
margin-top: -30%;
position: relative;
padding: .5em;
padding-top: 1.1em;
transition: background-color .3s ease;
}
.list-cover figure:hover figcaption, .list-cover figure:active figcaption {
background-color: #ec008c;
}
.list-cover a {
color: #fff;
}
</style>
<section class="list-cover">
<figure>
<a href="" title="">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGf2P6-lclb81AGZ9y9KxHFe9rjtxYGZAK3FtWLiWWUVC8Ldlr96dvPQ8bjvASonTRHgHNaGJfBAXu7OAWtNygk63iia8rDBkGhZTuiU1_HR_0FDywscTQtIT7FXXl3C68m6_keRznhAE/s1600/chen+hinh+bang+html5.jpg" width="200px" alt="" />
<figcaption>Minh Dũ Blog</figcaption>
</a>
</figure>
<figure>
<a href="" title="">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGf2P6-lclb81AGZ9y9KxHFe9rjtxYGZAK3FtWLiWWUVC8Ldlr96dvPQ8bjvASonTRHgHNaGJfBAXu7OAWtNygk63iia8rDBkGhZTuiU1_HR_0FDywscTQtIT7FXXl3C68m6_keRznhAE/s1600/chen+hinh+bang+html5.jpg" width="200px" alt="" />
<figcaption>Minh Dũ Blog</figcaption>
</a>
</figure>
<figure>
<a href="" title="">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGf2P6-lclb81AGZ9y9KxHFe9rjtxYGZAK3FtWLiWWUVC8Ldlr96dvPQ8bjvASonTRHgHNaGJfBAXu7OAWtNygk63iia8rDBkGhZTuiU1_HR_0FDywscTQtIT7FXXl3C68m6_keRznhAE/s1600/chen+hinh+bang+html5.jpg" width="200px" alt="" />
<figcaption>Minh Dũ Blog</figcaption>
</a>
</figure>
<figure>
<a href="" title="">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGf2P6-lclb81AGZ9y9KxHFe9rjtxYGZAK3FtWLiWWUVC8Ldlr96dvPQ8bjvASonTRHgHNaGJfBAXu7OAWtNygk63iia8rDBkGhZTuiU1_HR_0FDywscTQtIT7FXXl3C68m6_keRznhAE/s1600/chen+hinh+bang+html5.jpg" width="200px" alt="" />
<figcaption>Minh Dũ Blog</figcaption>
</a>
</figure>
<figure>
<a href="" title="">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGf2P6-lclb81AGZ9y9KxHFe9rjtxYGZAK3FtWLiWWUVC8Ldlr96dvPQ8bjvASonTRHgHNaGJfBAXu7OAWtNygk63iia8rDBkGhZTuiU1_HR_0FDywscTQtIT7FXXl3C68m6_keRznhAE/s1600/chen+hinh+bang+html5.jpg" width="200px" alt="" />
<figcaption>Minh Dũ Blog</figcaption>
</a>
</figure>
</section>
</html>