Trong ngày hôm nay, tôi sẽ cho bạn thấy những hiệu ứng văn bản CSS3 tuyệt vời: hiệu ứng 3D bằng cách sử dụng văn bản-bóng, hiệu ứng với độ dốc và mặt nạ hình ảnh, hiệu ứng với quá trình chuyển đổi và background-clip, và nhiều hơn nữa. Tất cả họ chắc chắn sẽ hữu ích cho bạn, bởi vì CSS3 cho phép chúng ta đạt được một kết quả thật sự ấn tượng. Một phần của hiệu ứng mô tả hoạt động trong hầu hết các trình duyệt hỗ trợ CSS3, tuy nhiên, một vài ví dụ sẽ chỉ làm việc trong Webkit. Vì vậy, để có được những ấn tượng hơn, tôi khuyên bạn nên xem demo của chúng tôi trong các trình duyệt Webkit: Chrome hoặc Safari.
Nội dung bài viết
01: Image size
.image:hover { -webkit-transform:scale(1.2); transform:scale(1.2); } .image { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; }
02: Zoom in
.container:hover .image { -webkit-transform:scale(1.3); transform:scale(1.3); } .container { overflow:hidden; } .image { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; }
03: Zoom out
.container:hover .image { -webkit-transform:scale(1); transform:scale(1); } .container { overflow:hidden; } .image { -webkit-transform:scale(1.3); transform:scale(1.3); -webkit-transition: all 0.7s ease; transition: all 0.7s ease; }
04: Border radius and shadow effect
.image:hover { border-radius:50%; box-shadow: 0 10px 6px -6px grey; } .image { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; }
05: Border radius distortion
.image:hover { border-top-left-radius: 120px; border-bottom-right-radius: 120px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; } .image { border-bottom-left-radius: 120px; border-top-right-radius: 120px; border-bottom-right-radius: 15px; border-top-left-radius: 15px; -webkit-transition: all 0.7s ease; transition: all 0.7s ease; }
06: Border radius distortion II
.image:hover { border-top-left-radius: 30px 120px; border-bottom-right-radius: 30px 120px; border-bottom-left-radius: 15px; border-top-right-radius: 15px; } .image { border-top-left-radius: 15px; border-top-right-radius: 120px 30px; border-bottom-left-radius: 120px 30px; border-bottom-right-radius: 15px; -webkit-transition: all 0.7s ease; transition: all 0.7s ease; }
07: Glowing border
.image:hover { -webkit-box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75); box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75); } .image { -webkit-box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75); box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75); -webkit-transition: all 0.7s ease; transition: all 0.7s ease; }
08: Rotation (2D)
.image:hover { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .image { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; }
09: Skew
.image:hover { -webkit-transform: skew(0deg,20deg); transform: skew(0deg,20deg); } .image { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; }
10: Translate and opacity
.image:hover { -webkit-transform: translate(20px,-50px); transform: translate(20px,-50px); opacity: 0.4; } .image { opacity: 1; -webkit-transition: all 0.7s ease; transition: all 0.7s ease; }
11: Flip
.container:hover .image{ -webkit-transform: rotateY(180deg); -webkit-transform-style: preserve-3d; transform: rotateY(180deg); transform-style: preserve-3d; } .container .image, .container:hover .image { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } /* Note: You could, of course, target the image class directly with "image:hover". However, using the hover on the parent container is preferred here, because it results in a smoother flip animation in all modern browsers. Make sure the container has the same width and height as the image. */
12: Vertical card flip
CSS .carddiv { width:200px; height:150px; position:relative; -webkit-transform-style: preserve-3d; -webkit-transform-origin: 100% 75px; -webkit-transition: all 0.7s ease; transform-style: preserve-3d; transform-origin: 100% 75px; transition: all 0.7s ease; } .container:hover .carddiv { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } .frontofcard, .backofcard { width:200px; height:150px; position:absolute; left:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; } .backofcard { padding-top:50px; -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } HTML <div class="container"> <div class="carddiv"> <img class="frontofcard" src="img" alt="img"> <p class="backofcard">Text</p> </div> </div> /* Note: Keep in mind, that IE does NOT support "transform-style: preserve-3d;" yet, so IE-users will just see a basic vertical image flip animation without additional use of javascript/jQuery. This may change in the future. */
13: Transformation
.image:hover { -webkit-box-shadow: 0px 0px 15px 15px #fff; box-shadow: 0px 0px 15px 15px #fff; border-radius:50%; opacity: 0.6; -webkit-transform: rotate(720deg); transform: rotate(720deg); } .image { opacity: 1; -webkit-transition: all 0.7s ease; transition: all 0.7s ease; }
14: 3D text
.text:hover { text-shadow: 0 1px 0 #666, 0 2px 0 #555, 1px 3px 0 #444, 2px 4px 0 #333, 3px 5px 0 #222, 4px 6px 1px #111, 0 0 5px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.5), 1px 3px 5px rgba(0,0,0,.4), 3px 5px 10px rgba(0,0,0,.3), 5px 10px 10px rgba(0,0,0,.2), 10px 20px 20px rgba(0,0,0,.1); } .text { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; }
15: Blur
.text:hover { color: rgba(0,0,0,0); text-shadow: 0 0 20px #FBFE8B; } .text { color: #FBFE8B; -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } /* Note: If you use this in a production environment, keep in mind that the text will vanish in most IE versions, including IE 11. Workaround: To achieve a blur effect, you can try: a blurry fallback image + easing. adding "filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=5);" for older IE versions (no support in IE 10 and up, wouldn't bother). make yourself familiar using SVG (Scalable Vector Graphics) filter effects. Note II: There is also a blur filter for this very effect. However, at the time of writing this (december 2013), the solution above is better for overall crossbrowser support than using the blur filter. This may change in the future. */
16: Glowing text
.text:hover { text-shadow: 0px 0 15px #fff; } .text { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; }
17: Image with text overlay – fade effect
CSS .container { position:relative; } .textbox:hover { opacity:1; } .text { padding-top: 50px; } .textbox { width:200px; height:150px; position:absolute; top:0; left:0; opacity:0; border-radius:5px; background-color: rgba(0,0,0,0.75); -webkit-box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75); box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75); -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } HTML <div class="container"> <img src="" alt=""> <div class="textbox"> <p class="text">TEXT</p> </div> </div>
18: Image with text overlay – scale effect
CSS .container { position:relative; } .container .textbox { width:200px; height:150px; position:absolute; top:0; left:0; -webkit-transform: scale(0); transform: scale(0); border-radius:5px; background-color: rgba(0,0,0,0.75); -webkit-box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75); box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75); } .container:hover .textbox { -webkit-transform: scale(1); transform: scale(1); } .text { padding-top: 50px; } .textbox { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } HTML <div class="container"> <img src="" alt=""> <div class="textbox"> <p class="text">TEXT</p> </div> </div>
19: Image with text overlay – text slide effect
CSS .container { position:relative; overflow:hidden; } .container .textbox { width:200px; height:150px; position:absolute; top:0; left:0; margin-top:-160px; border-radius:5px; background-color: rgba(0,0,0,0.75); -webkit-box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75); box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75); } .container:hover .textbox { margin-top:0; } .text { padding-top: 50px; } .textbox { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } HTML <div class="container"> <img src="" alt=""> <div class="textbox"> <p class="text">TEXT</p> </div> </div>
20: Image and text slide hover effect
CSS .container { position:relative; overflow:hidden; width:200px; height:150px; } .container .textbox { position:absolute; top:0; left:0; width:200px; height:150px; margin-left:-210px; } .container:hover .textbox { margin-left:0; } .container img { margin-left:0; } .container:hover img { margin-left:210px; } .text { padding-top: 50px; } .container img, .textbox { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } HTML <div class="container"> <img src="" alt=""> <div class="textbox"> <p class="text">TEXT</p> </div> </div> /* Note: In order to slide to the left, change the following values: .container .textbox {margin-left:210px;}, .container:hover img {margin-left:-210px;} */
Tin tức nổi bật
Thiết kế web theo mẫu
Thiết kế web theo mẫu là gì? Thiết kế web theo mẫu là dịch vụ website được xây dựng...
Tổng hợp 20+ cách kiếm tiền từ website trong năm 2020
Thời kỳ 4.0, Internet trở thành một phần không thể thiếu trong cuộc sống của chúng ta. Người...
10 bước xây dựng kế hoạch marketing online
Thị trường luôn thay đổi và chính vì thế các chiến lược marketing online của bạn cũng cần...
Ý tưởng đặt tên thương hiệu – Cách chọn tên miền website – Lời khuyên vàng từ ITC Việt
Cách chọn tên miền website. Chúng tôi là ITC Việt. Chúng tôi là công ty thiết kế website...
Thiết kế website theo yêu cầu
Hiện nay Dịch vụ Thiết kế website theo yêu cầu đã không còn xa lạ đối với các doanh...
Thiết kế trang web, lập trang web, dựng trang web bán hàng
Nội dung bài viết Thiết kế trang web Thiết kế trang web là điều mà các công...
E-commerce là gì? E-business là gì? So sánh E-commerce và E-business
E-Commerce (tiếng Việt là thương mại điện tử) đang là một trong những vấn đề đáng quan tâm của...
Để thiết kế web đẹp bạn không thể bỏ qua 8 lưu ý sau
Việc thiết kế web ngày nay không còn dừng lại ở việc cung cấp thông tin đủ hay...