I have two tricky issues that are intertwined. I have an inset box shadow vignette on four sides of a box but I have clickable images inside that I can’t click because the shadow/vignette is above the images (which are at z-index: -1). I read some about using the pointer-events: none but I think it is affecting everything in the box when I try to use it so it hasn’t worked. Any suggestions on how to make these images clickable but still behind the shadow?
Also, I’ve read through previous posts about scrolling speed with the box shadows. I’ve made it as small as possible but has anyone figured out how to make that go faster yet? I really like the look but the functionality doesn’t work if the scroll is going to be so slow.
Here are links to the site as constructed so far.
http://www.official-design.com/TEST_PROJECT.html
http://www.official-design.com/TEST_GRID.html
Please be nice – I am a novice at this – I’m an architect not a web designer. Any advice would be greatly appreciated.
Why do you have z-index: -1 for the links? Remove that and the links work fine, and the shadow is still visible.
I would also recommend applying the box shadow to the img or a elements directly, rather than the td that contains them.
Removing the negative z-index won't work with inset shadows. There are 3 things to do to achieve what you need:
Remove superfluous float: left from #makeMeScrollable
div.scrollableArea img rule. This is to ensure that the <a>
element wraps the image properly.
Remove box-shadow properties from .SHADOW rule.
Add the following CSS for your links:
.SHADOW a {
display: block;
-webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.25);
box-shadow: inset 2px 2px 4px rgba(0,0,0,0.25);
}
Note that I've used rgba value instead of #ccc, since the shadow will be overlaid on the image.
As a side note, there is no need to name classes in all caps. It decreases the readability.
Related
I have a block in my MailChimp email template something like this:
Latest news
[Introductory text]
[Repeatable news item]
[Link to all news on site]
The whole block is set to be mc:hideable, and the news item uses mc:repeatable.
The problem is that when I hover over the area inside the block but outside the news item, I see the eye icon to hide the whole block - it appears in the middle, over the news item. But when I move to click it, the news item's edit / repeat control appear and the block's hideable icon disappears!
Am I missing something? The only workaround I can think of at the moment is creating 3 blocks, the heading / intro (hideable), and the news item (repeatable, presumably that can be hidden by removing the default item), and the link. They'll each need the same background colour and to fit flush together to look like one block, and in order to hide the lot editors will have to remember to hide each part. Seems a bit long-winded.
Infuriating isn't it? Which is why I hacked Chimps own CSS by adding this to my template style tag CSS:
.tpl-hidewrap { left:auto !important; right:0 !important; }
Of course you could add different CSS to position it to suit your template, but it certainly worked for me, as the area to be hidden was wider than the repeating area.
Humans 1 Chimps 0 :)
KevAdamson's answer was a good starting point for me. I had to go one step further though:
.tpl-hidewrap {
left: 0 !important;
right: 0 !important;
display: block !important;
height: 100px !important;
text-align: center;
}
I want to have text that has a shadow/glow, but the problem is that the text itself is slightly transparent and the shadow shows through behind it, colouring the text.
color: rgba(226,229,226,0.88);
-webkit-text-stroke-width: .5px;
-webkit-text-stroke-color: #9c9c9c;
text-shadow: 0px 1px 29px #333;
Is there any CSS method that acheive this? box-shadow doesn't seem to affect the colouration of a slightly transparent item casting a shadow, so this behaviour is inconsistent (especially when you want text to have the same appearance as a box).
Here is a jsfiddle to explain what I'm talking about: http://jsfiddle.net/cutcopypaste/KzxrK/
You can add the exact same text, in your background color and same size and shape, behind your text.
Using something like this and respective CSS:
<h1>█</h1><h1 class="c1">█</h1>
EDIT: As shown here with your edited jsfiddle http://jsfiddle.net/KzxrK/2/
In the Google Web Toolkit Showcase, the Menu Bar example (http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwMenuBar) displays the menu bar's background as a gradient. However, when I use their css (clean.css from the gwt package), I get a solid background.
Does anyone know how to get the gradient? There are no explicit references to 'gradient' in their css file. FYI I'm testing this with iceweasel 3.5.15 (which is a essentially firefox 3.5.16).
thanks
It is not a gradient css style. Instead a background image is set hborder.png . You can see the style/background image as shown using Chrome Dev Tools or Firefox/Firebug
(The above comment is a bit illegible and I can't edit it).
hborder.png is specified in the css file, e.g.
.gwt-MenuBar-horizontal {
background: #e3e8f3 url(images/hborder.png) repeat-x 0px -2003px;
border: 1px solid #e0e0e0;
}
I would expect this to create the gradient, but it doesn't seem to be having any effect.
On an existing website, one block of text is displaying too large on an iPhone, and part of it is white. I've tested it on Android and on an iPad, which pushes the rest of the site down too far, so it doesn't line up with the background. It is the proper size on an iPad, but still showing up white. The text in question is in the top right corner on this page: http://www.ecodzign.com/waterfx2/index2.html
This is how it looks on an iphone:
I've disabled text scaling, and I've tried using inline css, with no effect. Only phone numbers are displaying white, so I assume the iphone is creating some sort of link to call those numbers with the phone, but regardless, that can't be white with a white background.
I apologize for the awful table design and lack of validation, but I'm simply not budgeted to redo the entire site properly. There are no validation errors that have to do with text or formatting, I doubt that has anything to do with what is going on.
This could be the difference between things like pt vs px vs % on your iOS device for that specific block.
After checking your code, I think this is it in fact:
font-family: Arial,Helvetica,sans-serif;
font-size: 8pt;
color: black;
font-weight: bold;
The font-size: 8pt I would bet is the culprit.
There looks to be a lot of inline CSS on the site.
What it you tried this
<span style="color:black !important;">702.233.3200</span>
utilizing the !important keyword.
That most likely has to do with the CSS of the website. Your best option would be to create a mobile friendly site or removing <span style='color:black;'> from the html that wraps these numbers.
I am happily using joomla but I can't find in any menu the function to delete generic article icon so I've changed it with a small one made of a single white pixel in png.
The effect is not lovely (you see a little space before the article title: www.aich-neuromed.it)...
How can I get rid of article icon in joomla?
Thanks!
It looks like you will need to change 2 lines of CSS in template.css
First, near line 384 romove the left padding for the headlines, you wont need it any more:
table.contentpaneopen td.contentheading {
padding-left: 34px;
}
You can just delete the whole thing.
Next, near line 376 you will need to remove the background image part of the CSS:
background: url(../images/contentheading_ico.png) left top no-repeat;
That should take care of it.