How to make a svg vector icons to inline css? - html

I honestly don't know anything about coding so I need help, I'm a graphic designer.
I recently did several icons and sent them as svg format, but they told me they needed them in "inline css"? I have no idea what that is other than maybe it has something to do with coding? can someone help me understand what is it and how do I do it?

Related

Layered Images for Email-specific HTML

I am looking for some insight on how to achieve a certain result with email-specific HTML+CSS. I've done some searching and I can't really find anything quite specific enough to fit my needs. I am a decently experienced front-end website designer/builder, but I am new to email HTML. My clients have always used a drag and drop service, but I want to be able to offer higher-quality email designs.
Here is an image that shows my desired outcome, with the green color being the background of the body of the email so that the shape just blocks out the correct parts of the image:
I know this might not be possible with the limited html/css that is required in email design, but if it is I'd love to see an example of it working or if anyone knows a good resource to learn the ins and outs of email code I'd really appreciate it.
My idea originally was to use image 1 as the background of a table, then the 2nd layer of the table, use image 2 as the background, or just add in the image inline with full width. I'd love to be able to put text positioned center, but again that might not be possible, I just don't know the limitations well.
Thanks!

CSS Border-Radius, but pixelated

I want to create a rounded border in CSS that looks pixelated when zoomed in.
This is what a rounded border looks like up close: http://imgur.com/zbNv8pB
And this is what I'm trying to make it look like: http://imgur.com/ODK6Cm3
This is a specific aesthetic that I'm trying to achieve with my site, but I could not find any tutorials on how to do this. What I want to know is if this is possible outside of going oldschool and using images. I'm sure anyone who wants to recreate old-fashioned looking webpages will find this useful, and there's an entire community of pixel-artists that would love to use this too.
The fact that I can find no help on this tells me it's either not possible or I'm literally the only person who cares about this. If it's the latter then that's a serious negligence on the part of this programming language, especially when this option is already available for images with image-rendering.

How to use after effect on website?

I'm learning after effect for animate a typography logo for my website. What format do I have to save and how can I integrate that in the HTML code?
Thanks and sorry for my english.
Ps: if you know better way to animate a font logo it will be appreciated.
Not sure why everyone is downvoting this...
All you need to do is turn your After Effects composition into a gif and place it in an <img> tag. You can search this on Google.
Example: https://cdn.dribbble.com/users/29591/screenshots/2354342/studio.gif

HTML UI input slider being pushed out of position

Hi guys, in the above image there is a screenshot of a UI I am working on for the purposes of a college assignment which involves manipulating the DOM using JQuery.
Currently I have the logic working and I am now trying to tidy my code and enhance the UI. I'm not sure if this is the correct place to ask this question as strictly speaking I do not think it is a programming issue but I thought I'd take my chances!
For some reason the slider in the image above is being pushed out of place and I have no idea why. Does anyone know what might be causing this??
The stylesheet is huge so I don't want to include it, unless you need to see a certain part.
Any help is much appreciated.
In the image the circle shows the slider trailing off the UI. The arrow points to where It should be located. The underlined slider is how it should also be appearing.

What is the best way to edit those 1 pixel background images?

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.