colorsheepのブックマーク - はてなブックマーク

colorsheep id:colorsheep

colorsheepのブックマーク (806)

[コピペで使える！CSSだけでアニメーションつきハンバーガーメニューアイコンを作ろう] 他海外のCSS情報 | WEBデザインすーぷ
アニメーションするCSSのみのハンバーガーメニューアイコン Animating CSS-Only Hamburger Menu Icons Hamburger menu icons have become a staple in many websites and web apps, and whether you like them or not, they are becoming a familiar and recognizable UI action button. Users are associating this icon with the showing and hiding of menus, and its compact, space-saving nature makes it a desirable style, particularly on smaller
colorsheep 2015/08/12
css

アニメーション

web

あとで読む

webデザイン

webサービス

CSS3

レスポンシブデザイン

デザイン
リンク
12 Best CSS Generators For UI Animations & Elements | SmashingApps.com
by Akhter · March 2, 2015 12 Best CSS Generators For UI Animations & Elements For today’s round up, we have chosen 12 CSS generators for UI elements and animations that you can download for free. These online generators comes very handy when you need to build beautiful sleek CSS buttons and transitions to create a better user experience that require plenty of configurations. Online generators simp
colorsheep 2015/08/12
css

ジェネレーター
リンク
40 Cool CSS Animation Examples – Bashooka
Gif Style CSS3 Animation By Jascha Go ltermann Pure CSS One Div Weather Animated Icons By Fabrizio Bianchi Solar System animation – Pure CSS By Malik Dellidj Gif animation + CSS animation + Blend modes By yoksel Indatus CSS Animation By Patrick Hill Material Design Hamburger By Chris Wheatley Stats animation By Jonas Badalic CSS+SVG Pacman By buschidos Cubes CSS3 Animation By Nate Wiley Delightful
colorsheep 2015/08/12
webデザイン

css

animation

css3
リンク
[80以上のCSS3アニメーションのコレクション – AniCollection] 他海外のCSS情報 | WEBデザインすーぷ
2015年4月2日 CSS AniCollection AniCollection The easiest way to find, use and share CSS3 animations. 最も簡単にCSS3アニメーションを見つけて使用し、シェアする方法基本的な動きとそれを組み合わせたものなど、確認した時点で82のCSSアニメーションが登録されていました。 AniCollection 40のクールなCSSアニメーションの例 40 Cool CSS Animation Examples Most modern browsers are now supporting CSS animations. Yes, CSS are now allowing you to create some simple animations, without the help of a client-si
colorsheep 2015/08/12
css

アニメーション

webデザイン

あとで読む

CSS3

ジェネレーター
リンク
Javascriptで扱えるカッコイイグラフのまとめ - Qiita
結論:Highchart ccchart(canvasChart)と悩みましたが、Highchartを選んだ理由は、下記の通りです。 1.円グラフや棒グラフを組み合わせた複合的なグラフのサンプルを載せている 2.複合グラフのアニメーションがかっこいい商用ライセンスなので、無料にこだわる方は、ccchart(canvasChart)がおすすめです。 Highchart 表現力、完成度の点でいちばんだと思います。商用なのでお金さえあればこれがイチオシ。 ccchart(canvasChart) 私のイチオシは canvasChart ですライセンスは PUBLIC DOMAIN! raphael.js qiitaのプロフィールの円グラフで使われているjQueryプラグイン美しめなグラフを作成することができる。 raphael.jsのプラグインのelycharts.js http://el
colorsheep 2015/08/11
グラフ

chart

まとめ

html5

javascript

jquery

プラグイン

js

graph

library
リンク
Chart.js
New in 4.0 Colors plugin Default palette of Chart.js brand colors is available as a built-in time-saving zero-configuration plugin.
colorsheep 2015/08/11
js

javascript

html5

chart

graph

canvas

UI

