I have been trying to make this PSD using CSS?
So far I have reached this. Can I achieve this design using CSS3 or do I have to use old school background image method?
In short, yes this is possible with CSS alone (without CSS2 even), but I would urge you to use background images instead.
Ranting
The problem with doing CSS like this is shadows. The way it renders the triangle is just a border that is transparent on the diagonal sides. In other words, your shadow would still be a box and would not look the way you want it to.
I see this a lot with people starting to use CSS3. They normally want everything done dynamically instead of with background images. And once it's done, there's this slew of CSS that barely does anything aesthetically for the page. In reality, it only takes 10-15% of what they end up with to achieve the same effect with images.
There isn't any problem with background images, they aren't going out of style, and they certainly won't stop working any time soon. My advice, stick with background images for what needs an image, and save CSS3 for special effects. It sounds boring and old-school, but it works and is a whole lot easier.
This seems like a relatively simple CSS project; simple, here, being relative, as I've seen people make an animated Twitter Fail Whale with CSS alone.
What you're going to have to do for the triangle edges (which I assume is the tricky part for you), is use the CSS matrix transform (elaborated on at W3Schools), and then just use box-shadow for the borders, and box-shadow: inset for the inset effect. Afterwards, just use appropriate padding and text alignment to get the text centred in each part of the object.
EDIT
Consider using the before and after pseudo elements to achieve this. Alternatively, you can use two skewed <div>s stacked on top of eachother for each section; however, this wouldn't give you an attractive shadow.
I don't think it is possible with CSS alone. You will have to make use of background image. You will be able to create the tapered edge effect using :after and :before psuedo classes. But will face problem with the inside shadow.
I once tried to create a similar breadcrumb using css3 alone when I saw the breadcrumb in Google Help Center (which is similar, but using background image), but was not able to do it.
http://support.google.com/adsense/bin/answer.py?hl=en&answer=1354760
I tried to do it with CSS (:after and :before) pseudo elements, without adding any other html elements.
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 am looking for advice and possibly links to any tutorials which deal with styling CSS3 borders with images. I am looking to create a dynamic frame around a div that will expand to fit any image I place inside it:
I desire an effect similar to this:
[IMG]http://i60.tinypic.com/1zvykjl.png[/IMG]
You can see an article on border-image css3 property here. But i'm not sure, that you can accomplish your result because of differences between your images.
I am wondering how to make an angled element that acts as an arrow, attached to a tooltip. I've seen this done by Google Accounts, and I have attached a screenshot. It appears they are achieving this with a couple of span elements.
I can't figure out from their HTML/CSS how they did it... My only idea is to use a CSS3 rotation on a regular div, or an image, but I'm guessing there's a more basic way.
Can anyone give me a hint? I'm not looking for a full solution, I'm just stumped about how to approach it. Also it's not about the tooltip itself, it's about that angled element.
EDIT: Here's a related question. They are using transparent borders, border-radius and box-shadows?
You can create it using image or manipulated span, I know facebook create it using sprite image, google and twitter using styled span, just make border transparent except the bottom one. this is twitter:
this is a tutorial.
Hi I was trying to figure out how to create a border that fades into the background colour of a div and this is the only solution I could come up with.
I've googled around and it seems people suggest CSS3 but I was told it was still "under development" and not fully introduced in modern browsers, correct me if I'm wrong, probably am.
Anyway this is the solution I came up with, are there simpler ways of doing it or is this a reasonable approach?
Created numerous divs for each part of the border (as below), and set their background image according to the part of the border: http://i.imgur.com/sh6Z8.png
HTML & CSS: http://codeviewer.org/view/code:1e4f
(New to webdevelopment and stack overflow, sorry if I'm doing anything unorthodox, thanks).
So as Tim there already said it, if the width of your website is static, you can do something like that ( In fact even if css3 may be good option for your usage case This is super simple... )
http://jsfiddle.net/Xtw84/3/ - this is from a prior answer so the edges are not soft but the idea is the same. ( doesnt matter ) I also added image in the background so you can see how that would work. Theres no need.. actually makes no sense to slice the background image in half.
Heres a bit more stripped down version of it. http://jsfiddle.net/Xtw84/4/
With css3 i would do this with box-shadow and just expand the shadow as much as needed.
Is your layout going to be fluid? e.g. it will grow in width/height? If it isnt going to grow in width, then there is no reason that you can not just set the background image.
For what you are doing, I wouldn't use gradient borders and just stick with the images in the background.
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/