Web Platform Dive into the web platform, at your pace.
With increasing diversity in monitor sizes, it’s not practical to design single blocks of text that take up the entire width of the screen. The traditional solution is to split text into columns manually, which is very time intensive; or to split text dynamically with JavaScript, which doesn’t function universally. Besides, this is a presentation […] With increasing diversity in monitor sizes, it’
A common question on clients and developers minds is, “How can we provide a great Web experience to our users on mobile?” In this article, Matt Stow will try to answer this question. If you can’t convince your clients to start from scratch with a mobile-first philosophy, he hopes this gives you the knowledge, impetus and tools that you need to retrofit their websites! Since the introduction of the
Stay Relevant and Grow Your Career in TechPremium ResultsPublish articles on SitePointDaily curated jobsLearning PathsDiscounts to dev toolsStart Free Trial7 Day Free Trial. Cancel Anytime. The top scalable and modular approaches I covered in the previous article in my CSS Architectures series all have pieces of brilliance that can help you change the way you think about and structure your CSS. Th
Edge AnimateでCSSフィルタが扱えるようになった HTML／CSS／JavaScriptを使ってアニメーションやインタラクティブコンテンツを作成することができる『Adobe Edge Animate』がバージョン1.5にアップデートされ、CSSフィルタが使えるようになっています。 基本的なタイムラインアニメーションをベースに、CSSフィルタを使った簡単なアニメーションを作成してみます。 Adobe Edge Animateについて Adobe Edge Animate ドキュメント Adobe Edge Animateは現在無料で提供されています。 タイムラインやステージ、アクションエディタを用いたオーサリングを行うことができ、シンボルの扱い、FlashライクなGUIなどFlashの経験者であれば学習コストは抑えられると思われます。 jQueryとAdobe製のライブラリが使用
It’s all around now; CSS3 has made an impact among the web designers. They are trying this technique to create many attractive design projects. The most amazing part to use CSS3 is – it gives your flexibility to use with any web design technology. You will feel the same lookout of Flash using CSS3 styling in your web projects. Playing with typography is very old fashion for the designers, using gr
アイコンフォントでリンクタイプ別にアイコンつける方法CSS3を使ったアイコンフォントで、テキストリンクをもう少し華やかに！画像を使うと案外手間がかかるテキスト横のアイコンを、Webフォントを使って簡単に表示させましょう。今回はリンク先や拡張子で異なるアイコンを表示する方法を紹介します。 アイコンフォントとは？アルファベット 1 文字に 1 つのアイコンが設定されているフォントの総称です。サーバー上にあるフォントファイルを読み込んでフォントを表示する「Web フォント」の応用として使われ始めました。今までのような画像を使ったアイコンとは違い、フォントはベクターファイルなので、サイズを大きくしてもギザギザに見えることはありません。つまり iPhone や iPad といった高解像度のディスプレイでも、劣化することなくきれいに表示されます。 ただし！何らかの原因でフォントファイルがダウンロードさ
Languages with latin-based writing systems such as English are typically written left to right, and from top to bottom. However, there is a whole different world of writing modes out there. CSS3 Writing Modes allows you to use these in your web sites. Read on to find out what you can, and can not use right now. Introduction to writing modesIf you’re from anywhere outside of East Asia or the Middle
Typically, to create a column layout, you would need to add the first or last classes to reset the margin space and clear the float. Today I’m going to share a very simple CSS trick to create a responsive column layout using nth-of-type pseudo class. I use this trick to code the WordPress themes at Themify. It doesn’t require any first or last class and the number of columns can be adjusted base o
Everyone likes stuff that moves about on the Web, right? Remember how you cried joyful tears when you first used ? I do. I nearly sobbed all the water out of my body as I gazed upon “JAKE’S COOL WEBSITE” bobbing back and forth in uppercase serif. Of course, we’re more mature as an industry these days. We’ve learned that users don’t want websites to look like a CSI console having a personal crisis;
jQueryとCSS3アニメーションを使ってシンプルに実装する、レスポンシブ対応のタブコンテンツを紹介します。 BasicTabs - The Simple jQuery/CSS3 Solution Basic Tabsのデモ Basic Tabsの実装 Basic Tabsのデモ タブはレスポンシブ対応で、表示サイズに合わせて最適化されます。 タブの切替はCSS3アニメーションで、左からフェードインで表示されます。このエフェクトの変更は簡単です。 デモページ：幅480pxで表示 Basic Tabsの実装 実装は非常にシンプルなので、カスタマイズも簡単だと思います。 Step 1: HTML HTMLは非常にシンプルで、タブはリスト要素、コンテンツはdiv要素で配置します。 <div id="tabwrap"> <!-- TABS --> <ul id="tabs"> <li class
17 September, 2011 Writing efficient CSS selectors Written by Harry Roberts on CSS Wizardry. Table of Contents Independent writing is brought to you via my wonderful Supporters. CSS selectors Combining selectors The key selector Overqualifying selectors Is all this really necessary? But More on CSS selector efficiency Efficient CSS is not a new topic, nor one that I really need to cover, but it’s
In this article, Vasilis van Gemert will show you several tactics for deciding where to put breakpoints in a responsive design. There is the rusty idea that they should be based on common screen sizes, but there are no “common” screen sizes. You’ll be able to use the theory in this article to better design your content for all different screen sizes. There are several tactics for deciding where to
2011年の9月に「CSSとSVG filterでガラスっぽい効果をつける」というのを書きましたが、これはFirefoxのみを対象としたものでした。 そこで今回はできるだけ多くのブラウザに対応したものを作ってみます。 完成品Frosted glass effect with CSS & SVG 背景画像にはWetFoto.comによる#246 Wetlook with Beautiful Brunette in Leggings and Jacket. Girl in black jacket, white wetlook leggings and skirt in boots, get wet fully clothed in the sea.を使用しています（リンク先はFlickrです）。 この画像はCC BY-NC-SA 2.0でライセンスされています。 背景画像にはBeryl Ch
今日SNSでつぶやいたネタを少し広げて書いておこうと思う。 Webフォントサービス「フォントプラス」を電通レイザーフィッシュが採用 興味深い採用事例。サイト運用コスト軽減のためWebフォントを使う。たしかに大規模なコーポレートサイトの場合効果があるかもしれない。結果が知りたいところ。 と言ったら、MJの例の人が「画像つくる手間なくなるのいいからウチでもつかってるよ。」的なレスくれたりして、なるほどなーと思った。 WebFont。CSS Font Module Level 3でCSSによる仕様がまとめられている。まあ日本ではまだ活用事例が少ない地味なHTML5関連の技術である。 すごく簡単に言うと、どんなフォントでも使えるようになるって機能。Web上にフォントを置いておいて、Webサイトを表示するときにそのフォントを使うことでコンピュータの中にないフォントでもWebサイトで利用できるというこ
Since the advent of CSS3, designing has become a lot easier and quick. This style sheet language had made designing a lot more fun too and is usually used in combination with JavaScript or jQuery. It allows you to create amazing designs in a hassle free way and efficiently. It is used for stylizing and controlling the layout of your web pages. The possibilities of what you can create using CSS3 ar
HTML5＋CSS3は「メニューの作り方」を覚えるだけ！：にわかデザイン（1）（1/3 ページ） Photoshopなどの画像処理ソフトを使わず、CSSでできる表現の幅が広がっています。にわかデザイナーになれる、簡単Tipsをお伝えします。 Web製作の現場では、予算の都合上Webサイトのデザインをデザイナーに発注できず、エンジニア自身が担当しなければならないことがままあります。昨今は「Twitter Bootstrap」などのCSSフレームワークを使って、そんな状況に対応している方も多いと思います。確かに、Twitter Bootstrapはリッチなデザインや機能を持つパーツがそろっていて、素早くレイアウトを組み上げるには便利です。しかし、そのためには独自の指定方法やお作法をそこそこ知っておかなければならないのも事実です。 であるならば……、CSS自体を覚えてしまうというのも1つの手では
💡 Personal notes about somthing I'm interested in コンテンツがオーバーフローしたときにスクロールバーを表示させる場合に、そのコンテンツのスクロールの仕方を設定する値として-webkit-overflow-scrollingというのがある。 詳細はSafari CSS Referenceの「-webkit-overflow-scrolling」を参照。値を「touch」にするとnativeアプリでスクロールしたときのような、いわゆる慣性スクロールの状態になる。 .foobar { position:absolute; width: 100%; height: 300px; overflow: scroll; -webkit-overflow-scrolling: touch; } 値を「touch」にした場合は、そこにstacki
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
