Css3 linear gradients

01 trên 04 Tạo Gradients Linear Cross-Browser với CSS3 Một gradient tuyến tính đơn giản từ trái sang phải của # 999 (màu xám đậm) thành #fff (màu trắng). J Kyrnin Gradients tuyến tính Loại gradient phổ biến nhất mà bạn sẽ thấy là gradient tuyến tính của hai màu. Điều này có nghĩa là gradient sẽ di chuyển theo một đường thẳng thay đổi dần dần từ màu đầu tiên sang dòng thứ hai dọc theo dòng đó. Hình ảnh trên trang này cho thấy một gradient đơn giản từ trái sang phải của # 999 (màu xám đậm) thành #fff (màu trắng). Các gradient tuyến tính là dễ nhất để xác định và có hỗ trợ nhiều nhất trong các trình duyệt. Các gradient tuyến tính CSS3 được hỗ trợ trong Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ và Safari 4+. Internet Explorer có thể thêm gradient bằng cách sử dụng một bộ lọc và hỗ trợ chúng trở lại IE 5.5. Đây không phải là CSS3, nhưng nó là một tùy chọn cho khả năng tương thích giữa các trình duyệt. Khi bạn định nghĩa một gradient, bạn cần xác định một số thứ khác nhau: Loại gradient là gì - tuyến tính hoặc hướng tâm Trường hợp gradient nên bắt đầu Nơi gradient nên dừng lại Màu gì có trong gradient và nơi chúng nên bắt đầu và dừng lại Để định nghĩa các gradient tuyến tính bằng cách sử dụng CSS3, bạn viết: linear-gradient ( góc hoặc bên hoặc góc , màu dừng , dừng màu ) Đầu tiên bạn định nghĩa kiểu gradient với tên tuyến tính -gradient. Sau đó, bạn xác định điểm bắt đầu và điểm dừng của gradient theo một trong hai cách: góc của đường theo độ từ 0 đến 359, với 0 độ hướng thẳng lên trên. Hoặc với chức năng "bên hoặc góc", chẳng hạn như trái, phải, dưới cùng và trên cùng. Chúng sẽ được giải thích chi tiết hơn ở trang tiếp theo. Nếu bạn để chúng ra, gradient sẽ chảy từ trên xuống dưới phần tử. Sau đó, bạn xác định các điểm dừng màu. Bạn xác định màu dừng với mã màu và phần trăm tùy chọn. Tỷ lệ phần trăm cho trình duyệt biết vị trí trên đường để bắt đầu hoặc kết thúc bằng màu đó. Mặc định là đặt màu sắc đồng đều dọc theo dòng. Bạn sẽ tìm hiểu thêm về các điểm dừng màu trên trang 3. Vì vậy, để xác định gradient ở trên với CSS3, bạn viết: gradient tuyến tính (trái, # 999999 0%, #ffffff 100%); Và để đặt nó làm nền của DIV bạn viết:

