Expresa-la

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)

Thumbnal Orixinal / Imaxe	Requisitos clip para Sqaure Thumbmail

Clip Resultados CSS

Vexa o Demo | Descargar SourceFiles

Este post pode ser un bo exemplo para a frase "a avoa de Ensino para Sugar ovos" ... Porque este é só BASIC Cousas CSS. Pero para aqueles, como a me esquecera, que pode ser unha bendición disfrazada. Eu sempre pensei (eu podería perder meu traballo por dicir iso), só era posible para manter algunha parte do contido da páxina HTML estático (ou sexa, a súa posición permanece como está na Scroll Window), utilizando algúns scripts intelixentes, facendo todas aquelas científica cálculos para atopar posición dinámica, prendendo eventos Window.scroll e establecer timeouts, etc

Nunca pensei que podería tan sinxelo coma isto .... Aquí no seguinte CSS / HTML, eu teño catro bloques estáticos, un fixado cada extrimities da páxina, TOP, inferior, dereita e esquerda ... innecesario dicir ... pode escoller calquera ou máis se ten que ser ...

CSS
. Static {display: block; z-index: 10; color: # ffffff; overflow X: hidden; overflow-y: hidden; posición: ixed;
}
Contido # {Margin: 100px 150px 160px 0px; Modelo: 1px solid # e6e6e6}

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

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

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

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

HTML
id = "contents"> <span Vostede principais contidos da páxina </ div>
<div id="wrap-b" class="static">
Estático no fondo Páxina
</ Div>
<div id="wrap-t" class="static">
Estático na páxina Inicio
</ Div>

<div id="wrap-l" class="static">
Estático na páxina esquerda
</ Div>
<div id="wrap-r" class="static">
Estático en dereito Páxina
</ Div>

Ver un exemplo wroking aquí

Cando lin este artigo no A List Apart " Faux Absolute Positioning
por Eric Sol ", eu non era nada menos que impresionado. Eu tamén estaba deprimido majorly, porque, honestamente, eu estaba me pregunta, por que eu non me fago con algo fabuloso coma este.

Normalmente, cando creamos esquemas CSS usamos "posición" ou "flota", ou unha combinación moi malo de ambos. Eric Sol eo seu equipo definir unha técnica perfecta á beira dun novo tipo de técnica de CSS do esquema, que bautizaron como "posicionamento absoluto falso", tras a técnica de columnas falso que simula a presenza dunha columna.

Vostede sabe que o problema de todos nós desenvolvedores CSS ten con esquemas desintegración (os cambios de contido inesperados que causan columnas enteiras para embrulhar, cando usamos esquemas flotantes) ... Ben! Parece Historia!
Esta técnica de deseño aínda é moi novo, e ten lixo por todos os gurús CSS aí fóra, antes de que se fai un estándar un escrito. Fico feliz de usalo agora! ... E xa estou no medio de converter meus anterior problemáticas / flotante non necesariamente esquemas en esquema FAP xa ... e estou contento de dicir o "xa estamos usando posicionamento absoluto falso a este blog ben" ... ir probalo, AGORA!

Parabéns Eric!