Alternate Shadow Effects for Texts and Shapes

[JPstyles]

I've been working on a simple set of skins for providing basic information as an exercise towards learning how to make skins.

I have been using

Code: Select all

StringEffect=Shadow

and

Code: Select all

FontEffectColor=0,0,0,255

for making the text usable on both light and dark backgrounds.

But I am wondering if there was a way to extend the shadow functionality. For example let's say I want the shadow to surround the text, or to fade out, or go in a different direction.

So far I am thinking that the meter needs to be duplicated with slightly different properties. Would this not lead to inefficient skins? Or perhaps update issues?

[VasTex]

Well for starters you cannot change the way the Shadow effect appears. The distance from the text and its angle is fixed. If you would like to duplicate the string and use that duplicate as a dynamic shadow of sorts then you can. Doing this with several strings at once shouldn't cause any performance drop or update issues so long as you don't create a ridiculous amount of these strings (100 or more-ish).

Either way rendering text in Rainmeter is a fairly simple process and is perhaps one of the least resource intensive things you can do with it. That being said it could become tiresome and/or difficult to properly set the positions of the second 'shadow' strings if you make it too complicated. Just keep that in mind.

[JPstyles]

Does anyone have examples of how to do different shadow effects. If not an example perhaps a description of how one would approach creating the effect with the current tools of Rainmeter.

I am mostly interested in a glow or blurred shadow effect.

[VasTex]

Unfortunately neither a glow nor a blurred shadow effect can be created strictly using strings in Rainmeter. The best you could do as far as I know, while only using strings, would be creating a plain text shadow or possibly something resembling an inset or bevel effect using the appropriate FontEffectColors. However if you're looking for a blurred shadow or a neon-like glow you're better off using images of words. That being said someone else could have cooked up a better way to do these things that I can't think of right at this moment, but from what I know this just isn't possible to the degree that you're wanting.

For further clarification you may want to visit the Manual and read up on the String Meter documentation as well as the General Meter Options.

[JPstyles]

I found a skin that was using a shadow similar to how I was describing however it's not the prettiest. Thought I'd link it just in case anyone was interested in how it could be implemented. Would it be possible to make this a suggestion for improvement to the rainmeter developers? This is something that is useful for people who use a changing background as the text becomes hard to read as the background color changes.

Code: Select all

[Rainmeter]
Author=Dan C

[Metadata]
Name=AM/PM, No Seconds (Shadow x4)

[Variables]
Width=(224/2)
FontSize=36
FontFace=Cambria
StringAlign=CENTER

[MeasureTime]
Measure=Time
Format=%#I:%M %p

[styleShadow]
FontColor=00000003
FontSize=#FontSize#
FontFace=#FontFace#
StringAlign=#StringAlign#
AntiAlias=1

[styleTime]
FontColor=FFFFFF
FontSize=#FontSize#
FontFace=#FontFace#
StringAlign=#StringAlign#
StringEffect=NONE
FontEffectColor=0000003F
AntiAlias=1