グラフ
リンク
chrome で yuga.js の_crと_onがうまく動作しない｜ブログ｜サイトタイトル
数日前からふと、ヘッダーメニュー周りの_crとロールオーバー時の_onの画像処理が正常に動作していないことに気付いた。様子見てしてたものの、他の人からも指摘を受けて調査してみると、chromeのバージョンアップ（38）をきっかけに発生しているようだった。 yuga.jsの中身を見て、調査した結果、chromeの当該バージョンから、imgタグにcurrentSrcという属性がついてるようで、おそらくは、yuga.js内の、this.currentSrcとバッティングしているのが原因ぽかった。とりあえずの処理として、 this.currentSrc ↓ this.current_Src としたところ、正常に動作するようになった。今のところ、chromeだけのようだけど、他のブラウザでも同じ状態なる可能性があるので、一応回避方法が確認できてよかった。
colorsheep 2015/08/06
yuga

不具合

yuga.js
リンク
Prottが絶好調らしいUIデザインファーム・グッドパッチのオフィスへGO！ | キャリアハック（CAREER HACK）
UIデザインファーム・グッドパッチの東京オフィスへGO！渋谷に本館と別館を構えるグッドパッチのオフィス環境と働き方とは？国内屈指のUIデザインファームのオフィスって？グッドパッチの東京スタジオはJR渋谷駅の埼京線ホーム近くにあります。エレベーターに乗って早速3階へ！降りるときれいなエントランスが右手に。オフィスは左手。重厚感ある扉を明けてオフィスへ！広い…！手前はミーティング＆フリースペース、奥はThunderboltディスプレイが並んでいて、まるでアップルストアのようじゃないか！大型スクリーンも完備。ミーティングに使っている机は卓球台！まずはフリースペースから。ソファに座ってリラックスしながらお仕事中のメンバーの方々。よく見ると台車に乗ってて簡単に移動できるようになってる！奥のディスプレイがきになってみてみると…2015年5月に開設されたグッドパッチのベルリンオフィスの
colorsheep 2015/08/05
東京

ui

スタートアップ
リンク
スマートフォンサイト制作よくあるトラブルと解決方法・回避方法
- 関連ブログ記事 : http://vividcode.hatena blog.com/entry/study-meeting/kyotojs-3-gui-mvc-basis Kyoto.js #3 での発表資料です。最近 GUI アプリケーションでの MVC について基本的なことを考えなおしていたので、簡単にオセロ的なゲームを実装してみて、それを発表しました。
colorsheep 2015/08/04
Android

iOS

スマートフォンサイト

web制作

あとで読む

