recentpopularlog in

piperh : background   58

How to create clipped, blurred background images in CSS | CodyHouse
How to apply blur effects to images using CSS filters, and how to confine these effects to specific image areas.
Here they've used it under overlaid text panels - nice
webdesign  web  design  css  filter  clip  blur  effect  image  img  background  bg 
april 2019 by piperh
Cool Backgrounds
interesting backgrounds: trianglify etc plus the web code for installing on a site
webdesign  web  design  graphic  background  image  colour  gradient  animated  generator  code 
january 2019 by piperh
How to Use SVG Patterns as Backgrounds
1st para: SVG patterns offer a more flexible approach to repeating a background image on a web page than CSS tiling. Let’s look at why that is, and how you can use them
webdesign  web  design  background  svg  css  pattern  image 
november 2018 by piperh
3 Ways to Create Angled Edges With SVG
they say: In this tutorial you’ll learn three ways to create easy angled edges using SVG.
webdesign  web  design  svg  angle  angled  edge  box  shape  background 
august 2018 by piperh
Drawing Images with CSS Gradients | CSS-Tricks
technique with code examples for drawing stuff using only css + html.
webdesign  web  design  css  html  draw  drawing  browser  background  code  coding 
july 2018 by piperh
Free customizable SVG Backgrounds
a set of svg patterns for backgrounds. Adjustable on the web page - colour, angle, opacity, scale, and generates the css
webdesign  web  design  background  svg  pattern  code  generator 
february 2018 by piperh
Up&Up | Higher Education Marketing Agency
higher ed marketing agency website. Uses a bg video on the home page
webdesign  web  design  inspiration  video  background  studio 
february 2018 by piperh
The "Blur Up" Technique for Loading Background Images | CSS-Tricks
article describing a technique to show first a blurry bg image while whole final image loads. Makes perceived loading time faster. Could be useful for page with large bg image
webdesign  web  design  image  load  loading  blur  blurred  technique  background  bg  performance 
january 2018 by piperh
CodePen - Image loading effects [background-size: 0, :before, :after]
Michal Niewitala says: Image loading effects [background-size: 0, :before, :after]
webdesign  web  design  effect  image  background  load  loading 
december 2017 by piperh
Building Better Backgrounds – Zack Krida – Medium
author says: Approaches to stacking css background images on mobile for improved readability, using object-fit and ES2015+
webdesign  web  design  mobile  css  image  img  background  background-image  stack  z-index  layer  responsive  object-fit  js  javascript  script 
july 2017 by piperh
CodePen - SVG encoded for background-image
a way tu use svg as background image that doesn't require an http request
webdesign  web  design  background-image  background  image  svg  code 
july 2017 by piperh
How to Apply CSS3 Transforms to Background Images — SitePoint
sitepoint article on transforming background images - scaling, skewing, rotating etc
webdesign  web  design  scale  skew  rotate  background  image  transform  element  pseudo 
june 2017 by piperh
When Large Isn't Large Enough: Designing With Hero Images – Smashing Magazine
smashing article about use of large images. On the face of it not useful for me but has some sensible things to say.
webdesign  web  design  graphic  hero  image  large  use  background  bleed  cover 
june 2017 by piperh
Daily Pen #80
Codepen demo of object-fit: cover; for inline videos and images
(like background-size:cover)
webdesign  web  design  video  image  background  object-fit  css  code 
june 2017 by piperh
How to Scale SVG | CSS-Tricks
thorough article showing how to reliably scale SVGs including in Explorer (Edge is OK) using svg as a background image and using the bottom-padding hack to maintain aspect ratio.
webdesign  web  design  svg  scale  inline  background  padding  hack  explorer  microsoft  ie  css  html  scaling 
june 2017 by piperh
Link with Gradient Underline · GitHub
use text shadow and background image to get an underline on a link. Only advantage seems to be to get descenders to have a white outline, so they look better where they pass over the underline
webdesign  web  design  css  text  shadow  underline  link  background  image  position 
may 2017 by piperh
text/ background contrast with mix-blend-mode #1
code pen showing fancy use of contrasting background to maintain legibility
webdesign  web  design  contrast  text  background  mix-blend  css  technique 
may 2017 by piperh
Laia Vinsac
Designer who emailed Tria on 8.3.17 to offer her services as diseñadora y ilustradora de estampados
designer  pattern  background  texture  illustrator  repeat  design  graphic 
march 2017 by piperh
Creating Non-Rectangular Headers | CSS-Tricks
css-tricks article on 4 methods for angled headers in css and svg and background image. The summary says best is svg.
There's a curious fill: usage that I didn't know about - not clear if it's usable
webdesign  web  design  css  non-rectanular  shape  angle  header  techniques  methods  code  coding  svg  background  border 
february 2017 by piperh
Scroll Header
Page header reduces and changes colour as you scroll down
webdesign  web  design  js  javascript  script  header  background  bg  size  scroll  change 
february 2017 by piperh
CSS Shorthand Syntax Considered an Anti-Pattern – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts
interesting article about how shorthand css can sometimes reset other properties with undesired or not-understood consequences. Be careful with shorthand
webdesign  web  design  css  shorthand  property  background  margin 
december 2016 by piperh
myNoise™ • Focus@Work • Relax@Home • Sleep@Night
site with lots of different background sounds. Sliders let you control and mix components. V impressive.
noise  sound  relax  relaxing  audio  effect  background  resource 
november 2016 by piperh
Hero Patterns
free vector svg backgrounds. The web page has nice slider control to try different colour combinations
web  graphic  design  background  svg  repeatable  repeat  vector  illustration  pattern  repeating  line 
october 2016 by piperh
the new code – Even Stevens: Using Round and Space in Repeated Background Images
article explaining css background: round; and space;
for different results of tiling bg images
webdesign  web  design  css  background  space  round  position  positioning  layout  image  code  coding 
october 2016 by piperh
CSS Sprites: What They Are, Why They're Cool, and How To Use Them | CSS-Tricks
overview of css sprite techniques. June 2017 - article is quite old but latest revision is 2015
webdesign  web  design  css  sprite  image  background  icon 
april 2016 by piperh
Should I use a video as a background? | CSS-Tricks
article considering pros and cons of full-screen background video. Also a bit of code and how to
webdesign  web  design  video  background  image  screen 
december 2015 by piperh
BGStock/jquery-background-video · GitHub
jQuery script that resolves a few background video issues - if you're loading jQuery anyway it's much easier than coding the solutions yourself. I particularly like that it lets you fade in the video, auto pause after xx seconds, and have a fallback jpg image.
webdesign  web  design  jQuery  js  javascript  video  background  script  image 
december 2015 by piperh
10 Guidelines for Better Website Background Videos
handy article about background videos, tips and best practice. Some good advice like 'put a textured overlay on top to disguise compression artifacts' (like medicolink does)
webdesign  web  design  video  background  guidelines  tips 
november 2015 by piperh
Free and Premium Website Background Videos - BG Stock
stock library of background videos. They supply necessary formats plus related css, js and html
webdesign  web  design  background  video  library  archive  stock  html5 
november 2015 by piperh
Subtle Patterns | Free textures for your next web project.
great library of patterns and textures, free to use, designed to be tiled for backgrounds. There's a pshop plugin if you used them a lot.
web  graphic  design  images  pattern  texture  library  archive  wallpaper  tile  background 
november 2015 by piperh
How To Do Knockout Text | CSS-Tricks
article on how to achieve image that shows through lettering. Techniques and browser support
webdesign  web  design  knockout  text  image  cutout  background  howto 
october 2015 by piperh
CSS Gradients with background-blend-mode
nice collections of css background blends showing possibilities and the code and how they look in unsupporting browsers
webdesign  web  design  background  blend  background-blend-mode  css  graphic 
september 2015 by piperh

Copy this bookmark:

to read