This DOM object has no specific class selector applied to it, so I can't select it via CSS.
I could use some first-child hack or change the /apps/page/.Class/* files but I don't feel like either is a clean solution.
I want to have an image with some text in front of it.
Shall I modify the HTML of my page? I could also change the CSS of a markdown or text (app), but it doesn't feel like a tidy solution.
I also thought of having the image as a background pic, then life would be easy :)
What is the best solution?
Here is where I am:
Thanks!
You should create a html-1 content and apply some css to it.
Here are the files you should create with their [file types]:
content [html-1]
content/style.css [css-1]
content/style.css/background.png [image-1]
The content file should store your HTML:
<div class="-container">
<div class="-text">Hello world</div>
</div>
The style.css file could then apply the background image and make your text prettier:
.-container {
height: 400px;
background: url(background.png) no-repeat center center transparent;
}
.-text {
color: red;
font-size: 3em;
text-align: center
line-height: 400px;
}
(The image url will be expanded by the css-1 app.)
Related
I have a png with blue lines, a transparent background and nothing else. Is there a way in css to make the lines white?
CSS is used to modify the appearance of HTML. It cannot really affect an image directly. You could use two images of the same size, and use JavaScript to switch between them.
Here's one possible way to do this:
HTML
<body>
...
<div>
<image id="blue-img" class="currentFrame" src="/img/blue.png" />
<image id="white-img" class="hiddenFrame" src="/img/white.png" />
</div>
...
</body>
CSS
.currentFrame {
display: block;
}
.hiddenFrame {
display: none;
}
At this point, you could use the following JavaScript to hide one image and show the other. Because the images are the same size, and appear together in the HTML DOM, it will look like the images occupy the same space.
function changeFrame() {
removeClass("blue-img", "currentFrame");
addClass("blue-img, "hiddenFrame");
removeClass("white-img", "hiddenFrame");
addClass("white-img", "currentFrame");
}
// Add the given class to the DOM element with the given id
function addClass(id, class) {
...
}
// Remove the given class from the DOM element with the given id
function removeClass(id, class) {
...
}
The implementation of addClass and removeClass() functions are left as an exercise for the reader, but it can be much easier if you use jQuery or some other DOM API library.
You could also use the HTML5 <canvas> element, if you're not concerned about backwards compatibility, or if you need a transition animation. That would also involve some JavaScript coding.
You have at least 2 ways to achieve this effect
Option 1: Use the image as a mask
Here only the transparent part of the image is used, as a mask. If you apply it on a white element, the parts not masked will be white
.base {
width: 300px;
height: 200px;
background-color: yellow;
}
.test {
width: 300px;
height: 200px;
background-color: white;
-webkit-mask-image: url(http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png);
-webkit-mask-size: contain;
}
<div class="base">
<div class="test"></div>
</div>
Option 2: use a filter to change the color. For instance, use brightness(100)
.base {
width: 300px;
height: 200px;
background-color: yellow;
}
.test {
width: 300px;
height: 200px;
background-image: url(http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png);
background-size: contain;
-webkit-filter: brightness(100);
}
<div class="base">
<div class="test"></div>
</div>
However, both options have a limited support
Why don't you use the Canvas in HTML5 to create the image on user interface :-
it will give you more clarity as the images are created using px.
it will give you liberty to change in what every color, size you want as they are created using javascript .
How can I do similar responsive images? Like on this page.
http://pixelgrade.com/demos/border/
I was trying do this with css, but with no effects.
Thanks.
Use background-size:cover property
html, body{
height:100%;
}
.responsive_bg{
background:url("http://upload.wikimedia.org/wikipedia/commons/5/51/ShiFengWaterFall_002.jpg") no-repeat;
background-size:cover;
width:100%;
height:100%
}
DEMO
This image is set as a background-image. Do you have any code to share with us so we might help?
Basically, instead of writing the usual image:
<img src="this/cool/image.png" />
you would use a regular div that you size according to the responsive behavior you want to see:
<div style="background-image: url(this/cool/image.png)"></div>
and the CSS that comes with to style the image (background) itself:
div{
background-size:cover; // fills the div
background-position; 50% 50%; //centers the background
//add here some way to get your div to be the proper size for responsiveness
}
And of course, you use media-queries to add some more responsiveness to the whole shenanigan.
I want to add a image hover effect on only the div images not the whole html code. How do I do this?
Take a look at how to "nest" CSS selectors.
Here's an example. Is this what you need?
<div>
Image in a div
<img src="http://baconmockup.com/300/200" />
</div>
div img:hover {
border: 1px solid red;
}
You can see it live here.
I am writing a simple HTML5 application for iPad and I am looking for a simple jquery solution for page transition. I know you would recommend jQueryMobile but problem with that it uses ajax to loads next page in current page and then kicks off transition so css of the page that I m trying to load is getting disturbed see my question. I also tried this and this plugin was the thing that I was looking for but problem with this is that it is not working with iPad and also page flickers a lot while transition so I dropped this option. Another option I found is jQTouch but as far as I know jQTouch only works for transition effects to div, not sure how to use it for page transition.
What I want is that on click of Transition link in Transition index.html should get displayed with transition effects without flickering and css disturbance of index.html page.
Could someone please recommend me some plugins using which I can achieve page transitions without disturbing CSS while transitions.
Hopefully this works for you... the below solution worked for me although jQuery is needed:
First right after the body tag add this:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
Then add the style class for the div and image to your css:
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
And finally add this javascript to your page (preferably at the end of your page, before closing body tag of course):
<script language="javascript" type="text/javascript">
$(window).load(function() {
$('#loading').hide(); });
</script>
Then adjust the position of the loading image and the background color of the loading div via the style class.
This is it, works just fine. But of course you have to have an ajax-loader.gif somewhere.
Try AJAXLoad They have some great animated GIF's there.. :)
Does anyone know a way to get Firefox to crop the corners if the border radius of an image is set? It's containing element will work fine but I get ugly corners sticking out.
Any way to fix this without setting the image as a background image or processing it before I put it on my site?
Workaround: Set the image as the background of a container element, then add border radius on that element.
Does it not crop if you apply the border radius directly to the img element? There are known issues with -moz-border-radius as far as contained content is concerned.
--edit
OK, it doesn't crop img either. If your image is some sort of png/gif on a solid background you may be able to do something like this:
img {
border: 10px solid white;
-moz-border-radius: 10px;
}
But if you're trying to get rounded corners on a photo then it's not going to work in 3.5.
I think to have the answer but sorry for my english...
I resolved the question putting another div with border and no background color over the image.
#imageContainer {
-webkit-border-radius:10px
-moz-border-radius:10px;
z-index:1;
}
#borderContainer {
position:absolute;
border:1px solid #FFFFFF;
-webkit-border-radius:10px
-moz-border-radius:10px;
z-index:10;
}
Workaround: Set the image as the
background of a container element,
then add border radius on that
element.
This won't work unless the image is exactly the same size of the div. Unless you use the new css property in firefox 3.6 which allows for background image sizing, but hardly anyone is on 3.6 already.
So I agree with Alex, that is if you make the image the size of the div/other elm.
I don't think there is a way to use -moz-border-radius to directly round an image in FireFox. But you can simulate the rounded corners the old fashioned way, with extra markup.
So that looks like this:
<div id="container">
<img src="images/fubar.jpg" alt="situation normal" />
<div class="rounded lt"></div>
<div class="rounded rt"></div>
<div class="rounded lb"></div>
<div class="rounded rb"></div>
</div>
Then the CSS:
#container {position:relative;}
#container img {z-index:0;}
.rounded {position:absolute; z-index:1; width:20px; height:20px;}
.lt {background:url('images/rounded_LT.png') left top no-repeat;}
.rt {background:url('images/rounded_RT.png') right top no-repeat;}
.lb {background:url('images/rounded_LB.png') left bottom no-repeat;}
.rb {background:url('images/rounded_RB.png') right bottom no-repeat;}
The background images of the corners look sort of like a crescent moon, with transparency. This is a negative space technique, where you are allowing the image to show through where the corners have their transparency.
Div corners with PNG-24 backgrounds will work very nicely. If you can deal with the jagginess, you can use GIF backgrounds for IE6, or just remove background image entirely for square corners. Use conditional comments to serve the CSS to IE6.
.round_image_borders {
position:relative; // fix for IE8(others not tested)
z-index:1; // fix for IE8(others not tested)
width:114px;
height:114px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
behavior:url(border-radius.htc); // fix for IE8(others not tested)
}
I got the "border-radius.htc" script from this link:
http://code.google.com/p/curved-corner/
What it does it adds support for round corners for IE8. I also had to set position:relative and z-index, because otherwise the div(and the background image) would show under the desired div container in which the container(round_image_borders) div was put.
This works for:
FF 3.6.16
IE 8
Chrome 12.0
And yes, the image must have the same size as the div with the class round_image_borders. But this workaround is intended to be used with images that all have the same size.
If you use overflow: hidden it won't display the image corners sticking out.
Who knows, they still might be there, just hidden.
img {
overflow: hidden;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
Firefox does seem to clip a background image, so if you set an h1 background image and apply border-radius to that it will clip. (just verified in FF 3.6.12)