So... I have to make a working prototype of a website to customize your own cupcake. I really don't know how to make it. I got an image in my head of what I want, but I absolutely don't know how to get it to work.
So, my question is: Is it possible to have multiple image sliders overlap filled with png images so if you click the thumbnails you can build up an image consisting of changeable parts?
I already found some basic image sliders that I would like to use. The thumbnails for the sliders will be hidden in the various menus. Every menu stands for a changeable part of the cupcake, so the thing I want to create with all of the sliders is a personal cupcake.
I made the png files myself so I really hope this idea is possible, because I need this working thing for school and otherwise I really don't know what to do to make it work :X.
Related
I'm really new to HTML and I'm trying to make a small website for my art.
I was wondering if it's possible to have my background choose randomly from a set of GIFs for each tile and after one loop to randomly select another GIF. I'm specifically trying to have a unique GIF for each tile and wasn't sure how to even go about doing this since I only know how to make one GIF repeat across the entire background.
In case what I'm asking doesn't make sense, I'm attempting to have the background of my website look like the floor of an arcade. I didn't want to be the same few squiggles and shapes in a repeated pattern and thought it would be cool if instead each one changed into a separate squiggle/shape after a few seconds.
Thank you if you can help and sorry if this sounds at all silly or anything.
I tried looking into this elsewhere and just couldn't find anything I understood, so I thought to ask here.
This is mainly a question about the quality of logos/icons used in Websites. I create logos/icons using Illustrator but when I see icons on professional websites (see image and links), they look crisp like a text, with no blurriness. The edges are very clear. For example, please see this image, especially the search icon and the menu list icon:
This is my own Blog that has bad icons, the Logo and the Menu icon. Both of them are PNG images.
This is Entrepreneur website with awesome menu icon and search icon. If you check the Inspect Element for mobile site, you'll see that the search icon and menu icon are not images (I don't know actually the reality). It is using a pseudo element. How does it work? Maybe this has something to do with quality.
Same is true with TimeofIndia website. Here the menu icon is made using hr tag, so it's obviously great, but still the search icon is beyond understanding as it is using a pseudo element.
And another scenario is related to this Business Insider website's technique. I've seen it at most of the websites, especially Facebook like sites. They use a single image for all icons. How's it possible? If you don't understand please visit this website and check the URL of the menu and search icon's image. How's it done?
So first I would like to know how these things work? How these icons render?
Secondly why I'm not getting the quality like them? Should I stop using images like them? I'm asking this because I've tried exporting in many ways using Illustrator, with same dimensions as required, but still quality sucks. If you can see, in my own blog's (Blog) mobile site, the middle horizontal bar is blurred despite the original image looks awesome before upload. Why is that?
I think these are too many questions. I would appreciate if you can provide suitable links to understand these things fully, if explaining them here is not easy.
Thank you.
If I could, I'd give #marc-b five upvotes :) The first step, before coming to SO, should always be trying to solve the problem yourself. Then you can come to us with an on-topic question. Here, that first step is to right click on one of the icons you're interested in, and choose "inspect".
There are a couple questions here: what are some ways of making crisp images?, and what's the deal with having multiple images in one file? Both of those are very Googlable, but I'll give you a head start:
Two common ways to make images crisp are:
SVG (vector graphics - as an Illustrator user you already know about the difference between those and raster graphics, and why they're crisp. If not, google "vector raster difference")
2x images - the technique here is to make an image twice the final display size, and then use CSS to shrink it down. The in-browser scaling will have a crisper result that just displaying a 1x image.
Having more than one image in one is called a "sprite." You can have a raster sprite or an svg sprite.
Here's an intro to svg https://css-tricks.com/using-svg/, here's an intro to sprites https://css-tricks.com/css-sprites/, here's an intro to svg sprites https://css-tricks.com/svg-sprites-use-better-icon-fonts/, and here's an intro to the latest thing, srcset https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
I'm using a slideshow on my website, basic functions...left and right buttons.
For some of the images, it would be nice to have an additional viewing option, where there would be mini images to the right of the main slide show image, and if you click on an individual image, it would replace the main image with that.
My reasoning is, this is an art website, and for some works it would be nice to view it from a different angle.
Does anyone know any good examples of something like this?
For reference, this is what I'm more or less using at the moment: http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_self
Thank you for any help.
I have been working hard on assembling photos into a travel blog. Currently I am reading about how to make full page image carousels. The specific problem I have is this: I want to have an image carousel of 100 pictures. At different points in the blog I want the user to be able to enter the same carousel at different images in the sequence. Currently I have to duplicate the code for the 100 images at each point in the blog. I am trying to figure out how to refer to the same html from different parts of the web page. Here is an example:
https://bwanaaa.github.io/flicktest/
The first image is a full bleed cover. The next two galleries are the same gallery but different starting points. I had to list all 10 images in the html TWICE to achieve this. You can imagine how verbose the html gets if i have 50 images with 10 entry points.
Here is a codepen to experiment with:
http://codepen.io/littleredbowtie/pen/yNdOMQ
Is there a way to have a 'subroutine' in html?
This can't be resolved through HTML alone. You'll have to implement further JS functionality, or find a different plugin.
Here is a plugin that is closer to what you're looking for:
https://github.com/stylehatch/photoset-grid
Demo:
http://stylehatch.github.io/photoset-grid/
it makes a grid of photos, then you also add the lightbox functionality, whatever photo they click on, it will go to that photo in the photoset, and also have navigation icons comparable to a carousel.
I need a full-width image with labeled sections to link to individual pages. Any suggestions how to make this happen? The web site is built on WordPress, so if a plug-in will accomplish this that will work too. Method needs to be responsive and not break apart as viewport is reduced.
For example, Section 1 needs to link to the Section 1 page, etc.
See image at
Well, if you want to have something like that and responsive, you should cut the image in as many pieces as items you need, create an element for each piece and set the image as background. There rest is mediaqueries, maybe you can do it with bootstrap.
Also, try to go to the design community, as this is more related to design than anything else, and I don't think a Wordpress plugin exists for this.