Latest web development tutorials

Efek Teks CSS3

Efek Teks CSS3

CSS3 teks berisi beberapa fitur baru.

Dalam bab ini Anda akan mempelajari atribut teks berikut:

  • text-shadow
  • box-shadow
  • teks-overflow
  • word-wrap
  • kata-break

Dukungan Browser

属性
text-shadow 4.0 10.0 3.5 4.0 9.5
box-shadow 10.0
4.0 -webkit-		 9.0 4.0
3.5 -moz-		 5.1
3.1 -webkit-		 10.5
text-overflow 4.0 6.0 7.0 3.1 11.0
9.0 -o-
word-wrap 23.0 5.5 3.5 6.1 12.1
word-break 4.0 5.5 15.0 3.1 15.0

Teks shadow CSS3

Dalam CSS3, properti text-shadow berlaku untuk teks bayangan.

Teks efek bayangan!

Anda tentukan bayangan horisontal, bayangan vertikal, warna, blur jarak dan bayangan:

OperaSafariChromeFirefoxInternet Explorer

contoh

Menambahkan bayangan ke judul:

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

Coba »

CSS3 properti box-shadow

Dalam CSS3 properti CSS3 box-shadow berlaku untuk bayangan kotak

contoh

div {
box-shadow: 10px 10px;
}

Coba »

Berikutnya, menambah warna bayangan

contoh

div {
box-shadow: 10px 10px abu-abu;
}

Coba »

Berikutnya, menambahkan bayangan untuk efek blur

contoh

div {
box-shadow: 10px 10px 5px abu-abu;
}

Coba »

Anda juga dapat menambahkan efek bayangan dalam dua :: befor dan :: setelah pseudo-elemen

contoh

# Boxshadow {
position: relative;
b sapi-shadow: 1px 2px 4px RGBA (0, 0, 0, 0,5);
pa dding: 10px;
bac kground: putih;
}
#boxshadow img {
width: 100%;
border: 1px solid # 8a4419;
border-style: inset;
}
#c oxshadow :: setelah {
konten: '';
position: absolute;
z-index: -1; / * hide bayangan di balik gambar * /
box-shadow: 0 15px 20px RGBA (0, 0, 0, 0,3);
width: 70%;
kiri: 15%; / * salah satu setengah dari 30% * tersisa /
height: 100px;
bottom: 0;
}

Coba »

Sebuah kasus khusus adalah penggunaan efek kartu shadow

contoh

div.card {
width: 250px;
box-shadow: 0 4px 8px 0 RGBA (0, 0, 0, 0,2), 0 6px 20px 0 RGBA (0, 0, 0, 0.19);
text-align: center;
}
}

Teks Kartu >> Picture Card >>

CSS3 properti Text Overflow

atribut CSS3 teks meluap menentukan bagaimana pengguna harus menampilkan konten melimpah

contoh

p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid # 000000;
overflow: hidden;
text-overflow: klip;
}

p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid # 000000;
overflow: hidden;
text-overflow: elipsis;
}

Coba »

CSS3 baris

Jika kata terlalu panjang untuk muat di daerah yang meluas ke luar:

CSS3, properti memungkinkan Anda untuk membungkus membungkus teks wajib - bahkan jika itu berarti pemisahan itu di tengah kata:

Kode CSS adalah sebagai berikut:

OperaSafariChromeFirefoxInternet Explorer

contoh

Memungkinkan membungkus teks panjang:

p {word-wrap:break-word;}

Coba »

CSS3 Firman Melanggar

CSS3 Firman Berita atribut untuk menentukan garis melanggar aturan:

Kode CSS adalah sebagai berikut:

contoh

p.test1 {
Kata-break: menjaga-semua;
}

p.test2 {
Kata-break: break-semua;
}

Coba »

Atribut teks baru

milik deskripsi CSS
menggantung-tanda baca Ketentuan baca karakter terletak di luar frame. 3
tanda baca-lis Apakah ketentuan-ketentuan karakter tanda baca pemangkasan. 3
text-align-lalu Mengatur bagaimana menyelaraskan baris terakhir atau segera sebelum baris untuk memaksa satu baris. 3
text-penekanan elemen kunci dari aplikasi untuk tag teks dan kunci tag foreground. 3
text-membenarkan Ketika metode penyelarasan yang telah ditentukan ketika text-align diatur ke "membenarkan" digunakan. 3
text-garis Spesifikasi kontur teks. 3
teks-overflow Ketentuan ketika hal-hal terjadi ketika teks meluap elemen yang mengandung. 3
text-shadow Menambahkan bayangan pada teks. 3
text-wrap Ketentuan peraturan bungkus teks. 3
kata-break CJK teks dari ketentuan aturan non-line-melanggar. 3
word-wrap Hal ini memungkinkan panjang dibagi dan kata terpisahkan membungkus ke baris berikutnya. 3