2009 17 februar, 2009

Understandng CSS Clip Ejendom

Hvorfor jeg ønsker at forstå dette?? ... Humm!!

De fleste af CSS forfattere enige om, at CSS Clip ejendom er nok en af ​​de fleste ikke-anvendte CSS egenskaber. Det var så sandt for mig og var mest glad for at forsømme det, indtil jeg begyndte at ændre den Mootools TO Knob (Pin) Slider Komponent (med Range indikator) .

Der var et godt forslag fra en af ​​de komponenter brugere at ændre Slider Component ved hjælp af klippede baggrundsrapporten billeder (mod en variabel bredde division) for at indikere skyderen rækkevidde. Således kom min tid at komme ind i sjov, men FN-chartret (for mig selvfølgelig) farvande CSS Clip ejendom.

Nå! hvor svært det kan være? Ikke meget på alle ... ja og nej. Den syntaks at bruge CSS Clip ejendommen er temmelig oprejst men betydningen / usuage er en smule croocked. Med en hukommelse som mit, jeg hver gang sidder til omarbejde på min Slider Script ... Jeg har tokeep henviser tilbage til brugen af ​​denne CLIP ejendom, for at minde mig selv om den logik, som jeg har skabt i mit script .... DERMED! menes at pen det ned, med et håb om at huske det i fremtiden (og også til gavn for dem, der synes imponeret af CSS Clip Property)

Hvad betyder CSS Clip gøre?

Clip er en del af den visuelle effekter modulet af CSS 2,1. Simply put, dens opgave er at placere et synligt vindue oven på et objekt, der bliver klippet, og derfor klippe billeder og skabe thumbnails uden at skulle oprette flere filer (jeg har allerede sat denne funktion til bedre udnyttelse i Slider Component :) )

Brug af CSS Clip ejendom, kan du oprette en klipning ved hjælp af rekte form. Ligesom mange andre CSS egenskaber (såsom margin, padding osv.), ved hjælp af rect kræver fire koordinater Top, Højre, Bund, Venstre (TRBL). Den croocked karakteren af ​​denne ejendom afspejler, når du tager et nærmere kig på, hvordan klip beregner klipning regionen ved hjælp af disse fire koordinater (sender hjernen i et kast i et stykke tid). Nu at forvirre dig bunden starter fra toppen, og den højre starter fra venstre. :) . Du kan se hvad jeg sagde? .... Derfor dette indlæg ...

Dette lidt forvirring kan nemt forsvinde, med denne visuelle forklaring af CSS Klip / rect ejendom som nedenfor!!

CSS Clip Krav

Den opgave, vi er begyndt, er at klippe følgende miniaturebillede til et firkantede se billede (og også en vidvinkel billede)

original_image clip_demo
Original Thumbnal / Billede Clip Krav til Sqaure Thumbmail

CSS Clip Resultater

clip_results

Se demo | Hent sourcefiles


2008 September 4, 2008

Fast (Det forbliver statisk på vindue rulle) Side Blokke bruger CSS Kun

Dette indlæg kan være et godt eksempel for udtrykket "Teaching bedstemor til at suge æg" ... Fordi det er bare BASIC CSS Stuff. Men for dem, som glemmer mig, kan dette være en velsignelse i forklædning. Jeg har altid troet (jeg kunne miste mit job for at sige det), var det kun muligt at holde en del af HTML-sidens indhold statisk (mening, sin stilling stadig er det på Window Scroll), ved hjælp af nogle smarte scripts, gør alle de videnskabelige beregninger for at finde en dynamisk position, fældefangst Window.scroll begivenheder og sætte timeouts osv.

Aldrig troet, det kunne så simpelt som dette .... Her i CSS / HTML nedenfor, jeg har fire statiske blokke, den ene fastgjort til hver extrimities på siden, til TOP, højre og bund og venstre ... overflødigt at sige ... du kan vælge et eller flere hvis der skal være ...

CSS
. Statisk {display: block; z-index: 10, farve: # ffffff; overflow-x: hidden; overløb-y: hidden; position: ixed;
}
# Indhold {margin: 100px 150px 0px 160px; kant: 1px solid # e6e6e6}

# Wrap-t {top: 0px; baggrund: # 33CC66, bredde: 100%; Højde: 55px;}

# Wrap-l {top: 80px; baggrund: # FF9966; højde: 300px; bredde: 150px; kant: 2px solid # e6e6e6;}

# Wrap-b {bund: 0px; baggrund: # 3333CC, bredde: 100%; Højde: 55px;}

# Wrap-r {top: 80px; baggrund: # 6666FF; højde: 300px; bredde: 140px; kant: 2px solid # e6e6e6, højre: 0;}

HTML
<div id="contents"> Du forsiden indhold </ div>
<div id="wrap-b" class="static">
Statisk indhold på side nederst
</ Div>
<div id="wrap-t" class="static">
Statisk indhold på toppen Tilbage
</ Div>

<div id="wrap-l" class="static">
Statisk indhold på side til venstre
</ Div>
<div id="wrap-r" class="static">
Statisk indhold på side til højre
</ Div>

Se en Kløveretning prøve her


2008 2 Jul 2008

Vi bruger Faux Absolut Placering: En Brilliant CCS Layout

Da jeg læste denne artikel på A List Apart " Faux Absolute Positioning
af Eric Sol ", jeg var intet mindre end imponeret. Jeg blev også deprimeret majorly, forårsage, ærligt jeg tænkte på, hvorfor cant jeg komme op med noget fantastisk som denne.

Normalt, når vi opretter CSS-layout, bruger vi "position" eller "flyder", eller en meget dårlig kombination af begge. Eric Sol og hans team definere en ved siden af perfekt teknik af en ny type af CSS layout teknik, som de har døbt som "Faux Absolut Placering" efter faux kolonner teknik, der simulerer tilstedeværelsen af en kolonne.

Du ved, at problemet for os alle CSS udviklere har med sønderdelingsmidler layouts (De uventede ændringer af indholdet, der forårsager hele kolonner til wrap, når vi bruger svævede layouts) ... Nå! Historien synes!!
Dette layout teknikken er stadig meget ung, og har til smadret ud af alle de CSS guruer derude, før det bliver en un skriftlig standard. Jeg er glad for at bruge det NU! ... Og er allerede i midten af konvertering af mine tidligere problematiske / flydende un-nødvendigvis layouts i FAP layout allerede ... og er glad for at sige "vi allerede bruger Faux Absolute Positioning til denne blog websted, så godt" ... GO prøve det, NU!

Kudos Eric!


NDK hjem | Udtrykke IT | udtrykke Smag | udtrykke Penmenship | udtrykke Awe | udtrykke mig