Hello guys!
How will you do this kind of border without image (look at the image at the top, blue piece of block), just css. The height is flexible. Any suggestion? IE10 support :)
I'm not sure if it is what you want, but maybe something like this?
UPDATE: sorry, but I cannot add the link, note can I embed the fiddle as I'm on a mobile and the editor will not let me do either...
jsfiddle.net/hXMLF/1229/
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.
Could anyone tell me if the scenario below would be achievable with HTML and CSS? My goal is to show the background-image of my HTML body through a clipped div.
Please bear in mind that the final website would be responsive (mobile-first), so the solution should allow the different positioning of the body background images upon resizing.
Basically: is there anyway to show a div as a cutout of the underlying div?
I thought about providing separate background images for each circle to show the illusion that the circles show the body background, but as the design is responsive, alignment issues would quickly occur.
Any insights? Please let me know if more data is necessary. Thanks in advance.
I think this is similar:
http://ask.webatall.com/html5/7619_transparent-half-circle-cut-out-of-a-div.html
and should help? Instead of the shape you'd have to use circles, but the principle should be the same.
Also, if it doesn't work a combination of 2 elements with half circles cut out could achieve the effect.
This answer does a similar thing with another shape:
http://www.samhohce.net/questions/30259780/onhover-button-cut-out-a-triangle-and-show-background
I'm looking for any working solution in IE8 for this little issue I'm having. For some reason css pie isn't working great on this server we are working on so we are having to use images for IE8 specific stylesheets to sort some quirks out.
On the right hand side there is a facebook panel that needs rounded corners, so far I have an image on the top of the panel to give it a rounded corner, but ideally we want rounded ones on the bottom too, but I just can't figure out how. Could anyone shed some light? Quick dirty fixes are welcome!
Image attached - see how it is in webkit compared to IE8:
http://i.imgur.com/0A9Ns2v.jpg
Thanks guys!
Edit: My solution was to add an extra div inside the parent. Thanks #Pete.
if you add an extra div inside your #block-facebook-pull-facebook-pull-default and then flip your /images/fb_top.jpg to create a bottom image, you can add the following style to the new div:
#block-facebook-pull-facebook-pull-default > div
{
background:url(../images/fb_bottom.jpg) left bottom no-repeat;
}
you then want to take all the padding off the parent div and put it onto the new div
What I want to achieve is located here: http://www.ppp-templates.de/tilability/ ..You see the left and right triangles near the slider, where the arrows are supposed to be...
right now I have that div set up here, with a white background http://teothemes.com/wp/. On that website a background image was used, but I want to do it via CSS
Something related is here, for the footer triangle: Make a CSS triangle with transparent background on a div with white bg image?
I tried to do the same thing, but it didn't work..
Any help is greatly appreciated.
The first thing you can do is create two squares with background same as the background of the website and then rotate them 45deg using transform: rotate(45deg) with vendor prefixes. Then just set the content div's overflow to hidden.
Something like this that I just created: http://cssdeck.com/labs/hggee4eg
Explaining the process here proved to be quite difficult, so I created a fiddle which goes through each of the steps needed to achieve this, each with a small legend.
Here's the fiddle - http://jsfiddle.net/NXmge/3/
EDIT
- I misunderstood the question. Here's the fiddle with the solution to the actual problem: http://jsfiddle.net/joplomacedo/UJyAY/
The previous fiddle still remains useful as it helps understand what I did with on the second fiddle. I'll also update my answer as soon as I can too directly include a general explanation of what I did.
Depending on what sort of cross-browser compatibility you are hopeing to achieve, there are a couple of different CSS3-type options that will allow you to rotate elements by 45 degrees.
However, the example you linked to just uses one large background image with the graphics already in-place: there's nothing achieve with CSS there at all apart from setting it as the container background.
Before to ask my question, take a look at this: http://db.tt/IdmsYZYS
I have some trouble with let black image touch the bottom, the top and the right side of the text box. So that in fact the black image will cover the whole right part of the spitted box.
I am using Wordpress. Maybe you have some tips for me. But just HTML code is also great.
Thansk a lot for helping me!
You can't set an element to have 100% height within a container that has a fluid height. You should try using the Faux Column technique, which solves your problem.