Perhatian : para pengunjung di Larang Pencet / klik judul iklan yg bertentangan dengan SYARIAH ISLAM, harap maklum karena pemilik website tidak bisa mengontrol penuh tampilan iklan. .. terimakasih dan anda berkunjung di blogger tentang modif motor efek chroom, krom, crom, semoga kita semua selalu diberi keselamatan dan kesehatan oleh Alloh SWT. amin ya robbal alamin.

Senin, 27 Mei 2013

Contoh Gambar macam Box Shadow

Contoh Gambar macam Box Shadow | Bentuk Variasi Ragam Box Shadow | Aneka Ragam Penggunaan Box Shadow.
Below are some examples of an orange box with a blue border being given a drop shadow.
border:5px solid blue;
background-color:orange;
width: 144px;
height: 144px;
border-radius: 20px;
border-radius: 0;
box-shadow:
  rgba(0,0,0,0.4)
  10px 10px;
A round-cornered box with a light gray shadow the same shape as the border box offset 10px to the right and 10px down from directly underneath the box. A square-cornered box with a light gray shadow the same shape as the border box offset 10px to the right and 10px down from directly underneath the box. 
box-shadow:
  rgba(0,0,0,0.4)
  10px 10px
  inset
A round-cornered box with a light gray shadow the inverse shape of the padding box filling 10px in from the top and left edges (just inside the border). A square-cornered box with a light gray shadow the inverse shape of the padding box filling 10px in from the top and left edges (just inside the border). 
box-shadow:
  rgba(0,0,0,0.4)
  10px 10px 0
  10px /* spread */
A round-cornered box with a light gray shadow the same shape as the box but 20px taller and wider and offset so that the top and left edges of the shadow are directly underneath the top and left edges of the box. A square-cornered box with a light gray shadow the same shape as the box but 20px taller and wider and offset so that the top and left edges of the shadow are directly underneath the top and left edges of the box. 
box-shadow:
  rgba(0,0,0,0.4)
  10px 10px 0
  10px /* spread */
  inset
A round-cornered box with a light gray shadow the inverse shape of the box but 20px narrower and shorter filling 20px in from the top and left edges (just inside the border). A round-cornered box with a light gray shadow the inverse shape of the box but 20px narrower and shorter filling 20px in from the top and left edges (just inside the border).



Contoh yang lain :


For example, the borders A of the figure below might be the result of 
box-sizing: border-box;
width: 6em;
height: 2.5em;
border-radius: 0.5em 2em 0.5em 2em
The height (2.5em) is enough for the specified radii (0.5em plus 2.0em). However, if the height is only 2em, 
box-sizing: border-box;
width: 6em;
height: 2em;
border-radius: 0.5em 2em 0.5em 2em
all corners need to be reduced by a factor 0.8 to make them fit. The used border radii thus are 0.4em (instead of 0.5em) and 1.6em (instead of 2em). See borders B in the figure.
[image: rectangle with two tiny rounded corners and two very large ones, on opposite corners]
These rounded corner might be the result of ‘width: 6em; height: 2.5em; border-radius: 0.5em 2em 0.5em 2em’ for A; and ditto but with ‘height: 2em’ for B. 

The curved corner is an arc from the top left corner sweeping across the top right corner to the bottom right corner, describing a quarter-ellipse; but since the opposite sides have a border thickness the padding edge curve starts inward from the outer arc's endpoints.

Contoh gambar yang lain :

p { width: 70px; height: 70px; border: solid 30px;
    border-color: orange orange silver silver;
    border-top-right-radius: 100%; }



 Contoh soal yang lain :
p { border: solid red }
p {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red;
  border-image: none;
}
Since, to some extent, the properties have overlapping functionality, the order in which the rules are specified is important.
Consider this example: 
blockquote {
  border-color: red;
  border-left: double;
  color: black
}


Contoh yang lain :
 Border-style’ is a shorthand for the other four. Its four values set the top, right, bottom and left border respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top.
Where 
<border-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Values have the following meanings:
‘none’
No border. Color and width are ignored (i.e., the border has width 0, unless the border is an image, see ‘background-image’
‘hidden’
Same as ‘none’, but has different behavior in the border conflict resolution rules for border-collapsed tables [CSS21].
‘dotted’
A series of round dots.
‘dashed’
A series of square-ended dashes.
‘solid’
A single line segment.
‘double’
Two parallel solid lines with some space between them. (The thickness of the lines is not specified, but the sum of the lines and the space must equal ‘border-width’.)
‘groove’
Looks as if it were carved in the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the ‘border-color’.)
‘ridge’
Looks as if it were coming out of the canvas.
‘inset’
Looks as if the content on the inside of the border is sunken into the canvas. Treated as ‘ridge’ in the collapsing border model. [CSS21]
‘outset’
Looks as if the content on the inside of the border is coming out of the canvas. collapsing border model. [CSS21]
Borders are drawn in front of the element's background, but behind the element's content (in case it overlaps).
Examples of border styles



Mengenal tentang Variasi Perintah Background :
The following declaration with multiple, comma-separated values 
background: url(a.png) top left no-repeat,
            url(b.png) center / 100% 100% no-repeat,
            url(c.png) white;
is equivalent to 
background-image:      url(a.png),  url(b.png),          url(c.png);
background-position:   top left,    center,              top left;
background-repeat:     no-repeat,   no-repeat no-repeat, repeat;
background-clip:       border-box,  border-box,          border-box;
background-origin:     padding-box, padding-box,         padding-box;
background-size:       auto auto,   100% 100%,           auto auto;
background-attachment: scroll,      scroll,              scroll;
background-color:      white;

source artikel by. w3.org/TR/css3-background/
Artikel saya fafan Postingan tentang Contoh Gambar macam Box Shadow
Diposting oleh di
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)