Udtrykke det

En anden hurtig Tut. Her er noget enkelt og rart at bruge magt CSS ... men det var vanskeligt concieve (og det sikkert var ikke mig), til at begynde med. Tilføjelse Dropshadow, kan være en peice kage for mange af os, at bruge nogle billedredigeringsprogram værktøjer som Photoshop ANF Fireworks mv
Grunden til, jeg valgte drop shadow med CSS er, at normalt samtidig skabe en side, design / html af en ansøgning, de krav, der holder iteration. Hvad jeg mener er, I et eksisterende web site med mange billeder, som dem, viser freinds liste eller et billede galleri, vil det være vanskeligt at oparbejde den samlede belastning af billeder, der allerede var losset for at tilføje eller fjerne skygger, for at stof.
Så hvis du har gjort lidt fremadrettet, samtidig med at skabe de HTMLS at tilføje disse ekstra divisioner eller normalt er situationen, at du har en løkke Logic generere disse ikoner / thumbnails i XSL, PHP. JAVA eller anden programmering / scripting sprog, kan du tilføje den når som helst, så er bare spørgsmålet om showet og skjule disse skygger ved hjælp af CSS Display ejendom, som pr kunder stadigt skiftende krav ... Jeg havn't gjort denne form for fremadrettet tænkning før dette ... men ahev i gang nu!

I eksemplet nedenfor, er det originale billede skygge fri og dropshadows anvendes efter behov! Desuden har jeg gået lidt ekstra, ved at bruge de tricks af min tidligere Tut (Well! disse formentlig er kortest række Tutorials, så det er kun berettiget at kalde dem "Tut" 's) om hjælp CSS Clip Ejendom for vise kun

Original billede

CSS DropShadow Resultater

Se demo | Hent sourcefiles

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 Thumbnal / Billede	Clip Krav til Sqaure Thumbmail

CSS Clip Resultater

Se demo | Hent sourcefiles

Dette spørgsmål strejfet mig et par gange før, da jeg arbejdede på websteder tidligere også, som anvendes til WordPress til at vise blogs eller nye former for indhold i en del af webstedet / portal.Being en novice i PHP og omkring WordPress, jeg holdt procastinating det, tænker "det er ikke min peice af kagen". Endelig! dette krav kom op til min næse, når de begyndte Diggin lidt omkring for løsning.
Jeg var overrasket over at opdage, at det virkelig var lettere end jeg faktisk troede det var, at vise en liste over overskrifter eller det seneste indlæg på en anden side uden for WordPress-drevne del, bare at bruge en lille smule af PHP og WordPress API .

Her er hvad man skal gøre: -
Af hensyn til forklaring, antage, at dit websted er http://www.inchembur.com/ og du har nyheder sektion for dette websted på http://news.inchembur.com/ (som kører WordPress). Nu er kravet er at vise det seneste indlæg fra http://news.inchembur.com/ på hjemmesiden af de vigtigste site, dvs http://www.inchembur.com/index.php

Trin 1: I din index.php tilføje følgende peice kode, Medtag WordPress API-fil. Du kan tilføje denne til toppen af den side, du ønsker dit indlæg skal vises på.

<? Php
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme define ('WP_USE_THEMES', false); / / Disbable brug af WordPress Theme
kræver ('/ var / news.inchembur.com / wp-blog-header.php'); / / Medtag WordPress API
; // Get Latest Post query_posts ('showposts = 1'); / / Hent Nyeste besked
?>

I ovenstående peice over, omfatter, vi får kun det indre seneste indlæg. Hvis du ønsker at prøve flere variationer velkommen til at grave i, query_posts() dokumentation .

Trin 2: Nu, i den del af Index / Home side, hvor du ønsker at vise den senest WordPress indlæg fra http://news.inchembur.com , skal du bruge følgende kode. Det er overflødigt at sige, er du velkommen til annonce dine styling divisioner, spænder og klasser, som pr dine design behov.

Trin 3: Der er ingen Trin 3 ... Thats det ... du er færdig!

Hvordan viser et bestemt indlæg / side i modsætning til det seneste indlæg: -
Dette kan let opnås ved at ændre de argumenter query_posts() for at angive sidens ID eller side slug

) ; query_posts ('page_id = 7');
) ; query_posts ('sidenavn = ca');

