Có ai biết cách tạo góc lõm như trong hình bằng CSS thuần không? Dạng cuối cùng của mã. Bóng cong theo chiều dọc
cong Bóng tối hoặc Bóng tối mô phỏng các góc cong hướng lên trên,Đồng thời, các đối tượng hoặc hình ảnh nổi bật so với văn bản thuần túy.
Và như vậy hiệu ứng ba chiều, chỉ có thể đạt được bằng cách sử dụng CSS3 Và HTML.
Đầu tiên, một số cái chung, nhưng những điều cơ bản quan trọngđể tạo bóng cong hoặc lõm.
Chặn bằng bóng tối
Bằng cách sử dụng CSS3 bóng của bất kỳ vật thể nào có thể được tạo ra HTML, với bất kỳ hướng, kích thước và độ mờ nào. Đối với điều này nó được sử dụng, CSS3 tham số “bóng hộp: 2px 2px 2px 2px #000 inet”. Điều quan trọng cần biết là bóng thích ứng với kích thước và hình dạng của vật thể. Một góc tròn của một vật thể tạo ra một cái bóng tròn.
Đối với một đối tượng, có thể chỉ định đồng thời nhiều bóng khác nhau, phân tách bằng dấu phẩy.
Ý nghĩa của thông tin" box-shadow: 2px 2px 2px 2px #000 inset“:
- Giá trị đầu tiên chuyển vị theo phương ngang.
Làm sao nhiều giá trị hơn, bóng càng di chuyển sang bên phải, trong khi giá trị âm sẽ di chuyển bóng sang trái. - Giá trị thứ hai là chuyển vị theo phương thẳng đứng.
Với các giá trị dương, bóng sẽ di chuyển xuống và với các giá trị âm, bóng sẽ di chuyển lên. - Giá trị thứ ba xác định mức độ bóng mờ.
Giá trị càng cao thì độ mờ càng lớn. - thứ tư tham số bổ sungđịnh nghĩa bán kính bóng tối.
Giá trị càng cao, bóng càng lớn. - Sau đó theo sau màu bóng.
Dữ liệu này cũng ảnh hưởng đến nhận thức về độ mờ. - “chèn vào“: Thông tin tùy chọn này là bóng tối bên trong
Ký hiệu màu này “# 000”, có thể được thay thế bởi “RGBA” (kênh đỏ, lục, lam, alpha), Ví dụ, “bóng hộp: 4px 4px 4px rgba(0, 0, 0, .6)”, làm cho bóng của đối tượng trở nên mờ và do đó trông tự nhiên hơn trên nền có kết cấu.
Bóng cong và cong
đánh dấu cơ bản HTML không thay đổi trong tất cả các ví dụ sau. Vì vậy, chỉ những gì cần thiết sẽ được thêm vào CSS3. Thay vì một hình ảnh, một giây “ phân chia-container” cho văn bản, nhưng cuối cùng thì nó cũng giống nhau.
Để xác định vị trí của bóng, vùng chứa “ DIV” phải có tham số “vị trí: tương đối” và với sự giúp đỡ “chỉ số z: 1” di chuyển về phía trước. Do đó, vùng chứa này đóng vai trò là điểm tham chiếu cho bóng được định vị tuyệt đối.
#schatten (vị trí: tương đối; chiều cao: 34,4em; chiều rộng: 50em; lề: -2,5em tự động 1,8em; trái: -5px; z-index: 1; )
Bây giờ thuộc tính của vùng chứa thứ hai “ DIV” hoặc thuộc tính hình ảnh.
Kích thước của cả chiều rộng và chiều cao là 100% vùng chứa gốc “#schatten”, và cũng có khung màu trắng "ranh giới" 5 pixel.
Để làm cho khung màu trắng khác với hình nền, một cái bóng khác sẽ được thêm vào. Điều này dẫn đến việc tách chủ thể khỏi nền nhiều hơn, nhờ đó nâng cao hiệu ứng 3D.
#schatten img ( vị trí: tương đối; chiều rộng: 100%; chiều cao: 100%; đường viền: 5px Solid #fff; box-shadow: 0 -3px 5px -2px rgba(0, 0, 0, .6), 0 1px 4px rgba(0, 0, 0, .3), 0 0 20px rgba(0, 0, 0, .1) chèn )
Nhờ các yếu tố giả ":trước" Và ":sau đó" một bóng cong được xác định và thêm vào vùng chứa “ DIV“.class=”notranslate”> Các phần tử ":trước" Và ":sau đó", thường được hiểu là các đối tượng có sẵn và được đặt trên HTML nói cách khác, phần tử được đặt trước hoặc sau phần tử Nhờ “. vị trí: tuyệt đối“, bóng độc lập với vật thật và có thể được định vị riêng lẻ.
Đầu tiên, kích thước của bóng được xác định và do đó thu được bằng cách sử dụng hai phần tử giả, hai hình chữ nhật có chiều rộng 50% và chiều cao 30% của vùng chứa chính “# làm phiền“. Sau đó, chúng tôi di chuyển hai hình chữ nhật thêm 2 pixel và tạo bóng ở khoảng cách 15 pixel và độ mờ 10 pixel.
Phần tử giả ":trước" nhằm mục đích thể hiện cái bóng ở phía dưới bên trái và do đó nhận được góc xoay 3° ngược chiều kim đồng hồ. Phía sau bên phải phần tử phản hồi ":sau đó".
#schatten:trước, #schatten:sau ( vị trí: tuyệt đối; nội dung: ""; chiều rộng: 50%; chiều cao: 30%; đáy: 2px; bên trái: 10px; bóng hộp: 0 15px 10px rgba(0, 0, 0, .7); biến đổi: xoay(-3deg); z-index: -2; ) #schatten:after ( phải: 0; trái: tự động; biến đổi: xoay (3deg); )
Bây giờ chúng ta hãy xem các ví dụ khác về bóng hình vòm và bóng cong.
Và, như đã mô tả ở trên, chúng tôi sẽ chèn một vùng chứa bổ sung “ DIV” thay vì một hình ảnh.
Mã chính CSS3 cho tất cả các ví dụ tiếp theo:
Box ( vị trí: tương đối; chiều cao: 12em; chiều rộng: 31em; lề: 0 tự động; chỉ mục z: 1; ) .schatten ( vị trí: tương đối; màu: #777; chiều rộng: 80%; chiều cao: 80%; nền: #fff; bóng hộp: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inet) .schatten:trước ( vị trí: tuyệt đối; nội dung: " "; chỉ mục z: -2; bóng hộp: 0 0 15px rgba(0, 0, 0, .6); bán kính đường viền: 100px / 20px;
Bóng cong theo chiều ngang
.schatten1:trước ( trên cùng: 0; dưới cùng: 0; trái: 10px; phải: 10px; )Bóng cong theo chiều dọc
.schatten2:trước ( trên cùng: 10px; dưới cùng: 10px; trái: 0; phải: 0; )Góc cong
.schatten3:trước, .schatten3:after ( vị trí: tuyệt đối; nội dung: ""; chiều rộng: 50%; chiều cao: 30%; đáy: 2px; bên trái: 10px; bóng hộp: 0 15px 10px rgba(0, 0, 0, .6); biến đổi: xoay(-3deg); chỉ mục z: -1; ) .schatten3:after ( phải: 0; trái: tự động; biến đổi: xoay (3deg); )Bóng tối trong phối cảnh
.schatten4:trước, .schatten4:after ( vị trí: tuyệt đối; nội dung: ""; z-index: -2; đáy: 5px; chiều rộng: 80%; chiều cao: 3.1em; ) .schatten4:trước ( trái: 50px; box-shadow: -80px 0 8px rgba(0, 0, 0, .4); biến đổi: skew(45deg); .schatten4:after ( left: 40px; box-shadow: 80px 0 8px rgba(0, 0, 0 , .4); biến đổi: skew(-45deg);bóng treo
.schatten5 ( vị trí: tương đối; màu: #777; chiều rộng: 80%; chiều cao: 9,5em; trên cùng: 0; nền: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 -30px 40px rgba(0, 0, 0, .1) int; chuyển đổi: 1 giây dễ dàng vào ra; kiểu biến đổi: bảo quản-3d; .schatten5:after (nội dung: ""; display: block; Height : 80%; chiều rộng: 75%; biến đổi: RotaX(80deg) Translate3d(0, 0, -44px); bóng hộp: 50px 200px 25px 10px rgba(0, 0, 0, .3); schatten5:hover ( top: 35px; box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset; ) .schatten5:hover:after ( biến đổi: xoayX(94deg) dịch3d(0, 0, -70px); bóng hộp: 50px 200px 25px 10px rgba(0, 0, 0, .4); )Bóng nổi lên
.schatten6:trước ( vị trí: tuyệt đối; nội dung: ""; z-index: -2; box-shadow: 0 0 15px rgba(0, 0, 0, .6); bán kính đường viền: 100px / 20px; ) . schatten6 ( top: 0; box-shadow: 0 25px 10px -10px rgba(0, 0, 0, .6), 0 1px 4px rgba(0, 0, 0, .3), 0 -30px 40px rgba(0, 0, 0, .1) inset; ) .schatten6:hover ( top: 15px; box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .6), 0 1px 4px rgba(0, 0, 0 , .3), 0 0 40px rgba(0, 0, 0, .1) chèn )TRONG bài học này chúng ta sẽ tạo hiệu ứng các góc cong mà không cần sử dụng hình ảnh hoặc dấu hiệu bổ sung. Nó hoạt động tốt trong tất cả các trình duyệt hiện đại và rất phù hợp cho các thiết kế trang web với cách phối màu đơn giản.
Hiệu ứng này đã được sử dụng trong bản demo của bài học "Nhiều nền và nét bằng CSS2". Ngoài ra, có thể thấy việc sử dụng các góc cong trong thiết kế của một trang web thực tế trong ví dụ của Yiibu. Nhưng trang Yiibu sử dụng hình ảnh và chúng tôi sử dụng các phần tử giả và CSS.
Bắt đầu
Không có gì phức tạp. Bất cứ ai cũng sẽ làm yếu tố và không cần đánh dấu bổ sung. Tất cả bắt đầu với một hình chữ nhật được sơn đơn giản. Các trình duyệt không hỗ trợ phần tử giả (IE6 và IE7) cũng sẽ xuất ra nó.
Việc thêm thuộc tính vị trí: tương đối làm cho điều đó trở nên khả thi định vị tuyệt đối các phần tử giả.
Lưu ý ( vị trí: tương đối; chiều rộng: 30%; phần đệm: 1em 1,5em; lề: 2em tự động; color:#fff; nền:#97C02F; )
Một góc gấp được tạo bằng cách sử dụng phần tử giả được đặt ở vị trí góc trên cùng hình chữ nhật. Phần tử giả không có chiều rộng hoặc chiều cao nhưng có nét dày. Bằng cách thay đổi độ dày của nét, chúng ta sẽ thay đổi được kích thước của góc gấp.
TRONG trong ví dụ này Phần trên và bên phải của nét có màu phù hợp với màu nền của hình chữ nhật gốc. Phần bên trái và phía dưới của nét vẽ có nhiều hơn màu tối hoặc nhạt hơn màu nền của hình chữ nhật.
Lưu ý:trước (nội dung:""; vị trí:tuyệt đối; top:0; right:0; border-width:0 16px 16px 0; border-style:solid; border-color:#658E15 #fff; )
Đó là tất cả những gì bạn cần để tạo hiệu ứng đơn giản góc gấp, tương tự như góc được sử dụng trên trang Yiibu.
Firefox 3.0 không cho phép định vị các phần tử giả. Bạn có thể sử dụng một vài thuộc tính để sửa lỗi này trong trình duyệt này.
Lưu ý: trước ( ... display:block; width:0; )
Thêm bóng sáng
Hình thức của góc có thể được cải thiện một chút bằng cách thêm thuộc tính box-shadow (đối với những trình duyệt hỗ trợ nó) vào phần tử giả. Việc đặt thuộc tính tràn: ẩn trên lớp phần tử sẽ ẩn một phần bóng, điều này sẽ phá vỡ hiệu ứng cuộn tròn.
Lưu ý: trước ( ... -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0,2);
Các góc tròn
Việc sử dụng kỹ thuật này kết hợp với các góc tròn cũng tương đối dễ dàng. Thật không may, mọi người trình duyệt hiện đại có một số loại lỗi liên quan đến thuộc tính bán kính đường viền (bao gồm cả những lỗi sử dụng thuộc tính không có tiền tố). Tình trạng này đồng nghĩa với việc cần phải làm thêm việc.
Chỉ các trình duyệt Webkit mới có thể tạo các góc tròn cho các phần tử giả nếu chúng chỉ có 2 phần nét. Opera 11 và Firefox 3.6 tạo ra một mớ hỗn độn đáng kinh ngạc. Hơn nữa, Opera 11 có lỗi tối đa trong quá trình này.
Sử dụng cả bốn mặt sẽ loại bỏ các vấn đề trong Opera 11 và Firefox 3.6. Nhưng phương pháp này giải pháp dẫn đến lỗi trong Safari 5 dẫn đến đường chéo lởm chởm. Đường vòng vấn đề này Bạn có thể đặt màu cho ít nhất một phần của nét vẽ thành trong suốt.
Màu nền sẽ được hiển thị thông qua đường viền trong suốt. Lý tưởng nhất là cách tiếp cận này sẽ tạo ra hiệu ứng và chứa tối thiểu mã. Nhưng Opera 11 cho thấy màu nền chỉ thông qua một nét trong suốt nếu thuộc tính bán kính đường viền được đặt.
Làm tròn ghi chú:trước ( nội dung:""; vị trí: tuyệt đối; top:0; right:0; border-width:8px; border-color:#fff #fff trong suốt trong suốt; nền:#658E15; -webkit-border- bán kính dưới cùng bên trái: 5px; -moz-bán kính đường viền:0 0 0 5px; bán kính đường viền:0 0 0 5px chiều rộng: 0;
Tệp CSS cho trang demo chứa các nhận xét hữu ích để làm việc. Mỗi trình duyệt đều có những đặc điểm riêng khi sử dụng thuộc tính bán kính đường viền hoặc phác thảo các phần tử không có chiều rộng và chiều cao.
Mã cuối cùng
Dưới đây là tất cả mã CSS cần thiết để tạo hiệu ứng góc cong với bóng tinh tế chỉ bằng một phần tử HTML.
Chức vụ: tương đối; chiều rộng: 30%; phần đệm:1em 1,5em; lề:2em tự động; màu sắc:#fff; nền:#97C02F; tràn:ẩn; ) .note:trước ( nội dung:""; vị trí:tuyệt đối; top:0; phải:0; chiều rộng đường viền:0 16px 16px 0; border-style:solid; border-color:#fff #fff #658E15 #658E15 ; nền:#658E15; -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); 0,0.3), -1px 1px 1px rgba(0,0,0,0.2); bóng hộp:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0, 0.2); display:block; width:0; /* Khắc phục các hạn chế của Firefox 3.0 */ .note.rounded ( -webkit-border-radius:5px; -moz-border-radius:5px ; border-radius:5px; ) . note.rounded:trước ( border-width:8px; border-color:#fff #fff trong suốt trong suốt; -webkit-border-bottom-left-radius:5px; -moz-border-bán kính:0 0 0 5px; viền- bán kính:0 0 0 5px )
Phần kết luận
Trang demo chứa các ví dụ sử dụng màu sắc khác nhauđể đảm bảo hiệu ứng dễ sử dụng.
Cần phải tính đến điều đó kỹ thuật này hoạt động kém hơn khi sử dụng hình ảnh làm nền cho một phần tử so với khi sử dụng một màu đơn giản. Nhưng các phương pháp tổ chức góc cong khác cũng có những hạn chế như vậy.
Thuộc tính box-shadow thêm một hoặc nhiều bóng vào một phần tử. Bóng là bản sao của phần tử được bù theo khoảng cách đã chỉ định. Bóng có thể ở bên ngoài hoặc bên trong, mờ hoặc phẳng và có thể đi theo đường viền của các khối với các góc tròn. Bằng cách sử dụng từ khóa hình nhỏ tạo bóng bên trong phần tử, làm cho phần tử trở nên đồ sộ hoặc bị lõm xuống về mặt thị giác.
Cách tạo bóng hộp bằng thuộc tính box-shadow
Hỗ trợ trình duyệt
I E: 9.0
Bờ rìa: 12.0
Firefox: 4.0, 3.5 -moz-
Trình duyệt Chrome: 10.0, 4.0 -webkit-
Cuộc đi săn: 5.1, 3.1 -webkit-
Opera: 11.5
Safari của iOS: 5.1, 3.1 -webkit-
Trình duyệt Android: 4.0, 2.1 -webkit-
1. Cú pháp thuộc tính box-shadow
Mỗi bóng có từ một đến năm tham số: độ lệch ngang, độ lệch dọc, bán kính mờ (tùy chọn), bán kính trải rộng (tùy chọn) và màu bóng. Bóng không ảnh hưởng đến bố cục và có thể chồng lên các phần tử liền kề hoặc bóng của chúng. Tài sản không được thừa kế.
Cơm. 1. Cú pháp thuộc tính box-shadow | Giá trị: | |
| bù x | Giá trị bắt buộc. Độ lệch ngang của bóng so với khối. Nó có thể nhận cả giá trị dương và âm, giá trị dương chuyển bóng sang bên phải khối, giá trị âm – sang trái. |
| bù y | Giá trị bắt buộc. Độ lệch dọc của bóng so với khối. Có thể nhận cả giá trị dương và âm, dương di chuyển bóng xuống, âm di chuyển bóng lên. |
| mơ hồ | Giá trị tùy chọn. Xác định bán kính mờ của bóng. Làm sao bán kính lớn hơn, bóng càng mờ. Chỉ có thể sử dụng các giá trị dương. |
| kéo dài | Tùy chọn, mở rộng bóng bằng cách làm dày phần rắn giữa cạnh mờ. Chấp nhận cả giá trị dương và âm, được chỉ định theo đơn vị độ dài - px, v.v. |
| màu sắc | Giá trị tùy chọn. Theo mặc định bóng có màu đen. Để đặt giá trị bạn có thể sử dụng định dạng sau các mục màu: #RRGGBB , rgb(red, green, blue) , rgba(red, green, blue, alpha) . Đối với Safari, màu bóng phải được chỉ định. |
| chèn vào | Tạo bóng bên trong khối. |
| không có | Giá trị mặc định có nghĩa là không có bóng. |
| ban đầu | Đặt giá trị thuộc tính thành giá trị mặc định. |
| thừa kế | Kế thừa giá trị thuộc tính từ phần tử cha. |
2. Ví dụ về bóng khối
2.1. Bóng bên trong
.example-shadow-1 ( nền: #e6e3df; text-align: center; ) .example-shadow-1 span ( lề: 50px; chiều cao: 100px; chiều rộng: 200px; hiển thị: khối nội tuyến; bóng hộp: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1);
2.2. Bóng phẳng ở một bên
phẳng
phẳng
.example-shadow-2 ( nền: màu be; text-align: center; ) .example-shadow-2 a ( display: inline-block; border-radius: 5px; phần đệm: 15px 35px; cỡ chữ: 22px; lề : 20px; màu: trắng; nền: #55acee; box-shadow: 0 5px 0 #3C93D5;
Câu hỏi: Hình dạng + góc nhẵn
Chúc một ngày tốt lành, những người dùng diễn đàn thân mến. Hãy giúp tôi với câu hỏi này: bằng cách sử dụng CSS thuần túy, bạn cần tạo hình lục giác sau đây nhưng có các góc được làm nhẵn.
Tôi sẽ biết ơn bất kỳ sự giúp đỡ nào, đặc biệt là những sự giúp đỡ nhanh chóng.
Trả lời:
tin nhắn từ Trong bóng tối
Spirt Tesla, Cảm ơn phản hồi của bạn, nhưng không có vấn đề gì trong việc xây dựng hình, tôi đã tìm ra rồi, nhưng việc làm mịn các góc đã là một vấn đề - trong mã của bạn, thông số nào chịu trách nhiệm cho việc này. đặc điểm của hình?
Nói chung, bán kính đường viền chịu trách nhiệm khử răng cưa
Câu hỏi: Góc vuông
Giúp tôi tạo các góc vuông,Đây là mã
/rs- thiết lập lại tài khoản;
/rs Tôi có văn bản này ở đâu trong khung tròn, nhưng làm cách nào để làm cho khung có các góc vuông?
Trả lời:
Giúp tôi tạo góc vuông
Tôi nghĩ rằng ngay cả khi bạn tìm kiếm trên Google trong ba ngày, bạn cũng sẽ không tìm thấy gì. Hãy thử tìm ngược lại, tìm cách thực hiện góc tròn, nếu thành công, bạn sẽ học cách tạo hình vuông.
Câu hỏi: Cách tạo các góc như vậy cho div
Chào buổi chiều
Cách tạo các góc như vậy cho div.
Ví dụ:
Cảm ơn!
Trả lời: Ví dụ: một phần tử giả có kích thước nhất định nhưng sẽ dễ chơi hơn với bóng nếu bạn muốn thực hiện cả 4 góc theo cách này.
bóng hộp: X Y 0 -S #fff; - hai tham số đầu tiên lần lượt là offset theo x và y, độ mờ thứ ba, ở đây nó phải bằng 0 và tham số thứ tư có nhiệm vụ nén bóng khi có dấu trừ (bạn muốn nó trở nên nhỏ). Cái cuối cùng là màu bóng.
Mặc dù, nếu bản thân div của bạn là hình chữ nhật và bóng là hình vuông, thì rõ ràng, sẽ hợp lý khi tạo một phần tử giả trong suốt với các kích thước như bóng và độ lệch theo X và Y để phân tán 4 bóng của nó ở các góc của div. Trong trường hợp này, tham số thứ tư của thuộc tính box-shadow cũng sẽ là 0, chỉ thay đổi hai tham số đầu tiên.
Câu hỏi: (JS) Tìm góc quay thực sự của div
Xin chào các thành viên diễn đàn.
Tôi biết về ma trận (bla-bla) sin và cosin.
Định đề: Trình duyệt “biết” số lần quay của một phần tử nếu góc lớn hơn 360 độ - rõ ràng là từ kinh nghiệm.
Câu hỏi: Có thể trích xuất góc quay thực này được không?
Trả lời: Tôi đã hỏi một câu hỏi cụ thể:
Cách sử dụng tập lệnh để trích xuất toàn bộ giá trị góc xoay của div trong khi trang đang chạy.
390 độ tương tự được chỉ định trong css.
Câu hỏi: chồng một bức tranh lên một bức tranh khác ở một góc nhất định
một nhiệm vụ tương tự như nhiệm vụ của fiddle. bạn cần chồng một bức ảnh này lên một bức ảnh khác, mặc dù thực tế là bức ảnh phía dưới bị nghiêng. Tôi chỉ không thể sắp xếp nó một cách trơn tru. Tôi đã thử sử dụng phối cảnh trong CSS, ma trận và các phép biến đổi khác, nhưng các góc của bức ảnh luôn không di chuyển. trong trường hợp này chỉ có một góc có thể không trùng nhau. có cái nào không những cách đơn giản, hoặc phiên bản của tôi có thể sửa được không?
| HTML5 | ||
|
||
| CSS | ||
|
||
Trả lời: Tôi đã từng làm như bạn đã chỉ và tôi cũng thấy rằng nó hoạt động tốt, nhưng dù tôi có cố gắng bao nhiêu trên trang web thì cũng không có gì hiệu quả. các góc trên cùng vẫn giữ nguyên, bạn có thể đề xuất điều gì không?
Đã thêm sau 15 phút
cảm ơn, đã tìm ra nó
hình ảnh
{
vị trí: tuyệt đối;
}
đó là vấn đề
Câu hỏi: Có phải plugin Multiscroll, nút menu ở góc trên bên trái chỉ có hình động trong Firefox phải không?
trang web wsfox.ru
Plugin đa cuộn
Tại sao nút menu ở góc trên bên trái chỉ có hình động trong Firefox?
Trả lời:
tin nhắn từ Mashka_mulashka
Bạn có thể cho tôi biết tại sao nút menu ở góc trên bên trái chỉ có hình động trong Firefox không?
Có lẽ tôi sẽ cho bạn một gợi ý, nhưng nó cũng hoạt động tốt trong Chrome
Đã thêm sau 7 phút
Nói chung, có vẻ như tên của các khung hình chính được viết ở phía trước và của bạn ở cuối, có lẽ đó là lý do tại sao nó không hoạt động trong IE, nhưng tôi không chắc lắm
| Mã CSS | ||
|
||
Câu hỏi: Xác định góc bằng đường canvas
Nhìn vào ảnh chụp màn hình, bạn cần tìm góc “C”. Trong đó def.X/defY là vị trí hiện tại của mõm súng (à, bắn đen lên) và nowX/nowY là vị trí hiện tại của con trỏ chuột. Không cần phải viết rằng tôi có số 2 về hình học, tôi có số 5 về hình học. Vấn đề là khác, làm cách nào tôi có thể viết chính xác điều này trong JS?
Trả lời: Bạn có tọa độ chuột không (đây là các cạnh của một tam giác vuông)
Tất cả những gì còn lại là tìm ra cách tìm một góc khi biết chiều dài của hai chân
và tang được dùng để làm gì trong lượng giác?
| tin nhắn từ vopub |
| Không cần phải viết rằng tôi có số 2 trong môn hình học, |
Có ý kiến cho rằng bạn thật ngu ngốc và giải quyết sai vấn đề mà bạn đang gặp phải. họ đã nói với bạn về vector rồi
Câu hỏi: Các góc được bo tròn trên khối cha và định vị phần tử con
ngày tốt
Có hai vấn đề.
1. Việc bo tròn các góc không có tác dụng trên khối màu xanh lá cây. Mặc dù cùng một mã hoạt động trên khối menu
| CSS | ||
|
||
Tại sao điều này có thể xảy ra?
2. Khối màu be nằm trên khối màu xanh lá cây, chúng phải nằm cạnh nhau và phải có đường viền giữa chúng. Đây là mã:
| CSS | ||
|
||
Trả lời: Cảm ơn. Đã tìm ra lỗi lầm của tôi
Đã thêm sau 25 phút
Quả thực sai lầm là tôi đã đặt các góc cho tròn phần tử cha. Nhưng cuối cùng tôi quyết định từ bỏ chúng.
Tôi không tách các khối, tôi thêm một class.right mới cho toàn bộ phần bên phải của nội dung và đánh dấu nó bằng màu trắng. Do đó, nhìn bề ngoài có vẻ như có 2 khối và chúng tách biệt nhau
| CSS | ||
|
||
Câu hỏi: Thanh trượt hình ảnh trong JavaScript thuần túy
Các bạn, tôi thực sự cần sự giúp đỡ của các bạn. Vui lòng giải thích cho tôi bằng ngón tay về logic của thanh trượt trong JS thuần túy. Internet có rất nhiều thanh trượt, nhưng tất cả chúng đều có trong JQuery hoặc rất phức tạp. Tôi cần một thanh trượt đơn giản, một mũi tên sang trái - hình ảnh trước đó xuất hiện, ở bên phải - hình ảnh tiếp theo, không có bất kỳ chuông và còi nào. Tôi mới học JS gần đây nên không hiểu rõ cách triển khai tính năng này và tôi không thể hiểu mã của các thanh trượt phức tạp do thiếu kinh nghiệm. Tôi sẽ rất biết ơn sự giúp đỡ của bạn.
Trả lời: Deimon26, nhìn vào đây, mọi thứ đều ở dạng js thuần túy, có bình luận
