So, i got a Figma resouce and task for move it to website. I stucked with a trouble: My figma got very complex background. Different lines, shapes e.t.c. are included in background. So which is the best way to deal with? Should i just group all of these elements into single one and insert it as a single background image?
I need to move this background with different lines, which defined as separate elements in figma to website.
Breaking down a design concept / mockup into layers of images and HTML and CSS is a nuanced process, especially if the design is very rich.
I recommend studying these tutorials so that you can figure out the best strategy for converting your mockup into a professional and optimized HTML5 web page:
The 2020 HTML & CSS Crash Course - From Mockup to Product
Break Down and Integrate a Mockup
Now, with that said, here's how I would approach it:
The general gradient background should be rendered using CSS.
The circles, dot, and horizontal line coming from the circle, should be exported to SVG -or- transparent PNG. Position that PNG image over the CSS background. For that, I recommend checking this Stack Overflow question.
The numbers, being text with flat colors, should be implemented with floating divs, CSS, and WOFF fonts. I wouldn't export each number as separate images, because that's a very 90's old way of doing it, when HTML5 and CSS features were primitive. But this is up to you.
Rounded rectangles with transparent background that blurs anything behind them can be rendered with DIVS and CSS. The Cyrillic text is inside the DIVS. Check this Stack Overflow question for that.
I hope this helps!
Related
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 was wondering if there is an easy way to recreate the attached image using CSS3.
I've included this image as a page background but one of the senior devs told me there is an easy way to create this image background using CSS3.
I thought the background images can be done using CSS3 for repeatable patterns. But this image doesn't have any patterns that I could see.
Is that possible for this image?
I think this is interesting as experiment, but its not pragmatic.
You can convert an image to css here. PNGs work best.
Warning though, you will get tons of lines of HTML + CSS to create this image. It will come out pixel perfect though. I will also warn you that I tried uploading it to Jsfiddle, Jsbin and Codepen - all of them would just hang. Pen loaded and I couldn't save it since it's larger than 1MB.
This is what my text editor looks like with your image converted to CSS though.
This is just for reference. Yes, you can convert to CSS, but it doesn't mean that you should. I suppose it might be useful for things like email? But not for large images.
Cheers!
If creating a web graphic that's meant to be used in many places and overlaid on top of other elements, is it possible for the graphic to composite with whatever's beneath it -- like setting a Photoshop layer to be "Difference" -- such that its colors invert?
Specifically, picture a "Left" and "Right" image arrow that could be placed on top of an image carousel. Many images could appear beneath it and, if the arrows are lightly colored on a lightly colored image, they may be difficult to see. As such, an image whose color is the difference of what's behind it would turn dark on a light background.
I'm picturing doing this with an SVG, potentially, but if it could be accomplished with a png or other bitmap of sorts, that'd be neat too.
If you're on bleeding edge browsers you have the option of using CSS blend modes, see this tutorial.
For more details, see the specification, which covers html, svg and css.
yes it can, but the support is really poor if you want a CSS only solution. You had the inverse filter on IE versions and now you have Webkit support, but that's about it. However, you can use JQuery Invert plugin by Paul Irish. It does exactly what you want, and obviously has better support than CSS
I have a web template im working on, it was given to me as a psd but im a little confused. The width of the page is 1024 so when I export it and load it into html it has white space on the sides. Is there an easy way of dealing with so that the graphic spans the browser...?
Easy? That is somewhat subjective.
To span the width of the browser window, a design needs to either stretch (not a good idea as this introduces distortion and pixilation), tile (either in its entirety or just in part), or blend to a solid background (or another tiled image).
There isn't a quick fix.
I have graphs, reports or just plain text I want to place in a web page. Instead of sitting on the dull white background, I want them to have some containers around them. I can do plain color backgrounds but I was wondering if there are templates for containers with things like rounded corners, shaded containers, flexible gradients, drop shadow, ideas for partioning sections of a webpage.
Basically I want a resource that has a wealth of these things instead of me searching across tens of sites hoping to find something. I am a web developer not a designer so I need some ideas and help. While there are lots of whole page templates, I am more specific and want ideas for stuff similar to DotNetNuke containers. (Don't send me to DNN templates)
Actually if you want rounded corners, you CAN do it using CSS. Here's a good article on it:
http://www.devwebpro.com/25-rounded-corners-techniques-with-css/
Instead of looking around for graphics, why not create simple ones in Photoshop? All of these "partitions" for your website can easily be done by yourself either by using graphics you create or by some CSS. (i.e. for drop shadow, you can alter the borders)
If you're not into using Photoshop to create your own graphics, here are two sites for vector graphics--you'll have to dig around a bit.
http://www.vecteezy.com/
http://www.hongkiat.com/blog/50-websites-for-free-vector-images-download/