Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. News
Code

Bermain Dengan CSS Shapes

by
Length:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by No Name's (you can also view the original English article)

Aku yakin banyak dari kalian tidak menyadari bahwa kita dapat menciptakan ilusi bentuk dengan menggunakan 100% CSS. Dengan memanfaatkan properti border dengan cara kreatif, kita dapat membuat bentuk poligon yang menarik. Dalam screencast minggu ini, kita akan mencari cara untuk membuat gelembung pidato tanpa beralih ke gambar latar belakang.

Kebanyakan dari kita, sekarang, familiar dengan menggunakan "- moz - border-radius" dan "- webkit - border-radius" properti untuk membuat sudut bulat - atau bahkan sebuah lingkaran - tetapi ada teknik lain untuk membuat bentuk yang lebih rumit.




Pidato-gelembung tradisional

css shapes

Perhatikan bagaimana properti "bottom" bertimbal balik dengan properti "border-top".

Alternatif

css shapes

Yang lainnya

css shapes
css shapes

Catatan menarik

Aku mengetik paragraf ini beberapa menit sebelum memposting tutorial. Saya belajar sesuatu malam ini. Apa kalian tahu bahwa, jika kalian ingin dokumen kalian untuk di validasi, kalian tidak boleh menempatkan teks langsung ke dalam blockquote? Ini harus di masukkan dalam elemen orangtua/parent - seperti Tag <p>. Selain itu, validator tidak menyukai kalau saya menggunakan tag span di dalam blockquote. Hal ini memungkinkan untuk beberapa elemen, tapi sayangnya tidak dengan span! Oh baik; bukan masalah besar. Kalian Hanya perlu menggantinya dengan elemen yang berbeda. Itu tidak membuat perbedaan.

Span tag within a blockquote

Cukup bagus

Aku benar-benar bersemangat untuk melihat bagaimana kalian telah menerapkan trik unik ini ke dalam proyek kalian sendiri. Kirim kami link untuk contoh, melalui komentar. Terima kasih untuk menonton. Minggu depan, berencana untuk belajar sesuatu yang lebih maju. ... Aku hanya perlu mencari tahu apa! Sampai kemudian.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.