How to Create a CSS3 Dropdown Menu - Designmodo
Step 1 – HTML Markup of CSS3 Dropdown Menu 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="messa
coding Tag - Designzzz
There was a time when Mozilla Firefox was the most favorite browser of web developers. Then Google Chrome came along, knocked out Firefox and Internet Explorer, and took the top spot. Still, Google Chrome is the most u... Android is the world’s most used mobile operating system. No wonder when anybody wants a mobile app made, their first priority is to make an app for Android. So today we are sha
画像一枚だけで写真を重ねたようにするチュートリアル | コリス
シンプルなHTMLで画像を配置し、:before, :after疑似要素を使って、写真を重ねたようなエフェクトにするチュートリアルを紹介します。 重ねたエフェクトはホバー時にCSS3アニメーションします。 デモページ ※ホバー時のアニメーションはFirefoxのみです。 実装 HTML HTMLは非常にシンプルです。 ラッパーのdiv要素はWebkit系ブラウザ用で、将来無しでも機能するようになるかもしれません。 <div class="stack"> <img src="image1.jpg" /> </div> [ad#ad-2] CSS スタイルシートは4つのデモのキャプチャと共に、紹介します。 まずは、右端の写真が垂直方向に重なっただけのスタイルシートです。重なりは:before, :afterを使用します。 .stack { position: relative; z-index
Styling Scrollbars
WebKit now supports styling of the scrollbars in overflow sections, listboxes, dropdown menus and textareas. For those who want to skip the article and just go right to the source, here is an example. Here is a screenshot for those not running a recent enough WebKit: The scrollbar pseudo-element indicates that an object should use a custom scrollbar. When this pseudo element is present, WebKit wil
Loading spinner animation using CSS and WebKit
It’s hard to stifle a smile any time I get a glimpse of the future thanks to WebKit-based browsers like Safari and Chrome (and their mobile counterparts on iOS and Android devices). That happened today when I discovered a way to make an iPhone-style spinner without any images, just CSS. First attempt I have been working on a project that targets mobile WebKit browsers so it was natural to explore
CSS3 Design Ideas — Smashing Magazine
To get you really excited about CSS3, last month we announced the CSS3 Design Contest and encouraged designers to experiment and get creative with CSS3. As expected, we have received many creative and original submissions. To choose the winners of the contest, we considered the originality of the technique or approach and its uniqueness. The idea mattered more than the execution. This process has
CSS3 Minimalistic Navigation Menu
As you have probably heard by now, CSS3 animations are a powerful tool, which enables you to create animations which run without the need of applying additional scripting to the page. What is even better, in the next generation of browsers we will have even more powerful tools, including 3D transformations (already present in Safari). But what difference does it make for us today? At the moment on
Wicked CSS3 3d bar chart
More and more CSS3 articles are popping up on Marcofolio and all across the web. Although CSS3 is just future talk (since not all browsers support it yet), it’s pretty cool to get a sneak peak on what the future will hold for us. While browsing the web, I came across a pretty cool 3d bar chart created with Flash. I was wondering if I could recreate the same neat effect using pure CSS3 and started
30 Gorgeous and Versatile CSS Menus
Sometimes the navigation menu can be one of trickiest parts of the design process. This single area can set the tone for the usability of the entire site. Today we’ll look at 30 inspiring examples of good menu design. Though many are pure CSS, others add in some images and/or JavaScript to increase the aesthetic and functionality. Delving Deeper It’s always more helpful to get a feel for the proce
Top 10 custom JavaScript functions of all time
./with Imagination A JavaScript, CSS, XHTML web log focusing on usability and accessibility by Dustin Diaz Tuesday, November 29th, 2005 UPDATE: For anyone who lands on this article months after the fact, there is now a podcast entry about this article reviewing each and every function. If there was ever a universal common.js shared among the entire develosphere, you’d fine these ten (plus one bon
Top 10 custom JavaScript functions of all time
./with Imagination A JavaScript, CSS, XHTML web log focusing on usability and accessibility by Dustin Diaz Tuesday, November 29th, 2005 UPDATE: For anyone who lands on this article months after the fact, there is now a podcast entry about this article reviewing each and every function. If there was ever a universal common.js shared among the entire develosphere, you’d fine these ten (plus one bon
CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 | CREAMU
DiaryTechnology CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 CSSでmin-heightをブラウザに関係なく使いたい。 そんなあなたにおすすめなのが、『Easiest cross-browser CSS min-height』。CSSでmin-heightをクロスブラウザにする最も簡単な方法だ。 There are still enough folks using IE6, unfortunately, and it doesn’t support the min-height or min-width CSS parameters. This has caused the invention of a number of different hacks and browser
Create a Sleek, High-End Web Design from Scratch | Envato Tuts+
In this tutorial, we'll put together a high-end Web design using a crisp, thin font, gorgeous background images, and clever use of space and layout. You can easily use the technique to create your own unique designs. Then when you're finished reading this tutorial, you can cross over to our sister site NETTUTS and follow along as we build the design into clean and simple HTML. OK let's rock'n'roll
jmblog.jp - FireworksでWeb2.0デザインしてみる - Part.5
斜線の背景も最近のWebデザインの特徴の一つです。Background Image Maker を使えばカンタンに斜線の背景画像を作ることが出来ます。が、もっと便利でかつ汎用的な斜線の背景画像の作り方が Super Stripes で紹介されていたので試してみました。 まずは Fireworks で 4 x 4 ピクセルの新規ドキュメントを作成します。このままだと編集しにくいので、表示比率を 3200% にしておきます。 ラインツールで 1px の「硬い線」を斜めに引きます。 最適化パネルで書き出すファイル形式を GIF にし、さらに「透明化するカラーの追加」で線のカラーを選択します。 書き出しをすれば画像は完成です。 あとは、css で背景画像と背景色を同時に指定します。
CSS TIPS
CSS TIPSについて web標準が騒がれだしてからかなりの時間が流れました。 既にspecer.gifなどを使ったテーブルレイアウトなどのレガシーな手法は過去の遺物となり、(X)HTML+CSSで作成されたサイトが主流となりつつあります。 当サイトは『レイアウトを行う際にどうしてもうまくいかない。』に回答出来る、そんなサイトになりたいと思っています。 HTML+CSSで作成する10の理由 構造とデザインの分離ができる プログラミングの作業が簡単になる SEO効果が高い アクセシビリティが高い メンテナンス性が高い サーバー容量、転送速度の確保が安易になる ユーザーが自らの見やすいデザインに変更できる ページ表示の高速化 XMLなどの新しい技術との親和性が高い はやってるから もっと詳しく見る HTML+CSSを学ぶ為には？ 当サイトではCSSでレイアウトする為のテクニックを中心に紹介し
CSS examples
Site not Updated!! This site hasn't been maintained or updated for a considerable number of years and is just left in place for historic reasons. Many of the techniques discussed here are not relevant these days and use out-dated techniques not applicable to today's web design structures. The demos may still be of interest as they show various techniques but most of these demos were created before
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5.JP - 次世代HTML標準 HTML5情報サイト
TutorialsGarden - Photoshop, 3D Studio Max, Flash, PHP, CSS, XHTML, Javascript, Web Design and Development Tutorials and Resources
CSS Cheat Sheet
Adobe - Design Center 細かいディティールのマスクを作る