# web images **Playing with images and visuals on your site.** ## IMAGES IN HTML Basics of preparing and using images on the web. - [web image file formats](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types) - [webp file format](https://99designs.com/blog/tips/webp-image-format/) - [w3schools html images](https://www.w3schools.com/html/html_images.asp "opens in new tab") - [w3schools responsive web design images](https://www.w3schools.com/css/css_rwd_images.asp "opens in new tab") - [image tools for web developers](https://www.shopify.com/partners/blog/image-tools-for-web-developers-2017 "opens in new tab") - [tinypng for adding extra lossless compression](https://tinypng.com/) ## MORE ADVANCED IMAGE STUFF These are the more interesting things you can do with web graphics. - [CSS techniques to get image knockout (fit image to text similar to clipping in photoshop and illustrator)](https://css-tricks.com/css-techniques-and-effects-for-knockout-text/ "opens in new tab") - [interactive tool to fit images to shapes (similar to clipping masks in photoshop and illustrator)](https://bennettfeely.com/clippy/ "opens in new tab") - [put a gradient on your text](http://textgradient.com/ "opens in new tab") - [blend modes using css](https://www.w3schools.com/cssref/pr_background-blend-mode.asp "opens in new tab") - [more about css blend modes](https://getflywheel.com/layout/css-blend-modes/ "opens in new tab") - [interactive css duotone generator utilizing blend modes](https://cssduotone.com/ "opens in new tab") - [css filter playground to get some cool image effects](https://css-playground.com/view/39/css_filter_playground "opens in new tab") - [another cool filter generator](https://justcode.today/filters/) ## IMAGE HOVER EFFECTS Make things happen when you hover your mouse over an image. - [mage hover effects](https://www.hongkiat.com/blog/css-libraries-image-hover-effect/ "opens in new tab") - [image hover effects on codepen](https://codepen.io/search/pens?q=image%20hover&page=1&order=popularity&depth=everything&show_forks=false "opens in new tab") - [CSS image effects](https://freefrontend.com/css-image-effects/ "opens in new tab") ## BACKGROUND IMAGES IN CSS Set images to tile behind your content, including a few places to get really good images to use. - [3schools background images](https://www.w3schools.com/css/css_background.asp "opens in new tab") - [w3schools multiple backgrounds](https://www.w3schools.com/css/css3_backgrounds.asp "opens in new tab") - [css-tricks - background size](https://css-tricks.com/almanac/properties/b/background-size/ "opens in new tab") - [six revisions - responsive full background image](http://sixrevisions.com/css/responsive-background-image/ "opens in new tab") - [background blend modes](https://css-tricks.com/almanac/properties/b/background-blend-mode/ "opens in new tab") - [subtle patterns](https://www.toptal.com/designers/subtlepatterns/ "opens in new tab") - [create a seamless tile in photoshop](https://blogs.adobe.com/jkost/2015/01/how-to-create-a-seamless-pattern-tile-in-photoshop.html "opens in new tab") - [[web backgrounds|background images, patterns, texture resources]] ## BACKGROUND GRADIENTS Instead of using an image, just program a color gradient instead. - [ugradients](https://uigradients.com/#SunnyDays "opens in new tab") - [draggradients](http://elrumordelaluz.github.io/draGGradients/ "opens in new tab") - [webgradient](https://webgradients.com "opens in new tab") - [[web gradients]] - [gradient animation](https://www.gradient-animator.com/ "opens in new tab") - put your gradients in motion ## ICONS USING ICON FONT FAMILIES Icons instead of using images. These are quite powerful. - [3schools - css icons](https://www.w3schools.com/icons/default.asp "opens in new tab") - good breakdown with references ## FAVICONS Branding for your website! These are the little thumbnail images in your browser tab. - [how to do it](http://www.html.am/html-codes/image-codes/html-favicon-code.cfm "opens in new tab") - [generator](https://www.favicon-generator.org/ "opens in new tab") - [favicon generator](https://www.favicon.cc/ "opens in new tab") - [favomatic](http://www.favicomatic.com/ "opens in new tab") ## BORDER RADIUS Round the corners of your boxes. - [simple fancy border radius](https://9elements.github.io/fancy-border-radius/ "opens in new tab") - [complex fancy border radius](https://9elements.github.io/fancy-border-radius/full-control.html#64.54.55.42-58.46.35.29-. "opens in new tab") ## IMAGE GALLERY TOOLS Create full image galleries to show off your visual work. - [wow slider](http://wowslider.com/ "opens in new tab") - [w3schools - simple css image gallery](https://www.w3schools.com/Css/css_image_gallery.asp "opens in new tab") - [codrops gallery listing](https://tympanus.net/codrops/search/gallery/ "opens in new tab") - [codepen gallery listing](https://codepen.io/search/pens?q=gallery&limit=all&type=type-pens "opens in new tab") - [hongkiat responsive galleries](http://www.hongkiat.com/blog/free-responsive-image-gallery/ "opens in new tab") - [speckyboy css3 image galleries](https://speckyboy.com/10-pure-css3-image-galleries-and-sliders/ "opens in new tab") - [stylish web designer css image galleries](http://stylishwebdesigner.com/22-best-css-image-galleries/ "opens in new tab") --- tags: #web #resources home: [[! intro to web resources]]