Cara Membuat CSS Slanted Containers dalam 3 Langkah

Apabila saya baru -baru ini mengemas kini portfolio peribadi saya, saya ingin menggunakan slashes (/) sebagai elemen visual dalam susun atur utama laman web. Tidak pernah cuba mencipta bekas condong di CSS sebelum ini, tetapi pada pandangan pertama ia kelihatan mudah. Walau bagaimanapun, apabila saya menggali lebih mendalam, saya sebenarnya mempunyai beberapa cabaran yang sangat menarik untuk mewujudkan bekas CSS Bevel yang berkesan yang menyokong teks dan media.

Berikut adalah percubaan dan keputusan akhir saya:

Saya mula-mula mencari contoh bekas bukan kubah yang membolehkan teks mengalir secara semulajadi di dalamnya. Saya mengandaikan ini boleh dilaksanakan di CSS, kerana program seperti Adobe Illustrator dan Microsoft Word telah melakukan ini selama bertahun -tahun.

Langkah 1: Buat bekas bevel CSS menggunakan transformasi

Saya dapati modul CSS Bentuk, yang sesuai untuk kandungan teks mudah jika kita menggunakan harta benda luar. Ia juga menyelaraskan teks sepenuhnya. Tetapi ia tidak boleh membiarkan tatal kandungan di dalam bekas. Oleh itu, apabila pengguna menatal ke bawah, seluruh bekas kecondongan seolah -olah bergerak ke kiri, yang bukan kesan yang saya mahukan. Sebaliknya, saya mengambil pendekatan yang lebih mudah, iaitu menambah transform: skew() ke bekas.

 .slant-container {
  Transform: Skew (14deg);
}

Ini adalah permulaan yang baik! Bekas itu kecondongan dan skrol berfungsi seperti yang diharapkan, sementara CSS tulen mengendalikan saiz semula imej. Walau bagaimanapun, masalah yang jelas ialah teks dan imej juga condong, menjadikan kandungan lebih sukar dibaca dan imej itu diputarbelitkan.

Langkah 2: Fon Tilt Reverse

Saya cuba beberapa cara untuk menyelesaikan masalah teks dan imej yang melayang di CSS, tetapi akhirnya datang dengan penyelesaian yang lebih mudah: Buat font baru menggunakan Fontforge untuk membalikkan tenggelam teks.

Fontforge adalah editor font sumber terbuka. Saya memilih Roboto Condensed Light untuk kandungan utama laman web, jadi saya memuat turun fail .ttf dan membukanya di Fontforge. Di sana, saya memilih semua glyphs dan menggunakan kecondongan 14deg untuk mengimbangi kecondongan yang disebabkan oleh penukaran CSS pada bekas. Saya menyimpan fail fon baru sebagai roboto-rev-italic.ttf dan memanggilnya dalam lembaran styles saya.

Itu sahaja. Font kini miring ke arah yang bertentangan dengan jumlah yang sama seperti kecondongan kontena, dengan itu mengimbangi kesan -kesan ini, menjadikan kandungan kelihatan seperti fon roboto biasa yang saya gunakan pada asalnya.

Langkah 3: Mengoptimumkan imej dan video

Ini berfungsi dengan baik untuk teks! Fungsi memilih teks juga normal. Dari sana, saya hanya perlu membalikkan skew() untuk mengimbangi nilai yang digunakan pada bekas:

 img,
video {
  Transform: Skew (-14Deg);
}

Saya akhirnya membungkus imej dan video dalam div tambahan, walaupun. Dengan cara ini saya dapat memberi mereka latar belakang yang bagus yang seolah -olah menyelaraskan dengan sempurna dengan bekas. Apa yang saya lakukan adalah menyambung ke ::after pseudo-element dan letakkannya menggunakan latar belakang yang melampaui tepi kiri dan kanan bekas condong.

 img :: selepas,
Video :: Selepas {
  Kandungan: '';
  paparan: blok;
  Latar Belakang: RGBA (0, 0, 0, 0.5);
  Kedudukan: Mutlak;
  Atas: 0;
  Kiri: 0;
  Lebar: 200%;
  Ketinggian: 100%;
}

Demo akhir

Inilah demonstrasi terakhir:

Saya menggunakan kesan ini di laman web peribadi saya sekarang dan saya menyukainya setakat ini. Tetapi adakah anda telah mencuba cara lain untuk mencapai kesan yang sama? Pastikan saya memberitahu saya dalam komen supaya kami dapat membandingkannya!

Atas ialah kandungan terperinci Cara Membuat CSS Slanted Containers dalam 3 Langkah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!