does anybody know if there's a way to create an CSS effect which looks like the light effect used for iPhone apps? I mean the upper, brighter part of the box.
Thanks,
Ron
Unfortunately since using :after and :before selectors on img elements is not covered by the specification, a pure CSS solution might not behave correctly:
This specification does not fully define the interaction of :before
and :after with replaced elements (such as IMG in HTML). This will be
defined in more detail in a future specification.
In the current versions of Chrome and Firefox, these selectors appear to be ignored and simply don't work on img elements.
Here's a solution with a small HTML wrapper that will fall back to not rendering when the CSS isn't supported. The container size needs to be specified here, but that could easily be set with JavaScript.
CSS
.shine {
width:223px;
height:223px;
position:relative;
overflow:hidden;
display:inline-block;
}
.shine:after {
width:150%;
height:100%;
position:absolute;
top:-45%;
left:-25%;
display:block;
content:"";
background:rgba(255,255,255,0.1);
border-radius:100%;
}
HTML
<span class="shine">
<img src="" alt="">
</span>
Result
To make this a little fancier, you could add a gradient background to .shine:after, but it works fine without to demonstrate the idea.
Here's a jsFiddle so you don't have to take my word for it.
I have never seen the effect you describe (would never use an iPhone) but I assume it is somehow animated?
Then you can do that in css if you use two images and blend them 'on hover'. You position the 'light icon' above the plain icon (typically using an :after pseudo selector in css) and control it's opacity value using a css :hover selector).
Related
I'd like to give broken/errored images some extra CSS:
img:error {
max-width: 20px;
max-height: 20px;
}
but that doesn't work. Is there a way with pure CSS to do this? Is there an img pseudo selector for this? Or even better: a dirty hack that works?
I've looked around, but nobody seems to be wondering =)
(Yes, I know JS can do it and I know how; no need to mention it.)
There is no way in CSS specs or drafts, but Firefox has a proprietary selector (pseudo-class) :-moz-broken. Its documentation is very concise and it says “intended for use mainly by theme developers”, but it can be used e.g. as follows:
:-moz-broken { outline: solid red }
:-moz-broken:after { content: " (broken image)" }
Although the documentation says that it “matches elements representing broken image links”, it actually matches broken images (an img element where the src attribute does not refer to an image), whether they are links or not. Presumably, “links” really means “references” here.
CSS 2.1 says: “This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.” But Selectors Level 3 (CSS3 Selectors) just says about them: “They are explained in CSS 2.1.” In practice, browsers handle them differently. Oddly enough, Firefox supports :-moz-broken:after but ignores :-moz-broken:before. It does not support either of these pseudo-elements for normal images, but img:after, too, is supported for a broken image (i.e., the specified content appears after the alt attribute value).
For this, you should use the alt attribute, wich shows up if link is broken and you can as well style background of image :
example:
img {
display:inline-block;
vertical-align:top;
min-height:50px;
min-width:300px;
line-height:50px;
text-align:center;
background:
linear-gradient(to bottom,
blue,
orange,
green);
font-size:2em;
box-shadow:inset 0 0 0 3px;
}
These style will be hidden when image is shown.
http://codepen.io/anon/pen/Kxipq
As you can see, we do not check for broken links, but offer alternative , usefull for blind people , searchengines, whatever , and some extra styles finishes it :)
some extra Image alt attribute best practices
<img src="not_found_image.png" onerror='this.style.display = "none"' />
from:
https://www.geeksforgeeks.org/how-to-hide-image-not-found-icon-when-source-image-is-not-found/
NO there is no :error pseudo class. This is a good site for a comprehensive list of what is available:
http://reference.sitepoint.com/css/css3psuedoclasses
July, 2015 EDIT/ADDITION:
(Thank you Rudie)
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
No. There is nothing in CSS selectors level 2.1 or level 3 that allows targeting an image like that.
This is close:
<style>
img[data-broken="true"] {
visibility: hidden;
}
</style>
<img src="none.webp" onerror="this.setAttribute('data-broken', 'true')">
Strictly speaking, it sill uses JavaScript. But the JS is self contained in the image HTML code.
My question is really simple, just what i am trying to do is :hover, :after and :before , i want hover anf after to embed in same element, check out my css code:-
#sidebar .widget li a:before:hover, #sidebar .widget li a.active:before {
background-position: 65% 65.7%;
}
Here the element have an icon in :before which i cnt remove or modify, and also i want to have an hover effect on it...
Any solution for this, my console doesn't show the hovering effect?
Interesting question. If you're able to show us a working example we could probably be of more help.
However, in theory there's nothing wrong with what you're attempting to do (although not all browsers will like it: particularly IE8 and below).
The important thing to understand here is that :hover is a pseudo-class, whereas :before is a pseudo-element.
Here's a quick excerpt from the standard (with thanks to this answer previously on Stack Overflow):
Pseudo-classes are allowed anywhere in selectors while pseudo-elements
may only be appended after the last simple selector of the selector.
The mistake you're making is in your syntax: the order that you're appending them.
Try this instead:
#sidebar .widget li a:hover:before,
#sidebar .widget li a.active:before {
background-position: 65% 65.7%;
}
That should do as you wish. However this isn't going to give you great cross-browser coverage, it's not something that all browsers support of have implemented.
A better approach would be to:
reset the :before element to nothing (overwrite the styles you can't access);
use a non-repeated background image on the anchor instead (to display the image), and padding-left to give the indentation;
You can then switch the background-image in whatever fashion you see fit using :hover on the anchor in your CSS.
This will give you far better cross-browser compatibility.
I have a seemingly simple html construct:
<div class="featured-image img-wrapper full-width">
<a href="http://localhost/wordpress/?p=26">
<img ... />
</a>
</div>
Now I want to target the a (which unfortunately does not have its own class), so I use this CSS
.img-wrapper a {
background-image:url(../images/bkgs/stripes_tiny_08.png);
background-repeat:repeat;
}
but nothing happens to this a element! It's certainly not the background image itself, also tried a simple color. The weird thing is: there is another, similar construct further up on the page and there the selector works!
Firebug shows the following CSS paths (the target a is at the end)
working: html.js body.single div#page.wrap div#main-container.container div#primary.site-content div#content article#post-26.post-26 div.featured-image a.img-link
not wrk: html.js body.single div#page.wrap div#main-container.container div#primary.site-content div#content aside#yarpp_widget-2.widget div.bloglist article.post div.three div.featured-image a
I'm out of ideas. Haven't found any overriding CSS declarations. Any idea how I can target that a?
EDIT: the target a contains an img which has a :hover opacity set. That way I can see that the background color works, not the background image however
Are you trying to do this effect? http://jsfiddle.net/r48ST/1/
[EDIT]: This is that effect http://jsfiddle.net/r48ST/2/ , just added some opacity on image. Also, put some transition effect on opacity an you have full effect.
remove img (if it's not transparent)
for conflicts:
put !important at the end of css instruction.
or try inline style.
Without specifying dimensions for your <a> tag, it will conform to the dimensions of the <img> tag that it contains. As such, any background image that you apply will be overlayed by the <img>. Putting repeat on only repeats the background image as many times ans it will fit (cropped or whole) within the element. If you give the element a width and a height greater than that of the image that it wraps you should see the background.
I hope this was the issue that you were facing. Otherwise, if you can post a bit more of your code or a demo we will be able to better help you.
EDIT: I just noticed your edit about the :hover opacity. What I suggest is that you change the styling to be more like this: a > img:hover { visibility: hidden; }
I have updated my code and made a fiddle which explains what I am trying to do. I had a similar question before but it did not reflect the fluidity of the template.
I have a totally fluid layout and I need to make a div display under another.
I want to do it with CSS and I'd prefer not to use javascript or jquery.
Here is the fiddle:
http://jsfiddle.net/sexywebteacher/7hCNC/20/
I was maybe unclear:
I am talking about the section1 and section2 divs in the fiddle
Do you think this can be done?
Thank you!
If both the height of the image and the text are variable, it's not particularly easy with pure CSS.
The height being variable rules out anything based on position: absolute, as in the answers you received to your previous similar question.
One option is to use the technique shown here: http://tanalin.com/en/articles/css-block-order/
It is possible to change vertical order of blocks on HTML page using
CSS table presentation using properties of display: table family.
Regardles of block order in HTML code, header (table-header-group) of
such table is displayed at the top of it, footer (display:
table-footer-group)—at the bottom, and table body
(table-row-group)—between header and footer.
This works in all modern browsers, and IE8 if you're careful. It does not work in IE6/7.
Here's your code using this technique: http://jsfiddle.net/thirtydot/7hCNC/35/
I have to admit that I've never used this technique on a production website, so please test thoroughly.
A different approach that will work in all browsers that support CSS3 2D transforms is to vertically flip the whole container, and then do the same to the "image" and the "text" elements. In browsers that do not support CSS3 transforms, everything will still work, but the "image" and "text" elements will be in their original order. In other words, it degrades nicely. It's probably possible to make this work in IE6-8 using filter, but that would make the text look horrible, so forget about it.
Here's your code using this technique: http://jsfiddle.net/thirtydot/7hCNC/36/
If none of these CSS methods are good enough, you'll have to use JavaScript.
However, I personally recommend that you just switch the order in the HTML. I doubt Google cares about it. In this case, I really doubt that bending over backwards to keep your HTML in the "optimum order" will have any meaningful SEO impact.
Add to floating div "clearfix" class where in CSS
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
For ex:
<div class="column clearfix">
...
</div>
You could either change the width to be exact width (or add it as min-width) and let them naturally fall under each other or simply clear which will force them under each other
eg
.clear {
clear:both;
}
your jsfiddle
Here is another example of clear. I like to use this in cases where the element after the clear is not always consistent. It uses the psuedo elements to place a space with the clear attribute.
.clear:after{
content:".";
line-height:0;
height:0;
display:block;
clear:both;
visibility:hidden;
}
Long time reader, first time poster asks:
After many weeks of google and forum trawling, I am still at a loss. I have a series of nested divs, some with ids, some with classes, and some with ids and classes.
It's XHTML strict, and validates.
Original code http://www.drewsonne.com/melonstack/?topic=brisbane
eg.
<div id="main">
<div class="rEntry" id="r1">
City of Brisbane<br>
<span id="rSum1" class="rSum">This is a website summary</span>
</div>
<div class="rEntry" id="r2">
City of Brisbane<br>
<span id="rSum2" class="rSum">This is a website summary as well</span>
</div>
... et cetera ...
</div>
For the purposes of testing, my CSS currently looks like this
.rEntry{
padding:10px;
margin:10px;
}
For the life of me, I can not get this style to work at all in IE6. If I change to #r1, #r2, or div the style is applied to the appropriate elements, but neither div.rEntry nor .rEntry will make the style stick. Does anyone know where I have gone wrong?
DJS.
Now, looking at the HTML at your provided link, I don't see any divs with the rEntry class. Then I realized, they were being generated dynamically. That reminded me that for IE6, when adding CSS classes through the DOM, you have to use the className property, not class. In other words, the IE6 DOM is not seeing that the divs are of class rEntry at all.
How are those divs being generated? If it's through your own code, you may want to try modifying the class AND className properties of your elements.
edit: It looks like it's in scripts/REsultsList.js. Try changing the line that says:
entry_div_element.setAttribute('class', 'rEntry');
to:
entry_div_element.setAttribute('class', 'rEntry');
entry_div_element.className = 'rEntry';
I have three pieces of advice:
Use a reset CSS (there are several of these around);
Use a DOCTYPE declaration, if you aren't already, to force IE into standards-compliant mode (well, as standards compliant as IE can be) instead of quirks mode. I usually use HTML 4.01 transitional for this but if you comply with strict, even better;
Qualify your styles with the element name.
For example:
div.rEntry {
padding:10px;
margin:10px;
}
The more specific a style is, the greater its importance in CSS for determining which one applies. You can see if thats the issue by testing it with !important:
div.rEntry{
padding:10px !important;
margin:10px !important;
}
If that fixes the issue then you've got other CSS that is taking precedence. I suspect this is the issue as #id selectors have a higher precedence than .class selectors, which is the behaviour you're seeing.
Note: I don't recommend using !important as a general rule, just to find issues with CSS precedence. Once identified, it's generally best to fix them the "right" way.
I just went to the "original code" link, and your CSS reads:
div.rEntry{
margin:10px !important;
} padding:10px !important;
It looks like your padding style is outside of the the bracket. Are you certain this isn't all just due to a typo?