Nút góc tròn css. Làm tròn các góc của ảnh trong Photoshop
Tất cả các trình duyệt hiện đại đều hỗ trợ các tiêu chuẩn đánh dấu siêu văn bản HTML5 và kiểu thiết kế CCS3. Và nếu trang web (mẫu) của bạn hỗ trợ các tiêu chuẩn hiện đại, thì bạn có thể thực hiện các thay đổi đối với thiết kế, chẳng hạn như làm tròn góc, đổ bóng, tô màu mà không cần dùng đến trình chỉnh sửa đồ họa.
Quản trị viên web ở khắp mọi nơi đều sử dụng các góc bo tròn trên các khối và khung trên trang web. Trong bài viết này tôi sẽ hướng dẫn bạn cách làm tròn các góc của hình ảnh và ảnh trên trang web mà không cần sử dụng chương trình của bên thứ ba, chỉ sử dụng CSS.
Để các ví dụ đưa ra trong bài viết được hiển thị chính xác trên màn hình của bạn, bạn phải sử dụng các phiên bản trình duyệt mới nhất, FireFox, Chrome và các phiên bản dựa trên chúng: Yandex.Browser, Amigo, v.v.
Làm tròn các góc của khối DIV
Theo tiêu chuẩn CSS3, để khối DIV có các góc tròn, nó cần được tạo kiểu bán kính đường viền, ví dụ như thế này:
Bán kính đường viền: 10px;
Để rõ ràng, hãy vẽ hai khối có các góc thẳng và tròn:
Khối có góc vuông
Khối có các góc tròn
Bo tròn các góc của ảnh
Bằng cách tương tự với ví dụ trên, bạn có thể làm tròn các góc của hình ảnh trên trang web, ví dụ như ảnh. Để rõ ràng, hãy làm tròn các góc cho ảnh từ trang
Đây là hình ảnh chưa qua xử lý CSS
Và bây giờ với các góc tròn:
Bán kính đường viền: 10px;
Để làm cho nó thực sự “đẹp”, hãy thêm một số đường viền ngay từ đầu…
Bán kính đường viền: 10px; đường viền: 5px #ccc liền khối;
và sau đó là những cái bóng:
Bán kính đường viền: 10px; đường viền: 5px #ccc liền khối; bóng hộp: 0 0 10px #444;
Tùy chọn bên dưới (các góc bo tròn có bóng không viền) trông rất giống với một tấm lót chuột:
Bán kính đường viền: 10px; bóng hộp: 0 0 10px #444;
Và cuối cùng, một sự nhạo báng hoàn toàn về hình ảnh
Bán kính đường viền: 50%; đường viền: 5px #cfc rắn; bóng hộp: 0 0 10px #444;
Nếu bạn mở hình ảnh trong một cửa sổ mới, bạn sẽ thấy nó (hình ảnh) không thay đổi và tất cả các góc, bóng, v.v. chỉ là kết quả của quá trình xử lý CSS phong cách bởi trình duyệt của bạn.
Một chút lạc đề trữ tình
Phong cách ranh giới tăng kích thước của hình ảnh theo số lượng đường viền. Nếu một giá trị được chỉ định đường viền: 5px, khi đó hình ảnh cuối cùng sẽ rộng hơn và cao hơn 10 pixel. Hãy ghi nhớ điều này, trong một số trường hợp, bố cục của trang web có thể không hoạt động.
Một phong cách bóng hộp không ảnh hưởng đến kích thước của hình ảnh, bóng dường như chạy qua các phần tử lân cận. Khi sử dụng nó, bố cục trang web không bị ảnh hưởng.
Cách làm tròn các góc của hình ảnh trong WordPress
Trong tất cả các ví dụ trên, tôi đã viết kiểu trực tiếp trong thẻ mã html. Ví dụ: cái cuối cùng trông như thế này:
Điều này rất tốt khi bạn cần sắp xếp lại một bức tranh hoặc bức ảnh. Nếu bạn muốn thay đổi mọi thứ thì sao? Chà, bạn sẽ không leo khắp trang web của mình để chỉnh sửa cách hiển thị của từng trang. Trong hầu hết các trường hợp, thẻ WordPress IMGđịnh nghĩa một số lớp phong cách. Một cái theo tên duy nhất của tệp hình ảnh, cái khác theo kích thước và cái khác theo căn chỉnh. Bạn có thể bổ sung một trong số chúng với các thông số trên.
Ví dụ: đối với tất cả các hình ảnh không được chỉ định căn chỉnh, trong tệp phong cách.cssĐối với chủ đề WordPress của bạn, hãy nhập thông tin sau:
Căn chỉnh ( bán kính đường viền: 10px; đường viền: 5px #cfc rắn; bóng hộp: 0 0 10px #444; )
Hoặc phương pháp nghiêm ngặt nhất đối với tất cả các hình ảnh trên trang web. Hãy xác định lại kiểu cho tất cả các thẻ IMG:
Img ( bán kính đường viền: 10px; đường viền: 5px #cfc rắn; bóng hộp: 0 0 10px #444; )
Tùy chọn cuối cùng không chỉ phù hợp với WordPress mà còn phù hợp với bất kỳ CMS nào. Và ngay cả đối với đơn giản HTML trang trong trường hợp khi hiển thị hình ảnh, thẻ IMG không có lớp phong cách nào được chỉ định. Nhưng hãy cẩn thận. Nếu bạn ghi đè các tùy chọn hiển thị thẻ IMG bạn sẽ thay đổi diện mạo của TẤT CẢ hình ảnh trên trang web!
Thay vì một kết luận
Tất cả các ví dụ trong bài viết đều có điều kiện và chỉ nhằm mục đích thể hiện một số khả năng của CSS trong xử lý hình ảnh và cho thấy nó đơn giản như thế nào.
Xin lưu ý rằng các kiểu CSS cho một hình dạng nhất định được nhập vào tệp một lần, nhưng thẻ HTML có thể được đặt không giới hạn số lần trên trang web.
Kết quả của đầu ra, chúng tôi nhận được như sau hình chữ nhật có khung.
Cách tạo các góc tròn trong CSS
Thuộc tính được sử dụng để làm tròn các góc bán kính đường viền.
Chúng ta chỉ có thể thêm thuộc tính này. Nó thường hiển thị kết quả làm tròn trong các phiên bản trình duyệt mới, nhưng nhiều người dùng vẫn có các phiên bản cũ hơn mà thuộc tính này không hoạt động chính xác. Do đó, để tương thích, chúng tôi sẽ thêm một số mô tả nữa về thuộc tính này, được gắn trực tiếp với một số trình duyệt nhất định, vào khối của chúng tôi trong tệp Style.css, dẫn đến đoạn mã sau:
Thẻ div HTML sẽ cung cấp cho chúng ta hình chữ nhật trong một khung có hình trònvà các góc:
và thẻ HTML để hiển thị văn bản sẽ trông như thế này:
|
pib9.ru
|
Chúng tôi nhận được hình chữ nhật tròn và văn bản: 
Nếu bạn xóa thuộc tính mô tả kích thước hình chữ nhật khỏi mã chiều rộng Và chiều cao, thì bạn có thể có được các hình dạng sau với các góc tròn:
1. Không có văn bản
Trong trường hợp này, các biểu mẫu có kích thước của môi trường: chiều dài tương ứng với chiều rộng của trường và chiều cao thay đổi khi biểu mẫu chứa đầy nội dung.
Làm tròn các góc đã chọn
Trong mô tả kiểu, tham số 10px trong thuộc tính bán kính đường viền hiển thị bán kính cong, có thể thay đổi bằng cách chọn bán kính bạn cần. Nếu được đặt thành 0, việc làm tròn sẽ không xảy ra. Thuộc tính này có thể được sử dụng khi bạn cần làm tròn các góc đã chọn.
Hãy viết ra các giá trị của bán kính làm tròn cho mỗi góc, chỉ ra các số 0 nơi chúng ta hủy làm tròn. Ví dụ: hãy hủy việc làm tròn ở góc thứ ba và thứ tư. Mã của chúng tôi sẽ trông như thế này:
1. Góc trên bên trái.
2. Góc trên bên phải.
3. Góc dưới bên phải.
4. Góc dưới bên trái.
Điều này dẫn đến một hình chữ nhật với các đường cong được chọn chỉ ở các góc trên.
Các góc được tính theo chiều kim đồng hồ, bắt đầu từ góc trên bên trái: 
2. Làm tròn các góc bằng mã HTML mà không cần ghi vào tệp kiểu
Hãy xem cách thứ hai để có được một hình chữ nhật có các góc tròn bằng cách sử dụng mã HTML mà không cần ghi vào tệp kiểu.
Các góc tròn HTML
Có một tính năng nhỏ giúp đơn giản hóa toàn bộ quá trình hơn nữa - tính năng này Các góc tròn HTML. Nó bao gồm việc tạo mã HTML, chứa các kiểu giống như trong mã CSS. Điều này sử dụng các thuộc tính giống như trong khối CSS và loại bỏ nhu cầu ghi khối vào tệp Style.css. Nói một cách dễ hiểu, chúng tôi thay thế hoàn toàn mã CSS bằng mã HTML.
Thay vì khối CSS, chúng tôi nhận được một tập lệnh HTML mà chúng tôi chèn vào vị trí hình chữ nhật có các góc tròn sẽ xuất hiện:
Phương pháp làm tròn góc đầu tiên có thể được sử dụng khi cùng một hình dạng được sử dụng nhiều lần mà không thay đổi kiểu dáng. Phương pháp thứ hai được sử dụng cho các biểu mẫu có kiểu dáng được sử dụng một lần.
3. Những bức tranh có góc bo tròn. Khung xung quanh hình ảnh HTML
Tôi cũng muốn cung cấp cho bạn thông tin hữu ích. Thường xuyên sử dụng hình ảnh cho thiết kế trang web, Tôi thực sự muốn làm cho chúng đẹp hơn nữa bằng cách thay đổi hình dạng, đóng khung chúng bằng một khung có màu sắc đẹp và có chiều rộng khác nhau. Điều này đặt ra câu hỏi: “ Cách làm tròn các góc của hình ảnh?”.
Việc này được thực hiện rất đơn giản và bây giờ chúng ta sẽ học cách thực hiện.
Hãy đặt hình ảnh trên trang web, đặt hình ảnh đó làm nền của chính nó làm nền của thẻ div. Chúng tôi nhận được mã và hình ảnh sau đây:
Làm tròn các góc của hình ảnh bằng cách thêm khung
Làm tròn các góc của hình ảnh trong CSS và HTML và thêm đường viền có thể được thực hiện theo một trong hai cách được mô tả ở trên.
Sử dụng phương pháp đầu tiên trong bài viết này, mã hình ảnh cho tệp kiểu và mã HTML thẻ div sẽ trông như thế này:
Xin lưu ý rằng một số thuộc tính có thể được nhập vào tệp kiểu và một số thuộc tính có thể được nhập vào thẻ div. Trong trường hợp của chúng tôi, chiều rộng và chiều cao của hình ảnh được chèn vào mã HTML.
Mã HTML của phương pháp thứ hai, không sử dụng tệp kiểu được mô tả trong bài viết này, trông như thế này:
Do mã của từng phương pháp trong số hai phương pháp, chúng tôi nhận được kết quả giống nhau - một hình ảnh có các góc được làm tròn:
Chào buổi sáng, buổi chiều, buổi tối hoặc buổi tối mọi người. Dmitry Kostin luôn ở bên bạn. Một ngày nọ, tôi xem qua nhiều bức tranh khác nhau và rồi tôi thích một vài bức trong số đó. Và họ thích chúng vì chúng có các cạnh tròn. Nó ngay lập tức trông thú vị hơn. Bạn không nghĩ vậy sao? Và đó là lý do tại sao trong bài học hôm nay tôi muốn mách các bạn cách bo tròn các góc trong Photoshop để bức ảnh trông thú vị hơn.
Điều tôi thích ở Photoshop là trong nhiều trường hợp, điều tương tự có thể được thực hiện theo nhiều cách. Vì vậy, nó ở đây. Hãy bắt đầu với photoshop của chúng tôi.
Làm mịn bằng cách sử dụng đường viền
Phương pháp này tương tự như phương pháp trước, nhưng vẫn rất khác. Chúng tôi sẽ làm mọi thứ với cùng một hình ảnh.
Bằng cách tạo ra một hình dạng
Phương pháp thứ ba đã khác hoàn toàn so với hai phương pháp trước. Vì vậy, hãy nghỉ ngơi trong vài giây và tiếp tục. Tôi sẽ không thay đổi hình ảnh và sẽ tải lại chiếc xe này vào Photoshop.
Bạn có thấy mình đã kết thúc với điều gì không? Bức ảnh có các cạnh tròn và tất cả là do nó chỉ được hiển thị ở nơi có hình chữ nhật bo tròn đã vẽ của chúng ta. Nhưng bây giờ bạn có thể cắt ảnh bổ sung bằng công cụ Frame hoặc bạn có thể lưu ảnh ngay và bạn sẽ có một ảnh riêng với các góc được bo tròn.
Hãy cố gắng tự mình làm mọi thứ, đồng thời cho tôi biết phương pháp nào được trình bày phù hợp với bạn hơn.
Và nhân tiện, nếu bạn còn thiếu sót trong Photoshop hoặc bạn chỉ muốn tìm hiểu đầy đủ về nó trong thời gian ngắn nhất có thể, thì tôi thực sự khuyên bạn nên xem một cái. khóa học photoshop hay cho người mới bắt đầu. Khóa học được thực hiện tốt, mọi thứ đều được kể và trình bày tuyệt vời, đồng thời mỗi tài liệu đều được thảo luận rất chi tiết.
Được rồi, tôi sẽ hoàn thành bài học hôm nay. Đừng quên đăng ký để nhận các bài viết mới và chia sẻ điều này với bạn bè của bạn. Tôi rất vui được gặp bạn trên blog của tôi. Tôi đang đợi bạn một lần nữa. Tạm biệt.
Trân trọng, Dmitry Kostin
Trong bài học trước, chúng ta đã học cách thiết lập đường viền cho một phần tử. Chúng tôi cũng đã xem xét các thuộc tính như border-color và border-style mà bạn có thể tùy chỉnh màu sắc và kiểu dáng của đường viền. Tuy nhiên, tất cả các khung hình của chúng tôi đều có góc vuông. Bây giờ chúng tôi sẽ hướng dẫn bạn cách tạo các góc tròn trong CSS cho đường viền.
Cách làm tròn các góc: Thuộc tính bán kính đường viền CSS3
Làm tròn các góc trong CSS có thể được thực hiện cho bất kỳ thành phần nào trên trang HTML. Để làm điều này, bạn cần áp dụng thuộc tính bán kính đường viền cho nó với giá trị phù hợp. Thông thường, giá trị được chỉ định bằng pixel, nhưng các đơn vị khác cũng có thể được sử dụng, chẳng hạn như em hoặc phần trăm (trong trường hợp sau, phép tính có liên quan đến chiều rộng của khối).
Hiệu ứng của thuộc tính này sẽ chỉ đáng chú ý nếu phần tử được tạo kiểu có nền và/hoặc đường viền màu. Ví dụ:
BorderElement ( màu nền: #EEDDFF; đường viền: 6px Solid #7922CC; bán kính đường viền: 25px; )
Kiểu được mô tả ở trên sẽ cho kết quả sau trên phần tử
Bạn cũng có thể chỉ tạo các cạnh bo tròn cho các góc trên cùng hoặc dưới cùng của phần tử hoặc đặt cho mỗi góc một bán kính bo tròn khác nhau - rất nhiều chỗ cho trí tưởng tượng! Ví dụ:
BorderElement ( màu nền: #EEDDFF; đường viền: 6px Solid #7922CC; bán kính đường viền: 25px; ) .borderElement1 ( màu nền: #FFE8DB; đường viền: 6px Solid #FF5A00; bán kính đường viền: 15px 100px 15px 100px; ) 
Nhưng đó không phải là tất cả: thay vì các góc tròn đơn giản, bạn có thể chỉ định làm tròn hình elip. Để thực hiện việc này, bạn sẽ cần chỉ định hai giá trị được phân tách bằng dấu gạch chéo (đối với bán trục ngang và dọc của hình elip). Hãy đưa ra một ví dụ về khối 150x450 pixel:
BorderElement ( màu nền: #EEDDFF; đường viền: 6px Solid #7922CC; bán kính đường viền: 280px/100px; ) 
Bạn có thể kết hợp các giá trị (tức là sử dụng cả hình tròn thông thường và hình elip theo cùng một kiểu) và bạn cũng có thể thêm kiểu riêng cho từng góc bằng cách sử dụng các thuộc tính thích hợp:
- bán kính viền trên cùng bên trái - cho góc trên cùng bên trái;
- bán kính trên cùng bên phải - cho góc trên cùng bên phải;
- bán kính viền dưới bên trái - cho góc dưới bên trái;
- bán kính dưới cùng bên phải - cho góc dưới bên phải.
Nguyên tắc làm tròn các góc
Hình ảnh bên dưới cho thấy cách tính toán làm tròn góc trong CSS. Vì vậy, nếu một giá trị duy nhất được chỉ định cho góc - ví dụ: 20px - điều này có nghĩa là việc làm tròn sẽ xảy ra dọc theo một vòng tròn có bán kính 20 pixel. Trong trường hợp hai giá trị được chỉ định cách nhau bằng dấu gạch chéo, ví dụ: 30px/20px, các góc sẽ được làm tròn dọc theo hình elip. Giá trị đầu tiên trong trường hợp này là độ dài bán trục ngang của hình elip - 30px và giá trị thứ hai là độ dài bán trục dọc - 20px:
Thuộc tính bán kính đường viền CSS được hỗ trợ bởi tất cả các trình duyệt hiện đại.
Các góc được bo tròn trong ảnh trông khá thú vị và hấp dẫn. Thông thường, những hình ảnh như vậy được sử dụng khi tạo ảnh ghép hoặc tạo bài thuyết trình. Ngoài ra, những hình ảnh có góc tròn có thể được sử dụng làm hình thu nhỏ cho các bài đăng trên trang web.
Có nhiều lựa chọn để sử dụng nhưng chỉ có một cách (chính xác) để có được bức ảnh như vậy. Trong hướng dẫn này tôi sẽ chỉ cho bạn cách bo tròn các góc trong Photoshop.
Mở ảnh trong Photoshop mà bạn sắp chỉnh sửa.
Sau đó tạo một bản sao của lớp thác nước có tên "Lý lịch". Để tiết kiệm thời gian, hãy sử dụng phím nóng CTRL+J.
Bản sao được tạo ra để giữ nguyên hình ảnh gốc. Nếu (đột nhiên) có sự cố xảy ra, bạn có thể xóa các lớp bị lỗi và bắt đầu lại.
Trong trường hợp này, chúng tôi chỉ quan tâm đến một trong các cài đặt – bán kính làm tròn. Giá trị của tham số này phụ thuộc vào kích thước và nhu cầu của hình ảnh.
Tôi sẽ đặt giá trị thành 30 pixel để kết quả sẽ hiển thị rõ hơn.
Bây giờ bạn cần kéo dài hình kết quả trên toàn bộ khung vẽ. Gọi hàm "Miễn phí chuyển đổi" phím nóng CTRL+T. Một khung sẽ xuất hiện trên hình dạng mà bạn có thể sử dụng để di chuyển, xoay và thay đổi kích thước đối tượng.
Chúng tôi quan tâm đến việc mở rộng quy mô. Kéo dài hình bằng cách sử dụng các điểm đánh dấu được chỉ ra trong ảnh chụp màn hình. Sau khi chia tỷ lệ hoàn tất, hãy nhấp vào ĐI VÀO.
Mẹo: để chia tỷ lệ chính xác nhất có thể, nghĩa là không vượt ra ngoài khung vẽ, bạn cần kích hoạt cái gọi là "Ràng buộc" Nhìn vào ảnh chụp màn hình, nó hiển thị vị trí của chức năng này.
Chức năng này khiến các đối tượng tự động “Dính” vào các phần tử phụ và đường viền canvas.
Như bạn có thể thấy, một vùng chọn đã hình thành xung quanh hình. Bây giờ, hãy chuyển đến lớp sao chép và xóa khả năng hiển thị khỏi lớp có hình dạng đó (xem ảnh chụp màn hình).
Lớp thác nước hiện đang hoạt động và sẵn sàng để chỉnh sửa. Chỉnh sửa bao gồm việc loại bỏ những thứ không cần thiết khỏi các góc của bức ảnh.
Đảo ngược lựa chọn bằng phím nóng CTRL+SHIFT+I. Bây giờ lựa chọn chỉ còn ở các góc.
