Turning an Image into CSS

How to convert an image to CSS

Try this http://spritegen.website-performance.org/ or http://spriteme.org/ convert your images to sprite and making CSS Sprite Generator

Can I convert an image to CSS3?

Make the white areas transparent (colour to alpha in GIMP)
Convert the image to a data URI (it's optional but it will make your site load faster)
Use the url in (2) as the background-image and use any background-color you want.

turning an image into css

If you have <div class="magic">, you could apply this style:

.magic { 
    width: 200px; 
    height: 50px; 
}
.magic:before {
    content: '.';
    float: left;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-left: 25px solid white;
    border-bottom: 25px solid transparent;
}

Change dimensions to your own taste. This trick is called CSS Triangle.

jsFiddle Demo

EDIT: Or a quick demo with a transparent arrow - here you basically use different border colors for the tricky borders and a way to move the arrow to the left - I used position: relative - so the div's background won't cover what is underneath.

Turning a background image into a link with CSS

If you are trying to use this as thumbnails, I recommend just using images instead of trying to set background images. When you are setting the background image, it isn't resizing the image, but showing a small 60x60px section of the image in the background. If the top left corner is white, that's what you are seeing. Instead of background image, try this:

<a href="https://www.facebook.com">
  <img id="fb" src="http://blog.addthiscdn.com/wp-content/uploads/2015/11/logo-facebook.png">
</a>

Here's a working codepen showing what I believe you are looking for. If this isn't exactly it, or there's a reason specifically you must use background image, let me know and i'll update my answer to reflect.

Can anyone Help me convert this image into HTML and CSS?

There you go:

<div style="height:150px;width:300px;border-radius:50px;border:1px solid black;padding:40px">
  <div style="font-size:30px;">Text</div>
  <div style="float:right;position:absolute;top:20px; left:200px;">
    <input type="button" value="button1" style="height:40px;width:90px;border-radius:30px;outline:none;border:1px solid black;color:white;background-color:#5dbb63;margin:5px;"><br>
    <input type="button" value="button2" style="height:40px;width:90px;border-radius:30px;outline:none;border:1px solid black;color:white;background-color:#5dbb63;margin:5px;"><br>
    <input type="button" value="button3" style="height:40px;width:90px;border-radius:30px;outline:none;border:1px solid black;color:white;background-color:#5dbb63;margin:5px;"><br>
    <input type="button" value="button4" style="height:40px;width:90px;border-radius:30px;outline:none;border:1px solid black;color:white;background-color:#5dbb63;margin:5px;">
</div>
<div style="float:right;position:absolute;top:100px; left:40px;">
    <input type="button" value="button5" style="height:40px;width:90px;border-radius:30px;outline:none;border:1px solid black;color:white;background-color:#5dbb63;margin:5px;">
</div>

How to crop a rectangular image into a square with CSS?

Assuming they do not have to be in IMG tags...

HTML:

<div class="thumb1">
</div>

CSS:

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1:hover { YOUR HOVER STYLES HERE }

EDIT: If the div needs to link somewhere just adjust HTML and Styles like so:

HTML:

<div class="thumb1">
<a href="#">Link</a>
</div>

CSS:

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1 a {
  display: block;
  width: 250px;
  height: 250px;
}

.thumb1 a:hover { YOUR HOVER STYLES HERE }

Note this could also be modified to be responsive, for example % widths and heights etc.

Change color of PNG image via CSS?

You can use filters with -webkit-filter and filter:
Filters are relatively new to browsers but supported in over 90% of browsers according to the following CanIUse table: https://caniuse.com/#feat=css-filters

You can change an image to grayscale, sepia and lot more (look at the example).

So you can now change the color of a PNG file with filters.

body {
    background-color:#03030a;
    min-width: 800px;
    min-height: 400px
}
img {
    width:20%;
    float:left; 
     margin:0;
}
/*Filter styles*/
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }

<!--- img src http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg -->
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="original">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="saturate" class="saturate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="contrast" class="contrast">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="brightness" class="brightness">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="blur" class="blur">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="invert" class="invert">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="sepia" class="sepia">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="opacity" class="rss opacity">

Easiest way to convert heavy image site to html/css/javascript?

Here are some advices that apply generally, with details and examples for your specific situation:

Use proper markup with nice semantics

Always embed whatever you are going to do in semantically correct HTML:

<header>
  <h1>Cactus</h1>
</header>
<div id="main">
  ...
</div>
<footer>
  <a href="#">Contact Us</a>
</footer>

Use text instead of images
Do not use images with text on them. Instead, use real text. This is mainly for SEO and accessibility (for example for blind visitors that use a screen-reader). If you do not want to stick with a default font like Helvetica, you can use Web Fonts via the CSS rule @font-face.
Examples: "Music Discovery", "Download the Mac App", "Download on the App Store"
Prefer CSS properties
Some effects can be done with CSS3: background gradients, box shadow, border radius and border images are great for styling. If you can achieve a similar result with CSS properties, prefer them to background images.
For example the "Download the Mac App" button is easy to do with CSS-only without images.
Minimize request count
Everything else needs to be an image. Each request costs time, so minimize the count. The background image is big, and i'd make that two images: One goes from the top to the headline "Getting started with Cactus". The second one starts at the bottom where "Discover how Cactus works" is written. In between those two images is just plain color, so use the CSS property background for that part.
Other images include icons and photos. Put all of them into one file (a sprite). If you are going to use Compass (i highly recommend it) there is a built-in tool that makes it supereasy to convert a set of image files into one big sprite with their corresponding CSS classes: Spriting with Compass
Optimize for mobile devices
If you are going to make your website responsible (= good looking and usable on every device), you need to put some more thought in the design differences.
There is less space on mobile devices, so the big background image can be smaller. That reduces page loading times, which is crucial on mobile devices.
Also, you may need to change the layout a bit, but your design seems quite compatible to smaller width if you create a sprite with smaller images.

CSS to turn image into black and white with no grays

You can use contrast(100) to make it fully black and white. You can always tone it down a bit and use a lower setting such as contrast(10).

.logo {   width: 100px;   height: 100px;   filter: grayscale(1) contrast(100) brightness(1);   mix-blend-mode: multiply;}

<img src="https://d2slcw3kip6qmk.cloudfront.net/marketing/blogs/press/8-tips-designing-logos-that-dont-suck/instagram-logo.png" class="logo" />