CSS låter dig utforma dina webbsidor enkelt, mycketlätt. Du kan definiera över hundra textstilar på en sida (naturligtvis kommer din sida att se ut som ett cirkustält) men det handlar om den lätthet och flexibilitet som följer med att använda CSS på webbsidor.ThemeShock har en CSS-kodgenerator som hjälper dig att lägga tillolika droppskuggeffekter på dina bilder med några enkla klick. Du väljer effekten och den skriver koden; effekter kan läggas till i botten, sidor, övre och nedre, nedre vänstra, nedre höger, övre högra och nedre vänster eller i diagonala hörn.
Innan du börjar; kolla dimensionen på dinbild (den du vill lägga till effekten till). Kodgeneratorn har en fördefinierad övre och undre gräns 130 - 347 px för bildbredd och höjd. Om dina bildmått överskrider detta kan du alltid redigera bredden och höjden senare. Koden låter dig också bestämma skyggens opacitet och suddighet. Du kan inte ladda upp din bild i kodgeneratorn, en standardbild används så att du kan förhandsgranska effekten.
Välj vilken skugga från rullgardinsmenyneffekt du gillar, varje gång du ändrar någon av väljarna genereras en ny kod så se till att du använder den allra senaste. När du har valt den effekt du vill ställa in bredden och höjden för din bild med den horisontella rullningsfältet. Använd höger och vänster piltangenter när du bara vill skjuta in knappen. Ställ in oskärpa och opacitet och kod kommer att genereras. Att öka eller minska någon av dessa parametrar skapar en ny kod.
När allt är inställt, kopiera CSS-koden till enCSS-fil och namnge den för din webbsida (eller tema). HTML-koden som finns på din webbsida genereras också (den är unik för varje effekt du väljer från rullgardinsmenyn), kopiera den och placera bildkoden (img src = "") där det står "din kod här".
Det bästa med denna kodgenerator är detdet fungerar och det är gratis. Det har dimensionskrav för bilder, men de kan redigeras från koden. Om du använder en transparent bild (som den ovan) ger det en tråkig grå bakgrund. Du kan redigera bakgrundsfärgen senare från koden. (Redigera kodradbakgrund: #ccc). Koden ger också en 5px ram till alla bilder, du kan också redigera ramen men genom att öka och minska bredden döljer eller avslöjar skuggan mer än nödvändigt så det är bäst kvar.
Besök ThemeShock CSS Drop Shadow Generator
kommentarer