2009 17 Feb 2009

Understandng a propiedade Clip CSS

Por que quero entender iso? Humm ...!

A maioría dos escritores CSS acordo que o CSS propiedade Clip é probablemente unha das propiedades non utilizados CSS. Era tan certo para min tamén e foi máis feliz para negligencia-lo, ata que empecei a modificar o MooTools DOUS Knob compoñente Slider (Pino) ​​(con indicador de Range) .

Houbo unha boa suxestión dun dos usuarios de compoñentes para modificar o compoñente deslizante usando imaxes recortadas backgroud (contra unha división de ancho variable) para indicar a variedade deslizante. Así chegou a miña hora de entrar na diversión, pero un fretado (para min é claro) augas da propiedade Clip CSS.

Ben! quão difícil pode ser? Non moita cousa ... si e non. A sintaxe a empregar a propiedade Clip CSS é moi vertical, pero o significado / usuage é un pouco croocked. Cunha memoria como a miña, cada vez que eu sento para retocar a miña Script Slider ... Teño tokeep referíndose ao uso desta propiedade CLIP, para me lembrar a lóxica que eu creei no meu guión .... De aí! pensado para pen-lo para abaixo, cunha esperanza de lembrar que o futuro (e tamén para o beneficio dos que parecen boggled pola propiedade Clip CSS)

O que Clip CSS facer?

Clip é parte do módulo de efectos visuais do CSS 2,1. Simplificando, o seu traballo é poñer unha fiestra visible enriba dun obxecto que se está cortada, polo tanto, recorte de imaxes e creación de miniaturas sen ter que crear arquivos adicionais (Xa coloquei este recurso para mellorar o uso do compoñente Slider :) )

Empregando a propiedade Clip CSS, pode crear un recorte usando a forma rect. Como moitas outras propiedades CSS (como marxe de recheo, etc,), utilizando rect require catro coordenadas superior, inferior, dereita, esquerda (TRBL). A natureza croocked desta propiedade reflicte cando un ollo no clip como calcula a rexión de corte, utilizando esas catro coordenadas (envía cerebro nun lance por un tempo). Agora, para confundir-lo do fondo comeza dende o principio, eo dereito comeza a partir da esquerda. :) . Vostede ve o que eu dixen? .... Por iso este post ...

Esta pequena confusión pode facilmente desaparecer, con esta explicación visual da propiedade CSS Clip / rect como a continuación!

Clip Requisitos CSS

A tarefa que temos comezado é para cortar a imaxe en miniatura a seguir unha imaxe máis cadrada mirando (e tamén unha imaxe de gran-angular)

original_image clip_demo
Thumbnal Orixinal / Imaxe Requisitos clip para Sqaure Thumbmail

Clip Resultados CSS

clip_results

Vexa o Demo | Descargar SourceFiles


NDK casa | Expresando IT | Palate expresando | Penmenship expresando | AWE expresando | expresar o meu