PUBLIC MARKS from sbrothier with tag css

Further, very few implementations take into account what are known in typography as descenders, or glyphs which extend below the text baseline. These include letters like g, j, p, q, y, and in some typefaces, numerals like 3, 4, 5, 7, and 9.

My article on using CSS to position HTML5 videos as fullscreen web page backgrounds has proven to be one of the most popular on this site, but the technique has a significant challenge in that it forces users to host their own videos, or to find a service to do so.

Simply put, CSSgram is a library for editing your images with Instagram-like filters directly in CSS. What we're doing here is adding filters to the images as well as applying color and/or gradient overlays via various blending techniques to mimic these effects.

The image-rendering CSS property provides a hint to the browser about the algorithm it should use to scale images. It applies to the element itself as well as any images supplied in other properties for the element. It has no effect on non-scaled images.

Framer is a new creative tool to build interaction and animation prototypes.

Just-add-water CSS animations

This post looks at a way to add a subtle noise effect to HTML elements using CSS. Using this technique is of interest because it doesn’t require use of an image editor, weighs in at just a little over 2K and doesn’t generate any extra HTTP requests.

control your sprites through a nice palette window simply change, rearrange and expand your sprites save your sprites including their settings within your Adobe Illustrator document and reuse/readjust it whenever you want to create multiple sprites in one single Adobe Illustrator document full control of positioning your graphics “Sprite CSS Generator” generates the entire sprite CSS code for you — just copy the code into your CSS file support of SVG, because it’s made for Adobe Illustrator “Sprite CSS Generator” optionally adds CSS code for fallback images export your graphics only once, instead of uploading, combining and rerendering the images with a loss of quality for many people, Adobe Illustrator is the best choice for designing websites, even if there is no perfect app for that

Layer Exporter lets you automatically export Illustrator layers to SVG, JPG or PNG files, along with coordinates data and HTML CSS files, with a single click. Think of it as a modest equivalent of Photoshop Asset Generator for Illustrator, with full HTML & CSS export. It's a free & open source extension panel for Adobe Illustrator CC, made with the creative cloud extensiblity helpers.

Automated workflow for front-end developers in one tasty bowl of code. Compiling, minifying, auto-refreshing, CSS prefixing, image sprites,…

Bennett Feely has been doing a good job of showing people the glory of CSS blend modes. 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.

Today, designer Val Head builds a demo to show us how to create great looking typography for all screen sizes and resolutions without a dev’s expert assistance and without a lot of complex code.

Get CSS, SVG, image assets, fonts, colors. All without Photoshop.

Now in Webflow you can create beautiful interactions for your responsive website without writing a line of code. Learn More or Start Designing.

The simplest way to turn on kerning is to use text-rendering: optimizeLegibility;, which, depending on the browser, will also enable other OpenType features. Like I said yesterday, though, that this isn’t an official CSS property and in theory could become unsupported at any time. It’s also been known to cause a few issues.

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...

This plugin allows you to tint/blend images using any specified color. It works kind of like the old palette-shifting approaches in old-school games, but you can effectively colourize an ig.Image or ig.AnimationSheet to any custom color.

Almost one year ago I wrote an article that dealt with an emerging WebKit CSS technique, the CSS filter effects, and the question if we could not have/emulate them in other browsers, too. Turned out we could. Today I want to talk about another WebKit-only feature and show you how you might be able to use it across all of the browsers: This is about…

Do you need a simple yet beautiful timeline to demonstrate the clients you worked for, recent achievements and events in your life in a chronological order? Your search ends here: let me introduce you to Timeline.css

Isotope: An exquisite jQuery plugin for magical layouts Features Layout modes: Intelligent, dynamic layouts that can’t be achieved with CSS alone. Filtering: Hide and reveal item elements easily with jQuery selectors. Sorting: Re-order item elements with sorting. Sorting data can be extracted from just about anything. Interoperability: features can be utilized together for a cohesive experience. Progressive enhancement: Isotope’s animation engine takes advantage of the best browser features when available — CSS transitions and transforms, GPU acceleration — but will also fall back to JavaScript animation for lesser browsers.

I recently tried to recreate the famous plasma effect that was often used in the demo scene. Since I didn't know a lot about it and how to achieve it I had to do some research first. I thought I'd write a little bit about what the effect is and how I ended up implementing it.