Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm using src img to place a logo in the header section. What would the pros and cons be of placing the image in a < div > vs leaving it as a plain ol' img src?
I'm thinking that, for the most part, I should be able to apply the same properties (such as margin, class, ID, etc.) to both. Am I missing something?
Note: I'm not interested in a background-image since I consider the logo content.
tl;dr wrapping is always good thing, if you are going to maintain that code for long enough time.
because you can created very targeted css, show, hide could be easier, round corners and adding text for accessibility will be easier etc..
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I was going through different video tutorials and a few suggested to use ::before pseudo selector to apply background image.
Is there any specific reason to follow this trend?
It is really a personal preference. Using ::before and ::after pseudo elements in this case allows you to insert images without the need for adding extra html elements.
Here is an example by Bryan Robinson of its clever usage
You can see how it can be used to create a three layered image background with just a single html element.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Given that CSS components (buttons etc.) can be used apart from Bootstrap grid system, what are the actual advantages of using Bootstrap over CSS flex model?
I am asking this questions as I always have big problems with margin/padding in Bootstrap 3 as few pixels (15px or so) are added, preventing me to take advantage of the full width of a container. Also, if I try to manually sent the margin to 0 the whole layout is displaced (including outer containers)
One current disadvantage of using flex is that it doesn't work for IE9 or earlier. It's probably a bit soon to be dumping them yet.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
From my knowledge, there are 2 primary ways to insert images into HTMl.
You can either use the traditional image tag and add the image via the "src" attribute.
Or you can add the image as a background-image to a div tag via the background-image property.
Can someone explain some of the pros and cons of using either of these approaches? When would you use one or the other?
If your images are for designing reasons, your best of placing them as background. But when your images are part of your content, for example your website logo, or some illustration as an explanation to your text, you put it in with an img tag.
I would say use css to insert background images. From my experience it's more efficient and easier to read if you can keep all attributes of a div in one language. You can then edit them without switching screens in your editor, unless you plan to add some kind of user interface (javascript, jquery, etc.)
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm trying to apply CSS transition effect when an element comes to viewport (i.e. when user scrolls to it), but not before.
I already know how to use CSS transitions, but how do I apply them only when the element comes to viewport?
What it the best way of doing this? If there's some library's to simplify the task, I would be glad to know.
Give CSS3 Animate It a go, makes the whole process as simple as adding a few clases.
http://jackonthe.net/css3animateit/
Then you can just add the classes like this to get started.
<div class='animatedParent'>
<h2 class='animated bounceInDown'>It Works!</h2>
</div>
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am writing a mobile/web app which has coloured clickable and movable circles.
I am aware of the fact that I can draw them in two ways:
A div using border-radius
A <circle> in a <svg>
Now considering the fact that with svg I can take advantage of doing cool animations, why one over the other?
It seems to depend on what you're going to do with the circles.
If they're just buttons for a link, stick with a div, But if you're going to do all sorts of animation or create a game, I might go with SVG as it's more flexible but not supported by some old or mobile browsers.
I will update this answer with more info if you answer my question comment.