2009 17 shkurt 2009

Understandng The Pronës Clip CSS

Pse dua të kuptoj këtë? Humm ...!

Shumica e shkrimtarëve CSS do të bien dakord se prona CSS Clip është ndoshta një nga më të pa-përdorura pronat CSS. Ajo ishte aq e vërtetë për mua dhe ishte më e lumtur për të lënë pas dore atë, derisa fillova të modifikuar DY çelës MOOTOOLS (PIN) Komponenti Slider (me Treguesi varg) .

Ka qenë një sugjerim i mirë nga një prej përdoruesve përbërëse të ndryshojë Component Slider duke përdorur imazhe clipped backgroud (kundër një ndarjeje të ndryshueshme gjerësi) për të treguar gamën e slider. Kështu erdhi koha ime për të hyrë në argëtim, por un-patundshme (për mua ofcourse) ujërat e pronës Clip CSS.

E pra! se sa e vështirë mund të jetë? Jo shumë në të gjitha ... PO dhe JO. Sintaksa për të përdorur pronën Clip CSS është shumë e drejtë, por kuptimi / usuage është pak croocked. Me një kujtesë si e imja, everytime unë ulem për të Rework mbi Script tim Slider ... kam tokeep iu referuar përsëri në përdorimin e këtë pronë Clip, për t'i kujtuar vetes logjikën që kam krijuar, në shkrimin tim .... Për këtë arsye! mendohet se stilolaps atë, me një shpresë për të kujtuar atë të ardhmen (dhe gjithashtu për të mirën e atyre që duket boggled nga Pronës Clip CSS)

Çfarë Clip CSS bëni?

Klip është pjesë e modulit efekte vizuale të CSS 2.1. Ta themi thjesht, puna e saj është që të zhvillohet një dritare të dukshme në krye të një objekt që është duke u clipped, prandaj prerë imazhet dhe krijimin Thumbnails pa pasur nevojë për të krijuar fotografi të tjera (i kemi tashmë të vënë këtë funksion për përdorim më të mirë në Komponentin Slider :) )

Përdorimi i pronës Clip CSS, ju mund të krijojë një krehja duke përdorur formën të drejtpërdrejt. Ashtu si Properties tjera shumë CSS (si diferencë, etj mbushje), duke përdorur të drejtpërdrejt kërkon katër koordinatat Top, drejta, Bottom, Left (TRBL). Natyra croocked i kësaj prone reflekton kur ju keni marrë një vështrim më të afërt se sa clip llogarit rajonin e prerë, duke përdorur këto katër koordinatat simbolit dërgon trurin në një hedhje për një kohë). Tani për të ngatërruar ju poshtme fillon nga lart, dhe e drejta fillon nga e majta. :) . Ju shikoni se çfarë i tha? .... Prandaj këtë post ...

Ky konfuzion pak lehtë mund të zhduket, me këtë shpjegim vizuale e pronës Clip / CSS të drejtpërdrejt si më poshtë!

Clip Kërkesat CSS

Detyra që kemi filluar të clip imazhin e mëposhtëm Thumbnail në një imazh squarer në kërkim (dhe gjithashtu një kënd të gjerë image)

original_image clip_demo
Thumbnal Original / Image Kërkesat për Clip sqaure Thumbmail

Clip Rezultatet CSS

clip_results

Shiko Demo | Download sourcefiles


NDK shtëpi | Duke shprehur IT | qiellëz shprehur | Penmenship shprehur | frikë shprehur | shprehur Myself