Web制作者が捗る！知識が増える2014年トレンドまとめ
作成：2014/06/9 Web制作 > トレンド感のある動きや、洗練された見え方を実現するために、知っておきたいことや方法など。Web制作の現場で知っておくべきことをまとめました。全部取り入れるのは無理ですが、押さえておくことで今以上に見栄えのするサイトを作れると思います。ここ最近のトレンドをおさらいしたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビューで使いたいエフェクト １．ロングシャドウ ２．ポリゴン ３．ラージフォトスタイル ４．ブラーエフェクト ５．フルスクリーン動画 ６．画像シーケンス 脱ビットマップ画像 ７．SVG ８．Webフォントを円で囲む 配色・フォント ９．配色(フラットデザイン) １０．タイポグラフィ(フラットデザイン) １１．フォント(フラットデザイン) 効果 １２．Infinite Scroll(無限スク
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
shine.js
var shine = new Shine(document.getElementById('my-shine-object')); window.addEventListener('mousemove', function(event) { shine.light.position.x = event.clientX; shine.light.position.y = event.clientY; shine.draw(); }, false); FeaturesDynamic light positionsCustomizable shadowsNo library dependencies, AMD compatibleUses text or box shadows based on contentWorks in browsers that support textShadow
CSS3 Animation Cheat Sheet - Justin Aguilar
How it works The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated. The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on all the latest browsers (that's IE 10). Using CSS3 @keyframes, you don't have to worry about posi
OriDomi - origami for the web
/* $$$$$$\ $$\ $$$$$$$\ $$\ $$ __$$\ \__|$$ __$$\ \__| $$ / $$ | $$$$$$\ $$\ $$ | $$ | $$$$$$\ $$$$$$\$$$$\ $$\ $$ | $$ |$$ __$$\ $$ |$$ | $$ |$$ __$$\ $$ _$$ _$$\ $$ | $$ | $$ |$$ | \__|$$ |$$ | $$ |$$ / $$ |$$ / $$ / $$ |$$ | $$ | $$ |$$ | $$ |$$ | $$ |$$ | $$ |$$ | $$ | $$ |$$ | $$$$$$ |$$ | $$ |$$$$$$$ |\$$$$$$ |$$ | $$ | $$ |$$ | \______/ \__| \__|\_______/ \______/ \__| \__| \__|\__| v. 1.0.
[CSS]くるっとして、ゆらゆらしてぴたっと止まる素敵アニメーションを備えたメニュー -CSS Swinging Panel Menu
ホバー時に、子アイテムが上からくるっとスイングして、ゆらゆら揺れて、ぴたっと止まって表示する素敵なアニメーションを備えたメニューを実装するスタイルシートを紹介します。 CSS Swinging Panel Menu ゆらゆらとした動きはCSS3アニメーションで実装されています。 スクリプトは実装には使用されていません。 HTML リスト要素を入れ子にしたシンプルな実装です。 <div id="container"> <ul id="menu"> <li><a href="#">item 1</a> <ul> <li><a href="#">item 1-1</a></li> <li><a href="#">item 1-2</a></li> <li><a href="#">item 1-3</a></li> </ul> </li> <li><a href="#">item 2</a> <u
Simple yet amazing CSS3 border transition effects
Description Some crazy effects with Border Transitions. Originally made by ksk1015. Pretty basic CSS3 code, but amazing output.
BookBlock: A Content Flip Plugin | Codrops
A jQuery plugin that will create a booklet-like component that let’s you navigate through its items by flipping the pages. BookBlock is a plugin that can be used for creating booklet-like components that allow a “page flip” navigation. Any content can be used, such as images or text. The plugin transforms the structure only when needed (i.e. when flipping a page) and uses some overlays as shadow f
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
HTML5で表現されたページフリップ | Branberyheag Lab
Google Chrome Team が作った「20 Things I Learned About Browsers and the Web」という素晴らしいサイトがあるんだけど、そのページをめくる感じがものすごくいい感じ。 これ、Canvas を使って表現されている。マウスイベントでアニメーションを使っているため、ロジック自体は複雑になっていると思う。 実は、これを自分でつくろうと思っているいろいろと試してみたけど、結局、駄目だった。（時間が切れ） これを今作っているサイトに取り入れようと思って、いろいろと試してみた。 このページめくりに関して、参考になる記事があったので、メモ。 「HTML5Rocks」にある、「Case Study: Page Flip Effect from 20thingsilearned.com 」という記事を見つけた。 これを使って、実際に作っているサ
Flip! A jQuery plugin
Flip is a jQuery plugin to apply flip animation to any element.0.4.1 Fixed some regression in Chrome and Safari 0.4 Fixed some bugs with transparent color. Now Flip! works on non-white backgrounds! 0.3 Added the content setting: now you can define the next content of your Flip!box. 0.2 Fixed jQuery chainability and buggy innerText rendering (Thanks xNephilimx for your tips!) 0.1 Kick off
Román Cortés » CSS 3D Meninas
Último proyecto completado: Chimeneas Rofer & Rodi Proyecto actual en curso: Arteforo (versión en castellano abajo) I’ve took the classic paint The Maids of Honour (Las Meninas) and made this CSS pseudo-3D/parallax effect. It is pure CSS, so no javascript or flash involved: only CSS and HTML code. It has been tested and it is working on Internet Explorer 8, Firefox 3, Opera 9, Safari 3, Chrome 4 a
Ireland
March 23rd to 30th, 2003 Click on pictures to enlarge and underlined items to view (3/24) Our tour � 15 people joined together by Bill and Judy Blackburn � began yesterday at BWI (some still recovering from our �kick-off dinner� at Bo Brooks the night before!)� Our 3:15 PM Delta flight arrived at the huge JFK airport at 4:00 � then we had a 4 � hour wait before leaving via Aer Lingus for Ireland.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
EZoApp | JQuery Mobile | JQueryMobile | JQM | Designer | JQM Designer | JQuery Mobile Designer | JQueryMobile Designer
Nacodes.com is for sale | HugeDomains
Webcam Swiper
[CSS]ユーザーを楽しませる気持ちいいエフェクトがたくさんあるCSS3のデモサイト -CSS3 Playground
知っておくと何かと応用が利くCSS3を使った表現テクニックいろいろ
CSS 20 stunning examples of CSS 3D transforms