Design Rules: Trick to Add Contrast to Text on a Background Image w/o Compromising the Image

EPISODE 12 - New episodes released weekly.

In this episode, learn how to create contrast for text over an image without having to change the image or use an image overlay.

[ginotarabotto]

I definitely need website desgin tips. Thanks!

[alantuttphotography]

Love the tips! Question -- since the text background covers a portion of the image, do we really want that much padding? I would typically add a drop shadow in this type of situation, which creates an outline around the text, creating some contrast as well.

[friendsanimation]

Plz focus on portfolio elements and styling in your new update.... because maximum buyers of your is designers or agency but in oxygen we cans find stylish portfolio elements so please have a look on this issue

[gosekinz]

I prefer to use a text shadow instead - sure pick a colour from the image as your shadow ..

[NicolaMihaita]

You should check out Zion Builder as well, looks promising.

[thebibleproof]

Good tip.
But I think this music up and down (that 90s disco style) is becoming annoying. You could fade in the music at the end, but please keep it below your voice during the tutorial. After binging on your design rules playlist, the music often drowns out some of your words.

[badcatdesign]

How can this pass Section 508, WCAG 2, contrast etc?

[cssmonkey]

or just simply drop a shadow - text-shadow ;)