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 7 years ago.
Improve this question
I'm working in a place that we have to use images as page structure, I would like to know how wrong it is, because in my eyes is very wrong and.. I can never make perfect the layout because of the difficulty to fix the correct content over the image.
Is there any right way to do this? Any course to teach me an easy way?
Example: http://bit.ly/1GILaQs
BG: http://bit.ly/1GILfDy
We need give support to IE8, so is more difficult.
Thanks
The goal should be to reduce that file size of that image because it is very large and takes a long time to load. And also to make the layout more flexible so that when you change something you don't have to open up an image editor and rearrange things.
I don't think it is possible to replicate what you have there exactly without using large images but what I would do is try and replace some elements with simpler more easily repeatable patterns. For example replacing the red background with a simpler symmetrical gradient and removing the shadows/folds from the white image. Then for the shampoo bottles you could use individual image tags and place them within your content.
Amanda, you can have a background image that can be repeated, the red part of the layout background. Then you can have a div with the white part.I believe that's the best you can have.
I don't believe there will be a magic way that will give you the layout flexibility you're looking for. You will have to work with Photoshop and adapt the content accordingly given the nature of the layout.
Code School offers some good courses, they have one about css that can help you on that: https://www.codeschool.com/courses/css-cross-country
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've been learning how to code for some time and I come to you because I'm stuck on the construction of an animation. I've been trying to figure out how to make it for two days (image attached) but it seems that I don't have the knowledge to build this animation alone. I've been looking in css but the revelation of a text at a fixed position is not possible with a moving element, and I don't master java script frameworks.
The animation starts with the right image (this is the default state), it then goes through the left image to then let appear only the orange background and the texts.
Animation description
What I can't manage to do is the progressive revelation of the text by this orange form (the two little bars are important and I want to keep them even if it's more complicated).
I simply don't know what to search on google to find the answer, nor if I should do it with css or js or a framework.
I don't necessarily want you to give me the code already pre-made but mostly a direction to exploit.
Thank you in advance for your answers.
You’ll might want to make an SVG shape, and then use clip-path to create a mask. These two articles work their way up to something like what you’re after:
https://css-tricks.com/clipping-masking-css/
https://css-tricks.com/animating-with-clip-path/
The SVG itself could be animated, or you might animate the clip-path property which is covered more in that second link.
Hope that’s helpful!
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 want to create a webpage with several small tiles that enlarge when clicked (And show more/different content, but that's not a part of this question).
This is what I have now: http://puu.sh/nX929.png
When I click on the first tile, it looks exactly like I want it to: http://puu.sh/nX9l9.png
But when I click the second tile it looks like this: http://puu.sh/nX95G.png (gap on the left)
That's not what I want, I want to other (small) tiles to float around it. To fill the empty space.
The source code (+ live example) can be found here (but I wouldn't mind doing it in a completely different way): https://www.crescendosassenheim.nl/Hugo/Training/
I don't even know what to Google, because I have absolutely no idea what kind of technique I can use to achieve what I want. Any suggestions?
http://masonry.desandro.com/methods.html Take a look at this I am sure this will help you, what you want is even displayed at the bottom of the page i am linking.
Download masonry in your computer link to it and follow the little guide in their website.
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 7 years ago.
Improve this question
I want to display 1000x1000 array in some way. Array element would either be black or white, depending on boolean value. For this job I am thinking about either javascript or winforms, but before I jump into, I wanted to hear what could be drawbacks for these choices. I am much more familiar with javascript than winforms though. As for winforms, I tought that there could be too many GDI objects to handle. Any ideas, suggestions?
I'm not familiar with win-forms but the first idea that came to mind was just a plain old html table. It would be a lot of html though to have 1000 x 1000. Second thing that came to mind would be an SVG. You can manipulate an SVG with JavaScript as shown here http://tutorials.jenkov.com/svg/scripting.html. Theres also this post which shows how to create tables with SVG.You would probably want to generate the SVG before hand to save the application from doing a lot of work and then set the colors using a loop. You can even use photoshop and save as SVG and then open the file in an editor to get the SVG code.
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
Soo, I have seen that I can use both javascript and css to resize my pictures to fit the browser.
Which one should I use, is there any pros / cons?
Would appreciate and example of what I could look like aswell.
Best regards
Lost boy
If you use JavaScript's resize event, there will always be some delay which could cause horizontal scrollbars to flicker on your page.
So use CSS. width:100% works perfectly.
I've voted to close, but regardless:
CSS. It's lighter weight, doesn't require javascript, runs without javascript enabled, and will render faster (javascript will have to wait for the image to load, while css will not).
It really depends on what you are doing.
If you just want an image that is 600px tall by 800px wide (or is 10% of the width of the browser, or fills the entire page), then use CSS.
If you are already doing things with javascript and want the images to adjust on another condition, then you can use javascript to resize them.
In short: if you already are using javascript, go ahead. If you aren't, CSS will do for most simple purposes.
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 3 years ago.
Improve this question
I want to create a image gallery using Html 5 Canvas and when I hover a image, it must grow and change opacity. In addition to image selectable and draggable?
How can I do this? Any ideas?
Well sir, first try to code anything and then come to ask for assistance with particular problem. For now it looks like you have no clue about subject and not even tried. I can anwser a question like how to manipulate opacity in canvas, how to implement drag and drop, etc...
but NOT I need someone to implement my whole idea for me
I should also point out that Canvas isn't probably the best technology for this task (in the meaning of both performance and implementation difficulty).
If you insist, you will have to rewrite all functionality which is already easily accessible with DOM and libraries like jQuery.