Expressá-la

Por que eu quero entender isso?? Humm ...!!

A maioria dos escritores CSS concordaria que o CSS propriedade Clip é provavelmente uma das propriedades não-utilizados CSS. Era tão verdadeiro para mim também e foi mais feliz para negligenciá-lo, até que comecei a modificar o MooTools DOIS Knob componente Slider (pino) (com indicador de Range) .

Houve uma boa sugestão de um dos utilizadores de componentes para modificar o componente deslizante utilizando imagens recortadas backgroud (contra uma divisão de largura variável) para indicar a gama deslizante. Assim chegou a minha hora de entrar na diversão, mas un fretado (para mim é claro) águas da propriedade Clip CSS.

Bem! quão difícil pode ser? Não muita coisa ... SIM e NÃO. A sintaxe a utilizar a propriedade Clip CSS é muito vertical, mas o significado / usuage é um pouco croocked. Com uma memória como a minha, toda vez que eu sento para retocar a minha Script Slider ... Tenho tokeep referindo-se ao uso desta propriedade CLIP, para me lembrar a lógica que eu criei no meu script .... DAÍ! pensado para pen-lo para baixo, com uma esperança de lembrar que o futuro (e também para o benefício daqueles que parecem boggled pela propriedade Clip CSS)

O que Clipe CSS fazer?

Clipe é parte do módulo de efeitos visuais do CSS 2,1. Simplificando, seu trabalho é colocar uma janela visível em cima de um objeto que está sendo cortada, portanto, recorte de imagens e criação de miniaturas sem ter que criar arquivos adicionais (Já coloquei este recurso para melhorar o uso do componente Slider )

Usando a propriedade Clip CSS, você pode criar um recorte usando a forma rect. Como muitas outras propriedades CSS (como margem de preenchimento etc,), utilizando rect requer quatro coordenadas superior, inferior, direita, esquerda (TRBL). A natureza croocked desta propriedade reflete quando você dar uma olhada no clipe como calcula a região de corte, usando essas quatro coordenadas (envia cérebro em um lance por um tempo). Agora, para confundi-lo do fundo começa a partir do topo, eo direito começa a partir da esquerda. . Você vê o que eu disse? .... Por isso este post ...

Esta pequena confusão pode facilmente desaparecer, com esta explicação visual da propriedade CSS Clip / rect como abaixo!!

Clipe Requisitos CSS

A tarefa que temos começado é para cortar a imagem em miniatura a seguir em uma imagem mais quadrada olhando (e também uma imagem de grande-angular)

Thumbnal Original / Imagem	Requisitos Clipe para Sqaure Thumbmail

Clipe Resultados CSS

Veja o Demo | Download de SourceFiles

Este post pode ser um bom exemplo para a frase "a avó de Ensino para sugar ovos" ... Porque este é apenas BASIC Coisas CSS. Mas para aqueles, como a me esquecido, isso pode ser uma bênção disfarçada. Eu sempre pensei (eu poderia perder meu emprego por dizer isso), só era possível para manter alguma parte do conteúdo da página HTML estático (ou seja, a sua posição permanece como está na Scroll Window), usando alguns scripts inteligentes, fazendo todas aquelas científica cálculos para encontrar posição dinâmica, prendendo eventos Window.scroll e definir timeouts, etc

Nunca pensei que poderia tão simples como isto .... Aqui no abaixo CSS / HTML, eu tenho quatro blocos estáticos, um fixado a cada extrimities da página, TOP, inferior, direita e esquerda ... desnecessário dizer ... você pode escolher qualquer uma ou mais se precisa ser ...

CSS
. Static {display: block; z-index: 10; color: # ffffff; overflow-x: hidden; overflow-y: hidden; posição: ixed;
}
Conteúdo # {margin: 100px 150px 160px 0px; border: 1px solid # e6e6e6}

# Wrap-t {top: 0px; background: # 33CC66; width: 100%; height: 55px;}

# Wrap-l {top: 80px; background: # FF9966; height: 300px; width: 150px; border: 2px solid # e6e6e6;}

# Wrap-b {bottom: 0px; background: # 3333CC; width: 100%; height: 55px;}

# Wrap-r {top: 80px; background: # 6666FF; height: 300px; width: 140px; border: 2px solid # e6e6e6; direita: 0;}

HTML
id="contents"> <div Você principais conteúdo da página </ div>
<div id="wrap-b" class="static">
Estático na parte inferior Página
</ Div>
<div id="wrap-t" class="static">
Estático na página Início
</ Div>

<div id="wrap-l" class="static">
Estático na página esquerda
</ Div>
<div id="wrap-r" class="static">
Estático em direito Página
</ Div>

Ver um exemplo wroking aqui

Quando li este artigo no A List Apart " Faux Absolute Positioning
por Eric Sol ", eu não era nada menos do que impressionado. Eu também estava deprimido majorly, porque, honestamente, eu estava me perguntando, por que eu não posso vir com algo fabuloso como este.

Normalmente, quando criamos layouts CSS, nós usamos "posição" ou "flutua", ou uma combinação muito ruim de ambos. Eric Sol e sua equipe definir uma técnica perfeita ao lado de um novo tipo de técnica de CSS do layout, que eles batizaram como "posicionamento absoluto falso", após a técnica de colunas falso que simula a presença de uma coluna.

Você sabe que o problema de todos nós desenvolvedores CSS tem com layouts desintegração (as mudanças de conteúdo inesperados que causam colunas inteiras para embrulhar, quando usamos layouts flutuantes) ... Bem! Parece História!!
Esta técnica de layout ainda é muito jovem, e tem a lixeira por todos os gurus CSS lá fora, antes que se torne um padrão un escrito. Fico feliz em usá-lo agora! ... E já estou em meio de converter meus anterior problemáticas / flutuante não-necessariamente layouts em esquema FAP já ... e estou contente de dizer o "já estamos usando posicionamento absoluto falso para este blog bem" ... ir experimentá-lo, AGORA!

Parabéns Eric!