Các chuyên đề loading trước đây cho chúng ta biết được cách tạo một hiệu ứng loading như thế nào, với chuyên đề này sẽ giúp các bạn biết được cách sử dụng để tạo thực tế hiệu ứng loading.
Category: Chuyên đề HTML5/CSS3
Box hover 2 image
Box hover | 3 Comments on Box hover 2 imageHover 2 image thay đổi nhau sẽ xử lý không dễ cho một số bạn chưa quen sử dụng javascript, tuy nhiên với vài thao tác đơn giản với CSS3 chúng ta hoàn toàn có thể làm chủ những hiệu ứng này.
Box hover fade
Box hover | Gửi bình luậnOpacity trong CSS3 là thuộc tính đơn giản nhưng khá hiệu quả trong việc xử lý hover transparent, kết hợp với transition sẽ cho nhiều hiệu ứng đẹp mắt tưởng như rất khó thực hiện.
box hover slide element
Box hover | Gửi bình luậnKết hợp xử lý background và các thuộc tính transition của CSS3, cho ta hiệu ứng hover đẹp mắt, mỗi giá trị khác nhau sẽ hiển thị hiệu ứng khác nhau.
Box hover chuyển động thành phần
Box hover | 2 Comments on Box hover chuyển động thành phầnMỗi vị trí lần lượt xuất hiện với hiệu ứng slide hay fade đều được điều khiển đơn giản với các thuộc tính CSS3 kết hợp như opacity, transition, position.
Box hover scale image
Box hover | Gửi bình luậnDùng CSS3 để tạo hiệu ứng khi hover, trước đây muốn thay đổi trạng thái một thành phần, ta dùng những kỹ thuật phức tạp hoặc phải có sự can thiệp của javascript, giờ đây CSS3 có thể thực hiện được dễ dàng.
Loading syle css3 – circle 02
Loading | Gửi bình luậnThêm một vài loading circle, cách viết tương tự như trước, tuy nhiên hơi chi tiết một chút, sẽ có nhiều hiệu ứng đẹp cho bạn lựa chọn.
Loading syle css3 – circle
Loading | 1 Comment on Loading syle css3 – circleLoading circle, có nhiều dạng khác nhau được xử lý gần giống như nhau, đó là sử dụng @framekey, animation trong CSS3, biến công việc tưởng như khó khăn trở nên vô cùng đơn giản.
Loading style css3 – square
Chuyên đề HTML5/CSS3, Loading | Gửi bình luậnTạo loading bằng cách sử dụng keyframe và animation trong css3, áp dụng transform để có nhiều hiệu ứng hơn.
Box-shadow sử dụng khi hover
Box shadow, Chuyên đề HTML5/CSS3 | Gửi bình luậnXử lý box-shadow khi hover, hiện nay rất nhiều style sử dụng kiểu hover này, dễ sử dụng nhưng hiệu quả lại rất đẹp.
Box-shadow cho hình tròn
Box shadow | Gửi bình luậnSử dụng box-shadow cho thành phần hình tròn sẽ giúp cho thành phần đẹp hơn, chúng ta có thể chọn shadow ngoài hay trong bằng cách thêm giá trị inset.
Box-shadow 3D style
Box shadow | Gửi bình luậnThử một vài giá trị box-shadow khác nhau để thành phần có nhiều dạng phong phú, nếu biết điều chỉnh hợp lý chúng ta sẽ dễ dàng tạo được dạng như mong muốn.
Box-shadow với đoạn văn
Box shadow | Gửi bình luậnSử dụng box-shadow cho đoạn văn bản đơn giản, tạo shadow cho thành phần thay thế cho cách làm truyền thống là sử dụng background.
Pagenation với border radius
Border radius | Gửi bình luậnPagenation với border-radius, dạng khác, chỉ điều chỉnh border-radius nhưng hiệu quả thấy rõ.
List nhiều cấp và border radius
Border radius, Chuyên đề HTML5/CSS3 | Gửi bình luậnList với sub list dùng border radius, dạng này không khác nhiều hơn được đề cập ở phần trước, nhưng sẽ hướng dẫn xử lý với border raidus.
List với border radius
Border radius | Gửi bình luậnVới mỗi thành phần list, chúng ta sử dụng border radius, đây là một trong những dạng cơ bản.
Border radius với block list cơ bản
Border radius | Gửi bình luậnDạng cơ bản khi sử dụng border-radius, việc bao ngoài thành phần block một border radius sẽ dễ hơn nếu xử lý bằng CSS3.
Border radius với block list phần 2
Border radius | Gửi bình luậnKỹ thuật cho các dạng này là chúng ta cứ việc layout block list như bình thường, sau đó chỉ cần add thêm thuộc tính border-radius cho thành phần bên ngoài là được.
Border radius với block list
Border radius | Gửi bình luậnThành phần block theo chiều dọc, được xử lý thêm border-raidus, đây là dạng thường dùng. Nếu dùng background theo cách cũ thì sẽ rất phức tạp.
Border radius với paragrapth
Border radius | Gửi bình luậnSử dụng border-radius chúng ta sẽ dễ dàng tạo border bo góc mà không cần sử dụng bất kỳ background image nào, mọi việc sẽ trở nên dễ dàng hơn chỉ vài dòng code.