flov + webdesign   414

Flexbox and Grids, your layout’s best friends
»We decided to debunk the myths around Flexbox & Grids in order to show you the power of these two technologies working together.«
webdesign  css  grid  tutorial  reference 
5 weeks ago by flov
Repeatable, Staggered Animation Three Ways: Sass, GSAP and Web Animations API | CSS-Tricks
»Staggered animation, also known as "follow through" or "overlapping action" is one of the twelve Disney principles of animation as defined by Ollie Johnston and Frank Thomas in their 1981 book "The Illusion of Life". At its core, the concept deals with animating objects in delayed succession to produce fluid motion. The technique doesn't only apply to cute character animations though. The Motion design aspect of a digital interface has significant implications on UX, user perception and "feel”.«
webdesign  animation  fx  tutorial 
july 2017 by flov
loading.io - Your SVG + GIF Ajax Loading Icons
»Build Your Ajax Loading Icons with SVG / CSS / GIF !«
webdesign  webtool  graphics  animation 
july 2017 by flov
Lightbox
»The original lightbox script. Eight years later — still going strong!«
webdesign  webdev  lightbox  image  jquery 
june 2017 by flov
Handling Long and Unexpected Content in CSS | CSS-Tricks
»When we write CSS, sometimes we forget about some edge cases in the designs. For example, when the content is longer than we expected and we didn't account for that possibility, our design could break. We can't guarantee that our CSS will always work as expected, but at least we can reduce that by testing different types of content. In this article, we will go through different UI bugs from real-world websites so we can account for them from the beginning. Ready? Let's go!«
webdesign  css  tutorial  bestPractices  reference 
june 2017 by flov
Building Production-Ready CSS Grid Layouts Today – Smashing Magazine
»Today, we are in the early stages of a revolutionary shift, brought about by CSS Grid Layout. Much of what we know of the possibilities, limitations and best practices surrounding web layouts is effectively rendered obsolete by this new layout module, and in their place we find new possibilities, limitations and best practices that will take us into the next era of web design.«
webdesign  css  grid  info  tutorial  reference 
june 2017 by flov
Vector icon speed runs
»It’s common to have to draw the same kinds of icons over and over — many different apps and websites use similar glyphs, but each instance typically needs to be tweaked for size and style, so they need to be redrawn. Due to this repetition, I’ve always been interested in trying to work out optimal ways to create them. This is to save time, but also as a fun challenge. I’ve explored the best way to create some common icons using Illustrator, but many of the techniques translate to other tools.«
design  graphics  gui  webdesign  vector  icon  process 
may 2017 by flov
Some Extremely Handy `:nth-child` Recipes as Sass Mixins | CSS-Tricks
»There is no such thing as one-size-fits-all styling. An image gallery with three images might need to be styled differently than an image gallery with twelve. There are some cool tricks that you can use to add some number-based logic to your CSS! Using :nth-child and :nth-last-child, you can get some surprisingly complex information without ever leaving your stylesheet.«
css  webdesign  tutorial  reference 
may 2017 by flov
Git to FTP deployment
»Dead simple Git to FTP-deployments for macOS. Use Git to upload only changed files to FTP servers.«
git  ftp  webdev  webdesign  software 
may 2017 by flov
transform | CSS-Tricks
»The transform property allows you to visually manipulate an element by skewing, rotating, translating, or scaling.«
webdesign  css  info  reference  tutorial 
april 2017 by flov
Debugging Tips and Tricks | CSS-Tricks
»Writing code is only one small piece of being a developer. In order to be efficient and capable at our jobs, we must also excel at debugging.«
webdesign  webdev  css  javascript  debug  tutorial  reference 
april 2017 by flov
Modernizr: the feature detection library for HTML5/CSS3
»Respond to your user’s browser features. – Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.«
webdesign  webdev  library  javascript  html  css 
april 2017 by flov
Validity - Chrome Web Store
»Validity can be used to quickly validate your HTML documents from the toolbar.«
google  chrome/chromium  plugin/addon/extension  html  webdesign  webdev 
april 2017 by flov
Getting Started with CSS Grid | CSS-Tricks
»But why is CSS Grid a big deal and why should we care? Well, CSS Grid is the first real layout system for the web. It's designed for organizing content both into columns and rows and it finally gives developers almost God-like control of the screens before us.«
webdesign  css  grid  reference  tutorial 
march 2017 by flov
Using CSS Transitions on Auto Dimensions | CSS-Tricks
»We've all been there. You've got an element you want to be able to collapse and expand smoothly using CSS transitions, but its expanded size needs to be content-dependent.«
webdesign  css  tutorial 
march 2017 by flov
Creating Non-Rectangular Headers | CSS-Tricks
»Over at Medium, Jon Moore recently identified "non-rectangular headers" as a tiny trend. A la: it's not crazy popular yet, but just you wait, kiddo. […] So let's beat the crowd, and talk about a few ways of coding these up. Because let's face it: they do look pretty awesome.«
webdesign  css  tutorial 
february 2017 by flov
CSS Typesetting Tool | Generate Beautiful CSS | Type Nugget
»We’re building Type Nugget - an online typesetting tool that gives you fine control over a robust base for hella fine web type - all via a pleasant user interface. […] Fully responsive and with relative units right out the gate, Type Nugget will generate semantically sound, browser compatible, maintainable, and accessible CSS ready to include in your site.«
webdesign  typography  css  webtool 
february 2017 by flov
ScrollMe - For simple scrolling effects
»ScrollMe is a jQuery plugin for adding simple scrolling effects to web pages. As you scroll down the page ScrollMe can scale, rotate, translate and change the opacity of elements on the page. It's easy to set up and not a single line of javascript is required.«
webdesign  webdev  fx  jquery  plugin/addon/extension 
february 2017 by flov
Clippy — CSS clip-path maker
»The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.
CSS Animations and transitions are possible with two or more clip-path shapes with the same number of points.«
css  graphics  webdesign  webtool 
january 2017 by flov
Hero Patterns - Repeatable SVG Background Patterns
»Hero Patterns – A collection of repeatable SVG background patterns for you to use on your digital projects.«
webdesign  pattern  texture  svg  resource 
january 2017 by flov
ScrollMagic ♥ Demo
»The javascript library for magical scroll interactions. ScrollMagic helps you to easily react to the user's current scroll position.«
webdesign  webdev  fx  jquery  javascript 
january 2017 by flov
Browser Width - Chrome Web Store
»Get and set your browser width. Good for testing responsive websites.«
webdesign  browser  google  chrome/chromium  plugin/addon/extension 
january 2017 by flov
Grid by Example
»The CSS Grid Layout specification is one of a few new specifications that are redefining how we approach layout for the web. Alongside Flexbox and the Box Alignment Module it will become part of a modern layout system for websites and web applications. This site is growing collection of examples and video, with the aim of helping people understand how Grid Layout works.«
webdesign  css  grid  tutorial  reference 
january 2017 by flov
Siema - Lightweight and simple carousel with no dependencies
»Siema is a lightweight (only 1kb gzipped) carousel plugin with no dependencies and no styling. As Brad Frost once said "do that shit yourself". It is 100% open source and available on Github. It is free to use on personal and commercial projects. Use it with your favourite module bundler or by manually injecting the script into your project.«
webdesign  webdev  carousel  image  fx 
december 2016 by flov
slick - the last carousel you'll ever need
»Fully responsive. Scales with its container. Separate settings per breakpoint. Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging. Infinite looping. Fully accessible with arrow key navigation. Add, remove, filter & unfilter slides. Autoplay, dots, arrows, callbacks, etc…«
webdesign  webdev  carousel  image  fx 
november 2016 by flov
Tools And Resources For Editing, Converting And Optimizing SVGs – Smashing Magazine
»To help you make best use of this potential and tackle SVGs the right way, this article will provide you with tools and resources to simplify editing, converting, optimizing, and delivering SVGs. We’ll take a look at what you can do to make your SVG code lean and performant, dive deeper into dealing with browser bugs, and provide tips for designing an icon system.«
webdesign  svg  graphics  info  tutorial  bestPractices 
april 2016 by flov
Basehold.it - quick, painless, javascript-free baseline overlays
»Baseline grids are super helpful for web designers, allowing us to maintain vertical rhythm on our designs. But short of a few Javascript bookmarklets, there isn't really a simple way to get a baseline grid overlay on our designs. Enter Basehold.it«
webdesign  typography  grid  baseline  javascript 
april 2016 by flov
The New Favicon • The Breakroom
»The recent release of Safari 9.0 brought a great new feature: pinned tabs. These tabs are locked to the lefthand side of your tab bar and stay in place, even when you open a new window or relaunch the browser. […] Anthony Piraino and I have been working on one for the Iconfactory and would like to share some of the things we learned.«
webdesign  icon  favicon  safari  tutorial  bestPractices 
december 2015 by flov
CSS Almanac | CSS-Tricks
Great CSS reference on Chris Coyier’s CSS-Tricks.
webdesign  css  reference  tutorial 
december 2015 by flov
PerfectPixel by WellDoneCode
»Start developing websites with per-pixel accuracy!«
browser  google  chrome  safari  plugin/addon/extension  webdesign  image  template  firefox 
june 2015 by flov
Javascript Toolsammlung / praegnanz.de
»Notiz: Hier der aktuelle Stand an empfehlenswerten UI-Frameworks, wie wir ihn aktuell nach Bedarf einsetzen.«
webdesign  webdev  javascript  jquery  resource  linklist 
june 2015 by flov
Magnific Popup: Responsive jQuery Lightbox Plugin
»Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device (for jQuery or Zepto.js).«
webdesign  webdev  lightbox  image  javascript  jquery 
june 2015 by flov
Understanding and Manually Improving SVG Optimization | CSS-Tricks
»Three factors determine the optimized file size of an SVG: physical dimension, viewBox, and decimal precision. Arbitrarily setting any one of them can cost you valuable bytes—even kilobytes.«
webdesign  graphics  svg  bestPractices  tutorial 
june 2015 by flov
Getting Dicey With Flexbox
»What if you could build complex CSS layouts in minutes? Flexbox is a new CSS layout spec that makes it easy to construct dynamic layouts. With flexbox, vertical centering, same-height columns, reordering, and direction agnosticism are a piece of cake.«
webdesign  css  tutorial 
june 2015 by flov
The Making Of "In Pieces"
»Web-based interactive experiences are widely used in the modern age for a variety of reasons, predominantly for the advertising of premium high-street products and services. After discovering the little-known clip-path property of CSS, I embarked upon a five-month interactive production journey of my own with a different purpose: to raise awareness of the struggles of 30 similarly little-known endangered species.«
webdesign  css  process  tutorial 
june 2015 by flov
Sites for Browsing Type Pairings | CSS-Tricks
»This week we'll do sites that are intended to help you choose fonts for your website by showcasing nice pairings (as not any two typefaces necessarily go together well).«
webdesign  design  typography  font  webtool  linklist 
may 2015 by flov
Transforms on SVG Elements | CSS-Tricks
»Just like HTML elements, SVG elements can be manipulated using transform functions. However, a lot of things don't work the same way on SVG elements as they do on HTML elements.«
webdesign  svg  graphics  css  animation  tutorial 
may 2015 by flov
A Complete Guide to SVG Fallbacks | CSS-Tricks
»Here at CSS-Tricks, there's a lot of information telling you how wonderful SVG is. And as much as we want to convince you that SVG is for Everybody, SVG isn't as widely used as we would like. In fact, some people still (literally) don't get SVG. […] If you want to give the 95% of users on modern browsers all the benefits of SVG, but still provide a functional experience for the others, you need a fallback plan.«
webdesign  svg  graphics  tutorial 
may 2015 by flov
Chaining Multiple Blend Modes | CSS-Tricks
»The background-blend-mode CSS property is nifty in lots of ways. It gives developers the ability to blend one background-image with its own background-color, or even with another background-image that's been applied to that very same element. […] What's extra interesting is that you can chain these blend modes together.«
webdesign  color  css  tutorial 
april 2015 by flov
SVG Cleaner | SourceForge.net
»Generally, SVG files produced by vector editors contain a lot of unused elements and attributes that just blow up their size without providing better visible quality. SVG Cleaner could help you to clean up your SVG files from unnecessary data.«
webdesign  graphics  svg  tool  mac  software 
april 2015 by flov
BLOKK font gives you a nice fill text for mock-ups and wireframing without the lorem ipsum. The new and better wireframing font.
»BLOKK fontBLOKK is a font for quick mock-ups and wireframing for clients who do not understand latin.«
webdesign  design  typography  font 
february 2015 by flov
Fun with line-height! | CSS-Tricks
»In this article we'll focus on some trickery. If you know (or can figure out) the exact value of line-height, you can do some neat stuff!«
webdesign  css  typography  tutorial 
february 2015 by flov
The Gooey Effect | CSS-Tricks
»A while ago, Chris wrote about Shape Blobbing in CSS. […] these days, playing around with SVG filters, I figured I could use them to get around most of the problems of a pure CSS approach. Here you can see a gooey menu I made to demonstrate the effect.«
webdesign  css  svg  animation  fx  tutorial 
february 2015 by flov
A Vision for Our Sass · An A List Apart Article
»[…] Yet alongside the wide-scale adoption of Sass (which I applaud), I’ve observed a steady decline in the quality of outputted CSS (which I bemoan). […] To see a way forward, let’s first examine some trouble spots.«
webdesign  sass/scss  css  bestPractices 
february 2015 by flov
Compositing And Blending In CSS
»Today, two main properties exist that allow us to blend elements and backround images by specifying one of 16 available blend modes.«
webdesign  css  color  image  info  tutorial 
february 2015 by flov
GluePrint - Visually Align with Ease
»Turn any mockup into a floating guide, and visually align pixels with ease.«
webdesign  graphics  tool  mac  software 
february 2015 by flov
littlebusters/Sketch-CSS-Sprite-Mixin · GitHub
»Sketch CSS Sprite Mixin – Generate a code of mixin for scss, less and stylus in Sketch 3. Code is copied to the clipboard when run the plugin. Sprites name are group layer name of top-level, and the Sprite image name is an Artboard name.«
sketchApp  plugin/addon/extension  css  webdesign  sass/scss 
january 2015 by flov
Google Web Fonts Typographic Project
»There are over 650 Google Fonts available for free. But, pairing typefaces isn’t easy and many of those fonts don’t work for typical websites. Part of the 25x52 initiative, this collaborative, ongoing project offers inspiration for using Google’s font library.«
webdesign  typography  google  font  inspiration 
january 2015 by flov
FrontLinks
»This is my (living) collection of front-end links. It's not complete by all means, in fact, there isn't any of the obvious ones, like Can I use or so. Just some links that I need occasionally but can't remember their names, so I saved them here for quick access. Also, they're somewhat randomly ordered.«
webdesign  webdev  html  css  javascript  reference 
november 2014 by flov
briangonzalez/fontprep · GitHub
»FontPrep – The missing font generator for Mac OSX. FontPrep takes your TTF and OTF font files and generates all of the respective font-formats for the web: WOFF, EOT, and SVG.«
webdesign  font  typography  mac  software 
september 2014 by flov
Designer's guide to DPI
»This guide is designed as a "get started" or introductory read for the starting to intermediate designer who wants to learn or get more knowledge about cross-DPI and cross-platform design from the very beginning.«
design  webdesign  retina/hidpi  reference  tutorial 
august 2014 by flov
A Compendium of SVG Information | CSS-Tricks
»A Compendium of SVG Information: A huge pile of information about SVG.«
webdesign  svg  graphics  reference  tutorial 
july 2014 by flov
SVG `text` and Small, Scalable, Accessible Typographic Designs | CSS-Tricks
»Let's say you designed something with custom fonts that was a little bit fancy. Perhaps a certain word is positioned between the ascenders of another word below it. Some text is kerned out below to match the width of that same word. This is something we might tell a graphic designer switching from print to web to avoid. It's too finicky. Too much touchy, unscalable absolute positioning. Too much risk from different font rendering behaviour. But with inline SVG, we can do it, and do it well.«
webdesign  typography  font  css  svg  tutorial 
may 2014 by flov
CodeKit: THE Mac App For Web Developers
»CodeKit helps you build websites faster and better.«
mac  software  webdesign  webdev  sass/scss  server  html  css 
may 2014 by flov
Open source CMS with a great API–ProcessWire CMF/CMS
»ProcessWire is a free PHP5 content management system and framework (open source CMS/CMF) built to save you time and work the way you do. Stop trying to bend other open source CMS platforms to your will – ProcessWire gives simpler and stronger control over your pages, fields, templates and markup at any scale.«
webdesign  webdev  cms  openSource 
may 2014 by flov
Designing and Building Websites With Macaw - Tuts+ Web Design Tutorials
»Macaw has been eagerly awaited since its Kickstarter campaign reached full funding back in November 2013. Pitched as the application which allows you to "stop writing code and start drawing it" Macaw promises to bring web design tools right up to date. Follow Adi Purdila as he introduces Macaw, examines its features and interface, then uses it to design and build a complete responsive website.«
macawApp  webdesign  tutorial  video 
april 2014 by flov
Łukasz Mazurek
Macaw tutorial videos by Łukasz Mazurek.
macawApp  webdesign  tutorial  video  youtube 
april 2014 by flov
Jesse Cohen
Macaw tutorial videos by Jesse Cohen.
macawApp  webdesign  tutorial  video  youtube 
april 2014 by flov
webtypetest.com - Try Google Web Fonts on any Site
»Type in your website address in the input form above and hit return to load the site. Try Google's free web fonts by choosing fonts for different text elements on your website via the dropdowns below. Click on the ¶ symbol to check out how to apply a font to your website permanently.«
webdesign  webtool  typography  google  font 
april 2014 by flov
colourcode - find your colour scheme
»Pick colours based on hsl. Scheme-mode with monochromatic, analogic, complement, triad and quad colours.«
design  webdesign  color  style/theme  editor  webtool 
march 2014 by flov
Basics of CSS Blend Modes | CSS-Tricks
»There are lots of designerly effects that we're used to seeing in static designs (thanks to Photoshop) that we don't see on the web much, with dynamic content. But that will change as CSS blend modes get more support. I'd like to look at the different ways of doing it, since it's not exactly cut and dry.«
webdesign  css  graphics  tutorial 
march 2014 by flov
Confused About REM and EM? | Jeremy Church
»REM can be confusing, especially without a solid understanding of its partner EM and their archvillain, the PX.«
webdesign  responsive  css  tutorial  reference 
february 2014 by flov
Frosted Glass Effect with Blur Filters and Masks | Viget
»Combining a blur effect and a mask to achieve a frosted glass effect is fairly straightforward in Photoshop.«
webdesign  graphics  fx  svg  css  tutorial 
february 2014 by flov
cssarrowplease
Handy little tool to generate CSS code for tooltip arrows (basically a triangle overlapping a container box).
webdesign  css  webtool  graphics 
february 2014 by flov
The Ten Most Popular Web Fonts of 2013 — Type & Grids
Khoi Vinh (Subtraction): »Designer Jeremiah Shoaf went through the sites featured last year at Typewolf, his superb design inspiration site, and came up with this list of the most popular web fonts used among them. It’s not a scientific list by any means, but it’s a useful insight into what some of the best designers were using last year.«
webdesign  typography  review  reference  info 
january 2014 by flov
CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More | CSS-Tricks
»I've fallen into the habit of creating CSS animations in my free time, inspired by things I come across during the day. To create the animations as I imagine them using as few elements as possible, I've found some tricks to make CSS do things you might not know it could do. I'd like to share them with you.«
webdesign  css  animation  tutorial 
january 2014 by flov
Bulletproof Accessible Icon Fonts | Filament Group, Inc., Boston, MA
»Care must be taken when implementing icon fonts to ensure a great experience for all users. What happens when your font doesn’t load? What happens when @font-face isn’t supported in the browser? We’ll show you how to implement bulletproof font icons.«
webdesign  icon  font  css  accessibility  bestPractices  tutorial 
january 2014 by flov
Colors
»A nicer color palette for the web. Introducing colors.css. A collection of several css skin classes to use while prototyping. Minified and gzipped it's a whopping 389 Bytes.«
webdesign  color  css 
january 2014 by flov
Page scroll to id – malihu | web design
»Page scroll to id is an easy-to-use jQuery plugin that enables animated page scrolling to specific id within the document. The plugin replaces the default browser behaviour of “jumping” to page sections when links with href value containing hash (#) are clicked, by smoothly animating the page to those sections.«
webdesign  webdev  jquery  plugin/addon/extension  animation 
january 2014 by flov
ANTETYPE - Visual Responsive Application Design Prototyping Software - Design more beautiful UIs faster
»The best way to design beautiful and responsive UIs for mobile apps, websites and enterprise software.«
gui  design  webdesign  mac  software  graphics 
december 2013 by flov
Favicons Next To External Links | CSS-Tricks
»[…] wanting to insert a favicon next to links and use only CSS to do it. Unfortunately I haven't found a way to do exactly that, but using some jQuery we can do it pretty easily.«
webdesign  webdev  favicon  jquery  css 
november 2013 by flov
Pattern Library | MailChimp
»Just to be clear, the MailChimp Pattern Library isn’t meant to be a UI framework like Bootstrap—it’s not a definitive guide on how a web application should be built. It’s tailored specifically to our needs, so if you attempt to use it as a foundation for a future project your mileage may vary. Many of the ideas in our library are a greatest hits collection of ideas others have pioneered that we’ve adapted to a new situation. Modify and mangle at will, but know this is not a supported system—it’s a learning library.«
webdesign  webdev  html  css  framework 
november 2013 by flov
Page Layers - Website Screenshots For Mac OS X
»Page Layers is a website screenshot app for Mac OS X. It converts web pages to Photoshop files with separate layers for all page elements. It enables you to open web pages in Photoshop and saves you lots of time when re-designing or improving existing web page designs.«
mac  software  graphics  web  psd  webdesign 
november 2013 by flov
Base64 Image Encoder
»You can upload images of different formats (jpg, png, gif) with a maximum filesize of 1,5 MB. Animated GIF is possible, too. The converted data is shown in different examples you can copy & paste for direct usage in your applications.«
webtool  conversion  image  css  webdesign  webdev 
november 2013 by flov
Tinted Images with Multiple Backgrounds | CSS-Tricks
»The background property in CSS can accept comma separated values. "Multiple" backgrounds, if you will. You can also think of them as layered backgrounds since they have a stacking order. If we layer a transparent color over an image, we can "tint" that image. But it's not quite as obvious as you might suspect.«
webdesign  css  image  tutorial 
november 2013 by flov
Animating DOM transitions
»I’ve always wondered if there’s a better way of doing transitions and, rather than hard coding positions, delegate layout to the browser. Inspired by Keynote’s Magic Move effect, I’ve made a little jQuery library to do transitions between DOM states.«
webdesign  animation  css  jquery 
november 2013 by flov
« earlier      
per page:    204080120160

related tags

accessibility  adobeIllustrator  adobePhotoshop  ajax  animation  apache  apple  art  audio  automation  baseline  bestPractices  blog  bonjour  bookmarklet  browser  cakephp  carousel  cheatsheet  chrome  chrome/chromium  cms  color  compression  conversion  css  culture  daily  debug  demo  design  download  editor  emulation  encyclopedia  exhibition  fashion  favicon  firefox  flash  font  form  forum  framework  free  ftp  fun  fx  gallery  german  git  google  graphicDesign  graphics  grid  gui  htaccess  html  html5  icon  ie  illustration  image  info  informationVisualization  inspiration  interface  ios  iPad  iPhone  japan  javascript  job  jquery  keyboard  layout  library  lightbox  linklist  linux  list  logo  mac  macawApp  manual  map  mobile  motionDesign  mouse  movie  openSource  opera  optimization  organize  pattern  pdf  photography  php  player  plugin/addon/extension  png  podcast  portal  portfolio  process  programming  project  proxy  psd  reference  resource  responsive  retina/hidpi  review  roundup  rss  safari  sass/scss  screenshot  search  server  sifr  sketchApp  snippet  software  sourceCode  statistics  style/theme  sublimeText2  support  svg  template  test  text  textmate  texture  tool  travel  tutorial  typography  url  vector  video  web  webdesign  webdev  webserver  webstandards  webtool  weekly  widget  wiki  windows  wireframe  wordpress  writing  youtube 

Copy this bookmark:



description:


tags: