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`
|
||||
|
||||
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 ||= "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)
|
||||
// webkit and mozilla use the deprecated short [border | padding | content]
|
||||
!deprecated= "padding"
|
||||
|
Loading…
Reference in New Issue
Block a user