What's the best approach to achieve the following effect?
[Image Removed by Poster]
I need that text to wrap around the image, which should always be in the bottom right corner. Thanks.
you will not succeed on this with pure html/css but if javascript is an option for you might want to have a look at
http://code.google.com/p/jqslickwrap/
http://www.webappers.com/2008/01/10/css-text-wrapper-makes-hthml-text-wrap-in-shapes/
Unfortunately you won't be able to get text to wrap around an image like in publishing software and your example above. What you can do is set the image to float to the right or align to the right and assign margin left to it which will pad the text off of it.
Live example here: http://jsfiddle.net/2bjn3/
Actually is is possible if you're not opposed to non-semantic markup. Take a look at this working example:
http://jsfiddle.net/chprpipr/Zhz2v/
If you set the background image of the container to contain your portrait image, you can get pretty close to what you're looking for.
Sorry. HTML and CSS has some limitations. This cannot be achieved with CSS or HTML.
Related
Please have a look at the image. There is a black border in right side with text inside. How can I get this in css?
I would say use svg for this, use svg as background of container div, give content lot of margin top/left/right to make it fit.
Btw this design is most likely not gonna work on mobile so you have to figure out a decent alternative for that.
Here is a great website with weird CSS hard div: https://css-tricks.com/examples/ShapesOfCSS/
You'll see they did an egg, then you can modify the egg shape to try to get a similar shape like on the picture.
What you need to do is create a div with a class, then modify the div's shape and had a border on it.
I want to use HTML and display one large image.
On this large image I then wish to display multiple smaller images, all on different places and sizes.
I would prefer doing this using HTML only.
But, if this is not possible, Javascript or something like that is also an option... :-)
If anybody has any idea using PHP, that would also be great.
I have search the web and StackOverflow, and tried MANY possible solutions, but none of them allowed me to display one big image, and then display multiple other images on top of this big image.
Any help would be greatly appreciated.
Kind regards,
Michael
you can use a container div which will contain all the smaller images. You can set background of that particular div.
your html as
<div id="container">
</div>
and css as follows:
div#container{
background-image: url("image.jpg");
background-repeat:no-repeat;
height:100%;
}
Two alternatives:
defining the big image in as background using CSS, then you can put onto it whatever html markup you want to. Such backgorund can also be declared for elements like divs, not only for the whole page.
use absolut positioning inside your style definition. That way you can add big and small images to your markup and then position them on top of each other.
No javascript required for this and php has nothing to do with this.
You can position them as I have done in this JSFiddle: http://jsfiddle.net/xxUpk/
The top:-NNNpx is crude, you could use float and many other ways of positioning them. Also look into z-index to layer them.
you cannot overlay an image over another image in pure HTML only, but what you CAN do is re-locate a image's position onto another tag and just move it accordingly with css.
please see this example http://jsfiddle.net/7trcV/
what I'm trying to achieve is ability to put an arbitrary icon to the right of the text in a way that text width is limited. In the example I posted the problem with the second (short text) is - the icon is displayed detached from the text.
Any help is appreciated!
How's this? http://jsfiddle.net/7trcV/5/
I gave the .content a right padding and set the icon as it's background.
Ok, try this http://jsfiddle.net/7trcV/6/ it should have sorted out your underline issues. I'm not addressing the clickable icon because that's a completely different requirement from your original question.
Ok sorry i did not look at your code properly for the first time... problem here is absolutely positioned icon which need to be floated next to your spans like this: jsfiddle link
after you do this you must set max-width of that span to be width of container-width of icon... hope this will help
You could use javascript to find the width of the span, and have the icon positions right next to it.
Exmaple here: http://jsfiddle.net/peduarte/KCttp/
On an HTML page, you can make text flow around images with the CSS property "float". But this will only consider the image's rectangle, not transparent regions in the image. I now have an image that has large areas of full transparency, like for example a circular logo, and would like the text to flow around the circle contour of that logo, not the bounding rectangle. At least on the text-facing side of the image.
I know that CSS is probably not suitable for that task. But is there some workaround, like hidden divs or something that can achieve the same (or a similar) effect? Has somebody already seen such a thing?
I have written a PHP function for that now. It takes the PNG image and generates the <div> elements to make the text flow around another form than the image's rectangle. You can find the code here:
https://unclassified.software/source/shaped-image-flow
Update 2020/2021:
Now there is a CSS property for that: shape-outside. It can be given an image with transparency that will determine the outside shape to let the text flow around. If the visible image is already a PNG, the same image can be used for this CSS property. Additional margin can be added with shape-margin. Both are supported by anything except IE.
Example:
<img src="img/shape.png" style="shape-outside: url(img/shape.png); shape-margin: 1.5em;">
I really doubt you can do that easily without making a big mess, of tags, JavaScript or both. One way i can think is placing image on larger zindex and positioning div or divs behind it, and text would flow around them. It would be easiest to use smaller rectangle that excludes transparent areas. But then why not just crop/clip the image? Or you can try floating line height divs behind it, but I guess that it will get quite ugly pretty fast. Or you could try placing each line of text in span/div and positioning them manually or with js by calculating approximate shapes to those that are in the image. One other idea, of which I'm not sure: it might be possible do this using svg. But quick search does not show much promise ether.
Any way one more thing to consider, when doing something as experimental and complicated as this, in whatever way you do this, it will most likely be huge pain to make it work well across most browsers.
There is a css property that do just what you want
shape-outside include values of shapes you can use.
https://www.geeksforgeeks.org/how-to-wrap-the-text-around-an-image-using-html-and-css/
Just wondering how you would go about creating the effect as seen in the following image:
Image
The part i'd like to attempt to recreate is the gradient within the text field itself along with the line border surrounding the text box.
Thanks.
This can also be done using CSS3, reducing the need to load images. The problem, of course, is that it can become a little tricky cross-browser.
Heres a demo: Demo
Heres a tutorial on reproducing the demo: Tutorial
You can just set the CSS attributes on the input element in question. background-image for the gradient and border for the border.