Hướng dẫn màu nền css đẹp
|
Tạm gác qua các khái niệm về Box Model qua một bên mà ở phần này chúng ta sẽ làm quen với một loại thuộc tính cũng rất thú vị và có tác dụng làm đẹp website của bạn lên hơn, đó là các thuộc tính thêm màu nền và ảnh nền cho website hoặc bất kỳ một phần tử dạng block nào. Show
Màu nền với background-colorNếu bạn muốn thiết lập màu nền bằng CSS thì có thể sử dụng thuộc tính Ảnh nền với background-imageĐối với thuộc tính thêm ảnh nền thì chúng ta sẽ sử dụng [codepen id=”dPBqbN”] Nhớ là đối với các giá trị loại URL thì bạn phải có một cái hàm Ngoài ra, bạn có thể thêm nhiều ảnh nền khác nhau trên cùng một block bằng cách sử dụng nhiều giá trị background-image: url(‘ảnh 1’), url(‘ảnh 2’); Tùy chỉnh lặp lại ảnh nền với background-repeatMặc định khi sử dụng ảnh nền, thì hình ảnh sẽ được lặp đi lặp lại theo cả chiều ngang và chiều
dọc cho đến khi ảnh nền lấp toàn bộ phần tử. Nhưng bạn cũng có thể tùy chỉnh lại việc lặp ảnh nền thông qua thuộc tính
Một ví dụ của DMD về việc lặp ảnh nền. [codepen id=”yydQNK”] Đổi vị trí ảnh nền với background-positionĐối với các tấm ảnh nền cỡ nhỏ hoặc dùng background-size để sửa lại kích thước thì có thể bạn sẽ cần thay đổi vị trí hiển thị của ảnh nền đó, và bạn có thể dùng thuộc tính background-position này. Nó có một số giá trị như sau:
Đối với thuộc tính này thì bạn có thể viết tối đa cùng lúc hai giá trị. Ví dụ bạn muốn ảnh của bạn sẽ nằm bên phải phía trên phần tử thì sẽ có giá trị là Ngoài ra còn có thêm một vài thuộc tính dành riêng cho việc tùy biến ảnh nền nữa nhưng bạn có thể tham khảo thêm tại CSS Reference nhé. Lời kếtMặc dù trong bài này mình không nói hết toàn bộ thuộc tính liên quan đến ảnh nền nhưng ở trên là các thuộc tính mà mình nghĩ rằng bạn sẽ cần sử dụng nhiều nhất nên bạn cứ tập trung làm quen với các thuộc tính đó trước, từ đó bạn sẽ cảm thấy bắt đầu với các thuộc tính tương tự dễ dàng hơn. Thạch PhạmBé Thạch 18 tuổi, hiện công tác tại AZDIGI với vị trí giữ xe và viết thuê tại ThachPham.Com. Sở thích nghiên cứu về website, DevOps, SysAdmin và xăm mình nữa. Phương châm sống của bé là "No Pain, No Gain". Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng. Bài viết hôm nay mình sẽ giới thiệu đến bạn những hiệu ứng background được thiết kế sáng tạo và có tính thẩm mỹ cao giúp chúng ta có thể nâng cao trải nghiệm người dùng cũng như mang lại cảm giác thú vị, thu hút sự chú ý của khách hàng vào nội dung của trang web hơn. Bây giờ bạn hãy cùng mình đi vào tìm hiểu nhé! Hay bạn muốn tìm những thư viện giúp tạo hiệu ứng animation đẹp cho trang web thì có thể
xem ở đây nha! Kết quả bạn xem bên dưới nhé! See the Pen Lowpoly Dynamic Background by Nodws (@nodws) on CodePen. Nguồn Sliding Background Effect CSS3 Kết quả bạn xem bên dưới nhé! See the Pen Sliding Diagonals Background Effect by Chris Smith (@chris22smith) on CodePen. Nguồn Jquery & CSS3 backgroundKết quả bạn xem bên dưới nhé! See the Pen Jquery & CSS3 background by enrico toniato (@enricotoniato) on CodePen. Nguồn Thay Đổi Background Color Khi ScrollKết quả bạn xem bên dưới nhé! See the Pen Changing Background Color on Scroll by Jack Harner (@jackharner) on CodePen. Nguồn Background Wave AnimationKết quả bạn xem bên dưới nhé! See the Pen Background wave Animation by Melanie Gleveau (@melaniegleveau) on CodePen. Nguồn Background Jquery CSSKết quả bạn xem bên dưới nhé! See the Pen Crystal Caves by Huw Llewellyn (@nosurprisethere) on CodePen. Nguồn Cách Tạo Javascript BackgroundKết quả bạn xem bên dưới nhé! See the Pen tqdmv by Anand Davaasuren (@at80) on CodePen. Nguồn CSS background AnimationKết quả bạn xem bên dưới nhé! See the Pen Sépion CSS background animation 2 by Sépion (@Sepion) on CodePen. Nguồn Pure CSS Gradient Background AnimationKết quả bạn xem bên dưới nhé! See the Pen Pure CSS Gradient Background Animation by Manuel Pinto (@P1N2O) on CodePen. Nguồn Scrolling Background EffectKết quả bạn xem bên dưới nhé! See the Pen Scrolling Terrain and Shooting Stars by Loktar (@loktar00) on CodePen. Nguồn Hero Animation Canvas BackgroundKết quả bạn xem bên dưới nhé! See the Pen Hero Animation - Canvas Background by Mario Duarte (@MarioDesigns) on CodePen. Nguồn Hearts Animation BackgroundKết quả bạn xem bên dưới nhé! See the Pen Hearts animation background by Pogany (@giaco) on CodePen. Nguồn Snow Background Animation Canavs JavascriptKết quả bạn xem bên dưới nhé! See the Pen Snow Background Animation|| Canavs || Javascript by Nour Ibram (@nouribram) on CodePen. Nguồn Dynamic Particles Background AnimationKết quả bạn xem bên dưới nhé! See the Pen Dynamic Particles Background Animation by Ricardo Oliva Alonso (@ricardoolivaalonso) on CodePen. Nguồn Background Animation CSS JavascriptKết quả bạn xem bên dưới nhé! See the Pen Big Things by Adriena Cribb (@adriena) on CodePen. Nguồn Background Text Clip Path AnimationKết quả bạn xem bên dưới nhé! See the Pen Background animation by Urgen Sherpa (@urgenism) on CodePen. Nguồn Grid Background AnimationKết quả bạn xem bên dưới nhé! See the Pen grid background animation by hy (@iqszlong) on CodePen. Nguồn CSS3 Background AnimationKết quả bạn xem bên dưới nhé! See the Pen CSS3 background Animation by Vubon (@vubon) on CodePen. Nguồn Background Image AnimationKết quả bạn xem bên dưới nhé! See the Pen Background Image Animation by Marcus (@Marc_D_23) on CodePen. Nguồn Background Animation GalaxyKết quả bạn xem bên dưới nhé! See the Pen Background Animation Galaxy littleee.com by Riedayme (@riedayme) on CodePen. Nguồn Blurred Background CSSKết quả bạn xem bên dưới nhé! See the Pen Blurred Background CSS by Rian Ariona (@ariona) on CodePen. Nguồn Animated Background GradientKết quả bạn xem bên dưới nhé! See the Pen Animated Background Gradient by Mario Klingemann (@quasimondo) on CodePen. Nguồn Ambient BackgroundKết quả bạn xem bên dưới nhé! See the Pen Ambient Background by Dimitra Vasilopoulou (@mimikos) on CodePen. Nguồn Skewed background with CSSKết quả bạn xem bên dưới nhé! See the Pen Skewed background with CSS by Jose L Pimienta (@pipozoft) on CodePen. Nguồn CSS background change on scrollKết quả bạn xem bên dưới nhé! See the Pen CSS background change on scroll by Giana (@giana) on CodePen. Nguồn CSS background VideoKết quả bạn xem bên dưới nhé! See the Pen Daily Pen #80 by Dylan Macnab (@DylanMacnab) on CodePen. Nguồn CSS / SVG Blobby BackgroundKết quả bạn xem bên dưới nhé! See the Pen CSS / SVG Blobby Background by Cassie Evans (@cassie-codes) on CodePen. Nguồn CSS Wave Background AnimationKết quả bạn xem bên dưới nhé! See the Pen CSS & SVG Waves Animation by haycuoilennao19 (@haycuoilennao19) on CodePen. Nguồn Parallax BackgroundKết quả bạn xem bên dưới nhé! See the Pen Parallax Background by Ravi Dhiman (@ravid7000) on CodePen. Nguồn Particles BackgroundKết quả bạn xem bên dưới nhé! See the Pen Particles background using Particles.js by Michael van den Berg (@MichaelVanDenBerg) on CodePen. Nguồn CSS dot pattern/grid backgroundKết quả bạn xem bên dưới nhé! See the Pen CSS dot pattern/grid background by Edmundo Santos (@edmundojr) on CodePen. Nguồn Animated Ripples backgroundKết quả bạn xem bên dưới nhé! See the Pen Animated Ripples background by Vaibhav Arora (@vaibhavarora) on CodePen. Nguồn Pure css infinite background animationKết quả bạn xem bên dưới nhé! See the Pen Pure css infinite background animation by kootoopas (@kootoopas) on CodePen. Nguồn Infinity WallKết quả bạn xem bên dưới nhé! See the Pen Infinity Wall by Jamie Ferguson (@jppferguson) on CodePen. Nguồn Mouse moving backgroundKết quả bạn xem bên dưới nhé! See the Pen Mouse moving background by Tim Jackleus (@timjackleus) on CodePen. Nguồn Background Transition On ScrollKết quả bạn xem bên dưới nhé! See the Pen Background Transition On Scroll by ianchouinard (@ianchouinard) on CodePen. Nguồn CSS Multiple Background Image Parallax AnimationKết quả bạn xem bên dưới nhé! See the Pen CSS Multiple Background Image Parallax Animation by carpe numidium (@carpenumidium) on CodePen. Nguồn Darken the background imageKết quả bạn xem bên dưới nhé! See the Pen How to darken the background image by wpaesthetic (@wpaesthetic) on CodePen. Nguồn Inverted background color on titleKết quả bạn xem bên dưới nhé! See the Pen inverted background color on title by Tobias Glaus (@tobiasglaus) on CodePen. Nguồn 3D Js abstract backgroundKết quả bạn xem bên dưới nhé! See the Pen 3D Js abstract background by enrico toniato (@enricotoniato) on CodePen. Nguồn Background Big Text CrawlKết quả bạn xem bên dưới nhé! See the Pen Background Big Text Crawl by Facepalm Robot (@FacepalmRobot) on CodePen. Nguồn Bài viết liên quan:
Tổng kết:Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những hiệu ứng background hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ! |
