How to get rid of the drop shadow on content slides?
Permalink Browser Info Environment
Hey!
i'd like to get rid of the drop shadow but only the ones which are cast from the parallax background to the content slides ... looks kind of wired to have the background cast a shadow on the foreground.
thanks!
i'd like to get rid of the drop shadow but only the ones which are cast from the parallax background to the content slides ... looks kind of wired to have the background cast a shadow on the foreground.
thanks!
| Type: | Pre-Sale |
|---|---|
| Status: | In Progress |
thanks a lot!
it would be cool, if you could also copy this class (and also another one for "has-shadow") to the parallax-box where you ommit the shadow, so one can further tweak with custom classes there.
it would be cool, if you could also copy this class (and also another one for "has-shadow") to the parallax-box where you ommit the shadow, so one can further tweak with custom classes there.
i was just wondering why you even create a separate <span> element in the parallax-box for the shadow and don't just set it with css to the actual slide-<div>. that way it might be easier to adjust the styles to each individual's needs.
Hi!
That's a good question. My first approach was to add the shadow directly to the slide div using the CSS box-shadow property.
However, some CSS properties such as "box-shadow" are pretty expensive in terms of performance (when scrolling the page). There are some good articles on Internet about that.
So after doing some testing, I opted for an old-school approach (using a separate element with a background image), which at the moment seemed to be the more lightweight and universal solution.
As for adjusting the slide styles (and depending on what styles you want to tweak), I'd recommend targeting the slide div itself:
If you want to target the shadow directly (to change the background image or tweak the styles):
(Obviously, you can also hide the drop-shadow element and apply the CSS box-shadow directly to the slide div if you prefer.)
If this is not enough, just let me know and I'll add the classes to the parallax-block element in the next release of the theme.
Regards,
Jordi
That's a good question. My first approach was to add the shadow directly to the slide div using the CSS box-shadow property.
However, some CSS properties such as "box-shadow" are pretty expensive in terms of performance (when scrolling the page). There are some good articles on Internet about that.
So after doing some testing, I opted for an old-school approach (using a separate element with a background image), which at the moment seemed to be the more lightweight and universal solution.
As for adjusting the slide styles (and depending on what styles you want to tweak), I'd recommend targeting the slide div itself:
// slides with no shadow .lss-slide.no-shadow { } // slides with shadow .lss-slide:not(.no-shadow) { }
If you want to target the shadow directly (to change the background image or tweak the styles):
//shadow .parallax-block .drop-shadow { }
(Obviously, you can also hide the drop-shadow element and apply the CSS box-shadow directly to the slide div if you prefer.)
If this is not enough, just let me know and I'll add the classes to the parallax-block element in the next release of the theme.
Regards,
Jordi
thanks for your quick response!
i came up with the following style to apply an inverse bottom shadow (looks like the slide below is casting the shadow to the slide above) and applied it directly to the slide using the ":after" pseudo element (which btw. is also displayed in the edit mode as opposed to your approach).
in case anyone else has a similar need, here the code:
i came up with the following style to apply an inverse bottom shadow (looks like the slide below is casting the shadow to the slide above) and applied it directly to the slide using the ":after" pseudo element (which btw. is also displayed in the edit mode as opposed to your approach).
in case anyone else has a similar need, here the code:
.lss-slide.shadow-bottom:after { display: block; width: 100%; height: 10px; position: absolute; bottom: 0px; left: 0px; background: url(/packages/theme_long_story_short/themes/long_story_short/img/drop-shadow.png) repeat-x 0 0 transparent; content: ""; -moz-transform: scaleY(-1); -ms-transform: scaleY(-1); -o-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); filter: FlipV;
Viewing 15 lines of 17 lines. View entire code block.
Thanks again for sharing :)
That's a functionality I wanted to add at some point (being able to disable the drop-shadow effect on some slides).
I've just released a new version of the theme that allows you to apply a class ("no-shadow") to any slide.
So if you update the theme through the dashboard, you should now be able to click on your content slides, select "Edit area design", click on the Gear Icon and choose the "no-shadow" custom class.
I've also added this to the Documentation:
http://www.concrete5.org/marketplace/themes/long-story-short1/tips-...
Regards,
Jordi