解決方法
リンク
シンプルにモーダルウィンドウを実装できる「leanModal」
「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思います。デモスクリプト <script src="jquery.min.js" type="text/javascript"> <script src="jquery.leanModal.min.js" type="text/javascript"> <a rel="leanModal" href="#div787">Edit</a> <div id="div787"><<モーダルウィンドウ内に表示する要素>></div> <script type="text/javascript"> $(function() { $( 'a[rel*=leanModal]').leanModal({ top:
colorsheep 2015/08/03
モーダルウィンドウ

jQuery

ライブラリ

CSS

JavaScript

プラグイン

jQueryプラグイン
リンク
セレクタ｜CSS HappyLife ZERO
CSS2.1までのセレクタ一覧とCSS3セレクタ一覧です。各詳細ページでは、より具体的な説明とサンプルがあります。 CSS2 セレクタ一覧セレクタ名パターン簡単な説明
colorsheep 2015/07/31
css

セレクタ

まとめ

HTML5

一覧

リファレンス

CSS3
リンク
CSS-Tricks - A Website About Making Websites
It’s been a few months out since A Book Apart closed shop. I’m sad about it, of course. You probably […]
colorsheep 2015/07/29
css

design

web

CSS3

HTML

tips
リンク
画像サイズに依存しない絶対中央配置 - dskd
公開日2013-05-14タグCSSウェブページ作ってると画像を画面の中央に配置したいし、どんなサイズの画像が来ても真ん中にしたいし、どんなサイズの画面で見ても画像をはみ出させずに表示させたい欲求はよく出てくる。これってもはや人類の欲望と言っても過言ではない。要件画像を縦方向にも横方向にも画面の中央に配置したい画像のサイズに依存したくないウィンドウサイズが画像サイズより小さくなっても画像がはみ出ないこの人類の欲望をを CSS で書くと、こう。 <body> <img src="image.jpg" /> </body> img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; max-width: 100%; max-height: 100%; } 前のエントリで書いたスニペット（F
colorsheep 2015/07/25
センタリング

*Tips

技術

centering

css

画像

テクニック
リンク
コーディングに最適な日本語対応の等幅フォントSource Han Code JPとは – ICS MEDIA
コーディング向けの日本語対応の等幅フォント「Sourceソース Hanハン Codeコード JPジェイピー（和名：源ノ角ゴシック Code JP）」が、2015年6月4日に公開されました。「源ノ角ゴシック Code JP」は、プログラミングやHTML/CSSのコーディング、ターミナルでのテキスト表示など、和欧表示用フォントとしての利用を想定されたフォントです。ダウンロードはこちらから Release Fonts (OTF, OTC) · adobe-fonts/source-han-code-jp · GitHub ※このフォントは無償でダウンロード可能です。OTCとTTFの両方のフォーマットで配布されているので、Windows/macOSともに簡単にインストールできます。 ※上記リンクの「Fonts version ［バージョン番号］ (OTF, OTC)」となってい箇所の［Sourc
colorsheep 2015/07/24
font

code

programming

フォント

コーディング

sublimetext
リンク
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
colorsheep 2015/07/20
design

material

photoshop

illustrator

デザイン
リンク
新萄京ag65609com(中国)有限公司
404 错误！您访问的页面没找到！回到首页 XML 地图 | Sit emap 地图
colorsheep 2015/07/20
wordpress

コメントアウト一括削
リンク
投稿記事や固定ページの内容を複製して新規作成できるプラグイン / Duplicate Post | WordPress（ワードプレス）とプラグイン
投稿記事や固定ページを、そっくりそのまま複製して新規投稿や固定ページが作れるプラグインです。プラグインでなくても、投稿記事本文をコピーペーストして、カテゴリーを選択して、タグを同じように入力して・・etc 細々とした内容をそのまま手打ちで複製する方法でも良いのですが、このプラグインなら、似たような構成の投稿を繰り返し何度も新規追加するような場合などにも、作業が格段に楽になります。「Duplicate Post」のインストールプラグイン→新規追加で「Duplicate Post」と入れて検索をすると出てきます。インストールして「有効化」して下さい。またはWordPress.org プラグインページ ↓からもダウンロードできます。 http://wordpress.org/plugins/duplicate-post/ /wp-content/plugins/　ディレクトリにFTPでアッ
colorsheep 2015/07/20
*wordpress

投稿複製
リンク
Photoshopのバッチでファイルを一括で処理する方法【初心者向け】現役Webデザイナーが解説
Photoshop（フォトショップ）で「バッチでファイルを一括で処理する方法」を初心者向けに解説した記事です。バッチ処理を使うと、画像のサイズを変えるといった同じ作業を繰り返して実行可能。Photoshopの効率アップにお役立てください。テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査 Photoshopで同じような作業を繰り返すときに、もっと楽にできればいいのにと思ったことはないでしょうか？そんな時に便利なのが「バッチ」の機能です。バ
colorsheep 2015/07/20
photoshop

アクション

自動

保存

バッチ
リンク
http://wkoubou.com/manual/post-516/
colorsheep 2015/07/20
wordpress

プラグイン
リンク
ロリポップ！ならWordPressのメディアのアップロードサイズの上限を簡単に変えられるよ
WordPressを使い始めて半月ほど経ちました。僕のブログでは、自分の撮った写真を記事にあげたり、アイキャッチ画像を設定したりして、見栄えのよい記事を投稿しようと心がけています。でも最初は写真のあげ方とかよくわからなくててんやわんやしたし、面倒なこともあったので、忘れないようにメモしておきます。画像を記事に載せよう WordPressで記事に画像を載せようと思ったら、まずは「投稿の編集」欄でタイトルしたの「メディアの追加」をクリックしてみましょう。「メディアを挿入」画面が出てくるので、「ファイルをアップロード」を選んで、「ファイルを選択」をクリックしてから、ファイルを選択すればOKです。あらま簡単。アップロードサイズの上限を超えているだと…？ここで「○○はこのサイトのアップロードサイズの上限を超えています」とか出でしまう人（サイト）があるのです。僕も以前そうなりました。こうなっ
colorsheep 2015/07/20
wordpress

php

.htaccess

画像
リンク
前のページ 1 2 3 4 5 6 7 8 9 10 次のページ