Style tag

[puppy_apprentice]

Linear gradient
Shadow
Neon

Attention, Achtung, Uwaga!

Rounded box

Code: Select all

[style=background-image: linear-gradient(red, yellow);font-weight: bold]Linear gradient[/style]
[style=text-shadow: 2px 2px 5px grey]Shadow[/style]
[style=text-shadow: 0 0 3px #FF0000]Neon[/style]

[style=outline-style: dashed; outline-color: red; color: red]Attention, Achtung, Uwaga![/style]
[style=border: 2px solid red;border-radius: 5px]Rounded box[/style]

[Grey]

Linear gradient

Add purple, modify a little and it will be almost like a typical background in Amiga games

[puppy_apprentice]

Yep. I want to present some Amiga games i future. So I'll use it to make the mood

[MochiMoppel]

This is a test
Let's see if and how the position attribute works. Goal is to stack 2 images
(actually I'm using no images for the post, just Unicode characters)
padding-top for text after image doesn't work

 
 
 
 
 
 
 
 
 

 
First line after image. Ugly workaround to fool BB software, using preceding Unicode FIGURE SPACEs

[puppy_apprentice]

Pseudo 3D effects:
ridge

groove

inset

outset

Code: Select all

[style=margin: 30px; outline: 2px ridge black][img]https://forum.puppylinux.com/download/file.php?avatar=1673_1617317712.jpg[/img][/style]
[style=margin: 30px; outline: 2px groove black][img]https://forum.puppylinux.com/download/file.php?avatar=1673_1617317712.jpg[/img][/style]
[style=margin: 30px; outline: 2px inset black][img]https://forum.puppylinux.com/download/file.php?avatar=1673_1617317712.jpg[/img][/style]
[style=margin: 30px; outline: 2px outset black][img]https://forum.puppylinux.com/download/file.php?avatar=1673_1617317712.jpg[/img][/style]

[Grey]

Pseudo 3D effects:

I used to be quite good at finding differences in tasks like "find 10 differences between these two pictures". But in this case, all four Rexes look the same to me.

[puppy_apprentice]

Look at the borders. Some give the impression that the image is concave or convex.

[Grey]

Look at the borders. Some give the impression that the image is concave or convex.

No, I still don't see it Maybe something with a browser or vision, plus a curved monitor.

[puppy_apprentice]

If you turn off pictures you will see borders that give pseudo 3D effect.

pseudo3d.jpg (5.71 KiB) Viewed 452 times

[MochiMoppel]

If you turn off pictures you will see borders that give pseudo 3D effect.

I didn't see the effect either because

a) you forced the frame color to be black. You should do this only when you are sure what the background color is. Browsers may be set to "dark mode" and some of the themes of this forum also set the background to black. The solution is to set no color at all. In this case the browser or forum SW will find a suitable gray tone.

b) 2px width is too small for making the effect recognizable.

This uses 10px:

​

Code: Select all

​[style=margin: 30px; outline: 10px ridge][img]https://forum.puppylinux.com/download/file.php?avatar=1673_1617317712.jpg[/img][/style]

[puppy_apprentice]

To big border for me. I wanted to achieve something like:

pseudo3dbuttons.jpg (7.5 KiB) Viewed 446 times

I should add background and bigger margins, padding etc.?