This element will receive instant changes as you edit the CSS rules on the left. Enjoy! /* ------------------------------------------------------------- CSS3, Please! =================================================== Update: We recommend using Autoprefixer instead of CSS3Please. You can edit the underlined values in this css file, but don't worry about making sure the corresponding values match, that's all done automagically for you. Whenever you want, you can copy the whole or part of this page and paste it into your own stylesheet.------------------------------------------------------------- */ .box_round { border-radius: 12px; background-clip: padding-box; } /* [to clipboard] [toggle rule off] */ .box_round { -moz-border-radius: 8px 8px 0px 0px; /* Firefox 1+ */ -webkit-border-top-left-radius: 8px; /* Safari 3-4 */ -webkit-border-top-right-radius: 8px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; border-radius: 8px 8px 0px 0px; /* Chrome, IE 9+, Opera 10.50+, Safari 5+ */} /* */--> .box_shadow { -webkit-box-shadow: 0px 0px 4px 0px #ffffff; box-shadow: 0px 0px 4px 0px #ffffff; } .box_gradient { background-color: #444444; background-image: -webkit-linear-gradient(top, #444444, #999999); background-image: linear-gradient(to bottom, #444444, #999999); } .box_transition { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .box_textshadow { text-shadow: 1px 1px 3px #888; } .box_opacity { opacity: 0.9; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .box_bgsize { -webkit-background-size: 100% 100%; background-size: 100% 100%; } .box_animation:hover { -webkit-animation: myanim 5s infinite; animation: myanim 5s infinite; }@-webkit-keyframes myanim { 0% { opacity: 0.0; } 50% { opacity: 0.5; } 100% { opacity: 1.0; }}@keyframes myanim { 0% { opacity: 0.0; } 50% { opacity: 0.5; } 100% { opacity: 1.0; }} Oh hai :) From Peter Nederlof oh noes! Manipulate me, please! rotate scale skew skew move .matrix { } @font-face { font-family: 'WebFont'; src: url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'); } /* */ --> .box_tabsize { -moz-tab-size: 2; tab-size: 2;} /* */ -->/* __Changelog__ 2013.04.05: Opera 12.10 supports unprefixed CSS animations, gradients, transforms, and transitions. 2013.04.05: Removed

Bên trái: nền: ## 901A1C; background-image: -moz-linear-gradient (phía trên bên phải, # 901A1C 0%, # FFFFFF 100%); background-image: -webkit-gradient (tuyến tính, đỉnh phải, đáy trái, màu dừng (0, # 901A1C), màu dừng (1, #FFFFFF)); nền: -webkit-linear-gradient (phải trên cùng, # 901A1C 0%, #ffffff 100%); background: -o-linear-gradient (phía trên bên phải, # 901A1C 0%, #ffffff 100%); nền: -ms-linear-gradient (phía trên bên phải, # 901A1C 0%, #ffffff 100%); nền: linear-gradient (phải trên cùng, # 901A1C 0%, #ffffff 100%); Bạn có thể nhận thấy rằng không có bộ lọc IE nào trong ví dụ này. Đó là bởi vì IE chỉ cho phép hai loại bộ lọc: từ trên xuống dưới (mặc định) và từ trái sang phải (với công tắc GradientType = 1). Xem gradient tuyến tính chéo này trong hành động chỉ sử dụng CSS. 03 trên 04 Dừng màu Một gradient với ba điểm dừng màu. J Kyrnin Với gradient tuyến tính CSS3, bạn có thể thêm nhiều màu sắc cho gradient của mình để tạo ra hiệu ứng thậm chí còn đẹp hơn. Để thêm các màu này, bạn thêm các màu bổ sung vào cuối thuộc tính của mình, được phân tách bằng dấu phẩy. Bạn nên bao gồm nơi trên dòng màu sắc nên bắt đầu hoặc kết thúc là tốt. Bộ lọc Internet Explorer chỉ hỗ trợ hai điểm dừng màu, vì vậy khi bạn tạo gradient này, bạn chỉ nên bao gồm màu đầu tiên và thứ hai mà bạn muốn hiển thị. Đây là CSS cho gradient 3 màu ở trên: nền: #ffffff; nền: -moz-linear-gradient (bên trái, #ffffff 0%, # 901A1C 51%, #ffffff 100%); background: -webkit-gradient (tuyến tính, đầu trái, phải trên cùng, màu dừng (0%, # ffffff), màu dừng (51%, # 901A1C), dừng màu (100%, # ffffff)); nền: -webkit-linear-gradient (bên trái, #ffffff 0%, # 901A1C 51%, # ffffff 100%); background: -o-linear-gradient (bên trái, #ffffff 0%, # 901A1C 51%, # ffffff 100%); nền: -ms-linear-gradient (bên trái, #ffffff 0%, # 901A1C 51%, # ffffff 100%); bộ lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1); background: gradient tuyến tính (trái, #ffffff 0%, # 901A1C 51%, # ffffff 100%); Xem gradient tuyến tính này với ba điểm dừng màu trong hành động chỉ bằng CSS. 04/04 Làm cho tòa nhà Gradients dễ dàng hơn Trình tạo Gradient CSS cuối cùng. ảnh chụp màn hình bởi J Kyrnin lịch sự ColorZilla Có hai trang web tôi khuyên bạn nên giúp bạn xây dựng gradient, mỗi trang web đều có những lợi ích và hạn chế đối với họ, tôi chưa tìm thấy trình tạo gradient làm mọi thứ. Trình tạo Gradient CSS cuối cùng Trình tạo gradient này rất phổ biến vì

Div { background-image: linear-gradient (trái, # 999999 0%, #ffffff 100%; } Tiện ích mở rộng trình duyệt cho Gradient tuyến tính CSS3 Để làm cho gradient của bạn hoạt động trên nhiều trình duyệt, bạn cần phải sử dụng các tiện ích mở rộng của trình duyệt cho hầu hết các trình duyệt và bộ lọc cho Internet Explorer 9 trở xuống (thực ra là 2 bộ lọc). Tất cả những yếu tố này đều có cùng các yếu tố để xác định độ dốc của bạn (ngoại trừ việc bạn chỉ có thể xác định gradient 2 màu trong IE). Bộ lọc và phần mở rộng của Microsoft —Internet Explorer là thách thức lớn nhất để hỗ trợ, bởi vì bạn cần ba dòng khác nhau để hỗ trợ các phiên bản trình duyệt khác nhau. Để có được gradient màu xám sang trắng bạn sẽ viết: / * IE 5,5–7 * / bộ lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1); / * IE 8–9 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)"; / * IE 10 * / -ms-linear-gradient (trái, # 999999 0%, #ffffff 100%); Tiện ích mở rộng Mozilla —Ứng dụng -moz- hoạt động giống như thuộc tính CSS3, chỉ với phần mở rộng -moz-. Để có được gradient trên cho Firefox, hãy viết: -moz-linear-gradient (trái, # 999999 0%, #ffffff 100%); Tiện ích mở rộng của Opera —Mở rộng -o- thêm gradient vào Opera 11.1+. Để có được gradient ở trên, hãy viết: gradient -o-tuyến tính (trái, # 999999 0%, #ffffff 100%); Phần mở rộng Webkit —Mở rộng -webkit- hoạt động rất giống với thuộc tính CSS3. Để xác định gradient ở trên cho Safari 5.1+ hoặc Chrome 10+ bạn viết: -webkit-linear-gradient (trái, # 999999 0%, #ffffff 100%); Ngoài ra còn có một phiên bản cũ hơn của phần mở rộng Webkit hoạt động với Chrome 2+ và Safari 4+. Trong đó, bạn xác định loại gradient là một giá trị, thay vì trong tên thuộc tính. Để có được gradient xám trắng với phần mở rộng này, hãy viết: -webkit-gradient (tuyến tính, trái trên cùng, bên phải trên cùng, màu sắc dừng lại (0%, # 999999), màu sắc-stop (100%, # ffffff)); Mã CSS Gradient tuyến tính CSS3 đầy đủ Đối với hỗ trợ đa trình duyệt để có được màu xám đến trắng ở trên, trước tiên bạn nên bao gồm một màu dự phòng cho các trình duyệt không hỗ trợ gradient và mục cuối cùng phải là kiểu CSS3 cho các trình duyệt hoàn toàn tuân thủ. Vì vậy, bạn viết: nền: # 999999; nền: -moz-linear-gradient (trái, # 999999

Frames Yes Yes Master pages Yes Yes File Publisher Yes Yes HTML object Yes Yes Inline frame Yes Yes Layers Yes Yes Go Menu Yes Yes Menu bar Yes Yes Navigation bar Yes Yes Site tree Yes Yes Slide menu Yes Yes (Not available: Gradients) Tab menu Yes Yes (Not available: Gradients, Animation) Text menu Yes Yes Mega Menu Yes Yes (jQuery UI theme styling only) CSS Menu Yes Yes (Not available: Sub menus) Shapes Yes Yes (Not available: 'Save image as', '3D shadow', 'Inner blur', 'Image effects', fewer shapes, fill rule) Line Yes Yes Banner / Logo Yes Yes (Not available: text animation and Save as ) Clipart Yes Yes Polygon Yes Yes Curve Yes Yes Curved text Yes No Scribble Yes Yes Text art Yes Yes Font Awesome Yes Yes Icons Yes Yes (Not available: User Collection) Blog Yes Yes (Not available: MYSQL support) Article Yes No Image Hotspots Yes Yes (no SVG import) RSS Viewer Yes Yes Photo Gallery Yes Yes Photo Collage Yes Yes (Not available: Customize') Photo Grid Yes Yes Photo Album Yes (as extension) Yes (built-in) Rollover Image Yes Yes Rollover Text Yes Yes RSS Feed Yes Yes Site Search Yes Yes (Not available: Autocomplete -> open page) Slide show Yes Yes PayPal buttons Yes Yes (Not available: Options ) PayPal Shopping Cart Yes Yes Ecommerce Events Yes Yes Ecwid Shopping Cart Yes Yes Vibracart Pro support Yes Yes Login tools Yes Yes (Not available: Create and Edit database in UI, only online) Protected Content Yes Yes jQuery accordion Yes Yes jQuery auto complete Yes Yes jQuery button Yes Yes (Not available: show checkmark) jQuery dialog Yes Yes jQuery date picker Yes Yes jQuery listview Yes Yes jQuery droplist Yes Yes jQuery progress bar Yes Yes jQuery slider Yes Yes jQuery tabs Yes Yes Tooltips Yes Yes CSS3 Animations Yes Yes CSS3 Transitions Yes Yes CSS3 Transforms Yes Yes Global Replace Yes Yes Web Fonts Yes Yes Google Fonts Yes Yes (Not available: variable fonts, parameters) CMS tools Yes Yes Error Reports Yes Yes (not dockable, modeless) Alpha value in colors Yes Yes (limited