Hướng dẫn css data attribute - thuộc tính dữ liệu css

Đã đăng vào thg 1 22, 2018 2:35 SA 0 phút đọc 0 phút đọc

Hàm attr(), bên cạnh ứng dụng vào tootips, ta còn có thể xây dựng thumbnail có tittle và description để kết hợp với data attributes. Bạn chỉ cần viết đoạn code HTML theo cấu trúc sau:

Và đến đây bạn có thể dùng hàm attr() để hiển thị tittle và description:

.caption::after {
  content: attr(data-title);
    ...
}

Dưới đây mình làm một ví dụ thumbnail với captions động hiển thị khi hover:

HTML:

CSS:

/* DEMO HNV */
*, *:after, *:before {
	box-sizing: border-box;
}
html {
	height: 100%;
}
body {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f5f5f5;
	user-select: none;
}
#container {
	width: 800px;
	margin: 0 auto;
}
.thumbnail {
	-webkit-backface-visibility: hidden;
	display: inline-block;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	background: #000;
	box-shadow: 0 15px 50px rgba(0,0,0,.5);
}
.thumbnail img {
	display: block;
    width: 100%;
	transition: opacity .2s ease-in-out;
}
.thumbnail:hover img {
	opacity: .5;
}
.thumbnail::after,
.thumbnail::before {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 50%;
	transition: transform .4s ease-out;
	color: #fff;
}
.thumbnail::after {
	content: attr(data-title);
	top: 0;
	padding-top: 55px;
	transform: translateY(-100%) scale(.8);
	background: rgba(0,0,0,.4);
	font-size: 36px;
	font-weight: 300;
	font-family: Merriweather, serif;
	text-align: center;
}
.thumbnail::before {
	content: attr(data-description) "…";
	top: 50%;
	padding: 20px;
	transform: translateY(100%) scale(.8);
	background: rgba(107,38,68,.6);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #f1f1f1;
	font-size: 16px;
}
.thumbnail:hover::after,
.thumbnail:hover::before {
	transform: translateY(0%) scale(1);
}

Kết quả + Demo

Như vậy, chỉ với CSS ta cũng có thể giải được vấn đề và đồng thời có thêm sự tự do trong sáng tạo của mình. Mình hi vọng bài viết trên sẽ hữu ích với bạn, Cảm ơn bạn đã theo dõi !!

All rights reserved