Making iOS 7 squircles using CSS3
Description If you have noticed iOS 7 app icons, they are not normal squares with rounded corners. They are squircles which have properties of both a circle and a square. This demo is an attempt to achieve a similar effect using CSS3. Pseudo elements are used to create 2 fish eye shapes which are later clipped to make the sides of the suqare a bit curved.
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
吹き出し風CSSデザインをオープンソースで·CSS Arrow Please MOONGIFT
CSS Arrow PleaseはCSSだけで作成する吹き出しデザインをオンライン上で行えるサービスです。 Twitterをはじめコミュニケーションが基本のサービスで欲しくなるのが吹き出し風のデザインです。そんなデザインをオンラインで簡単に作成できるのがCSS Arrow Pleaseです。 トップページです。左に描かれている吹き出しデザインが右側のCSSで作成されています。 吹き出しの位置は上下左右から選べます。 色はカラーピッカーを使って自由に選択できます。 カスタマイズしたパターンです。 CSS Arrow Pleaseでは吹き出しの配置や色、線の太さなどを自由にカスタマイズできます。後は出来上がったスタイルをコピーして自分のサイトに組み込むだけです。 CSS Arrow PleaseはHTML/CSS製のオープンソース・ソフトウェア（MIT License）です。 MOONGIFT
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
30 Cool CSS Animations For Your Inspiration
CSS is one of the most versatile programming languages in popular use. From layouts and text effects to colour and size of your content, the possibilities are endless. One of the most interesting uses of CSS is to create animations. And this is what this post is all about. This post lists some of the most creative CSS animations you’ll find on the web. From transition effects to character animatio
Vertical accordion menu using jQuery and CSS3
thinsoldier If anyone needs this to allow multiple areas to be open at the same time just make this small change to the JS /*jQuery time*/ $(document).ready(function(){ $(“#accordian h3″).click(function(){ //slide up all the link lists // $(“#accordian ul ul”).slideUp(); //slide down the link list below the h3 clicked – only if its closed if(!$(this).next().is(“:visible”)) { $(this).next().slideDo
HTML5やCSS3を使った次世代表現を学ぶのに役立つコードサンプル
わずか280行程度のJavaScriptで作られ... / JavaScriptで作るいろいろな物理シミュレ... / JavaScriptによる波の物理シミュレーショ...他...全14件
How to Create a CSS3 Dropdown Menu
Step 1 – HTML Markup We will create an unordered list with a list item and an anchor tag for each menu link. To create the sub menu add another unordered list inside of the list. <ul class="menu"> <li><a href="#">My dashboard</a></li> <li><a href="#">Likes</a></li> <li><a href="#">Views</a> <ul> <li><a href="#" class="documents">Documents</a></li> <li><a href="#" class="messages">Messages</a></li>
OriDomi - origami for the web
/* $$$$$$\ $$\ $$$$$$$\ $$\ $$ __$$\ \__|$$ __$$\ \__| $$ / $$ | $$$$$$\ $$\ $$ | $$ | $$$$$$\ $$$$$$\$$$$\ $$\ $$ | $$ |$$ __$$\ $$ |$$ | $$ |$$ __$$\ $$ _$$ _$$\ $$ | $$ | $$ |$$ | \__|$$ |$$ | $$ |$$ / $$ |$$ / $$ / $$ |$$ | $$ | $$ |$$ | $$ |$$ | $$ |$$ | $$ |$$ | $$ | $$ |$$ | $$$$$$ |$$ | $$ |$$$$$$$ |\$$$$$$ |$$ | $$ | $$ |$$ | \______/ \__| \__|\_______/ \______/ \__| \__| \__|\__| v. 1.0.
CSS Filters
Demo showing CSS Filter Effects 1.0, specifically the filter functions, which are being implemented in Webkit. In Webkit, filters can be applied to hw accelerated content ( e.g. img { transform: translateZ(0); } ). Support: Chrome 18.0.976.0, Webkit nightly -webkit-filter: none; blur grayscale drop-shadow sepia brightness contrast hue-rotate invert saturate opacity reset Animations: blur grayscale
CSS3で作る可変タイプのナビゲーション - Web.fla
さてさて、そろそろCSS3が普通に利用されてきてますね。なんてったてスマートフォン市場が拡大してるので そんで、PCやスマートフォンやタブレットにあったレスポンスデザインが今後増えていくとなると、可変に対応できるのがいいかなと思いまして。 そうなるとグローバールナビゲーションも今後はCSS3でグラデーションなどで装飾が出来るようになるので可変対応しやすいと思うので、可変に対応したナビゲーションのCSSをメモる。 CSS3を利用して横並びにする ますはhtmlを下記のように組みました。まぁよくあるリストタグを利用したパターンです。 以前の場合だとリストタグを「float:left」のようにフローとを利用してましたが,CSS3の「display:box」を利用して横並びにします。 とりあえずグローバルナビゲーションを作りたいのでpaddingやmarginやリストなどは、無しの設定にしておきま
[CSS]パタッと開くアニメーションがかわいいボタンを実装するスタイルシート
マウスオーバーでパネルがアニメーションでパタッと開き、中から現れるボタンを実装するスタイルシートのコンセプトを紹介します。
HTML5 × CSS3 × jQueryを真面目に勉強 – #11 Path風サークルメニューを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPathにある、あのサークルメニューを再現してみたので、ここにその手順をまとめておくとします。 Pathはネイティブアプリなので、JavaないしObjective-Cにて実装されていますが、こちとらはそんなハイソなテクニックは使わずに、JavaScriptとCSS3だけで行けるところまで行ってみます。 はじめに とりあえずサークルメニューの要件を大まかに書きだしてみました。 トグルボタンをクリックしてメニューアイテムの表示/非表示を切り替えたい 各メニューは円周上に均等に配置された状態で表示させたい 表示/非表示はアニメーションで切り替わるようにしたい メニュー数の増減には柔軟に対応できるようにしたい その他、各メニューの間隔や角度、表示時の距離などはオプショで指定できるようにしたい ひとまずこんなもんで良いでしょう。次にこれらの要件をどのように実装す
Easing Functions Cheat Sheet
Easing functions specify the rate of change of a parameter over time. Objects in real life don’t just start and stop instantly, and almost never move at a constant speed. When we open a drawer, we first move it quickly, and slow it down as it comes out. Drop something on the floor, and it will first accelerate downwards, and then bounce back up after hitting the floor. This page helps you choose t
HTML5 × CSS3 × jQueryを真面目に勉強 – #9.1 CSS3アニメーション（Animation） | DevelopersIO
animation-nameは、実際にどのような動きをするかを定義した@keyframesを指定し、唯一の必須項目です。 記述例) animation /* * @animation-name * @animation-duration * @animation-timing-function * @animation-delay * @animation-iteration-count * @animation-direction * @animation-fill-mode */ animation: myAnimarion 1s ease 0s 1 normal none; animation-name以外のプロパティは全てオプション扱いとなり、省略した場合は記述例にある値が初期値として指定されます。 @keyframes @keyframesは、要素に対してどのようなアニメーション
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://brkcan.net/fun/macbook/
CSS3 3D Transforms | Can I use... Support tables for HTML5, CSS3, etc
The ultimate CSS tools for web designers | CSSmatic
3Dグラフィックデザインのまとめエントリ
border-radius on div and opacity on image inside not working right in Chrome