I am working on a web page and I am trying to figure out the best way to put a border around the edge that is a image. So, is it best to use 8 divs as in one for each corner and side, or wrap the entire page in a div and use multiple backgrounds with css?
I now it can be done both ways, but which way is better. This would obviously be simpler if I was just using a simple border that is already available through just css, but frankly this is a image border.
basically using multiple backgrounds is good but the point is some users still stuck with browsers which doesn't support multiple backgrounds, so it depends on your visitors, so it's your call.
Related
I'm coding a transactional email template and it's intended to have a header with a bottom-border with an inverted border radius (see attached image).
Originally I've attempted this with a background image which works fine as long as: (1) The user allows for images to be downloaded, of course, and (2) Most importantly, the email is viewed in desktop because when fiddling with responsiveness (bellow 600px width) things get really messy.
With using an image I was trying to avoid using complex CSS code given the varied levels of support in email clients. However, I'm thinking that it may be a better option to avoid the issue with responsiveness.
I've seen different methods to achieve this curve. For example, over-imposing an absolute element at the bottom of the div with the overflow hidden and adjusting the border radius values there. Not sure, however, if it would worth the effort.
Could you help me find the best way to approach this problem having in mind the limitation of emails.
PS. I'd be OK with a non-curved bottom-border as a fall-back in cases where the client can't render border-radius appropriately.
I am currently working on a project that involves a background image that needs to be linked specifically to an element within a container div.
The link is: http://idearevolution.ca/clients/jab/
The challenge I am running into is that as I resize my screen the green circle doesn't stay behind the guy. I've run into issues with responsive background images having to work with elements within a contained area in the past, but I've never been happy with my solutions.
The last thing I tried was using Sass to run a loop, adding a media query to update the position every 10 - 20 pixels. I don't like this solution however because of the code bloat it generates.
I am wondering if anyone has run into this issue before and if so, how do you go about resolving it? I've tried a few things but I'm just not happy with any of the solutions.
Any help would be great.
Thanks,
Andrew
Semantics would fix this problem best.
The semantics of using an image is this:
If the Image does not add to the content and explanation of the site,
do not use the image.
So, in truth, this image looks like it should only be part of the design.
Therefore, use the CSS3 Feature of Multiple Backgrounds.
I have started work in a class for school where the professor give us a few images of a webpage and asks us to replicate it with certain constraints. The first assignment is to create the web page with nothing but HTML and CSS, I know the basics of both and was wondering this:
When faced with a font/shading of text what is the best way to go about replicating it in CSS? The title bar has some formatting that I do not know where to even begin replicating.
Secondly can you, with html, make a horizontal table and fill it with images?
The easiest way is to copy the site and stylesheet and perhaps javascript and say here it is, but that may be cheating :-)
When faced with a font/shading of text what is the best way to go about replicating it in CSS?
There is the text-shadow property, but not all browsers support it. You can always use images or just drop the text-shadow requirement.
The title bar has some formatting that I do not know where to even begin replicating.
Rightmouse clikc inspect element and see how it is done. This is for Chrome. For FF you would have to install FireBug.
Secondly can you, with html) make a horizontal table and fill it with images?
Yes you can and no you shouldn't. Tables should be used for tabular data and you are using it for layout. Use CSS and perhaps divs when needed.
When faced with a font/shading of text what is the best way to go about replicating it in CSS?
CSS3 provides several properties to deal with text formatting, such as text-shadow and #font-face.
Secondly can you (with html) make a horizontal table and fill it with images?
Yes, why not? If I understand you correctly, you're looking for a single row table, i.e., a single <tr> with <td>s inside, each one containing an <img> element. But beware: if you want the table just to layout the images side-by-side, it's bad practice. You should just add all <img> one after another, or use display: inline or inline-block, or use floats.
I am currently working on recreating Apple's iOS 5 Toggle Switch in HTML5 and CSS3. The key is that due to requirements, the composition cannot be made up of any images whatsoever. I have been able to achieve almost everything that I wanted, however there seems to be an issue with cropping the container box so that it only displays half of the toggle at a time.
Here's a screenshot to help explain what I mean:
Notice that the pink border (added only for development purposes) is rounded, but the content which extends past it seems to break out of the border-rounding. Can anyone suggest a suitable method by which I can prevent the content from expanding past the border-radius - effectively cropping the content of that div to fit inside the rounding?
I am currently thinking that this could be achieved using the -webkit-mask-box-image property, and image data URLs (for example somethin like: data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7). Is there a better solution, or can anyone offer help on creating these data URLs?
I hope that makes sense, and any help gratefully received.
Unfortunately I believe this is a design flaw with webkit. The content is never clipped to the border radius. As for base64 encoding, I've found this tool helpful
I have 6 images that makes a box. (for the borders, and corners), How would I put the images together and make it dynamic and get bigger when I put more content in it?
Either use a sliding doors approach (also see the follow up article) generalised to four way expansion, or put all your images back into one and investigate the border-image property.
If you want to support IE and older browsers then sliding doors is the way to go, if you're targeting smartphones then border-image will probably be OK.