[MeterShadow-4-4]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-4)
Y=(0-4)
[MeterShadow-3-4]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-3)
Y=(0-4)
[MeterShadow-2-4]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-2)
Y=(0-4)
[MeterShadow-1-4]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-1)
Y=(0-4)
[MeterShadow-0-4]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-0)
Y=(0-4)
[MeterShadow+1-4]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+1)
Y=(0-4)
[MeterShadow+2-4]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+2)
Y=(0-4)
[MeterShadow+3-4]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+3)
Y=(0-4)
[MeterShadow+4-4]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+4)
Y=(0-4)
[MeterShadow-4-3]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-4)
Y=(0-3)
[MeterShadow-3-3]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-3)
Y=(0-3)
[MeterShadow-2-3]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-2)
Y=(0-3)
[MeterShadow-1-3]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-1)
Y=(0-3)
[MeterShadow-0-3]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-0)
Y=(0-3)
[MeterShadow+1-3]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+1)
Y=(0-3)
[MeterShadow+2-3]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+2)
Y=(0-3)
[MeterShadow+3-3]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+3)
Y=(0-3)
[MeterShadow+4-3]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+4)
Y=(0-3)
[MeterShadow-4-2]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-4)
Y=(0-2)
[MeterShadow-3-2]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-3)
Y=(0-2)
[MeterShadow-2-2]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-2)
Y=(0-2)
[MeterShadow-1-2]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-1)
Y=(0-2)
[MeterShadow-0-2]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-0)
Y=(0-2)
[MeterShadow+1-2]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+1)
Y=(0-2)
[MeterShadow+2-2]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+2)
Y=(0-2)
[MeterShadow+3-2]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+3)
Y=(0-2)
[MeterShadow+4-2]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+4)
Y=(0-2)
[MeterShadow-4-1]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-4)
Y=(0-1)
[MeterShadow-3-1]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-3)
Y=(0-1)
[MeterShadow-2-1]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-2)
Y=(0-1)
[MeterShadow-1-1]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-1)
Y=(0-1)
[MeterShadow-0-1]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-0)
Y=(0-1)
[MeterShadow+1-1]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+1)
Y=(0-1)
[MeterShadow+2-1]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+2)
Y=(0-1)
[MeterShadow+3-1]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+3)
Y=(0-1)
[MeterShadow+4-1]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+4)
Y=(0-1)
[MeterShadow-4+0]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-4)
Y=(0+0)
[MeterShadow-3+0]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-3)
Y=(0+0)
[MeterShadow-2+0]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-2)
Y=(0+0)
[MeterShadow-1+0]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-1)
Y=(0+0)
[MeterShadow-0+0]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-0)
Y=(0+0)
[MeterShadow+1+0]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+1)
Y=(0+0)
[MeterShadow+2+0]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+2)
Y=(0+0)
[MeterShadow+3+0]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+3)
Y=(0+0)
[MeterShadow+4+0]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+4)
Y=(0+0)
[MeterShadow-4+1]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-4)
Y=(0+1)
[MeterShadow-3+1]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-3)
Y=(0+1)
[MeterShadow-2+1]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-2)
Y=(0+1)
[MeterShadow-1+1]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-1)
Y=(0+1)
[MeterShadow-0+1]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-0)
Y=(0+1)
[MeterShadow+1+1]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+1)
Y=(0+1)
[MeterShadow+2+1]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+2)
Y=(0+1)
[MeterShadow+3+1]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+3)
Y=(0+1)
[MeterShadow+4+1]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+4)
Y=(0+1)
[MeterShadow-4+2]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-4)
Y=(0+2)
[MeterShadow-3+2]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-3)
Y=(0+2)
[MeterShadow-2+2]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-2)
Y=(0+2)
[MeterShadow-1+2]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-1)
Y=(0+2)
[MeterShadow-0+2]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-0)
Y=(0+2)
[MeterShadow+1+2]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+1)
Y=(0+2)
[MeterShadow+2+2]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+2)
Y=(0+2)
[MeterShadow+3+2]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+3)
Y=(0+2)
[MeterShadow+4+2]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+4)
Y=(0+2)
[MeterShadow-4+3]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-4)
Y=(0+3)
[MeterShadow-3+3]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-3)
Y=(0+3)
[MeterShadow-2+3]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-2)
Y=(0+3)
[MeterShadow-1+3]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-1)
Y=(0+3)
[MeterShadow-0+3]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-0)
Y=(0+3)
[MeterShadow+1+3]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+1)
Y=(0+3)
[MeterShadow+2+3]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+2)
Y=(0+3)
[MeterShadow+3+3]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+3)
Y=(0+3)
[MeterShadow+4+3]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+4)
Y=(0+3)
[MeterShadow-4+4]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-4)
Y=(0+4)
[MeterShadow-3+4]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-3)
Y=(0+4)
[MeterShadow-2+4]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-2)
Y=(0+4)
[MeterShadow-1+4]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-1)
Y=(0+4)
[MeterShadow-0+4]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#-0)
Y=(0+4)
[MeterShadow+1+4]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+1)
Y=(0+4)
[MeterShadow+2+4]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+2)
Y=(0+4)
[MeterShadow+3+4]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+3)
Y=(0+4)
[MeterShadow+4+4]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleShadow
X=(#Width#+4)
Y=(0+4)

[MeterTime]
MeasureName=MeasureTime
Meter=STRING
MeterStyle=styleTime
X=#Width#
Y=0

Source
http://thedanielchoi.deviantart.com/art/Digital-Drop-Shadow-Clock-for-Rainmeter-278066153

[eclectic-tech]

The link you posted uses a lot of meters to create shadowing...

To expand on what VasTex stated, here is an example to achieve a very similar effect (without the additional 'shadow' meters) to improve visibility on varying backgrounds.

It's using the built-in StringEffect=Border and adjusting the FontColor=, FontEffectColor=, and Alpha settings on the string meter.

Here is code for sample clock (modified from Bluvision by g3xt3r):

Code: Select all

[Rainmeter]
BackgroundMode=1
Author=LAvalon; g3xter ; eclectic-tech
MiddleMouseUpAction=!DeActivateConfig

[Variables]
MainTextColor=255,255,255
BlueColor=40,80,164

;////////////////////////////////////////
;   BACKGROUND
;////////////////////////////////////////

;////////////////////////////////////////
;   Measure Time
;////////////////////////////////////////


[MeasureAMPM]
Measure=Time
Format=%p

[MeasureTime]
Measure=Time

[MeasureTimeH]
Measure=Time
Format="%I"

[MeasureTimeM]
Measure=Time
Format="%M"

[MeasureDate]
Measure=Time
Format="%a, %b %#d %Y"

[MeasureTimeS]
Measure=Time
Format="%S"

[MeasureASec]
Measure=Calc
Formula=MeasureTime % 2
MaxValue=1
MinValue=0
Substitute="0":"","1":":"


[TimeZone]
Measure=Time
Format="%z"
Substitute="Mitteleuropäische Zeit":"Central European Time"

;////////////////////////////////////////
;   Meter Time
;////////////////////////////////////////


[MeterTimeH2]
Meter=STRING
Prefix="88:"
X=0
Y=0r
FontColor=#MainTextColor#,40
StringStyle=NORMAL
FontSize=30
StringAlign=LEFT
FontFace=Digital
AntiAlias=1

[MeterTimeH]
Meter=STRING
MeasureName=MeasureTimeH
X=0
Y=0r
FontColor=#MainTextColor#,255
StringStyle=NORMAL
FontSize=30
StringAlign=LEFT
FontFace=Digital
StringEffect=Border
FontEffectColor=#BlueColor#,128
AntiAlias=1
Hidden=0

[MeterTimeM2]
Meter=STRING
Prefix="88:"
X=55
Y=0r
FontColor=#MainTextColor#,40
StringStyle=NORMAL
FontSize=30
StringAlign=LEFT
FontFace=Digital
AntiAlias=1

[MeterTimeM]
Meter=STRING
MeasureName=MeasureTimeM
X=55
Y=0r
FontColor=#MainTextColor#,255
StringStyle=NORMAL
FontSize=30
StringAlign=LEFT
FontFace=Digital
StringEffect=Border
FontEffectColor=#BlueColor#,128
AntiAlias=1

[MeterTimeS]
Meter=STRING
MeasureName=MeasureTimeS
x=115
y=1
FontColor=#MainTextColor#,255
FontSize=18
StringAlign=Left
FontFace=Digital
StringEffect=Border
FontEffectColor=#BlueColor#,128
AntiAlias=1

[MeterTimeS2]
Meter=STRING
Prefix="88"
x=115
y=0r
FontColor=#MainTextColor#,40
FontSize=18
StringAlign=Left
FontFace=Digital
AntiAlias=1

[MeterAMPM]
Meter=STRING
MeasureName=MeasureAMPM
X=120
Y=20r
FontColor=#MainTextColor#,255
FontSize=9
StringAlign=Left
FontFace=hooge 05_53
StringEffect=Border
FontEffectColor=#BlueColor#,128
AntiAlias=1

[MeterDate]
Meter=String
MeasureName=MeasureDate
x=80
y=35
FontColor=#MainTextColor#
FontSize=6
StringAlign=Center
FontFace=hooge 05_53
StringEffect=Border
FontEffectColor=#BlueColor#,128
AntiAlias=1
Text="%1"

[MeterTimeZone]
Meter=String
MeasureName=TimeZone
x=145
y=45
FontColor=#MainTextColor#
FontSize=6
StringAlign=Right
FontFace=hooge 05_53
StringEffect=Border
FontEffectColor=#BlueColor#,128
AntiAlias=1
Text="%1"

;////////////////////////////////////////
;   Meter Blink
;////////////////////////////////////////


[MeterColonBlink1]
Meter=String
MeasureName=MeasureASec
X=42
Y=0
FontColor=#MainTextColor#,255
FontSize=30
StringAlign=Left
FontFace=Digital
StringEffect=Border
FontEffectColor=#BlueColor#,128
AntiAlias=1

[MeterColonBlink2]
Meter=String
MeasureName=MeasureASec
X=97
Y=0
FontColor=#MainTextColor#,255
FontSize=30
StringAlign=Left
FontFace=Digital
StringEffect=Border
FontEffectColor=#BlueColor#,128
AntiAlias=1


;#####################################################################################
;#####################################################################################
;#####################################################################################

Changing the #MainTextColor# and #BlueColor# variables can enhance the visibility; but as Vastex stated, and you have discovered, it can take many meter to create the illusion of shadowing beyond this, and the results will generally be less than desired.

I have used this in several skins to improve text readability on varying backgrounds. Perhaps additional features will be added to Rainmeter in the future, but for now it will take a "patchwork" of meters and images to get the effects you seek beyond the ones discussed here.

[VasTex]

Ah yes the Border effect was what I had forgot. It's a handy and simple way of creating a shadow-like effect, but in some cases it might not be enough. The border provided by that effect is slim and depending on the font it might not do you any good at all, but it's still better than nothing! Thanks for the additional info Eclectic-Tech!