How to build a nice Hamburger Button transition in Swift – robb.is
Hamburger buttons may have become somewhat of a cliché in interface design lately, but when I came across a particularly nice transition of a hamburger button on dribbble, I had to try and recreate it in code. Here's the original shot by the CreativeDash team: You'll notice how the top and bottom strokes of the hamburger form a X, while the middle one morphs into an outline. I knew this effect cou
Animating SVG Gradients - Designmodo
With Postcards Email Builder you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before. Free Email BuilderFree Email Templates Linear Gradients Linear gradients transition colors along a straight line. They are defined by specifying a starting and ending point, along with the colors
seen.js
source map | unminified javascript | full coffeescript seen.js has no dependencies. Licensed under Apache 2.0 To see what is new in this version, read the release notes. Demos Hello, World! Materials gallery Noisy Wave Patch Noisy Sphere Same Scene, Canvas vs. SVG Same Scene, Multiple Angles SVG Masks and Effects Text Depth of Field Audio Equalizer N-Body Gravity Simulation Mocap-Driven Skeleton 2
Page Loading Effects | Codrops
A set of creative page loading effects that use SVG animations with Snap.svg. The idea is to show an overlay with a interesting shape animation while new content gets loaded. If you have visited the brilliantly designed websites of Nicolas Zezuka and Active Theory you might have noticed the slick loading animations that happen before new content is displayed. This kind of loading style is quite tr
Animating SVG With CSS | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! There isn’t just one way to animate SVG. There is the <animate> tag that goes right into the SVG code. There are libraries that help with it like Snap.svg or SVG.js. We’re going to look at another way: using inline SVG (SVG code right inside HTML) and animating the parts right through CSS. I
Dynamically generated SVG through SASS + A 3D animated RGB cube! • Lea Verou
Dynamically generated SVG through SASS + A 3D animated RGB cube! Today, I was giving the opening keynote at Codemania in Auckland, New Zealand. It was a talk about color from a math/dev perspective. It went quite well, despite my complete lack of sleep. I mean that quite literally: I hadn’t slept all night. No, it wasn’t the jetlag or the nervousness that kept me up. It was my late minute decision
Fullscreen Overlay Effects | Codrops
Some simple and creative overlay styles and effects. From sliding the overlay into the viewport to using SVG morphing shapes, we explore some effects for fullscreen overlays. Today we’d like to share some inspiration on fullscreen overlay styles and effects with you. Like with any UI component, there are new trends and styles emerging and we’d like to try out some subtle, as well as fancy effects
Shape Hover Effect with SVG | Demo 1
Crystalline Soko radicchio bunya nuts gram dulse. View Cacophony Two greens tigernut soybean radish. View Languid Beetroot water spinach okra water. View Serene Water spinach arugula pea tatsoi. View Nebulous Pea horseradish azuki bean lettuce. View Iridescent A grape silver beet watercress potato. View Resonant Chickweed okra pea winter purslane. View Zenith Salsify taro catsear garlic gram. View
SVG Drawing Animation | Codrops
A little experiment that explores the usage of SVG line drawing animations to precede the appearance of graphics or website elements, simulating the loading of them. SVG is finally becoming a more utilized and fun website component. It’s really powerful and there are many creative possibilities for fun effects on a website using SVG. Today we’d like to share two experimental concepts with you that
SVG Icons Animated with CSS
<div class="wrapper"> <svg version="1.1" id="sun" class="climacon climacon_sun" viewBox="15 15 70 70"> <clipPath id="sunFillClip"> <path d="M0,0v100h100V0H0z M50.001,57.999c-4.417,0-8-3.582-8-7.999c0-4.418,3.582-7.999,8-7.999s7.998,3.581,7.998,7.999C57.999,54.417,54.418,57.999,50.001,57.999z"/> </clipPath> <g class="climacon_iconWrap climacon_iconWrap-sun"> <g class="climacon_componentWrap climaco
SVG Icons FTW | Codrops
Despite the growing popularity of SVG, its time around and excellent browser support, we have a lack of good vector icon approaches. It’s time to fill this gap and use SVG as icons in our web projects. A lot of great methodologies and principles arose making our CSS more and more modular, structured and flexible. But think about your icons. Using raster graphics for icons means that they are not m
SVG Tabs (Using An SVG Shape As Template) | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! An excellent feature of SVG is that you can define a shape (or set of shapes) once, and then use it multiple times throughout a page. You can even apply different fills and filters and whatnot to the different versions. SVG templating, if you will. Let’s see if we can put that to good use by
Pizza Pie Charts | Playground from ZURB
Creating responsive pie charts for any device is a piece of pie. Download Deliver pie charts to any device with Pizza. Your pie will be steaming hot with SVG so that it looks good on retina devices and HiDPI devices. And the pie will fit the width of your box — um, container — or can be given a max-width or max-height. Example Pizza is an easy to use plugin. It's built with our responsive framewor
Snap.svg - The JavaScript SVG library for the modern web.
Why SVG (and Snap)? SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM. Modern features for modern browsers Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking
RAWGraphs
Open sourceInspired by and built on top of open source projects. RAWGraphs is open to the community for contributions. A wide range of chartsAlmost 30 visual models to visualize quantities, hierarchies, time series and find insights in your data. Your data is safeEven though RAWGraphs is a web app, the data you insert will be processed only by your web browser.
Multiplane Design with SVGs and CSS 3D Transforms - Treehouse Blog
Recently I tweeted about my experimentations with an idea that I’m calling multiplane design. I’ve been experimenting with multi planing using 3D and SVGs: http://t.co/l4h1slT4jK Only works on desktop Chrome/Safari (for now). — Nick Pettit (@nickrp) August 4, 2013 Right now this experiment only works well in Chrome and Safari on the desktop; other browsers will have mixed results that I can’t acco
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
Iconic
Iconmelon.com
Dowling Martensen's Image Gallery - 3D Artist