flov + css   225

Radial Gradient Recipes | CSS-Tricks
»Radial gradients are pretty dang cool. It's amazing we can paint the background of an element with them so easily. […] I figured I'd put together a page of reference examples, so if you know what you need but forget the syntax, it's easy to find that starter code example here.«
webdesign  css  graphics  reference  tutorial 
7 weeks ago by flov
Animate a Container on Mouse Over Using Perspective and Transform | CSS-Tricks
»I’ve been working on a website in which large pictures are displayed to the user. Instead of creating a typical lightbox effect (a zoom-in animation with a black overlay) for these large pictures, I decided to try and make something more interactive and fun. I ended up coding an image container that tilts as the user moves the mouse cursor above it.«
webdesign  css  javascript  fx  tutorial 
march 2018 by flov
Direction Aware Hover Effects | CSS-Tricks
»This is a particular design trick that never fails to catch people's eye! I don't know the exact history of who-thought-of-what first and all that, but I know I have seen a number of implementations of it over the years. I figured I'd round a few of them up here.«
css  webdesign  fx  tutorial  javascript 
february 2018 by flov
Font-display playground
»With the new font-display attribute, you can control the length of each of these periods, and what happens when one of them fails. There are 4 different values: block, swap, fallback and optional. There's also auto, which usually ends up being the same as block.«
webdesign  webdev  typography  font  css  tutorial  reference 
january 2018 by flov
Stylus – Add-ons for Firefox
»Redesign the web with Stylus, a user styles manager. Stylus allows you to easily install themes and skins for many popular sites.«
firefox  plugin/addon/extension  css  style/theme 
december 2017 by flov
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 
november 2017 by flov
GitHub - jawayang/Sketch-Base64-PNG-Export: sketch plugin for Export Data URI
»Sketch Export base64/png – A plugin for Sketch to export layers for css or html.«
sketchApp  image  encode  html  css  plugin/addon/extension 
july 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
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
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
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
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
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
CSS Almanac | CSS-Tricks
Great CSS reference on Chris Coyier’s CSS-Tricks.
webdesign  css  reference  tutorial 
december 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
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
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
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
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
»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
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
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
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
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
»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
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
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
»Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.«
framework  webdesign  html  css  mobile  responsive 
october 2013 by flov
Solved By Flexbox — Cleaner, hack-free CSS
»CSS has been lacking proper layout mechanisms for far too long. Transitions, animations, filters, all of these are great and useful additions to the language, but they don't address the major problems that Web developers have been complaining about for what seems like an eternity. Finally, thanks to Flexbox, we have a solution.«
framework  css  webdesign 
october 2013 by flov
WhatFont Tool - The easiest way to inspect fonts in webpages « Chengyin Liu
»What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that's too complicated. It should be just a click away. Hence I wrote WhatFont, with which you can easily get font information about the text you are hovering on.«
typography  font  css  google  chrome  plugin/addon/extension 
september 2013 by flov
Macaw | The code-savvy web design tool.
»Macaw provides the same flexibility as your favorite image editor but also writes semantic HTML and remarkably succinct CSS. It's time to expect more from a web design tool.«
macawApp  mac  software  webdesign  graphics  html  css  editor 
july 2013 by flov
How to proportionally scale images that have dimension attributes | 456 Berea Street
»Allowing images to scale along with their container is an important part of responsive web design (and was so even before the term “responsive web design” existed). It’s really quite easy…«
webdesign  image  css  tutorial 
june 2013 by flov
Designing for Breakpoints · An A List Apart Article
»Jeremy Keith notes that what happens between the breakpoints is just as important as the breakpoints themselves—perhaps even more so. While I agree with this, we do have to start somewhere. In a way, this part of the process reminds me of storyboarding, or creating animation keyframes, with the in-between frames being developed later. We’re going to do that here.«
webdesign  responsive  css  tutorial 
june 2013 by flov
BARREL | Text-align: Justify and RWD
»Did you know that one of the most powerful tools for fluid and responsive layout has been a native feature for every browser since HTML 4?«
webdesign  responsive  grid  css  html  tutorial 
june 2013 by flov
CSS3 Shapes
»Company logos created in pure CSS. «
webdesign  css  logo  icon  graphics 
june 2013 by flov
CSS Only Eye Icon - James Koster
»So for an upcoming WooCommerce extension I had to create an Eye icon. Must be easy to do with CSS alone right? Right.«
webdesign  icon  design  css  graphics 
may 2013 by flov
Slider with Sliding Backgrounds | CSS-Tricks
»Among the many super nice design features of the Yahoo! Weather app for iOS is the transition between city screens. The background image doesn't just move away as the screen moves from one screen to the next, the background image itself slides. It appears to be hiding some of the "old" screen and revealing more of the "new" screen those closer you have it to being in full view. Let's try and pull it off on the web.«
webdesign  fx  css  html  javascript  tutorial 
may 2013 by flov
Line Clampin' | CSS-Tricks
»You want X lines of text. Anything after that, gracefully cut off. That's "line clamping" and it is a perfectly legit desire. When you can count on text being a certain number of lines, you can create stronger and more reliable grids from the elements that contain that text, as well as achieve some symmetric aesthetic harmony. There are a couple of ways to get it done, none of them spectacular.«
webdesign  css  html  javascript  tutorial 
may 2013 by flov
Gradient Text | CSS-Tricks
»This is WebKit only, but is the cleanest way to accomplish it as the text remains editable and selectable web text.«
webdesign  css  typography  fx  tutorial 
april 2013 by flov
Using SVG | CSS-Tricks
»SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know.«
webdesign  webdev  svg  css  html  bestPractices  tutorial  icon  retina/hidpi  javascript 
march 2013 by flov
»A fresh mix of code snippets and tutorials.«
wordpress  html  css  jquery  htaccess  sourceCode  tutorial  reference 
december 2012 by flov
Eric's Archived Thoughts: Where to Avoid CSS Hyphenation
»There are some elements that you should avoid hyphenating. And since hyphens is an inherited property, it isn’t sufficient to set it for a limited number of elements and assume you’re done. You have to make sure you’ve turned it off for the elements that shouldn’t be hyphenated.«
webdesign  webdev  css  html  bestPractices  tutorial 
december 2012 by flov
Eric's Archived Thoughts: Should You Hyphenate?
»If you want hyphenation to work in a future-friendly way, you need a lang attribute. What older versions do will become of fading relevance. All of which raises a fairly important question: should you enable hyphenation?«
webdesign  webdev  css  html  bestPractices  tutorial 
december 2012 by flov
Sprite sheet animation with steps(). If you don’t... | simurai
»If you don’t wanna use gifs on your site and rather PNGs for better colors, but still be able to animate them, here an option: CSS keyframe animations have a property called animation-timing-function and one of the options is to use the steps() feature […]«
webdesign  css  fx  animation  tutorial 
december 2012 by flov
Responsive Column Layouts
»Typically, to create a column layout, you would need to add the first or last classes to reset the margin space and clear the float. Today I'm going to share a very simple CSS trick to create a responsive column layout using nth-of-type pseudo class.«
css  webdesign  responsive  tutorial 
november 2012 by flov
:nth Tester
»I put together a little nth-child tester page. There, you can type in equations and see the results of what it selects below.«
css  webtool  resource  reference 
october 2012 by flov
Three Line Menu Navicon | CSS-Tricks
»I quite like the three line symbol as a symbol to represent menus. If we have to pick one, I'm all for this one. We're going to look at the "how" to create this symbol in a bunch of different ways.«
webdesign  css  tutorial 
october 2012 by flov
Bricss - box-shadow vs filter: drop-shadow
»The big advantage of the drop-shadow filter is that it acknowledges the outline and transparency of an element.«
webdesign  css  tutorial 
october 2012 by flov
CSS Values | CSS Reference, Properties and Values, CSS3
Alex Jones: »A handy, search-driven CSS reference for properties and values.«
webdesign  css  reference  info  search 
september 2012 by flov
SOLID CSS | Blog | Miller Medeiros
»We should learn from the experience of other devs working in different domains, and apply into our own domain. Things like separation of concerns, modularity, encapsulation, DRY can (and should) be applied to large scale CSS projects as well.«
webdesign  css  organize  optimization  bestPractices 
september 2012 by flov
A List Apart: Articles: CSS Swag: Multi-Column Lists
»One of the minor holy grails of XHTML and CSS is to produce a single, semantically logical ordered list that wraps into vertical columns.«
webdesign  css  tutorial 
september 2012 by flov
internet explorer - Do CSS Gradients work in IE9? - Stack Overflow
Fantastic workaround technique for linaer gradients in IE9, by neave: Serve an SVG through a PHP file that gets the color stops when called.
webdesign  ie  css  tutorial  php  svg  graphics 
september 2012 by flov
Normalize.css: Make browsers render all elements more consistently.
»A modern, HTML5-ready alternative to CSS resets. Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.«
webdesign  webdev  css 
september 2012 by flov
CSS :target for Off-Screen Designs | CSS-Tricks
»The following is a guest post by Matty Collins. Matty wrote to me to share a little demo he cooked up which recreates the experience of using the Message app on an iPhone. Perhaps more interesting than the recreation of that UI is that the technique is very simple, requires no JavaScript […]«
css  webdesign  mobile  tutorial 
september 2012 by flov
Speed Up with CSS3 Gradients | CSS-Tricks
»[…] wide browser support makes using them for progressive enhancement all the more appealing. More good news, CSS3 gradients fall into the camp where you can specify fallbacks (i.e. images) so that browsers that don't support them just use the image instead.«
webdesign  css  webdev 
september 2012 by flov
The Shapes of CSS
»All of the below use only a single HTML element. Any kind of CSS goes, as long as it's supported in at least one browser.«
webdesign  css  demo  reference  webdev 
september 2012 by flov
Towards A Retina Web | Smashing Coding
»In the confines of Apple’s walled garden, popular native apps get updated with Retina graphics in a timely fashion, with the help of a solid SDK and a well-documented transition process. By contrast, the Web is a gargantuan mass whose very open nature makes the transition to higher-density displays slow and painful. In the absence of industry-wide standards to streamline the process, each Web designer and developer is left to ensure that their users are getting the best experience, regardless of the display they are using.«
webdesign  retina/hidpi  image  css  bestPractices  info  tutorial 
august 2012 by flov
CSS Hat turns Photoshop layer styles to CSS3 with a click - PSD CSS - Convert PSD to CSS3
»CSS Hat turns Photoshop layer styles to CSS3 with a click: Click on a layer designed with some layer styles. Copy to clipboard from CSS Hat plugin. Done.«
software  adobePhotoshop  plugin/addon/extension  psd  css  webdesign 
july 2012 by flov
Markupwand | Magically convert Photoshop designs to valid HTML markup
»Get clean code in minutes. No absolute positioning, no website-as-images. Minimal, maintainable markup. Uses Compass+SASS for maintainable CSS«
webtool  adobePhotoshop  psd  css  html  webdesign 
july 2012 by flov
CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts
»Hi there, I am Harry Roberts. I am a 21 year old web developer from the UK. I Tweet and write about web standards, typography, best practices and everything in between.«
css  webdesign  info  tutorial  blog  bestPractices 
july 2012 by flov
« earlier      
per page:    204080120160

related tags

accessibility  adblock  adobeIllustrator  adobePhotoshop  ajax  animation  apache  audio  bestPractices  blog  bloglines  browser  cakephp  cheatsheet  chrome  color  compression  conversion  css  custom  debug  demo  design  download  editor  emulation  encode  exhibition  favicon  firefox  flash  font  form  framework  fx  gallery  google  graphics  grid  gui  htaccess  html  html5  icon  ie  image  info  inspiration  interface  javascript  jquery  layout  library  lightbox  linklist  linux  logo  mac  macawApp  manual  microformats  mobile  mod_rewrite  mouse  opera  optimization  organize  php  player  plugin/addon/extension  podcast  process  programming  psd  reference  regularExpressions  resource  responsive  retina/hidpi  safari  sass/scss  script  search  server  sifr  sketchApp  software  sourceCode  style/theme  support  svg  tab  template  test  textmate  tutorial  typography  utility  video  webdesign  webdev  webtool  wiki  windows  wordpress 

Copy this bookmark: