Neo Sample || Indam Site
<html> <head> <title>Example neo1<title> <style type='style/css'> /* Example neo1 By : Indam; http://www.indaam.com */ /* 1 */ .neo1{ width: 0; height: 0; float: left; border-style: solid; border-color: transparent #555; border-width: 32px 0 0 32px } /* End 1 */ </style> </head> <body> <span class='neo1'> </span> </body> </html> <html> <head> <title>Example neo2<title> <style type='style/css'> /*
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
【スマートフォン制作向け】radioボタンをCSSのみでカスタマイズ | バシャログ。
こんにちは、GWは神奈川県から一歩も出ませんでした ishida です。 さてさて、今回は最近スマートフォン案件が増えてきましたので実務で使えそうなコーディングTipsをば。 スマートフォンでは、radioボタンがデフォルトのままだとかなり押しにくいですよね。 対象がスマートフォンであれば（IEちゃんを除けばOKかも）CSSだけで、意外とカスタマイズができます。 HTML HTMLのコードは以下になります。 <ul class="list"> <li><input type="radio" name="gender" id="gender1" value="1"><label for="gender1">男性</label></li> <li><input type="radio" name="gender" id="gender2" value="2"><label for="gende
select要素を装飾するいくつかの方法 | SONICMOOV LAB
こんにちは。 sonicmoovコーディング担当の、だってぃです。 「ダッティ」よりも「だってぃ」という表記の方が好きです。 平仮名ラヴ。 もう8月も終わりだなんて信じられません。 8月がおわるってことは今年もあと… （考えない方が身のためです） さてさて、 select要素に装飾を施されたデザインを見た時の絶望感。 一度くらいは味わったことがありますよね？ね？ 余白とったり、幅や高さしか満足に変えられないよ！ と枕を濡らした夜もありましたね？ね？ 本日はそんなselect要素の装飾方法をご紹介。 ※タイトルにはいくつかとか書きましたけど、2つしか紹介しません。 誇大表現じゃありません。大丈夫です。 【その1】CSS+Javascriptで装飾っ！ まずはスタンダードな方法。 CSSとJavascriptを使った方法です。 流れを説明すると… 適当な要素（要素Aとする）
CSSでフォームパーツ(input,checkbox,etc…)をカスタマイズ
CSS3ではjQuery等を使用しなくてもフォームパーツ(input,checkbox,etc…)を自由自在にカスタマイズ出来ます。 デフォルトだと、以下の様な好きなデザインに変更が可能です。 ↓カスタマイズ カスタマイズするには魔法の記述、 -webkit-appearance: none; を加えれば、デフォルトの設定を全てリセットすることが出来、自由自在にカスタマイズすることが出来ます。 そう。CSS3ならね。(iPad風) -webkit-appearance: none;でリセットすれば、 以下の様なチェックボックスも作成可能です。 ↓ ↓ CSSでフォームパーツをカスタマイズ – jsdo.it – share JavaScript, HTML5 and CSS
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
iPhoneサイト(スマートフォンサイト)制作のためにCSS3でPhotoshopのレイヤースタイルを再現する方法 | HTML5でサイトをつくろう
スマートフォンサイトを制作する上で便利なCSS3。 必要最低限まで画像の使用を減らし、スマートフォンサイトのデザインをスムーズにコーディングすることができます。 また、画像を使わずにCSS3を使ってスマートフォンサイトのデザインを実現すれば、読み込み時間や容量の軽いサイトを制作でき、サイトの最適化へつながります。 最近では海外の便利なジェネレーターサイトがたくさんあり、誰でも気軽にソースをつくることができます。 しかし、実際に自分がデザインしたサイトをコーディングする際には、やはり独自でそれぞれのコードの使い道を知る必要があります。 CSS3の記述は従来のCSSとは違い、少し複雑な記述が必要となります。 今回はそんなCSS3の記述を、サイトデザインでよく使われるPhotshopのレイヤースタイルを再現する方法として一通り紹介します。 ※iPhoneサイト（スマートフォンサイト）制作のため、
[CSS]ボタンのクリックを楽しくするCSS3アニメーションのテクニックいろいろ
ボタンをCSS3で美しくスタイルするだけでなく、ホバー・アクティブ時にもかっこいいCSS3アニメーションを使った7種類のテクニックを紹介します。 ちょっと前まではこういったアニメーションはFlashかJavaScriptを使用しないとでしたが、今ではもうCSS3でとなってきましたね。 Demo 1 ボタン内のテキストや画像は、span要素やimg要素で配置されており、それらをa要素で内包して実装します。 <a href="#" class="a-btn"> <span class="a-btn-slide-text">$29</span> <img src="images/icons/1.png" alt="Photos" /> <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> <
[CSS]ホバー時にアニメーションでふんわりと浮かぶナビゲーション
CSS3 Flying Menu デモページ [ad#ad-2] CSS3 Flying Menuのデモ デモでは他にも、ふんわりと浮かびつつ、ハイライトされるものもあります。 デモページ CSS3 Flying Menuの実装 HTML:ふんわりと浮かぶタイプ 各アイテム（アイコンとテキスト）をリスト要素で実装します。 <ul id="fly-menu"> <li><a href="http://www.webstuffshare.com"><img src="images/heart.png" alt="webstuffshare">Webstuffshare Home</a></li> <li><a href="http://feeds.feedburner.com/webstuffsharecom"><img src="images/rss.png" alt="rss"> Subs
[CSS]チェックしておきたい、スタイルシートのテクニックのまとめ | コリス
実用的なものから実験的なものまで、最近リリースされたものを中心にスタイルシートのテクニックを紹介します。
Pure CSS GUI icons – Nicolas Gallagher
An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints. This is not a “production ready” CSS icon set. Demo: Pure CSS GUI icons Known support: Firefox 3.5+, Safari 5+, Chrome 5+, Opera 10.6+. An exercise in constraintSeveral months ago I was experimenting with the creation o
CSS3 Isometric Text Demo | Midwinter Duncan Grant
Midwinter Duncan Grant Web Designer Front-End Developer Wordpress Developer Just recently I have been playing around with the multiple text-shadow capabilities of CSS3. Now, building on top of that I have produced a method for creating 3D isometric text, by using multiple text-shadows and 2D transforms. In this demo the 3D text is created from multiple offset shadows that increase in darkness with
CSS3 三角形 ひし形 等の作成方法
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 前回の CSSで図形 三角形＆台形 の応用で、二等辺三角形、ひし形を使い色々な図形を作成します。 まず、復習です。 HTML <div id="triangle"></div> CSS3 #triangle { height: 0px; width: 0px; border: 50px solid #000; border-color: transparent; border-top-color: #000; } これで、 このような図形ができます。 border-top-colorを、border-bottom-color、border-left-color、border-right-color、に それぞれ変更すると、 こうなる。 では、最初のcssをちょっとばらして
CSS Menu Creation: A Guide for Beginners
Designing sleek, functional dropdown navigation menus is a crucial skill for modern web developers. This guide offers a step-by-step walkthrough on creating your own dropdown menu with nothing but HTML and CSS3, eliminating the need for additional Javascript coding. Upgraded and Animated Navigation Menu with CSS3 An enhanced and animated variant of the dropdown navigation system has recently been
Demo: Pure CSS speech bubbles – Nicolas Gallagher
By Nicolas Gallagher The demo page for Pure CSS speech bubbles. For a detailed explanation view the CSS file. It is heavily commented. All examples use simple, semantic HTML. No empty elements, no unnecessary extra elements, no JavaScript, no images (apart from that Twitter logo). Have a look at the source code. The basic bubble variants This only needs one HTML element. For example, <p>[text]</p>
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 Bookmarks - daily news articles and bookmarks
CSS3のtext-shadowを使ったテキスト装飾のサンプル集 - かちびと.net