eller du kan styre antallet af stillinger:
) ; query_posts (showposts = 3);

Nogle gange for at holde pageweight nede ... vi har delt vores scripts i fragmenter ... Disse javascript fragmenter kan indlæses, når behovet opstår (på en begivenhed eller klik på et link eller en knap etc.).

Indlæser Javascripts dynamisk er enkel og smuk ligetil som nedenfor ...

= “text/javascript” > <Script type = "text / javascript">
Funktionen loadNewScript (kilde) {
var s = document.createElement ('script');
s.setAttribute ('type', 'text / javascript');
s.setAttribute ('src', kilde);
document.body.appendChild (s);
}
</ Script>

og du kan have følgende opfordring linket overalt i kroppen, eller du kan få dette script "onLoad" af selve dokumentet ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A href = "javascript: loadNewScript ('myDynamicScript.js');"> Load Dynamisk Script </ a>

eller

<BODY onload="loadNewScript('myDynamicScript.js');">

Hvis du er css person, ville du vide smerten i at få dine layout arbejder cross-browser. IE8 er endnu en kæp i hjulet for os udviklere. Anywaz! hvis du rammer ved dette problem, ligesom jeg gjorde i går, hvor din perfekt arbejde CSS i IE7 (og tidligere) og Firefox har pludselig begyndte at kaste tantrums i IE8, så prøv denne ... det pænt syntes at løse mine problemer i øjeblikket ....

Ved hjælp af Meta erklæring, kan vi specificere rendering engine vi gerne IE8 til at bruge. Så for at tvinge IE8 at gøre som IE7 ... Indsæt følgende metatag i hovedet af dit dokument: -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Som standard IE Meta ville være: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
som vil gøre IE8 gøre siden ved hjælp af nye standarder mode.

Hvis det er nødvendigt, kunne denne syntaks bruges til at rumme for andre browsere som nedenfor:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

MERE Om DOCTYPES:

Hvis du endnu ikke kender til den slags dyr kaldes "doctype" ... her er nogle hurtig læst
Hvad er DOCTYPES? Hvad er BROWSER Quirks & Streng tilstand?
Indstilling af DOCTYPE i XSL

For en mere dybtgående forståelse DOCTYPES, kan du besøge disse links ...
A List Apart: Fix dit websted med højre DOCTYPE!
A List Apart: Beyond DOCTYPE: webstandarder, Fremad kompatibilitet og IE8

Bemærk: Selvom mange af os, HTML / CSS mennesker er blevet negligerer vigtigheden af ​​DOCTYPE decleration i vores dokumenter, Indstilling af højre DOCTYPE, er normalt svaret på de fleste cross browser spørgsmål.

Med en bred vifte af Karruseller derude, mange for Mootools så godt, alligevel besluttede jeg at skrive min egen Carousel klasse, for nogle gode grunde
1. Ønskede et paging funktion (for at kunne springe en bestemt lysbillede / trin i karrusellen).
2. Wanted frihed med placering af Knapperne Venstre og Højre / links, hvor nogensinde jeg venligst.
3. Mere kontrol over Slide Steps.

Det lykkedes mig at oprette en ny Karrusel, med de ovenstående funktioner ... som nedenfor ... Du er velkommen til at foreslå eventuelle ændringer du ville kræve!

Mit eksempel ser sådan her ud ... [ View Demo ]

Se demo | Hent Mootools Karrusel med Paging Version 1.0 (Downloaded 1985 gange)

1. Carousel Paging

Du kan nemt tilføje paging til din karrusel, blot ved at sætte personsøgning flag, som er sidste parater passerede samtidig skabe forekomst af MooCarousel til sand (ønsker paging) eller falsk (donot ønsker paging).

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = antallet af dias, SSS = slide skridt størrelse

