Cleaned up the documentation on background clip and added an example.
This commit is contained in:
parent
03f973468f
commit
d03cb28400
12
doc-src/content/examples/compass/css3/background-clip.haml
Normal file
12
doc-src/content/examples/compass/css3/background-clip.haml
Normal 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.
|
@ -0,0 +1,5 @@
|
|||||||
|
.example
|
||||||
|
#padding-box
|
||||||
|
Padding Box
|
||||||
|
#border-box
|
||||||
|
Border Box
|
@ -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")
|
@ -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"
|
||||||
|
Loading…
Reference in New Issue
Block a user