Kotak Bayang pada Gambar 2.


Mengenal CSS shadow lebih dekat🙂

Kotak yang macam ini akan mengembang dengan sendirinya 

bukan Scroll

<div style=”background-color: #ebebeb; border-radius: 5px 5px 5px 5px; box-shadow: 0px 0px 20px #999999 inset; font-family: Arial,Helvetica,sans-serif; font-size: 15px; font-variant: normal; line-height: normal; margin: 0px 20px; padding: 20px; text-shadow: 1px 1px 0px white; text-align: left;”></div>

 

A

Sebuah contoh kasus dalam nilai sebuah properti box-shadow:

box-shadow: 1px 2px 3px 4px #000000 inset;
  • 1px [horizontal offset] = menunjukan nilai posisi bayangan horizontal
  • 2px [vertical offset] = menunjukan nilai posisi bayangan vertikal
  • 3px [blur amount] = menujukan nilai jarak blur (optional)
  • 4px [spread radius] = menunjukan nilai ketebalan bayangan (optional)
  • #000000 [color] = menunjukan nilai warna untuk sebuah sebuah bayangan. Dalam memberikan nilai pada warna box-shadow, bisa mengggunakan nilai warna HEX, RGB, RGBA, HSL, HSLA ataupun Color Name.
  • Inset = perubahan posisi bayangan (default mengarah keluar tanpa nilai inset) dengan penambahan nilai inset menjadikan shadow mengarah kedalam (optional)

B

Sebuah contoh kasus dalam nilai sebuah properti text-shadow:

text-shadow: 1px 2px 3px #000000
  • 1px [horizontal offset] =menunjukan nilai posisi bayangan horizontal
  • 2px [vertical offset] = menunjukan nilai posisi bayangan vertikal
  • 3px [blur amount] = menujukan nilai jarak blur (optional)
  • #000000 [color] = menunjukan nilai warna untuk sebuah sebuah bayangan. Dalam memberikan nilai pada warna box-shadow, bisa mengggunakan nilai warna HEX, RGB, RGBA, HSL, HSLA ataupun Color Name.

 

Contoh style properti CSS box shadow

1

Box-shadow positive value:

<div style=”background: #ebebeb; box-shadow: 5px 5px 0 #ccc; color: #888888; font: bold 16px Arial, Helvetica, sans-serif; height: 100px; line-height: 100px; margin: 0 auto; text-align: center; text-shadow: 1px 1px 0 #FFFFFF; width: 400px;”>box-shadow: 5px 5px 0px #ccc;</div>
——————————————————————————-
box-shadow: 5px 5px 0px #ccc;

2

Box-shadow negative value:
box-shadow: -5px -5px 0px #ccc;

3

Box-shadow with blur:
box-shadow: 0px 0px 20px black;

4

Box-shadow with inset keyword:
box-shadow: 0px 0px 20px #999 inset;

5

Box-shadow with under shadow:
box-shadow: 0px 20px 25px -20px #ccc

6

Box-shadow with inset style 2:
box-shadow:inset 0px 2px 7px #999;

7

Box-shadow with 2 shadow properties:
box-shadow: inset 5px 5px 0px #ccc,
8px 8px 8px #ff0000;

8

Box-shadow with 3 shadow properties:
box-shadow:3px 3px 0px #cccccc,7px 7px 0px #bbbbbb,11px 11px 0px #aaaaaa;

 0

Contoh style properti CSS text shadow

9

Simple Text-shadow:
text-shadow: 5px 10px 0px #999;

10

Text-shadow with blur:
text-shadow: 5px 5px 5px #999;

11

Text-shadow style 2 with blur:
text-shadow: 0px 0px 5px #000000;
color:transparent;

12

Text-shadow – glow effect:
text-shadow: 0px 0px 10px #009CC2;

13

Text-shadow – multiple shadows: 
text-shadow: 12px 13px 1px #FD9213, -5px 8px 1px #009CC2, 10px -8px 1px #B3C734;

Text multiple shadow

14

Text-shadow – emboss effect:
text-shadow: -1px -1px #fff,
1px 1px #444;

15

Text-shadow – emboss effect style 2:
text-shadow: 1px 1px #fff,
-1px -1px #444;

16

Text-shadow – stroke effect:
text-shadow: 1px 1px 0px #444,
-1px -1px 0px #444;

17

Text-shadow – 3D effect:
text-shadow: 1px 1px 0px #444,
2px 2px 0px #444,
3px 3px 0px #444,
4px 4px 0px #444;

18

Cara pemasangan

Saya ambil contoh untuk pemasangan text dan box shadow pada judul sidebar blog saya. Anda hanya cukup memasukan kode text shadow dan/atau box shadow kedalam kode CSS yang dikehendaki.
=
Sumber

  ============

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s