Og selvfølgelig kan du ændre udseende-n-feel af disse paging achors som du ønsker ved at ændre deres CSS.

. Carousel_paging {text-align: højre, margin: 5px 10px 0 0;}
. Carousel_paging strøm, carousel_paging side {omrids: none; bredde:... 15px; højde: 15px; line-height: 15px; tekst-align: center; display: block; float: left; baggrund: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

. Carousel_paging a: hover, carousel_paging nuværende {background: # 4D4D9B; color: # ffffff;}..

Nå! Der er et lille problem dog, at personsøgning ankre hvis indstillet, så det vil blive genereret altid efter Carousel komponent. Jeg ønskede at gøre det dynamisk så godt, men så bare at holde Script til at blæse ud af proportioner, besluttede jeg mig for at springe den over.
Men du kender en lille Javascript, kan du nemt ændre paging generation koden i MooCarousel klassen at behage dine behov.

2. Tilpasning af venstre og højre Ikoner

Du kan ændre placeringen, billeder eller enhver displat ejet af de Knapperne Venstre og Højre simpelthen ved at spille rundt med CSS. at være i stand til at ændre placeringer af venstre og højre knapper nede var den egentlige årsag for mig at rette mit vores Carousel klasse.
Da dette MooCarousel klasse, accepterer id er af disse knapper, kan du faktisk placere disse knapper overalt på siden, hvis du har lyst ... det behøver ikke at være i elementet hierarki, som i mit eksempel.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; position: relative; bredde: 23px; højde: 20px; float: left; markøren: pointer;}

. Carousel_container_r {background-position: 0-38px;}

. Carousel_container_l {background-position: 0-58px;}

3. Tilpasning Slide Steps

Hvad mener jeg MINE Tilpasning SLIDE Steps?
De fleste Karruseller skub fulde med af det synlige vindue. Så siger du havde fire elementer (som i min eksemplet ovenfor), vil den glide alle de fire elementer. Med denne Carousel Komponent, passerer du antallet af dias og trinstørrelsen efter eget valg.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = antallet af dias, c_sss = slide skridt størrelse

Også i min Eksempel1 jeg har calcuted slide skridt størrelse, baseret på logik, hvor jeg kender antallet af elementer, bredde på hvert punkt, og de marginer, der har givet efter hvert emne i min CSS.

/ * For Carousal 1 * /

var c1_w = 92; / / Carousal Item Bredde

var c1_n = 10; / / Antal af Sammenligningscykel Carousal varer

var c1_pp = 4 / / Antal Sammenligningscykel Carousal elementer perpage

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp; / / sss = slide skridt størrelse

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0,5) / / ns = antallet af dias

c1_sss + = c1_marginFactor; / / sss = slide skridt størrelse 51 for margener

Krav: Mootools 1.2

Se demo | Hent Mootools Karrusel med Paging Version 1.0 (Downloaded 1985 gange)

MooRating er en simpel (cross browser, selvfølgelig, som det anvender den magt Mootools biblioteket), lette og fremragende Mootools baseret bedømmelse løsning. Det er ikke betegnes som "Star Rating", simpelthen fordi, kunne bedømmelse billedet være som du vælger (Jeg har givet Stjerner, Barer og hjerter med download, men du kan oprette din egen række og bare slippe det i).

Hvordan det ser ud:

	Mootools Rating med forskellige billeder Se demo
	Mootools Rating med procent-værdier Se demo
	Mootools Rating med Fractional værdier Se demo

Hent Mootols Stjernetildeling Script (Downloaded 716 gange)

Rating data: hele tal, Decimal eller Procent
I øjeblikket scriptet er designet til at vise rating-data, som hele værdier (1,2,3,4,5), i decimaler (1,24, 3,45 osv.) eller i procenter (12%, 55% osv.). Valget at vise data i nogen af ​​de nævnte formater kan indstilles ved blot at ændre nogle flag værdier i javascript (moorating.js)
Grundlæggende er der to e to flag at lege med, for at vise værdier i form af dit valg ...

