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!
Related
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!
I have replaced a header logo image which was just text in an arc on the following website: Leeds Magic Circle
Disclaimer: I did not design or create this website I am just performing some small modifications to it.
The original image said "1919 - 2015" and needed updating, hence I chose SVG to replace it with a bit of javascript to update the date portion.
It looks good, however it doesn't scale down when the browser is reduced or viewed on a mobile device.
I need the SVG to fit the 800x116 which replaced the original image, but I need it to scale down too.
I am very new to playing with SVG and the answers on the web are somewhat confusing so hopefully someone here can help.
Also open to alternative methods to achieve this goal.
Thank you
I want to be able to take my kingdom of loathing signature that has this code:
<img src="http://sigs.kingdomofloathing.com/player_2192849/mode_bigsig/l1_clan/l2_clantitle/s1_level/s2_class/playerfeed_2192849_bigsig.gif" border="0" />
I want to take the white background of the image and make it transparent. The reason why I can't do this in an image editor is because these signatures update every once in awhile according to what you have been doing in the game.
The simple answer is that you can't do this with CSS and HTML.
Adding transparency to the element with CSS like Frank Tudor stated (via opacity) will affect the entire image.
So really you have three options:
Edit the image using design software like Photoshop, removing the
white bg and saving it out as a trans gif or png.
Utilize CSS opacity, but this will make the entire object transparent. If you're okay with that then this is probably the easiest solution.
Use a scripting language. As others stated you can technically edit images using certain scripting languages like PHP. This will be the most time-consuming/technical way to perform this task (depending on your coding skills).
Hopefully this helps.
If the images are being updated, then it's up to whatever code you are using to dynamically create those images. You should certainly be able to use transparency when creating the images, regardless of how they are made.
I recommend PNG rather than GIF, but either would work.
Post the code of however you generate the signature images, and someone can help you update it to use a transparent background.
There are advanced manipulation functions javascript in one case I remember opacity being used for transparency and in most server-side programming languages you can find image functions.
The problem you face (without an image editor) is that transparency is parameter of the image as it is saved out (and some image types look better than others when it comes to transparency).
You could try this...
Try adding an ID or Class to your IMG tag and this bit of code.
#IDgifThing {
opacity: 0.5; /* 50% transparent */
}
I have not tested it, but I hope it helps you or at least puts your mind in the right direction.
I am coding a WordPress theme from a design that has been provided to me. Each post (in the design) is on a background that looks like a piece of paper:
The issue is that (of course) I don't know how long each blog post will be. I want to slice and dice the image in such a way that it will repeat to fill the blog post div as needed, while still maintaining the look it was designed to have (including the rough edges with transparency, etc.)
I've considered several different ways of accomplishing this, like creating a top, kludged-repeatable middle, and bottom, but everything I've tried is pretty clunky and requires large (filesize) images.
I'm asking here in case there is some technique I should be using but don't know about. I'm having a hard time explaining to Google what I'm looking for, so I'd be grateful for even hints on what keywords to search for.
Might want to consider border images (though apparently no support from IE)
Nowadays, you can have multiple background images and/or gradients. (IE9 does support, but gradient support is all over the place in most browsers; you'd probably have to find a gradient generator like http://www.colorzilla.com/gradient-editor/ or use css3pie http://css3pie.com/demos/gradient-patterns/ (or both) Don't forget, because you can have multiple background images, you could create some effect with alpha transparency on your images as well.
You can't. There are two options for faking it.
Create a really long (large) image and assume that no post will go over a certain length.
Create a top and bottom image "cap" and repeat in the middle. You can make the repeating image large enough that it looks kind of random, but it really isn't.
The real solution is to go back to the designer and tell them this just isn't possible. A real-world solution would be to create a background image that fades to some solid color. That way you can define the background like background: #000 url('your-image.png') no-repeat center top; and have the image fade to black (or brown as indicated by your screenshot).
I got my colleague's web page together with and the css files and many images. I need to apply part of it to my jsp page. I have to admit that I didn't have any experience in handling css. Currently I am using GIMP2 to edit those 1-pixel-width background images. It's really the pain in the neck. I have to guess the proper image size, crop it a bit, then view it in the jsp... Do you have a better way to edit those 1-pixel-width images? Thanks in advance.
You might want to look into using Firebug add on for Firefox. There you can tweak the height of the graphics while looking at the page (yes, you need some knowledge about the DOM, CSS and Firebug to fully get this, but it's worth learning). Once you're happy with it, you open up your image editor and crop the image to that height.