Automatic shadow below each image block.
Permalink 1 user found helpful
For a client theme I'm designing, I have several images on the page that have a custom shadow underneath it (see attached image). I want the shadow to automatically appear underneath the image when adding a new image block, while the images are editable, and the shadow needs to re-size itself to the width of the image automatically.
what is the best way to do this?
Thanks in advance,
Devign.
what is the best way to do this?
Thanks in advance,
Devign.
Another way I do this sometimes is to simply click on the block and choose "Design." From here click on the "CSS" tab and add a class name in the text area marked "CSS Class Name(s)" You could add something like "className" and then go into your main.css stylesheet and add a class as ".className" with your css rules included. Once you upload the .css file this block should show the styles you want. Once the rule is created in the stylesheet all you really have to do is add the className to the "CSS Class Name(s)" text area.
The custom template method works just as well, but I figured I'd illustrate another option. I find that this option works well for creating responsive themes because if you use media queries you won't have to add these responsive rules in the template. For instance, if you want this shadow to drop for mobile devices you could simply add the rule to drop the shadow at a certain width right into your main stylesheet.
The custom template method works just as well, but I figured I'd illustrate another option. I find that this option works well for creating responsive themes because if you use media queries you won't have to add these responsive rules in the template. For instance, if you want this shadow to drop for mobile devices you could simply add the rule to drop the shadow at a certain width right into your main stylesheet.
Try adding this css:
.ccm-image-block{position: relative} .ccm-image-block:before, .ccm-image-block:after { z-index: -1; position: absolute; content: ""; bottom: 30px; left: 20px; width: 50%; top: 80%; width:60%; box-shadow: 0 15px 20px #333; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg);
Viewing 15 lines of 26 lines. View entire code block.
After a bit more thought, I tried making a template, as mentioned by John, which produced a better outcome.
So apply this css to your themes main style sheet:
Then drop the attached file into the top level blocks folder. After adding an image block, choose the 'Shadow' template. You can change the css to alter shadow to suit.
So apply this css to your themes main style sheet:
.shadow{position: relative} .ccm-image-block:before, .ccm-image-block:after { z-index: -1; position: absolute; content: ""; bottom: 20px; left: 20px; top: 90%; width:47%; background: rgba(0,0,0,0.53); box-shadow: 0 15px 20px #333; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg);
Viewing 15 lines of 26 lines. View entire code block.
Then drop the attached file into the top level blocks folder. After adding an image block, choose the 'Shadow' template. You can change the css to alter shadow to suit.
If you placed the css in view.css, so the zip contained:
/image/templates/shadow/view.php
/image/templates/shadow/view.css
That may make quite a neat little addon.
/image/templates/shadow/view.php
/image/templates/shadow/view.css
That may make quite a neat little addon.
Yes John, actually working on one that has several different css shadow effects.
Small schoolboy error with attachment, screws up blog with composer.
Use new attachment.
Use new attachment.
If you look through the howtos and documentation, there is plenty of information about creating custom block templates. Another topic to read is "overrides", which for views/templates are similar, but replace the original block view rather than offer an alternate template.
For a one-off, you can also insert css in the block design.