Uttrycka det

En annan sammanfattning Tut. Här är något enkelt och fint hjälp av kraften i CSS ... men var svårt concieve (och det säkert inte var jag) att börja med. Lägga DropShadow, kan vara en lappa av tårta för många av oss, att använda någon bildredigering verktyg som Photoshop ANF Fireworks etc.
Anledningen valde jag för skugga med hjälp av CSS är att oftast när du skapar en sida design / html av en ansökan, de krav som håller iteration. Vad jag menar är, i en befintlig webbplats med många bilder, som de visar freinds lista eller ett bildgalleri, kommer det att bli svårt att upparbeta hela laddningen av bilder som redan hade lossats att lägga till eller ta bort skuggor, för den ärendet.
Så om du har gjort en liten framåttänkande samtidigt som man skapar HTMLS att lägga till dessa extra divisioner eller oftast situationen är att du har en Loop Logic generera dessa ikoner / miniatyrer i XSL, PHP. JAVA eller något annat program / skriptspråk, kan du lägga till den när som helst, då är bara frågan om showen och dölja dessa skuggor med hjälp av CSS Display egendom, enligt kunderna ständigt föränderliga kraven ... Jag havn't gjort denna typ av framåttänkande innan denna ... men ahev igång nu!

I exemplet nedan är den ursprungliga bilden skuggan gratis och dropshadows appliceras som krävs! Dessutom har jag gått lite extra, genom att använda knep för min tidigare Tut (Well! detta förmodligen är kortast olika Tutorials, så det är bara motiverat att kalla dem "Tut" 's) om hjälp CSS Clip Property för att visa upp enbart

Originalbilden

CSS DropShadow Resultat

Visa Demo | Ladda ner sourcefiles

Varför vill jag förstå detta?? ... Humm!!

De flesta av CSS författare håller med om att CSS Clip egendomen är förmodligen en av de mest oanvända CSS-egenskaper. Det var så sant för mig också och var mest glad att försumma det, tills jag började ändra MooTools TWO Vred (Pin) Slider-komponenten (med Range Indicator) .

Det var ett bra förslag från en av de ingående användarna att ändra Slider-komponenten med klippta bakgrunden, bilder (mot en variabel bredd division) för att indikera reglaget området. Således kom min tid för att skriva det roliga, men un-chartrade (för mig självklart) vatten i CSS Clip fastigheten.

Tja! hur svårt det kan vara? Inte mycket alls ... Ja och nej. Syntaxen att använda CSS Clip fastigheten är ganska upprätt, men innebörden / usuage är lite croocked. Med ett minne som mitt, varje gång jag sitter att omarbeta på min Slider Script ... Jag har tokeep hänvisar till användning av detta klipp egendom, för att påminna mig själv den logik som jag har skapat i mitt manus .... BORT! ansåg att pennan ner med en förhoppning att komma ihåg det i framtiden (och även till förmån för dem som verkar boggled av CSS Clip Property)

Vad gör CSS Clip?

Clip är en del av visuella effekter modul CSS 2,1. Enkelt uttryckt, är dess uppgift att placera ett synligt fönster ovanpå ett objekt som är klippt, varför klippning bilder och skapa thumbnails utan att behöva skapa ytterligare filer (jag har redan lagt den här funktionen användas bättre i Slider-komponenten )

Använda CSS Clip egendom, kan du skapa en klippning med rect formen. Liksom många andra CSS-egenskaper (som marginal, padding etc), med hjälp av rect kräver fyra koordinater Top, höger och undre, vänster (FEL). Den croocked naturen av fastigheten speglar när man tar en närmare titt på hur klipp beräknar klippning regionen med hjälp av dessa fyra koordinater (skickar hjärnan i en kasta ett tag). Nu till förvirra dig ner startar från toppen, och den högra börjar från vänster. . Du ser vad jag sa? .... Därför detta inlägg ...

Denna lilla förvirring kan lätt försvinna med denna visuella förklaring av CSS klipp / rect egendom som nedan!!

CSS Clip Krav

Den uppgift vi har igång är att klippa följande Miniatyrbild bilden i rektangulär ser bild (och även en vidvinkel bild)

Original Thumbnal / bild	Clip Krav Sqaure Thumbmail

CSS Clip Resultat

Visa Demo | Ladda ner sourcefiles

Denna fråga passerade mig några gånger förut, när jag jobbade på platser tidigare också, används som WordPress för att visa bloggar eller nytt typ av innehåll i någon del av webbplatsen / portal.Being en novis i PHP och omkring WordPress, höll jag procastinating det tänkte "detta är inte min lappa of cake". Äntligen! detta krav kom upp näsan, när den startas Diggin runt lite för lösning.
Jag blev förvånad över att det verkligen var lättare än jag faktiskt trodde att det var, för att visa en lista över rubriker eller till det senaste inlägget på någon annan sida utanför WordPress-powered sektion bara använda lite PHP och WordPress API .

Här är vad man ska göra: -
Av skäl som förklaring, antar att din webbplats är http://www.inchembur.com/ och du har nyheterna avsnittet för den här webbplatsen för http://news.inchembur.com/ (som körs WordPress). Nu kravet är att visa det senaste inlägget från http://news.inchembur.com/ på hemsidan för den största anläggningen, dvs http://www.inchembur.com/index.php

Steg 1: I din index.php lägga till följande lappa av kod, Inkludera WordPress API filen. Du kan lägga den på toppen av sidan du vill att ditt inlägg ska visas på.

<? Php
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme define ('WP_USE_THEMES ", false); / / Disbable användning av WordPress Theme
kräver ("/ var / news.inchembur.com / wp-blogg-header.php '); / / include WordPress API
; // Get Latest Post query_posts (showposts = 1 '), / / Get Senaste inlägg
?>

I ovanstående lappa av inkluderar vi får bara den enskilt mest senaste inlägg. Om du vill prova fler variationer gärna gräva i, query_posts() dokumentation .

Steg 2: Nu, i den del av Index / hemsida där du vill visa det senaste WordPress inlägget från http://news.inchembur.com Använd följande kod. Naturligtvis gärna annonsen din styling divisioner, spänner och klasser enligt dina design behov.

Steg 3: Det finns ingen Steg 3 ... Thats det ... du är klar!

Hur visar ett specifikt inlägg / sida i motsats till det senaste inlägget: -
Detta kan lätt åstadkommes genom att förändra argument till query_posts() för att inkludera sidan ID eller sidan skvätten

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

eller Du kan kontrollera antalet inlägg:
) ; query_posts (showposts = 3);

Ibland för att hålla pageweight ner ... vi har delat in våra manus i fragment ... Dessa javascript fragment kan laddas när så krävs (på en händelse eller klicka på en länk eller knapp etc.).

Lastning Javascripts är dynamiskt enkel och ganska rakt fram som nedan ...

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

och du kan ha följande samtalet länken någonstans i kroppen, eller kan du ha detta skript "onLoad" av själva dokumentet ...

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

eller

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

Om du är css person skulle du känna till smärtan i att få dina layouter arbetar olika webbläsare. IE8 är ännu en käpp i hjulet för oss utvecklare. Anywaz! Om du träffar på denna fråga, som jag gjorde igår, där din perfekt fungerande CSS i IE7 (och tidigare) och Firefox har plötsligt började kasta vredesutbrott i IE8, prova det här ... Det fint verkade fixa mina problem för tillfället ....

Med Meta deklaration kan vi ange renderingsmotorn vi vill IE8 att använda. Så för att tvinga IE8 att göra så IE7 ... Infoga följande metatagg i huvudet på dokumentet: -

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

Som standard IE Meta skulle vara: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
vilket skulle göra IE8 göra sidan med hjälp av nya standards mode.

Om så krävs kan detta syntax kunna användas för att rymma för andra webbläsare enligt nedan:

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

MER om DOCTYPE:

Om du ännu inte känner till den typ av djur som kallas "Doctype" ... här är några snabba läs
Vad är DOCTYPE? Vilka är webbläsare Quirks och strikt läge?
Ställa in DOCTYPE i XSL

För en mer djupgående förståelse DOCTYPE, prova att besöka dessa länkar ...
A List Apart: Fixa din webbplats med rätt DOCTYPE!
A List Apart: Beyond DOCTYPE: webbstandarder, Forward kompatibilitet och IE8

Obs: Även om många av oss HTML / CSS människor har försumma vikten av DOCTYPE decleration i våra dokument, Inställning rätt DOCTYPE, är oftast svaret på de flesta cross webbläsaren frågor.

Med en mängd Karuseller där ute, många för Mootools också, bestämde jag mig ändå för att skriva min egen Carousel klass, för några goda skäl
1. Önskade ett personsökarsystem funktion (för att kunna hoppa en speciell bild / steg i karusellen).
2. Wanted frihet med placeringen av VÄNSTER och HÖGER knapparna / länkar, vart jag vill.
3. Mer kontroll över Slide steg.

Jag lyckades skapa en ny Carousel, med ovanstående egenskaper ... enligt nedan ... Känn dig fri att föreslå ändringar du skulle behöva!

Mitt exempel ser ut så här ... [ View Demo ]

Visa Demo | Ladda ner Mootools karusell med Paging Version 1.0 (Nedladdat 1965 gånger)

1. Karusellen Paging

Du kan enkelt lägga till paging till karusellen, helt enkelt genom att sätta paging flaggan, vilket är sista parater passerade när du skapar instans av MooCarousel till sann (vill personsökning) eller falskt (donot vill personsökning).

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container "," carousel1_moveleft "," carousel1_moveright ", c_ns, c_sss, true); / / NS = antal bilder, SSS = slide stegstorlek

Och självklart kan du ändra utseendet-n-känner av dessa personsökning achors som du vill genom att ändra sin CSS.

. Carousel_paging {text-align: höger, marginal: 5px 10px 0 0;}
. Carousel_paging ström, carousel_paging sidan {disposition: none; bredd:... 15px, höjd: 15px; line-height: 15px; text-align: center; display: block; float: left; Bakgrund: # D8D8EB; margin: 0 1px 0 0, text-decoration: none;}

. Carousel_paging en: hover, carousel_paging aktuell {background: # 4D4D9B; color: # FFFFFF;}..

Tja! Det finns en liten fråga dock, om den är inställd The personsökning ankare, så kommer det att bli genereras alltid efter Carousel komponenten. Jag ville göra det dynamiskt också, men då bara för att hålla Script för att blåsa av proportioner, bestämde jag mig för att hoppa över den.
Men du vet lite Javascript, kan du enkelt ändra koden personsökning generationen i MooCarousel klassen att behaga dina behov.

2. Anpassa Vänster och höger ikoner

Du kan ändra placeringen, bilder eller något displat egendom vänster och höger knapparna enkelt genom att spela runt med CSS. för att kunna ändra placeringen av vänster och höger buttoms var den verkliga orsaken för mig att rätta mig vår Carousel klass.
Eftersom denna MooCarousel klass, accepterar ID av dessa knappar, kan du placera faktiskt dessa knappar någonstans på sidan, om ni ... det behöver inte vara i elementet hierarkin, som i mitt exempel.

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: förhållande, bredd: 23px; höjd: 20px; float: left; markören: pointer;}

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

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

3. Anpassa Slide Steg

Vad menar jag MINA Anpassa SLIDE steg?
De flesta Karuseller skjuta full med det synliga fönstret. Så säger du hade fyra punkter (som i mitt exemplet ovan), kommer den att glida alla fyra objekt. Med denna Carousel Component, passerar du antalet bilder och steget storlek du väljer.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container "," carousel1_moveleft "," carousel1_moveright ", c_ns, c_sss, true);
c_ns = antal bilder c_sss = slide stegstorlek

Också, enligt min example1 har jag calcuted storlek bilden steget, bygger på logik där, jag vet antal artiklar, bredd på varje objekt och de marginaler som har gett efter varje objekt i min CSS.

/ * För SUPKALAS 1 * /

var c1_w = 92, / / ​​SUPKALAS Föremål bredd

var c1_n = 10, / / ​​totala antalet objekt Jämförelsetalen SUPKALAS

var c1_pp = 4 / / Antal Jämförelse SUPKALAS Artiklar perpage

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp, / / ​​SSS = slide stegstorlek

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0,5), / / ​​NS = antal bilder

c1_sss + = c1_marginFactor, / / ​​SSS = slide steg storlek 51 för marginalerna

Krav: Mootools 1,2

Visa Demo | Ladda ner Mootools karusell med Paging Version 1.0 (Nedladdat 1965 gånger)

MooRating är en enkel (kors webbläsare, naturligtvis eftersom den använder kraften i MooTools biblioteket), lätta och utmärkt Mootools baserat rating lösning. Det är inte betecknas som "Star Rating", helt enkelt därför kunde rating bilden vara som du väljer (jag har lämnat Stars, barer och hjärter med hämtningen, men du kan skapa din egen sort och bara släpp den i).

Hur ser det ut:

	MooTools Betyg olika bilder Visa demo
	MooTools Betyg med procentuella värden Visa demo
	MooTools Betyg med Bråk värden Visa demo

Ladda Mootols Star Rating Script (Nedladdat 713 gånger)

Betyg data: heltal, decimal eller procent
För närvarande skriptet är utformad för att visa betyg data som hela värden (1,2,3,4,5), i decimaler (1,24, 3,45 mm) eller i procent (12%, 55% etc). Valet att visa data i något av de nämnda format kan ställas in helt enkelt genom att ändra några flagga värden inom JavaScript (moorating.js)
I princip finns det två e två flaggor att leka med, för att visa värden i det format du önskar ...

var inpercent = false; / / Ställ flaggan till true om du behöver procentuella värden som ska visas
var isFractional = false / / Ställ till true om du vill bråktal som 1,24, 1,25, 4,56 i stället för 1,2 ... 5

Och jag tror inte det finns någon förklaring krävs för detta. Dessutom. Skriptet är mycket enkel. Om du vet lite javascripting, kan du ändra skriptet att få någon form av visat värde. För t.ex. om du ville tre decimaler som ska visas ... bara justera skriptet som nedan ...

if (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] innerHTML = formatNumber (x, 3),.} är / / 2 ändras till 3
else {moostartval [i] innerHTML = Math.round (x).

Uppdatering Betyg Värde:
Jag har icke brytt skriva några AJAX skript för att uppdatera Ratings värdet, eftersom jag vet av min erfarenhet att inte alltid för avsikt att uppdatera RATING så snart som användaren priser något. Du är fri att göra vad du vill med det nominella värdet, Uppdatera det med AJAX eller skicka det eller Ställ in ett dolt värde formulärfält som ska läggas fram med hela form etc.

Funktionen updateRating (id, rating) {
/ / Registrering (id + "," + rating);
/ / Gör vad åldersmärkning
}

Det är funktion i javascript som kallas "updateRating". Denna funktion har passerat ID för Rating Div, för att identifiera om vilka betyg (om det finns mer än en betyg på sidan) uppdaterades och värdet av behörigheten [updateRating (id, rating)]. Du kan välja att vad du vill med dessa värden, som jag nämnde tidigare.

Betyg Bild: stjärnor, hjärtan, Barer eller något du önskar
Ändra betyget för någon av de ovannämnda typerna (stjärnor, hjärtan etc.) är mycket enkel. Skapa bara en bild som liknar den som en och släpp in den Kom ihåg att om du ändrar namn på bilden, gör nödvändiga ändringar i CSS-fil, se nedan.

. Moostar {margin: 0px; padding: 0px; overflow: hidden, bredd: 84px; höjd: 20px; float: left; bakgrund: url ('stars.gif) repeat-x;}
. Moostar span {float: left; margin: 0px; padding: 0px; display: block; width: 84px; höjd: 20px; text-decoration: none; text-indent:-9000px; z-index: 20;}
.. Moostar Curr {background: url ('stars.gif') kvar 25px;}

De flesta betyg widgets Använd stjärniga och halv-stjärniga bilder med musen över händelser på varje stjärna. Moo betyg använder en enkel sprite bild som en bakgrundsbild för att uppnå de nödvändiga visuella effekter med en mycket låg overhead.

Krav: Mootools 1,2
Ladda Mootols Star Rating Script (Nedladdat 713 gånger)

I Firefox ... ibland kanske du har märkt att markören börjar blinka på skärmen. Det kan hända när du klickar på någon del på sidan, en division eller en bild etc. Detta blinkande markör i webbläsarfönstret är faktiskt en ÅTKOMLIGHET Inslag i Firefox som kallas "cirkumflex surfning". Denna funktion gör det möjligt / möjliggör för användare att markera text på sidan med tangentbordet (som vi normalt brukar göra med användningen av vår mus).

Tja! Om du donot vill den här funktionen ... enkelt tryck "F7" för att växla till falsk och vice versa (om du vill ha den på). Du kan också skriva "about: config" i adressfältet (skriv "cirkumflex" i rutan Filter) och helt enkelt dubbelklicka på för att ändra alternativet "accessibility.browsewithcaret" från "sanna" (slå cirkumflex surfar på) till "false "(vrid cirkumflex surfar OFF)

Jag hade letat efter en fästs två skjutreglage (löpare med två rattar, minimum och maximum) med MooTools. Fast, jag hittade ett par bra gjort dubbla fästs reglaget i MooTools forumet var det enda problemet att alla dessa löpare uppkomsten har det valda området markören. Äntligen! Jag bestämde mig för att skapa min egen. Tja! Jag gjorde använder den ursprungliga koden och ändra det att ha ett reglage bakgrund som anges området markerat visuellt, som i mitt exempel nedan. De blå områdena visar intervallet av värde valts.

Visa version 2,2 Demo | Ladda ner Mootools Dubbel Pinned Slider Version 2.2 (Nedladdat 11124 gånger)

Du kan enkelt ändra utseendet och känslan i intervallet indikatorn (i blått i exemplet ovan), Slider ratten, reglaget spår genom att ändra slider.css behov.

Tappa mig en kommentar om du tycker det användbart.

Innan vi hade att göra med CSS för att skapa våra sidlayouter, anpassa visst innehåll i en tabellcell verkade bara en barnlek. Ställ bara in "justera" eller "valign" egendom i tabellen att anpassningen av ditt val, piece of cake!
Med CSS-layouter, även om vi har "vertikal-align" egendom för elementen, verkar det inte vara så enkelt som "justera" eller "valign" egenskaper. För att vara mer specifiic den "vertikala-align" aldrig verkar lösa alla dina problem, särskilt om är skriva en bit olika webbläsare CSS.

Utan användning av HTML-tabeller, problemet med centrering på objekt, vare sig det en bild eller text i en innehåller division, har nog varit alla UI / CSS utvecklare mardröm någon gång. Detta problem extrapolerar ytterligare dina bekymmer att anpassa, om objektet som ska centreras är dynamisk till sin natur, det vill säga när dess höjd är variabel (okänd höjd).

Men det finns ingen känd rättfram lösning som skulle fungera inom alla webbläsare vi har att göra med, den lösning som jag har försökt att komma fram till inte verkar fungera i de få webbläsare som jag har provat det i (IE6, IE 7 , FF).

LÖSNING:
I webbläsare som Mozilla, Opera och Safari, Den märkliga uppför "vertikal-align" egendom kan föras till sina sinnen, helt enkelt genom att ställa in "display" egendom innehåller divisionen till "table-cell" (display: table-cell) .

Problemet är fortfarande med IE familj webbläsare som inte ännu inte tycks förstå vad de ska med "table-cell" egendom och okunniga som de är, de bara ignorera det. Lösningen nedan, men enkla, annonser några mer DOM element i HTML för att få saker att hända.

CSS och HTML ser ut så här
.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/> Visningar: 3456 </ div>
</ Div>
</ Div>

Resultatet ser ut så här: -

visa demo här | Ladda ner Källfiler (Nedladdat 446 gånger)

TOP Rikta 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/> Visningar: 1234 </ div>
</ Div>
</ Div>

Resultatet ser ut så här: -

BOTTEN Rikta 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/> Visningar: 1234 </ div>
</ Div>
</ Div>

Resultatet ser ut så här: -

visa demo här | Ladda ner här

Verkar som åldrar, eftersom jag försökte att hitta en rimlig lösning på denna anpassning problem. Men nu med denna lösning, känner jag på lite lugn.

Med en förhoppning om att en dag

• vertikal inriktning fastighet i CSS kommer att fungera som det gör i en tabellcell, utan att behöva slå mycket kring het gröt
• Åtminstone sätta margin-top: Auto och margin-bottom: auto, kommer att ge samma resultat som med margin-left och margin-rätten inställd på auto
• De webbläsaren krig kommer att vara över en dag.
• Det kommer bara en webbläsare för ALLA.

Hämta CSS och HTML-koden för ovanstående lösning här (Nedladdat 446 gånger) .. För begriplighet är CSS inte optimerats

PS: Och förresten, de är miniatyrer av några bilder jag har klickat ...