Outline, Shadow and Opacity
Front.Space's visual effects and enhancements offer an effortless way to transform the appearance of your images within your website or application. For instance, you can modify the shape of your images, blur and pixelate them, enhance quality, make color adjustments, introduce captivating effects for a unique look and feel, apply filters, and much more. You can even combine multiple effects on an image by sequentially applying each effect as a separate chained transformation. While some transformations utilize Basic syntax, others may require more detailed explanations. You can find examples of both types of transformations in the advanced syntax examples section. In addition to the showcased illustrations on this page, a plethora of additional effects are at your disposal. You can explore a comprehensive list of these effects, complete with examples, by referring to URL Transformation API. Below are some popular choices for leveraging effects and artistic enhancements.
The outline effect (referred to as e_outline in URLs) provides you with the ability to add a polished outline to your transparent images. Additionally, you can pass further values to the parameter in the following manner:
Syntax: e_outline:[mode]:[width]:[blur]
You should consider the following parameters for applying the outline effect:
- Mode: The mode determines how to apply the outline effect. It can have one of the following values: inner, inner_fill, outer, fill. The default value is set to inner and outer.
- Width: The width parameter controls the thickness of the outline in pixels. The default value is set to 5 pixels, and the range of acceptable values is 1 to 100.
- Blur: The blur parameter adjusts the level of blur for the outline. The default value is set to 0, and the acceptable range is from 0 to 2000.
To define a new color for the outline (the default is black), use the color parameter (co in URLs). The color can be specified as an RGB hex triplet (e.g., rgb:3e2222), a 3-digit RGB hex (e.g., rgb:777), or a named color (e.g., green). For instance, to add a gold or blue outline, follow these steps:
Optional Qualifiers: co (color) | h (height) | w (width) | x, y (x & y coordinates)
With the help of Front.Space, your images can now have a solid border with the border parameter (bo in URLs) in a CSS-like format: width_style_color (e.g., 5px_solid_blue)
Syntax: bo_<width>_<style>_<color>
An opaque color can be set using different formats. One option is to use an RGB hex triplet, such as rgb:3e2222. Another option is to use a 3-digit RGB hex, like rgb:777. Alternatively, you can specify a named color, for example, gold.
In addition to these options, you can also use a 4-digit or 8-digit RGBA hex quadruplet to define the color. In this case, the 4th hex value represents the alpha value, which determines the opacity. For instance, using co_rgb:3e222240 would result in a color with 25% opacity.
Currently, only solid style is supported in borders.
For instance, the provided jpeg image labeled "sample4" has been delivered with a professional 50 pixel lightblue border.
Borders are also a practical feature for incorporating overlays that help clearly define the overlaying image.
Opacity is a key aspect when adjusting the appearance of an image. To achieve this, the opacity transformation (o in URLs) can be applied. By specifying a value ranging from 0 to 100, corresponding to the percentage of transparency, one can control the level of opacity. A value of 100 implies complete opacity, while a value of 0 represents complete transparency.
Syntax: o_<opacity level>
For instance, should you wish to deliver an image with 30% opacity, simply apply the appropriate transformation.
The e_shadow effect in URLs applies a shadow to the edge of the image. This effect can be used to create a subtle hovering effect for your image, making it appear slightly elevated from the page.
Syntax: e_shadow:<strength>
- strength Here it denotes the strength of the blur on the edges of the shadow. Range: 0 to 100. Default: 40.
To achieve this effect, you can add a dark green shadow with medium blurring of its edges (co_rgb:258C7A,e_shadow:50). Additionally, you can set the offset of the shadow to 60 pixels to the top right of the photo (x_60,y_-60).
Optional Qualifiers: co (color) | h (height) | w (width) | x, y (x & y coordinates)