var inpercent = false; / / Sæt dette flag til sand, hvis du har brug procentvise værdier, der skal vises
var isFractional = false / / Sæt denne til sand, hvis du ønsker brøkdele af værdier som 1,24, 1,25, 4,56 i stedet for 1,2 ... 5

Og jeg tror ikke der er nogen forklaring påkrævet for denne. Endvidere. Scriptet er meget simpelt. Hvis du kender lidt javascripting, kan du ændre scriptet til at få nogen form for viste værdi. For eksempel hvis du ønsker tre decimaler der skal vises ... blot at justere scriptet som nedenfor ...

if (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] innerHTML = formatNumber (x, 3);.} / / 2 ændres til 3
else {moostartval [i] innerHTML = Math.round (x).

Opdatering Rating Værdi:
Jeg har ikke generet skrive enhver AJAX-scripts til at opdatere Ratings værdi, fordi jeg ved fra min erfaring, at det ikke altid behøver det ikke agter at opdatere rating som snart brugeren satser noget. Du er fri til at gøre hvad du vil med den nominelle værdi, Opdater det ved hjælp af AJAX eller forelægger det eller indstille en skjult form field værdi, der skal indsendes med hele formularen osv.

Funktionen updateRating (id, rating) {
/ / Alert (id + "," + rating);
/ / Gør hvad med evaluering
}

Der er funktion i javascript kaldet "updateRating". Denne funktion er blevet passeret ID af Rating Div., for at identificere, hvilke vurderinger (hvis der er mere, at man ratings på siden) er blevet opdateret, og værdien af ​​den vurdering [updateRating (id, rating)]. Du kan vælge at hvad du vil med disse værdier, som jeg nævnte tidligere.

Rating Billede: Stjerner, hjerter, Barer eller noget du har lyst
Ændring af bedømmelse til nogen af ​​de ovennævnte typer (stjerner, hjerter osv.) er meget enkel. Du skal blot oprette et billede svarende til det medfølgende og slippe det i. Husk, hvis du ændrer navnet på billedet, skal du foretage de nødvendige ændringer i CSS-fil, se nedenfor.

. Moostar {margin: 0px; padding: 0px; overløb: skjult, bredde: 84px; højde: 20px; float: left; baggrund: url ('stars.gif') repeat-x;}
. Moostar span {float: left; margin: 0px; padding: 0px; display: block; bredde: 84px; højde: 20px; text-decoration: none; text-indent:-9000px; z-index: 20;}
.. Moostar curr {background: url ('stars.gif') til venstre 25px;}

De fleste vurderinger widgets bruge stjerne og halv-stjernede billeder med musen over begivenheder på hver stjerne. Moo Ratings bruger en simpel sprite billede som et baggrundsbillede til at opnå den krævede visuelle effekter med en meget lav overhead.

Krav: Mootools 1.2
Hent Mootols Stjernetildeling Script (Downloaded 716 gange)

I Firefox ... Nogle gange vil du måske har bemærket, at markøren begynder at blinke på skærmen. Det kan ske, når du klikker på et element på siden, en afdeling eller et billede osv. Dette blinkende markør i browservinduet er faktisk en handicappede-funktion i Firefox kaldes 'indsætningstegn browsing ". Denne funktion gør det muligt / giver brugerne mulighed for at markere tekst på siden med tastaturet (som vi normalt har tendens til at gøre med brugen af ​​vores mus).

Nå! hvis du donot ønsker denne funktion ... enkelt tryk "F7" for at skifte det til falsk og vice-versa (hvis du ønsker det ON). Du kan også skrive "about: config" i adresselinjen (type i "hat" i filter kassen) og blot dobbeltklikke på for at ændre indstillingen "accessibility.browsewithcaret" fra "sand" (drej indsætningstegn browser ON) til "false "(drej indsætningstegn browser OFF)

Jeg havde været på udkig efter en dobbelt pinned skyder (slider med to knapper, minimum og maksimum) ved hjælp af Mootools. Men, jeg fandt et par veludført dobbelt fastgjort skyderen i MooTools forum, Det eneste problem var, at alle disse skydere fordybning har det markerede område markør. Endelig! Jeg besluttede at lave mit eget. Nå! Jeg gjorde bruge den oprindelige kode og ændre det at have en skyder baggrund, der er angivet intervallet valgt visuelt, som i mit eksempel nedenfor. De blå felter angiver området af værdi valgt.

Vis Version 2,2 demo | Hent Mootools Dobbelt Pinned Slider Version 2.2 (Downloaded 11584 gange)

Du kan meget nemt ændre udseendet og fornemmelsen af ​​intervallet indikator (i blåt i ovenstående eksempel), skyder knop, skyderen sporet ved at ændre slider.css efter behov.

Undgå drop mig en kommentar hvis du finder det nyttigt.

Inden vi var nødt til at beskæftige sig med CSS til at skabe vores side layouts, som bringer noget af indholdet i en tabelcelle syntes bare en leg. Du skal blot indstille "justere" eller "valign" ejendom i tabellen for at få tilpasningen af dit valg, stykke kage!
Med CSS layout, selv om vi har "lodret-align" ejendom for de elementer, synes det ikke at være så simpelt som "tilpasse" eller "valign" egenskaber. For at være mere specifiic den "lodret-align" synes aldrig at løse nogen af dine problemer, især hvis der skriver et stykke af cross-browser CSS.

Uden brug af HTML-tabeller, er problemet med centreret om objektet er det et billede eller en tekst i en holdigt division, har sandsynligvis været hver UI / CSS udviklere mareridt på et tidspunkt. Dette problem yderligere ekstrapolerer dine bekymringer for at afstemme, om objektet til at være centreret er dynamisk af natur, dvs når dets højde er variabel (ukendt højde).

Selv om der er ingen kendte ligetil løsning, der ville arbejde på tværs af forskellige browsere, vi har at gøre med, den løsning, som jeg har forsøgt at nå frem til synes at arbejde i de få browsere, jeg har prøvet det i (IE6, IE 7 , FF).

LØSNINGEN:
I browsere som Mozilla, Opera og Safari, Det mærkelige opfører sig "lodret-align" ejendom kan bringes til fornuft, blot ved at sætte "display" ejendom indeholder division til "table-celle" (display: table-celle) .

Problemet er stadig med IE familie af browsere, som ikke endnu ikke synes at forstå, hvad der skal med "table-celle" ejendom og uvidende som de er, de bare ignorere det. Løsningen nedenfor, men simple, annoncer få mere DOM elementer til din HTML for at gøre tingene ske.

CSS og HTML ser sådan ud
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> visninger: 3456 </ div>
</ Div>
</ Div>

Resultatet ser således ud: -

se demo her | Hent kildefiler (Downloaded 451 gange)

TOP Juster CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> visninger: 1234 </ div>
</ Div>
</ Div>

Resultatet ser således ud: -

BUND Juster CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> visninger: 1234 </ div>
</ Div>
</ Div>

Resultatet ser således ud: -

se demo her | Hent her

Synes lige aldre, da jeg prøvede at finde en fornuftig løsning på denne tilpasning problem. Men nu med denne løsning, føler jeg på lidt fred.

Med et håb om at en dag

• vertikal-tilpasning ejendom i CSS vil arbejde som det gør i en tabelcelle, uden at slå meget om den varme grød
• Mindst, sætte margin-top: auto og margin-bottom: auto, vil give det samme resultat som med margin-venstre og margin-rigtige sæt til auto
• De Browser krige vil være over en dag.
• Der vil kun én browser for ALLE.

Download CSS og HTML af ovennævnte løsning her (Downloaded 451 gange) .. for forståelighed, er CSS ikke er blevet optimeret

PS: Og ved den måde, er dem, miniaturer af nogle billeder, jeg har klikket ...