Met CSS kunt u uw webpagina's eenvoudig, heel stijlvol makengemakkelijk. Je kunt meer dan honderd tekststijlen op één pagina definiëren (je pagina ziet er natuurlijk uit als een circustent) maar het gaat om het gemak en de flexibiliteit van het gebruik van CSS op webpagina's.ThemeShock heeft een CSS-codeergenerator die u zal helpen toevoegenverschillende slagschaduweffecten voor uw afbeeldingen met een paar eenvoudige klikken. U kiest het effect en het schrijft de code; effecten kunnen worden toegevoegd aan de onderkant, zijkanten, boven en onder, linksonder, rechtsonder, rechts boven en linksonder of in diagonale hoeken.
![css-shadow-generator_HQ css-shadow-generator_HQ](/images/internet/add-shadow-effect-to-images-with-css3-auto-code-generator.jpg)
Voordat je begint; controleer de dimensie van uwafbeelding (degene waaraan u het effect wilt toevoegen). De codegenerator heeft een vooraf gedefinieerde boven- en ondergrens van 130 - 347 px voor de beeldbreedte en -hoogte. Als uw afbeeldingsafmetingen dit overschrijden, kunt u de breedte en hoogte later altijd wijzigen. Met de code kunt u ook de dekking en onscherpte van de schaduw bepalen. U kunt uw afbeelding niet uploaden in de codegenerator, een standaardafbeelding wordt gebruikt zodat u een voorbeeld van het effect kunt bekijken.
Kies uit het vervolgkeuzemenu welke schaduweffect dat u leuk vindt, elke keer dat u een van de selectors wijzigt, wordt een nieuwe code gegenereerd, dus zorg ervoor dat u de nieuwste gebruikt. Nadat u het gewenste effect hebt gekozen, stelt u de breedte en hoogte voor uw afbeelding in met behulp van de horizontale schuifbalk. Gebruik de pijltoetsen naar rechts en naar links als u de knop een klein beetje wilt verschuiven. Stel de vervaging en dekking in en code wordt gegenereerd. Als u een van deze parameters verhoogt of verlaagt, wordt een nieuwe code gemaakt.
![Css3 slagschaduw Css3 slagschaduw](/images/internet/add-shadow-effect-to-images-with-css3-auto-code-generator_2.jpg)
Zodra alles is ingesteld, kopieert u de CSS-code naar aCSS-bestand en noem het voor uw webpagina (of thema). De HTML-code die op uw webpagina staat, wordt ook gegenereerd (deze is uniek voor elk effect dat u in het vervolgkeuzemenu kiest), kopieert en plaatst de afbeeldingscode (img src = "") waar staat "uw code hier".
Het beste aan deze codegenerator is dathet werkt en het is gratis. Het heeft wel dimensiebeperkingen voor afbeeldingen, maar ze kunnen worden bewerkt vanuit de code. Als u een transparante afbeelding gebruikt (zoals hierboven), krijgt deze een saaie grijze achtergrond. U kunt de achtergrondkleur later vanuit de code bewerken. (Bewerk coderegelachtergrond: #ccc). De code geeft ook een 5px-frame voor alle afbeeldingen, u kunt het frame ook bewerken, maar als u de breedte groter of kleiner maakt, wordt de schaduw meer dan nodig verborgen of zichtbaar, zodat deze het beste alleen kan worden gelaten.
Ga naar ThemeShock CSS Drop Shadow Generator
Comments