Một cách rất đơn giản để xoay các phần tử của trang web - chỉ cần áp dụng một vài kiểu css. Làm quen với bài học này sẽ cho phép bạn đặt một chiếc quạt thẻ chưa mở, những chiếc lá rơi rải rác hoặc những bức ảnh phong cách trong một album trên trang. Bài học có một ví dụ về việc triển khai một album ảnh và có tính đến giải pháp cho tất cả các trình duyệt hiện đại.
Nó là cần thiết
Bốn ảnh rộng tới 450px
Hướng dẫn
Bước 1
Ví dụ này sẽ tập trung vào việc tạo một trang album phong cách với các bức ảnh được xoay.
Tôi đã chuẩn bị trước hình ảnh (chiều rộng 400px) với địa chỉ:
Trong tương lai, chúng tôi sẽ gán ID cho hình ảnh theo tên của chúng.
Bước 2
Đầu tiên, chúng ta sẽ chuẩn bị một khối cho album ảnh của mình bằng thẻ div và cũng thêm ảnh vào đó bằng thẻ img (mỗi ảnh phải được đặt trong thẻ div riêng), như sau:
Xin lưu ý rằng chúng tôi đã chỉ định một số nhận dạng cho khối -. Bằng mã định danh, chúng ta có thể tham chiếu đến khối bằng cách sử dụng css.
Bước 3
Tiếp theo, bạn cần thiết lập các kiểu css cho khối. Danh sách các kiểu: "vị trí: tương đối;" - sẽ đặt điểm gốc từ góc trên bên trái của khối của chúng ta; "margin: 50px auto;" - sẽ đặt thụt lề của khối của chúng ta "50px" ở trên và dưới phần còn lại của nội dung trang, cũng như đặt thụt lề tự động sang phải và trái, do đó căn chỉnh khối của chúng ta ở giữa; "width: 900px; height: 650px;" - sẽ đặt chiều rộng tương ứng là 900px và chiều cao là 650px.
Danh sách các kiểu được chỉ định phải được đặt theo cách này:
#photo_page {
chức vụ: thân nhân;
margin: 0 auto;
chiều rộng: 900px;
chiều cao: 650px;
text-align: center;
}
Lưu ý việc sử dụng "#photo_page" - đây là cách chúng tôi đề cập đến ID khối.
Bước 4
Bây giờ chúng ta sẽ chỉ định các kiểu chung cho từng hình ảnh bên trong khối photo_page. Đây là các góc tròn, viền xám, nền trắng, đệm và bóng đổ.
Điều này sẽ tạo ra hiệu ứng chụp ảnh:
#photo_page img {
bán kính đường viền: 7px;
viền: màu xám đặc 1px;
nền: #ffffff;
đệm: 10px;
hộp-bóng: 2px 2px 10px # 697898;
}
Lưu ý việc sử dụng "#photo_page img" - điều này sẽ tham chiếu đến tất cả các hình ảnh bên trong khối photo_page
Bước 5
Điều quan trọng nữa là thêm một kiểu ngắn như sau:
#photo_page div {
float: trái;
}
Nó thu nhỏ tất cả các khối bên trong khối photo_page sang bên trái.
Bước 6
Giai đoạn trung gian của bài học hiện đã hoàn thành. Nếu công việc của bạn giống với hình ảnh trong ảnh chụp màn hình thì bạn đã không mắc lỗi và có thể thực hiện bước tiếp theo.
Bước 7
Bây giờ chúng ta lần lượt xoay các bức ảnh đã đăng. Đối với điều này, chúng tôi cần phong cách biến đổi. Hiện tại, ở dạng thuần túy, nó không được sử dụng mà chỉ có tiền tố cho mỗi trình duyệt ở phần đầu, như sau:
-webkit-biến đổi: xoay (giá trị);
-moz-biến đổi: xoay (giá trị);
-o-biến đổi: xoay (giá trị);
Đây là kiểu xoay cho các trình duyệt: Google Chrome, Mazilla, Opera (tương ứng). Thay vì từ "giá trị", chúng tôi sẽ chèn một số có deg ở cuối, như sau:
90deg - xoay 90 độ theo chiều kim đồng hồ.
-5deg - xoay -5 độ ngược chiều kim đồng hồ.
Vân vân.
Bước 8
Kiểu cho ảnh photo_1:
# ảnh_1 {
-webkit-biến đổi: xoay (5deg);
-moz-biến đổi: xoay (5deg);
-o-biến đổi: xoay (5deg);
}
Hình ảnh đầu tiên được xoay 5 độ.
Bước 9
Kiểu cho ảnh photo_2:
# ảnh_2 {
-webkit-biến đổi: xoay (-3deg);
-moz-biến đổi: xoay (-3deg);
-o-biến đổi: xoay (-3deg);
}
Hình ảnh thứ hai được xoay -3 độ.
Bước 10
Phong cách cho ảnh photo_3:
# ảnh_3 {
-webkit-biến đổi: xoay (-2deg);
-moz-biến đổi: xoay (-2deg);
-o-biến đổi: xoay (-2deg);
}
Hình ảnh thứ ba được xoay -2 độ.
Bước 11
Phong cách cho ảnh photo_4:
# ảnh_4 {
-webkit-biến đổi: xoay (8deg);
-moz-biến đổi: xoay (8deg);
-o-biến đổi: xoay (8deg);
}
Hình ảnh thứ tư được xoay 8 độ.
Bước 12
Hãy xem cách bạn có thể sửa vị trí của hình ảnh. Ví dụ: bạn muốn bù đắp hình ảnh đầu tiên 20px từ trên cùng và 10px từ bên trái. Trong trường hợp này, bạn cần sử dụng kiểu ký quỹ. Đây là cách chính xác để sử dụng nó cho trường hợp của chúng tôi:
# ảnh_1 {
lề: 20px -10px -20px 10px;
-webkit-biến đổi: xoay (5deg);
-moz-biến đổi: xoay (5deg);
-o-biến đổi: xoay (5deg);
}
Xin lưu ý rằng giá trị đầu tiên của kiểu là lề trên; thứ hai là thụt lề sang phải; thứ ba là một vết lõm từ dưới lên; thứ tư - thụt lề trái.
Quan trọng: trong trường hợp của chúng tôi, lề dưới bằng giá trị âm của lề trên. Nếu bạn thấy khoảng trắng bên dưới hình ảnh trên trang của mình, hãy cố gắng thụt lề xuống dưới cùng của hình ảnh thậm chí còn tiêu cực hơn.
Bước 13
Công việc hoàn tất, tôi cung cấp một ảnh chụp màn hình (có tính đến sự thay đổi thụt lề của hình ảnh đầu tiên được mô tả trong Bước 12).
Thêm kiểu thụt lề cho bất kỳ hình ảnh nào không phù hợp với bạn.
