Cleaned up the documentation on background clip and added an example.

This commit is contained in:
Chris Eppstein 2010-03-28 01:49:44 -07:00
parent 03f973468f
commit d03cb28400
4 changed files with 41 additions and 3 deletions

View File

@ -0,0 +1,12 @@
---
title: Background Clip
description: Background Clip In Action
framework: compass
stylesheet: compass/css3/_background_clip.sass
example: true
---
- render "partials/example" do
%p
In this example, there's a red border with alpha transparency.
The padding box appears pink against the white background of the page.
The border box appears purple because it blends with the blue background instead.

View File

@ -0,0 +1,5 @@
.example
#padding-box
Padding Box
#border-box
Border Box

View File

@ -0,0 +1,15 @@
@import compass/css3.sass
.example
padding: 2em
div
background-color: blue
border: 10px solid rgba(255, 0, 0, 0.5)
color: white
+text-shadow(darken(#00f, 50%), 2px, 2px)
padding: 3px
text-align: center
margin-bottom: 2em
#padding-box
+background-clip("padding-box")
#border-box
+background-clip("border-box")

View File

@ -1,15 +1,21 @@
// //
Clip the background (image and color) at the edge of the padding or border.
Default constant is padding-box, the box model used by modern browsers. The default value is `padding-box` -- the box model used by modern browsers.
If you wish to do so, you can override the default constant with `border-box` If you wish to do so, you can override the default constant with `border-box`
To override to the border-box model, use this code: To override to the default border-box model, use this code:
!default_background_clip = "border-box" !default_background_clip = "border-box"
!default_background_clip ||= "padding-box" !default_background_clip ||= "padding-box"
//
Clip the background (image and color) at the edge of the padding or border.
Legal Values:
* "padding-box"
* "border-box"
=background-clip(!clip = !default_background_clip) =background-clip(!clip = !default_background_clip)
// webkit and mozilla use the deprecated short [border | padding | content] // webkit and mozilla use the deprecated short [border | padding | content]
!deprecated= "padding" !deprecated= "padding"